feat(user): implement users manager

console/src/components/common/layout/menu-bar.tsx

@@ -28,6 +28,7 @@ import {
   LayoutDashboard,
   SquareTerminal,
   Target,
+  User,
 } from 'lucide-react';
 import { NavUser } from '../../ui/nav-user';
 import { NewBadge } from '../new-badge';
@@ -48,6 +49,17 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         },
       ],
     },
+    {
+      title: 'Admin',
+      url: '#',
+      items: [
+        {
+          title: 'Users',
+          icon: <User />,
+          url: '/admin/users',
+        },
+      ],
+    },
     {
       title: 'Attack surface',
       url: '#',

console/src/hooks/useServerDataTable.ts

@@ -58,25 +58,29 @@ export function useServerDataTable({
     ? urlParams.get('filter') || ''
     : internalParams.filter;
 
-  const setParam = useCallback(
-    (key: string, value: string | number | undefined) => {
+  const setParams = useCallback(
+    (newParams: Partial<typeof internalParams>) => {
       if (isUpdateSearchQueryParam) {
         setUrlParams(
           (prev) => {
             const next = new URLSearchParams(prev);
-            if (!value) {
-              next.delete(key);
-            } else {
-              next.set(key, value.toString());
-            }
+
+            Object.entries(newParams).forEach(([key, value]) => {
+              if (value === undefined || value === null || value === '') {
+                next.delete(key);
+              } else {
+                next.set(key, String(value));
+              }
+            });
+
             return next;
           },
           { replace: true },
         );
       } else {
         setInternalParams((prev) => ({
           ...prev,
-          [key]: value ?? '',
+          ...newParams,
         }));
       }
     },
@@ -92,36 +96,29 @@ export function useServerDataTable({
       filter,
     },
     tableHandlers: {
-      setPage: useCallback((v: number) => setParam('page', v), [setParam]),
+      setParams,
+      setPage: useCallback((v: number) => setParams({ page: v }), [setParams]),
       setPageSize: useCallback(
-        (v: number) => setParam('pageSize', v),
-        [setParam],
+        (v: number) => setParams({ pageSize: v }),
+        [setParams],
+      ),
+      setSortBy: useCallback(
+        (v: string) => setParams({ sortBy: v }),
+        [setParams],
       ),
-      setSortBy: useCallback((v: string) => setParam('sortBy', v), [setParam]),
       setSortOrder: useCallback(
-        (v: 'ASC' | 'DESC') => setParam('sortOrder', v),
-        [setParam],
+        (v: 'ASC' | 'DESC') => setParams({ sortOrder: v }),
+        [setParams],
       ),
       setFilter: useCallback(
         (v: string) => {
-          if (isUpdateSearchQueryParam) {
-            setUrlParams(
-              (prev) => {
-                const next = new URLSearchParams(prev);
-                if (next.get('filter') === v) return prev;
-                next.set('page', '1');
-                next.set('filter', v);
-                return next;
-              },
-              { replace: true },
-            );
-          } else {
-            if (internalParams.filter === v) return;
-            setParam('page', 1);
-            setParam('filter', v);
-          }
+          if (filter === v) return;
+          setParams({
+            filter: v,
+            page: 1,
+          });
         },
-        [isUpdateSearchQueryParam, setUrlParams, setParam, internalParams.filter],
+        [filter, setParams],
       ),
     },
   };

console/src/pages/admin/list-users.tsx

@@ -0,0 +1,93 @@
+import { Badge } from '@/components/ui/badge';
+import { type ColumnDef } from '@tanstack/react-table';
+import { DataTable } from '@/components/ui/data-table';
+import { useServerDataTable } from '@/hooks/useServerDataTable';
+import { authClient, type User } from '@/utils/authClient';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { UserDetailSheet } from './user-detail-sheet';
+
+const userColumns: ColumnDef<User>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    enableSorting: true,
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+    cell: ({ row }) => <Badge>{row.original.role}</Badge>,
+  },
+  {
+    accessorKey: 'banned',
+    header: 'Status',
+    cell: ({ row }) =>
+      row.original.banned ? (
+        <Badge variant="destructive">Banned</Badge>
+      ) : (
+        <Badge variant="secondary">Active</Badge>
+      ),
+  },
+];
+
+export function ListUsers() {
+  const {
+    tableParams: { page, pageSize, sortBy, sortOrder, filter },
+    tableHandlers: { setPage, setPageSize, setParams, setFilter },
+  } = useServerDataTable();
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['users', { page, pageSize, sortBy, sortOrder, filter }],
+    queryFn: () =>
+      authClient.admin.listUsers({
+        query: {
+          limit: pageSize,
+          offset: (page - 1) * pageSize,
+          searchField: 'name',
+          searchValue: filter,
+          filterField: 'role',
+          filterOperator: 'ne',
+          filterValue: 'bot',
+          sortBy: sortBy,
+          sortDirection: sortOrder.toLowerCase() as 'asc' | 'desc',
+        },
+      }),
+  });
+
+  if (!data) return null;
+
+  return (
+    <>
+      <DataTable
+        data={(data.data?.users as User[]) || []}
+        columns={userColumns}
+        isLoading={isLoading}
+        page={page}
+        pageSize={pageSize}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        onSortChange={(col, order) => {
+          setParams({ sortBy: col, sortOrder: order });
+        }}
+        filterColumnKey="value"
+        filterValue={filter}
+        onFilterChange={setFilter}
+        totalItems={data.data?.total}
+        onRowClick={setSelectedUser}
+        rowClassName="cursor-pointer hover:bg-muted/50 transition-colors"
+      />
+      <UserDetailSheet
+        user={selectedUser}
+        onOpenChange={(open) => !open && setSelectedUser(null)}
+      />
+    </>
+  );
+}