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, page: 1 }),
+        [setParams],
+      ),
+      setSortBy: useCallback(
+        (v: string) => setParams({ sortBy: v, page: 1 }),
+        [setParams],
       ),
-      setSortBy: useCallback((v: string) => setParam('sortBy', v), [setParam]),
       setSortOrder: useCallback(
-        (v: 'ASC' | 'DESC') => setParam('sortOrder', v),
-        [setParam],
+        (v: 'ASC' | 'DESC') => setParams({ sortOrder: v, page: 1 }),
+        [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/add-user-dialog.tsx

@@ -0,0 +1,211 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { authClient } from '@/utils/authClient';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2Icon, UserPlus } from 'lucide-react';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  email: z.string().min(1, 'Email is required').email('Invalid email address'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  role: z.enum(['user', 'admin']),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export function AddUserDialog() {
+  const [open, setOpen] = useState(false);
+  const queryClient = useQueryClient();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      role: 'user',
+    },
+  });
+
+  const { mutate: createUser, isPending } = useMutation({
+    mutationFn: (values: FormValues) =>
+      authClient.admin.createUser({
+        name: values.name,
+        email: values.email,
+        password: values.password,
+        role: values.role,
+      }),
+    onSuccess: () => {
+      toast.success('User created successfully.');
+      setOpen(false);
+      form.reset();
+      return queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+    onError: () => {
+      toast.error('Failed to create user.');
+    },
+  });
+
+  function onSubmit(values: FormValues) {
+    createUser(values);
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      form.reset();
+    }
+    setOpen(nextOpen);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="gap-1.5">
+          <UserPlus className="h-4 w-4" />
+          Add User
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add User</DialogTitle>
+          <DialogDescription>
+            Create a new user account. They will be able to sign in immediately.
+          </DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            id="add-user-form"
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 py-2"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Jane Smith"
+                      {...field}
+                      disabled={isPending}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder="jane@example.com"
+                      {...field}
+                      disabled={isPending}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Min. 8 characters"
+                      {...field}
+                      disabled={isPending}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="role"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Role</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                    disabled={isPending}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select a role" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="user">User</SelectItem>
+                      <SelectItem value="admin">Admin</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => handleOpenChange(false)}
+            disabled={isPending}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            form="add-user-form"
+            disabled={isPending}
+            className="gap-1.5"
+          >
+            {isPending && <Loader2Icon className="h-4 w-4 animate-spin" />}
+            Create User
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}