refactor(admin): refactor admin roles and users management

src/app/(modules)/users/page.tsx

@@ -1,270 +1,98 @@
 'use client';
 
-import { FormEvent, useMemo, useState } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { Edit, Loader2, Plus, RotateCcw, Users } from 'lucide-react';
-import { toast } from 'sonner';
-import type { ColumnDef } from '@tanstack/react-table';
+import { useCallback, useMemo, useState } from 'react';
+import { Plus, Users } from 'lucide-react';
 
-import { DataTable } from '@/components/data-table';
 import { PageHeader } from '@/components/page-header';
 import { PoweredBy } from '@/components/powered-by';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { roleService, userService } from '@/services/api';
-import type { AdministrationUser, UserStatus } from '@/types';
+import type { AdministrationUser } from '@/types';
 
-type StatusFilter = 'all' | UserStatus;
-
-interface UserFormState {
-  id?: number;
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone_number: string;
-  role_id: string;
-}
-
-const emptyUserForm: UserFormState = {
-  first_name: '',
-  last_name: '',
-  email: '',
-  phone_number: '',
-  role_id: '',
-};
-
-function formatDate(value?: string | null) {
-  if (!value) return '-';
-  return new Intl.DateTimeFormat('en-IN', {
-    day: '2-digit',
-    month: 'short',
-    year: 'numeric',
-  }).format(new Date(value));
-}
-
-function getNextStatus(status: UserStatus): 'active' | 'inactive' {
-  return status === 'active' ? 'inactive' : 'active';
-}
+import { useUserColumns } from './components/UserColumns';
+import { UserFilters } from './components/UserFilters';
+import { UserSheet } from './components/UserSheet';
+import { UserStats } from './components/UserStats';
+import { UserTable } from './components/UserTable';
+import { useUserFilters } from './hooks/useUserFilters';
+import { useUserForm } from './hooks/useUserForm';
+import { useUserStatusMutation } from './hooks/useUserMutations';
+import { useRoleLookupQuery, useUsersQuery } from './hooks/useUserQueries';
 
 export default function UsersPage() {
-  const queryClient = useQueryClient();
-  const [skip, setSkip] = useState(0);
-  const [limit] = useState(10);
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [isSheetOpen, setIsSheetOpen] = useState(false);
-  const [form, setForm] = useState<UserFormState>(emptyUserForm);
+  const {
+    skip,
+    setSkip,
+    limit,
+    searchTerm,
+    debouncedSearchTerm,
+    setSearchTerm,
+    statusFilter,
+    setStatusFilter,
+  } = useUserFilters();
 
-  const usersQuery = useQuery({
-    queryKey: ['users', { skip, limit, searchTerm, statusFilter }],
-    queryFn: () =>
-      userService.getUsers({
-        skip,
-        limit,
-        search_term: searchTerm || undefined,
-        effective_status: statusFilter === 'all' ? undefined : statusFilter,
-        sort_by: 'created_at',
-        sort_order: 'desc',
-      }),
+  const usersQuery = useUsersQuery({
+    skip,
+    limit,
+    searchTerm: debouncedSearchTerm,
+    statusFilter,
   });
-
-  const rolesQuery = useQuery({
-    queryKey: ['roles', 'lookup'],
-    queryFn: () =>
-      roleService.getRoles({
-        skip: 0,
-        limit: 100,
-        effective_status: true,
-        sort_by: 'display_name',
-        sort_order: 'asc',
-      }),
+  const rolesQuery = useRoleLookupQuery(isSheetOpen);
+  const userForm = useUserForm({
+    onSaved: () => setIsSheetOpen(false),
   });
+  const {
+    openCreate: prepareCreateUser,
+    openEdit: prepareEditUser,
+    register,
+    handleSubmit,
+    userId,
+    roleId,
+    setRoleId,
+    isSaving,
+  } = userForm;
+  const statusMutation = useUserStatusMutation();
+  const { mutate: updateUserStatus, pendingUserId } = statusMutation;
 
-  const roleOptions = useMemo(() => rolesQuery.data?.items || [], [rolesQuery.data?.items]);
-
-  const saveMutation = useMutation({
-    mutationFn: () =>
-      userService.saveUser({
-        id: form.id,
-        email: form.email.trim(),
-        first_name: form.first_name.trim(),
-        last_name: form.last_name.trim(),
-        phone_number: form.phone_number.trim() || undefined,
-        roles: [Number(form.role_id)],
-      }),
-    onSuccess: () => {
-      toast.success(form.id ? 'User updated' : 'User created');
-      setIsSheetOpen(false);
-      setForm(emptyUserForm);
-      queryClient.invalidateQueries({ queryKey: ['users'] });
-    },
-    onError: () => toast.error(form.id ? 'Failed to update user' : 'Failed to create user'),
-  });
-
-  const statusMutation = useMutation({
-    mutationFn: (user: AdministrationUser) =>
-      userService.updateUserStatus(user.id, getNextStatus(user.effective_status)),
-    onSuccess: () => {
-      toast.success('User status updated');
-      queryClient.invalidateQueries({ queryKey: ['users'] });
-    },
-    onError: () => toast.error('Failed to update user status'),
-  });
-
-  const openCreate = () => {
-    setForm(emptyUserForm);
+  const openCreate = useCallback(() => {
+    prepareCreateUser();
     setIsSheetOpen(true);
-  };
+  }, [prepareCreateUser]);
 
-  const openEdit = (user: AdministrationUser) => {
-    const roleId = user.role_ids?.[0] ?? user.roles?.[0]?.id;
-    setForm({
-      id: user.id,
-      first_name: user.first_name || '',
-      last_name: user.last_name || '',
-      email: user.email || '',
-      phone_number: user.phone_number || '',
-      role_id: roleId ? String(roleId) : '',
-    });
-    setIsSheetOpen(true);
-  };
+  const openEdit = useCallback(
+    (user: AdministrationUser) => {
+      prepareEditUser(user);
+      setIsSheetOpen(true);
+    },
+    [prepareEditUser],
+  );
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!form.first_name.trim() || !form.last_name.trim() || !form.email.trim()) {
-      toast.error('First name, last name and email are required');
-      return;
-    }
-    if (!form.role_id) {
-      toast.error('Select a role');
-      return;
-    }
-    saveMutation.mutate();
-  };
+  const toggleStatus = useCallback(
+    (user: AdministrationUser) => {
+      updateUserStatus(user);
+    },
+    [updateUserStatus],
+  );
+
+  const columns = useUserColumns({
+    onEdit: openEdit,
+    onToggleStatus: toggleStatus,
+    pendingUserId,
+  });
 
-  const users = usersQuery.data?.items ?? [];
   const total = usersQuery.data?.total ?? 0;
-  const columns: ColumnDef<AdministrationUser>[] = [
-    {
-      accessorKey: 'first_name',
-      header: 'Name',
-      cell: ({ row }) => (
-        <span className="font-medium">
-          {[row.original.first_name, row.original.last_name].filter(Boolean).join(' ') ||
-            row.original.username}
-        </span>
-      ),
-    },
-    {
-      accessorKey: 'email',
-      header: 'Email',
-    },
-    {
-      accessorKey: 'phone_number',
-      header: 'Phone',
-      cell: ({ row }) => row.original.phone_number || '-',
-    },
-    {
-      accessorKey: 'roles',
-      header: 'Roles',
-      cell: ({ row }) => (
-        <div className="flex flex-wrap gap-1">
-          {row.original.roles?.length ? (
-            row.original.roles.map((role) => (
-              <Badge key={role.id ?? role.name} variant="outline">
-                {role.display_name || role.name}
-              </Badge>
-            ))
-          ) : (
-            <span className="text-muted-foreground">-</span>
-          )}
-        </div>
-      ),
-    },
-    {
-      accessorKey: 'created_at',
-      header: 'Created',
-      cell: ({ row }) => formatDate(row.original.created_at),
-    },
-    {
-      accessorKey: 'effective_status',
-      header: 'Status',
-      cell: ({ row }) => (
-        <Badge variant={row.original.effective_status === 'active' ? 'default' : 'secondary'}>
-          {row.original.effective_status}
-        </Badge>
-      ),
-    },
-    {
-      id: 'actions',
-      header: () => <div className="text-right">Actions</div>,
-      cell: ({ row }) => {
-        const user = row.original;
-        return (
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" size="sm" onClick={() => openEdit(user)}>
-              <Edit className="size-4" />
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              disabled={statusMutation.isPending || user.effective_status === 'pending'}
-              onClick={() => statusMutation.mutate(user)}
-            >
-              <RotateCcw className="mr-2 size-4" />
-              {user.effective_status === 'active' ? 'Deactivate' : 'Activate'}
-            </Button>
-          </div>
-        );
-      },
-    },
-  ];
-  const toolbar = (
-    <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-      <Input
-        value={searchTerm}
-        onChange={(event) => {
-          setSearchTerm(event.target.value);
-          setSkip(0);
-        }}
-        placeholder="Search users"
-        className="md:max-w-sm"
+  const users = usersQuery.data?.items ?? [];
+  const roleOptions = rolesQuery.data?.items ?? [];
+  const toolbar = useMemo(
+    () => (
+      <UserFilters
+        searchTerm={searchTerm}
+        statusFilter={statusFilter}
+        onSearchChange={setSearchTerm}
+        onStatusChange={setStatusFilter}
       />
-      <Select
-        value={statusFilter}
-        onValueChange={(value) => {
-          setStatusFilter(value as StatusFilter);
-          setSkip(0);
-        }}
-      >
-        <SelectTrigger className="md:w-44">
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value="all">All status</SelectItem>
-          <SelectItem value="active">Active</SelectItem>
-          <SelectItem value="inactive">Inactive</SelectItem>
-          <SelectItem value="pending">Pending</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
+    ),
+    [searchTerm, setSearchTerm, setStatusFilter, statusFilter],
   );
 
   return (
@@ -282,134 +110,39 @@ export default function UsersPage() {
           }
         />
 
-        <div className="grid gap-3 md:grid-cols-4">
-          <div className="rounded-lg border bg-card p-4">
-            <p className="text-xs text-muted-foreground">Total</p>
-            <p className="mt-1 text-2xl font-semibold">{total}</p>
-          </div>
-          <div className="rounded-lg border bg-card p-4">
-            <p className="text-xs text-muted-foreground">Active</p>
-            <p className="mt-1 text-2xl font-semibold">{usersQuery.data?.active_count ?? 0}</p>
-          </div>
-          <div className="rounded-lg border bg-card p-4">
-            <p className="text-xs text-muted-foreground">Inactive</p>
-            <p className="mt-1 text-2xl font-semibold">{usersQuery.data?.inactive_count ?? 0}</p>
-          </div>
-          <div className="rounded-lg border bg-card p-4">
-            <p className="text-xs text-muted-foreground">Pending</p>
-            <p className="mt-1 text-2xl font-semibold">{usersQuery.data?.pending_count ?? 0}</p>
-          </div>
-        </div>
+        <UserStats
+          total={total}
+          activeCount={usersQuery.data?.active_count ?? 0}
+          inactiveCount={usersQuery.data?.inactive_count ?? 0}
+          pendingCount={usersQuery.data?.pending_count ?? 0}
+        />
 
-        <DataTable
-          title="Users"
+        <UserTable
           columns={columns}
-          data={users}
+          users={users}
           isLoading={usersQuery.isLoading}
           toolbar={toolbar}
-          emptyTitle="No users found."
-          pagination={{
-            skip,
-            limit,
-            totalItems: total,
-            onPageChange: setSkip,
-            onLimitChange: () => undefined,
-          }}
+          skip={skip}
+          limit={limit}
+          total={total}
+          onPageChange={setSkip}
         />
 
         <PoweredBy />
       </main>
 
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
-        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
-          <SheetHeader>
-            <SheetTitle>{form.id ? 'Edit User' : 'Create User'}</SheetTitle>
-            <SheetDescription>Assign user details and a role.</SheetDescription>
-          </SheetHeader>
-          <form onSubmit={handleSubmit} className="flex flex-1 flex-col gap-5 px-4">
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="space-y-2">
-                <Label htmlFor="first-name">First Name</Label>
-                <Input
-                  id="first-name"
-                  value={form.first_name}
-                  onChange={(event) =>
-                    setForm((prev) => ({ ...prev, first_name: event.target.value }))
-                  }
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="last-name">Last Name</Label>
-                <Input
-                  id="last-name"
-                  value={form.last_name}
-                  onChange={(event) =>
-                    setForm((prev) => ({ ...prev, last_name: event.target.value }))
-                  }
-                  required
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                value={form.email}
-                onChange={(event) => setForm((prev) => ({ ...prev, email: event.target.value }))}
-                required
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="phone-number">Phone Number</Label>
-              <Input
-                id="phone-number"
-                value={form.phone_number}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, phone_number: event.target.value }))
-                }
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label>Role</Label>
-              <Select
-                value={form.role_id}
-                onValueChange={(value) => setForm((prev) => ({ ...prev, role_id: value }))}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder={rolesQuery.isLoading ? 'Loading roles...' : 'Select role'} />
-                </SelectTrigger>
-                <SelectContent>
-                  {roleOptions.map((role) => (
-                    <SelectItem key={role.id} value={String(role.id)}>
-                      {role.display_name || role.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <SheetFooter className="px-0">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setIsSheetOpen(false)}
-                disabled={saveMutation.isPending}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={saveMutation.isPending}>
-                {saveMutation.isPending ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
-                {form.id ? 'Update User' : 'Create User'}
-              </Button>
-            </SheetFooter>
-          </form>
-        </SheetContent>
-      </Sheet>
+      <UserSheet
+        open={isSheetOpen}
+        onOpenChange={setIsSheetOpen}
+        userId={userId}
+        register={register}
+        onSubmit={handleSubmit}
+        roleId={roleId}
+        onRoleChange={setRoleId}
+        roles={roleOptions}
+        isRolesLoading={rolesQuery.isLoading}
+        isSaving={isSaving}
+      />
     </>
   );
 }