1012 lines
39 KiB
TypeScript
1012 lines
39 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { useQuery, gql } from '@apollo/client';
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog"
|
|
import {
|
|
closestCenter,
|
|
DndContext,
|
|
KeyboardSensor,
|
|
MouseSensor,
|
|
TouchSensor,
|
|
useSensor,
|
|
useSensors,
|
|
type DragEndEvent,
|
|
type UniqueIdentifier,
|
|
} from "@dnd-kit/core"
|
|
import { restrictToVerticalAxis } from "@dnd-kit/modifiers"
|
|
import {
|
|
arrayMove,
|
|
SortableContext,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable"
|
|
import { CSS } from "@dnd-kit/utilities"
|
|
import {
|
|
IconChevronDown,
|
|
IconChevronLeft,
|
|
IconChevronRight,
|
|
IconChevronsLeft,
|
|
IconChevronsRight,
|
|
IconCircleCheckFilled,
|
|
IconDotsVertical,
|
|
IconGripVertical,
|
|
IconLayoutColumns,
|
|
IconLoader,
|
|
IconPlus,
|
|
IconTrendingUp,
|
|
} from "@tabler/icons-react"
|
|
import {
|
|
ColumnDef,
|
|
ColumnFiltersState,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getFacetedRowModel,
|
|
getFacetedUniqueValues,
|
|
getFilteredRowModel,
|
|
getPaginationRowModel,
|
|
getSortedRowModel,
|
|
Row,
|
|
SortingState,
|
|
useReactTable,
|
|
VisibilityState,
|
|
} from "@tanstack/react-table"
|
|
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
import { toast } from "sonner"
|
|
import { z } from "zod"
|
|
|
|
import { useIsMobile } from "@/hooks/use-mobile"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
ChartConfig,
|
|
ChartContainer,
|
|
ChartTooltip,
|
|
ChartTooltipContent,
|
|
} from "@/components/ui/chart"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import {
|
|
Tabs,
|
|
TabsContent,
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@/components/ui/tabs"
|
|
import CreateUserForm from "./create-user-form";
|
|
import { useUser } from "@/app/user-context";
|
|
|
|
export const schema = z.object({
|
|
user: z.object({
|
|
id: z.string(),
|
|
username: z.string(),
|
|
email: z.string(),
|
|
groups: z.array(z.string()),
|
|
createdAt: z.string(),
|
|
updatedAt: z.string(),
|
|
}),
|
|
groups: z.array(z.string()),
|
|
})
|
|
|
|
// Create a separate component for the drag handle
|
|
function DragHandle({ id }: { id: string }) {
|
|
const { attributes, listeners } = useSortable({
|
|
id,
|
|
})
|
|
|
|
return (
|
|
<Button
|
|
{...attributes}
|
|
{...listeners}
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-muted-foreground size-7 hover:bg-transparent"
|
|
>
|
|
<IconGripVertical className="text-muted-foreground size-3" />
|
|
<span className="sr-only">Drag to reorder</span>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const columns: ColumnDef<z.infer<typeof schema>>[] = [
|
|
{
|
|
id: "drag",
|
|
header: () => null,
|
|
cell: ({ row }) => <DragHandle id={row.original.user.id} />,
|
|
},
|
|
{
|
|
id: "select",
|
|
header: ({ table }) => (
|
|
<div className="flex items-center justify-center">
|
|
<Checkbox
|
|
checked={
|
|
table.getIsAllPageRowsSelected() ||
|
|
(table.getIsSomePageRowsSelected() && "indeterminate")
|
|
}
|
|
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
|
aria-label="Select all"
|
|
/>
|
|
</div>
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="flex items-center justify-center">
|
|
<Checkbox
|
|
checked={row.getIsSelected()}
|
|
onCheckedChange={(value) => row.toggleSelected(!!value)}
|
|
aria-label="Select row"
|
|
/>
|
|
</div>
|
|
),
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
},
|
|
{
|
|
accessorKey: "name",
|
|
header: "Name",
|
|
cell: ({ row }) => {
|
|
return <TableCellViewer item={row.original} />
|
|
},
|
|
enableHiding: false,
|
|
},
|
|
{
|
|
accessorKey: "email",
|
|
header: "Email",
|
|
cell: ({ row }) => (
|
|
<div className="w-48">
|
|
<span className="text-sm text-muted-foreground">
|
|
{row.original.user.email}
|
|
</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "groups",
|
|
header: "Groups",
|
|
cell: ({ row }) => (
|
|
<div className="w-32">
|
|
<Badge variant="outline" className="text-muted-foreground px-1.5">
|
|
{row.original.groups.join(", ")}
|
|
</Badge>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: "createdAt",
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
className="px-0 hover:bg-transparent"
|
|
>
|
|
Created At
|
|
<IconChevronDown
|
|
className={`ml-2 h-4 w-4 transition-transform ${column.getIsSorted() === "asc" ? "rotate-180" : ""
|
|
}`}
|
|
/>
|
|
</Button>
|
|
)
|
|
},
|
|
cell: ({ row }) => {
|
|
const date = new Date(row.original.user.createdAt);
|
|
const now = new Date();
|
|
const diffInDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
|
|
|
|
let timeAgo = '';
|
|
if (diffInDays === 0) {
|
|
timeAgo = 'Today';
|
|
} else if (diffInDays === 1) {
|
|
timeAgo = 'Yesterday';
|
|
} else if (diffInDays < 7) {
|
|
timeAgo = `${diffInDays} days ago`;
|
|
} else if (diffInDays < 30) {
|
|
const weeks = Math.floor(diffInDays / 7);
|
|
timeAgo = `${weeks} week${weeks > 1 ? 's' : ''} ago`;
|
|
} else if (diffInDays < 365) {
|
|
const months = Math.floor(diffInDays / 30);
|
|
timeAgo = `${months} month${months > 1 ? 's' : ''} ago`;
|
|
} else {
|
|
const years = Math.floor(diffInDays / 365);
|
|
timeAgo = `${years} year${years > 1 ? 's' : ''} ago`;
|
|
}
|
|
|
|
return (
|
|
<div className="w-40">
|
|
<div className="flex flex-row gap-2">
|
|
<span className="text-sm font-medium">
|
|
{date.toLocaleDateString('zh-CN', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
})}
|
|
</span>
|
|
<Badge variant="secondary" className="text-xs w-fit">
|
|
{timeAgo}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
enableSorting: true,
|
|
sortingFn: (rowA, rowB, columnId) => {
|
|
const dateA = new Date(rowA.original.user.createdAt);
|
|
const dateB = new Date(rowB.original.user.createdAt);
|
|
return dateA.getTime() - dateB.getTime();
|
|
},
|
|
},
|
|
{
|
|
id: "lastLogin",
|
|
accessorFn: (row) => row.user.updatedAt,
|
|
header: ({ column }) => {
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
|
className="px-0 hover:bg-transparent"
|
|
>
|
|
Last Login
|
|
<IconChevronDown
|
|
className={`ml-2 h-4 w-4 transition-transform ${column.getIsSorted() === "asc" ? "rotate-180" : ""
|
|
}`}
|
|
/>
|
|
</Button>
|
|
)
|
|
},
|
|
cell: ({ row }) => {
|
|
const date = new Date(row.original.user.updatedAt);
|
|
const now = new Date();
|
|
const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60));
|
|
|
|
let timeAgo = '';
|
|
if (diffInMinutes < 1) {
|
|
timeAgo = 'Just now';
|
|
} else if (diffInMinutes < 60) {
|
|
timeAgo = `${diffInMinutes} min${diffInMinutes > 1 ? 's' : ''} ago`;
|
|
} else if (diffInMinutes < 1440) { // 24 hours
|
|
const hours = Math.floor(diffInMinutes / 60);
|
|
timeAgo = `${hours} hour${hours > 1 ? 's' : ''} ago`;
|
|
} else {
|
|
const days = Math.floor(diffInMinutes / 1440);
|
|
timeAgo = `${days} day${days > 1 ? 's' : ''} ago`;
|
|
}
|
|
|
|
return (
|
|
<div className="w-40">
|
|
<div className="flex flex-row gap-2">
|
|
<span className="text-sm font-medium">
|
|
{date.toLocaleDateString('zh-CN', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</span>
|
|
<Badge variant="outline" className="text-xs w-fit">
|
|
{timeAgo}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
enableSorting: true,
|
|
sortingFn: (rowA, rowB, columnId) => {
|
|
const dateA = new Date(rowA.original.user.updatedAt);
|
|
const dateB = new Date(rowB.original.user.updatedAt);
|
|
return dateA.getTime() - dateB.getTime();
|
|
},
|
|
},
|
|
{
|
|
id: "actions",
|
|
cell: () => (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
|
|
size="icon"
|
|
>
|
|
<IconDotsVertical />
|
|
<span className="sr-only">Open menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-42">
|
|
<DropdownMenuItem>Edit</DropdownMenuItem>
|
|
<DropdownMenuItem>Reset Password</DropdownMenuItem>
|
|
<DropdownMenuItem>Ban User</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
),
|
|
},
|
|
]
|
|
|
|
function DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {
|
|
const { transform, transition, setNodeRef, isDragging } = useSortable({
|
|
id: row.original.user.id,
|
|
})
|
|
|
|
return (
|
|
<TableRow
|
|
data-state={row.getIsSelected() && "selected"}
|
|
data-dragging={isDragging}
|
|
ref={setNodeRef}
|
|
className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"
|
|
style={{
|
|
transform: CSS.Transform.toString(transform),
|
|
transition: transition,
|
|
}}
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
)
|
|
}
|
|
|
|
const GET_USERS = gql`
|
|
query GetUsers($offset: Int, $limit: Int, $sort_by: String, $sort_order: String, $filter: String) {
|
|
userWithGroups(offset: $offset, limit: $limit, sortBy: $sort_by, sortOrder: $sort_order, filter: $filter) {
|
|
user{
|
|
id
|
|
username
|
|
email
|
|
createdAt
|
|
updatedAt
|
|
}
|
|
groups
|
|
}
|
|
}
|
|
`
|
|
|
|
const USERS_INFO = gql`
|
|
query UsersInfo($offset: Int, $limit: Int, $sort_by: String, $sort_order: String, $filter: String) {
|
|
usersInfo(offset: $offset, limit: $limit, sortBy: $sort_by, sortOrder: $sort_order, filter: $filter) {
|
|
totalUsers
|
|
totalActiveUsers
|
|
totalAdminUsers
|
|
totalUserUsers
|
|
users {
|
|
user {
|
|
id
|
|
username
|
|
email
|
|
createdAt
|
|
updatedAt
|
|
}
|
|
groups
|
|
}
|
|
}
|
|
}
|
|
`
|
|
|
|
export function UserTable() {
|
|
|
|
const { data, loading, error, refetch } = useQuery(USERS_INFO)
|
|
const [localData, setLocalData] = React.useState<any[]>([])
|
|
|
|
React.useEffect(() => {
|
|
if (data && Array.isArray(data.usersInfo.users)) {
|
|
setLocalData(data.usersInfo.users)
|
|
}
|
|
}, [data])
|
|
|
|
function handleDragEnd(event: DragEndEvent) {
|
|
const { active, over } = event
|
|
if (active && over && active.id !== over.id) {
|
|
setLocalData((currentData) => {
|
|
const oldIndex = currentData.findIndex((item) => item.id === active.id)
|
|
const newIndex = currentData.findIndex((item) => item.id === over.id)
|
|
|
|
if (oldIndex === -1 || newIndex === -1) return currentData
|
|
|
|
// 只做本地排序，不保存到数据库
|
|
return arrayMove(currentData, oldIndex, newIndex)
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
{error && <div className="text-red-500">{error.message}</div>}
|
|
<UserTabs
|
|
initialData={localData}
|
|
initialLoading={loading}
|
|
info={data?.usersInfo}
|
|
handleDragEnd={handleDragEnd}
|
|
refetch={refetch}
|
|
/>
|
|
</>
|
|
)
|
|
|
|
}
|
|
|
|
function UserTabs({ initialData, initialLoading, info, handleDragEnd, refetch }: { initialData: any[], initialLoading: boolean, info: any, handleDragEnd: (event: DragEndEvent) => void, refetch: any }) {
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle>添加新用户</DialogTitle>
|
|
<DialogDescription>
|
|
创建新用户账户。系统将自动生成随机密码。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<CreateUserForm />
|
|
</DialogContent>
|
|
|
|
<Tabs
|
|
defaultValue="all_users"
|
|
className="w-full flex-col justify-start gap-6"
|
|
>
|
|
<div className="flex items-center justify-between px-4 lg:px-6">
|
|
<Label htmlFor="view-selector" className="sr-only">
|
|
View
|
|
</Label>
|
|
<Select defaultValue="outline">
|
|
<SelectTrigger
|
|
className="flex w-fit @4xl/main:hidden"
|
|
size="sm"
|
|
id="view-selector"
|
|
>
|
|
<SelectValue placeholder="Select a view" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all_users">All Users</SelectItem>
|
|
<SelectItem value="active_users">Active Users</SelectItem>
|
|
<SelectItem value="admin_users">Administrators</SelectItem>
|
|
<SelectItem value="inactive_users">Inactive Users</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
|
|
<TabsTrigger value="all_users">All Users</TabsTrigger>
|
|
<TabsTrigger value="active_users">
|
|
Active Users <Badge variant="secondary">{info?.totalActiveUsers}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="admin_users">
|
|
Administrators <Badge variant="secondary">{info?.totalAdminUsers}</Badge>
|
|
</TabsTrigger>
|
|
<TabsTrigger value="inactive_users">Inactive Users</TabsTrigger>
|
|
</TabsList>
|
|
<div className="flex items-center gap-2">
|
|
<DialogTrigger asChild>
|
|
<Button variant="outline" size="sm">
|
|
<IconPlus />
|
|
<span className="hidden lg:inline">Add User</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
</div>
|
|
</div>
|
|
|
|
<TabsContent value="all_users" className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
|
|
<UserDataTable
|
|
data={initialData}
|
|
isLoading={initialLoading}
|
|
handleDragEnd={handleDragEnd}
|
|
useInitialData={true}
|
|
enableServerSideSort={true}
|
|
refetchFn={refetch}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="active_users" className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
|
|
<UserDataTable
|
|
filter="Users"
|
|
handleDragEnd={handleDragEnd}
|
|
useInitialData={false}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="admin_users" className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
|
|
<UserDataTable
|
|
filter="Admin"
|
|
handleDragEnd={handleDragEnd}
|
|
useInitialData={false}
|
|
/>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="inactive_users" className="relative flex flex-col gap-4 overflow-auto px-4 lg:px-6">
|
|
<UserDataTable
|
|
filter="Users"
|
|
handleDragEnd={handleDragEnd}
|
|
useInitialData={false}
|
|
/>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
// 可重用的数据表格组件
|
|
function UserDataTable({
|
|
data: propData,
|
|
isLoading: propIsLoading = false,
|
|
handleDragEnd,
|
|
filter,
|
|
useInitialData = false,
|
|
enableServerSideSort = false,
|
|
refetchFn
|
|
}: {
|
|
data?: any[]
|
|
isLoading?: boolean
|
|
handleDragEnd: (event: DragEndEvent) => void
|
|
filter?: string
|
|
useInitialData?: boolean
|
|
enableServerSideSort?: boolean
|
|
refetchFn?: any
|
|
}) {
|
|
const [localData, setLocalData] = React.useState<any[]>([])
|
|
const [rowSelection, setRowSelection] = React.useState({})
|
|
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
|
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
|
|
const [sorting, setSorting] = React.useState<SortingState>([])
|
|
const [pagination, setPagination] = React.useState({
|
|
pageIndex: 0,
|
|
pageSize: 10,
|
|
})
|
|
|
|
// 为非初始数据的tab查询数据
|
|
const { data: queryData, loading: queryLoading, refetch } = useQuery(GET_USERS, {
|
|
variables: {
|
|
offset: pagination.pageIndex * pagination.pageSize,
|
|
limit: pagination.pageSize,
|
|
sortBy: sorting[0]?.id || "createdAt",
|
|
sortOrder: sorting[0]?.desc ? "DESC" : "ASC",
|
|
filter: filter
|
|
},
|
|
skip: useInitialData,
|
|
fetchPolicy: 'cache-and-network'
|
|
})
|
|
|
|
const data = useInitialData ? propData : queryData?.userWithGroups
|
|
const isLoading = useInitialData ? propIsLoading : queryLoading
|
|
|
|
// 同步数据到本地状态
|
|
React.useEffect(() => {
|
|
debugger
|
|
if (data && Array.isArray(data)) {
|
|
setLocalData(data)
|
|
}
|
|
}, [data])
|
|
|
|
// 当筛选条件变化时重置分页
|
|
React.useEffect(() => {
|
|
setPagination({ pageIndex: 0, pageSize: 10 })
|
|
}, [filter])
|
|
|
|
// 当排序或分页变化时，重新查询数据
|
|
React.useEffect(() => {
|
|
const refetchFunc = refetchFn || refetch
|
|
if ((!useInitialData || enableServerSideSort) && refetchFunc) {
|
|
refetchFunc({
|
|
offset: pagination.pageIndex * pagination.pageSize,
|
|
limit: pagination.pageSize,
|
|
sortBy: sorting[0]?.id || "createdAt",
|
|
sortOrder: sorting[0]?.desc ? "DESC" : "ASC",
|
|
filter: filter
|
|
})
|
|
}
|
|
}, [sorting, pagination, filter, useInitialData, enableServerSideSort, refetch, refetchFn])
|
|
|
|
function handleLocalDragEnd(event: DragEndEvent) {
|
|
const { active, over } = event
|
|
if (active && over && active.id !== over.id) {
|
|
setLocalData((currentData) => {
|
|
const oldIndex = currentData.findIndex((item) => item.id === active.id)
|
|
const newIndex = currentData.findIndex((item) => item.id === over.id)
|
|
|
|
if (oldIndex === -1 || newIndex === -1) return currentData
|
|
|
|
// 只做本地排序，不保存到数据库
|
|
return arrayMove(currentData, oldIndex, newIndex)
|
|
})
|
|
}
|
|
// 也调用父组件的handleDragEnd
|
|
handleDragEnd(event)
|
|
}
|
|
|
|
const sortableId = React.useId()
|
|
const sensors = useSensors(
|
|
useSensor(MouseSensor, {}),
|
|
useSensor(TouchSensor, {}),
|
|
useSensor(KeyboardSensor, {})
|
|
)
|
|
|
|
const table = useReactTable({
|
|
data: localData || [],
|
|
columns,
|
|
state: {
|
|
sorting,
|
|
columnVisibility,
|
|
rowSelection,
|
|
columnFilters,
|
|
pagination,
|
|
},
|
|
getRowId: (row) => row.user.id.toString(),
|
|
enableRowSelection: true,
|
|
onRowSelectionChange: setRowSelection,
|
|
onSortingChange: setSorting,
|
|
onColumnFiltersChange: setColumnFilters,
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
onPaginationChange: setPagination,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
getFacetedRowModel: getFacetedRowModel(),
|
|
getFacetedUniqueValues: getFacetedUniqueValues(),
|
|
manualPagination: true,
|
|
})
|
|
|
|
return (
|
|
<>
|
|
{/* <div className="flex items-center gap-2 mb-4">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm">
|
|
<IconLayoutColumns />
|
|
<span className="hidden lg:inline">Customize Columns</span>
|
|
<span className="lg:hidden">Columns</span>
|
|
<IconChevronDown />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56">
|
|
{table
|
|
.getAllColumns()
|
|
.filter(
|
|
(column) =>
|
|
typeof column.accessorFn !== "undefined" &&
|
|
column.getCanHide()
|
|
)
|
|
.map((column) => {
|
|
return (
|
|
<DropdownMenuCheckboxItem
|
|
key={column.id}
|
|
className="capitalize"
|
|
checked={column.getIsVisible()}
|
|
onCheckedChange={(value) =>
|
|
column.toggleVisibility(!!value)
|
|
}
|
|
>
|
|
{column.id}
|
|
</DropdownMenuCheckboxItem>
|
|
)
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div> */}
|
|
|
|
<div className="overflow-hidden rounded-lg border">
|
|
<DndContext
|
|
collisionDetection={closestCenter}
|
|
modifiers={[restrictToVerticalAxis]}
|
|
onDragEnd={handleLocalDragEnd}
|
|
sensors={sensors}
|
|
id={sortableId}
|
|
>
|
|
<Table>
|
|
<TableHeader className="bg-muted sticky top-0 z-10">
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => {
|
|
return (
|
|
<TableHead key={header.id} colSpan={header.colSpan}>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</TableHead>
|
|
)
|
|
})}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody className="**:data-[slot=table-cell]:first:w-8">
|
|
{isLoading ? (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={columns.length}
|
|
className="h-24 text-center">
|
|
Loading...
|
|
{/* <IconLoader className="size-4 animate-spin" /> */}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : table.getRowModel().rows?.length ? (
|
|
<SortableContext
|
|
items={localData?.map((user: any) => user.id) || []}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{table.getRowModel().rows.map((row) => (
|
|
<DraggableRow key={row.id} row={row} />
|
|
))}
|
|
</SortableContext>
|
|
) : (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={columns.length}
|
|
className="h-24 text-center"
|
|
>
|
|
No results.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</DndContext>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4">
|
|
<div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
|
|
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
|
{table.getFilteredRowModel().rows.length} row(s) selected.
|
|
</div>
|
|
<div className="flex w-full items-center gap-8 lg:w-fit">
|
|
<div className="hidden items-center gap-2 lg:flex">
|
|
<Label htmlFor="rows-per-page" className="text-sm font-medium">
|
|
Rows per page
|
|
</Label>
|
|
<Select
|
|
value={`${table.getState().pagination.pageSize}`}
|
|
onValueChange={(value) => {
|
|
table.setPageSize(Number(value))
|
|
}}
|
|
>
|
|
<SelectTrigger size="sm" className="w-20" id="rows-per-page">
|
|
<SelectValue
|
|
placeholder={table.getState().pagination.pageSize}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent side="top">
|
|
{[10, 20, 30, 40, 50].map((pageSize) => (
|
|
<SelectItem key={pageSize} value={`${pageSize}`}>
|
|
{pageSize}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex w-fit items-center justify-center text-sm font-medium">
|
|
Page {table.getState().pagination.pageIndex + 1} of{" "}
|
|
{table.getPageCount()}
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-2 lg:ml-0">
|
|
<Button
|
|
variant="outline"
|
|
className="hidden h-8 w-8 p-0 lg:flex"
|
|
onClick={() => table.setPageIndex(0)}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<span className="sr-only">Go to first page</span>
|
|
<IconChevronsLeft />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="size-8"
|
|
size="icon"
|
|
onClick={() => table.previousPage()}
|
|
disabled={!table.getCanPreviousPage()}
|
|
>
|
|
<span className="sr-only">Go to previous page</span>
|
|
<IconChevronLeft />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="size-8"
|
|
size="icon"
|
|
onClick={() => table.nextPage()}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
<span className="sr-only">Go to next page</span>
|
|
<IconChevronRight />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
className="hidden size-8 lg:flex"
|
|
size="icon"
|
|
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
|
|
disabled={!table.getCanNextPage()}
|
|
>
|
|
<span className="sr-only">Go to last page</span>
|
|
<IconChevronsRight />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const chartData = [
|
|
{ month: "January", desktop: 186, mobile: 80 },
|
|
{ month: "February", desktop: 305, mobile: 200 },
|
|
{ month: "March", desktop: 237, mobile: 120 },
|
|
{ month: "April", desktop: 73, mobile: 190 },
|
|
{ month: "May", desktop: 209, mobile: 130 },
|
|
{ month: "June", desktop: 214, mobile: 140 },
|
|
]
|
|
|
|
const chartConfig = {
|
|
desktop: {
|
|
label: "Desktop",
|
|
color: "var(--primary)",
|
|
},
|
|
mobile: {
|
|
label: "Mobile",
|
|
color: "var(--primary)",
|
|
},
|
|
} satisfies ChartConfig
|
|
|
|
function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
|
|
const isMobile = useIsMobile()
|
|
const { user } = useUser()
|
|
|
|
return (
|
|
<Drawer direction={isMobile ? "bottom" : "right"}>
|
|
<DrawerTrigger asChild>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="link" className="text-foreground w-fit px-0 text-left">
|
|
{item.user.username}
|
|
</Button>
|
|
{
|
|
item.user.id === user?.id ? (
|
|
<Badge variant="secondary" className="text-[10px] w-fit">
|
|
Me
|
|
</Badge>
|
|
) : <></>
|
|
}
|
|
|
|
</div>
|
|
</DrawerTrigger>
|
|
|
|
<DrawerContent>
|
|
<DrawerHeader className="gap-1">
|
|
<DrawerTitle>{item.user.username}</DrawerTitle>
|
|
<DrawerDescription>
|
|
User profile and activity information
|
|
</DrawerDescription>
|
|
</DrawerHeader>
|
|
<div className="flex flex-col gap-4 overflow-y-auto px-4 text-sm">
|
|
{!isMobile && (
|
|
<>
|
|
<ChartContainer config={chartConfig}>
|
|
<AreaChart
|
|
accessibilityLayer
|
|
data={chartData}
|
|
margin={{
|
|
left: 0,
|
|
right: 10,
|
|
}}
|
|
>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis
|
|
dataKey="month"
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickMargin={8}
|
|
tickFormatter={(value) => value.slice(0, 3)}
|
|
hide
|
|
/>
|
|
<ChartTooltip
|
|
cursor={false}
|
|
content={<ChartTooltipContent indicator="dot" />}
|
|
/>
|
|
<Area
|
|
dataKey="mobile"
|
|
type="natural"
|
|
fill="var(--color-mobile)"
|
|
fillOpacity={0.6}
|
|
stroke="var(--color-mobile)"
|
|
stackId="a"
|
|
/>
|
|
<Area
|
|
dataKey="desktop"
|
|
type="natural"
|
|
fill="var(--color-desktop)"
|
|
fillOpacity={0.4}
|
|
stroke="var(--color-desktop)"
|
|
stackId="a"
|
|
/>
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
<Separator />
|
|
<div className="grid gap-2">
|
|
<div className="flex gap-2 leading-none font-medium">
|
|
Login activity up by 5.2% this month{" "}
|
|
<IconTrendingUp className="size-4" />
|
|
</div>
|
|
<div className="text-muted-foreground">
|
|
User activity and login statistics for the last 6 months. This shows
|
|
the user's engagement patterns and system usage over time.
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
</>
|
|
)}
|
|
<form className="flex flex-col gap-4">
|
|
<div className="flex flex-col gap-3">
|
|
<Label htmlFor="name">Name</Label>
|
|
<Input id="name" defaultValue={item.user.username} />
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" defaultValue={item.user.email} />
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="flex flex-col gap-3">
|
|
<Label htmlFor="role">Roles</Label>
|
|
<Select defaultValue={item.user.username}>
|
|
<SelectTrigger id="role" className="w-full">
|
|
<SelectValue placeholder="Select a role" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Administrator">Administrator</SelectItem>
|
|
<SelectItem value="Manager">Manager</SelectItem>
|
|
<SelectItem value="Developer">Developer</SelectItem>
|
|
<SelectItem value="Designer">Designer</SelectItem>
|
|
<SelectItem value="Analyst">Analyst</SelectItem>
|
|
<SelectItem value="Support">Support</SelectItem>
|
|
<SelectItem value="Guest">Guest</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<DrawerFooter>
|
|
<Button>Submit</Button>
|
|
<DrawerClose asChild>
|
|
<Button variant="outline">Done</Button>
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
)
|
|
}
|