From 56482bf66ae4e119a246345d0e6a95762bbfdf51 Mon Sep 17 00:00:00 2001
From: Forge <forge@fiberops.local>
Date: Wed, 25 Mar 2026 08:41:51 +0800
Subject: [PATCH] feat: Settings Users page with toggle active

---
 app/(app)/settings/users/page.tsx | 155 ++++++++++++++++--------------
 1 file changed, 82 insertions(+), 73 deletions(-)

diff --git a/app/(app)/settings/users/page.tsx b/app/(app)/settings/users/page.tsx
index 3cfe70e..64dc36f 100644
--- a/app/(app)/settings/users/page.tsx
+++ b/app/(app)/settings/users/page.tsx
@@ -1,105 +1,114 @@
 'use client';
 
-import { useQuery } from '@tanstack/react-query';
-import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
-} from '@/components/ui/table';
-import { UserPlus, Shield, User } from 'lucide-react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
-import { format } from 'date-fns';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Badge } from '@/components/ui/badge';
+import { UserPlus } from 'lucide-react';
 
-interface UserItem {
+interface User {
   id: string;
   firstName: string;
   lastName: string;
   email: string;
   isActive: boolean;
-  createdAt: string;
-  roleAssignments?: { role: string }[];
+  roles: Array<{ role: string }>;
 }
 
-const ROLE_COLORS: Record<string, string> = {
+const roleColors: Record<string, string> = {
   ADMIN: 'bg-purple-100 text-purple-700',
   STAFF: 'bg-blue-100 text-blue-700',
   TECHNICIAN: 'bg-orange-100 text-orange-700',
-  COLLECTOR: 'bg-cyan-100 text-cyan-700',
+  COLLECTOR: 'bg-green-100 text-green-700',
 };
 
 export default function UsersSettingsPage() {
-  const { data, isLoading } = useQuery({
+  const qc = useQueryClient();
+
+  const { data: users, isLoading } = useQuery<User[]>({
     queryKey: ['users'],
-    queryFn: async () => (await api.get('/api/v1/users')).data,
+    queryFn: async () => {
+      const res = await api.get('/api/v1/users');
+      return res.data;
+    },
   });
 
-  const users: UserItem[] = Array.isArray(data) ? data : (data?.data ?? []);
+  const toggleActive = useMutation({
+    mutationFn: async ({ id, isActive }: { id: string; isActive: boolean }) => {
+      await api.patch(`/api/v1/users/${id}`, { isActive: !isActive });
+    },
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['users'] }),
+  });
 
   return (
     <div>
-      <div className="mb-6 flex items-center justify-between">
+      <div className="flex items-center justify-between mb-6">
         <div>
-          <h1 className="text-2xl font-bold text-slate-800">User Management</h1>
-          <p className="text-slate-500 text-sm mt-1">Staff accounts and role assignments</p>
+          <h1 className="text-2xl font-bold text-slate-800">Users</h1>
+          <p className="text-slate-500 text-sm mt-1">Manage staff access and roles</p>
         </div>
-        <Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
-          <UserPlus size={16} className="mr-2" />
+        <button
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white"
+          style={{ backgroundColor: '#0891B2' }}
+        >
+          <UserPlus size={16} />
           Add User
-        </Button>
+        </button>
       </div>
 
-      <Card>
+      <Card className="border shadow-sm">
         <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Email</TableHead>
-                <TableHead>Roles</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Joined</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
-                Array.from({ length: 5 }).map((_, i) => (
-                  <TableRow key={i}>{Array.from({ length: 5 }).map((_, j) => (
-                    <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
-                  ))}</TableRow>
-                ))
-              ) : users.length === 0 ? (
-                <TableRow><TableCell colSpan={5} className="text-center py-12 text-slate-400">No users found</TableCell></TableRow>
-              ) : (
-                users.map((u) => {
-                  const roles = u.roleAssignments?.map(r => r.role) ?? [];
-                  return (
-                    <TableRow key={u.id} className="hover:bg-slate-50">
-                      <TableCell className="font-medium">{u.firstName} {u.lastName}</TableCell>
-                      <TableCell className="text-sm text-slate-500">{u.email}</TableCell>
-                      <TableCell>
-                        <div className="flex gap-1 flex-wrap">
-                          {roles.length === 0 ? <span className="text-xs text-slate-400">No role</span> :
-                            roles.map(r => (
-                              <span key={r} className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${ROLE_COLORS[r] ?? 'bg-gray-100 text-gray-600'}`}>{r}</span>
-                            ))}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${u.isActive ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-600'}`}>
-                          {u.isActive ? 'Active' : 'Inactive'}
-                        </span>
-                      </TableCell>
-                      <TableCell className="text-xs text-slate-400">
-                        {format(new Date(u.createdAt), 'MMM d, yyyy')}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })
-              )}
-            </TableBody>
-          </Table>
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b bg-slate-50">
+                <th className="text-left px-4 py-3 font-medium text-slate-500">Name</th>
+                <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Email</th>
+                <th className="text-left px-4 py-3 font-medium text-slate-500">Role</th>
+                <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
+                <th className="px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody>
+              {isLoading
+                ? Array.from({ length: 4 }).map((_, i) => (
+                    <tr key={i} className="border-b">
+                      {[...Array(5)].map((_, j) => (
+                        <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-20" /></td>
+                      ))}
+                    </tr>
+                  ))
+                : users?.map((u) => {
+                    const role = u.roles?.[0]?.role ?? 'STAFF';
+                    return (
+                      <tr key={u.id} className="border-b hover:bg-slate-50">
+                        <td className="px-4 py-3 font-medium text-slate-800">
+                          {u.firstName} {u.lastName}
+                        </td>
+                        <td className="px-4 py-3 text-slate-600 hidden md:table-cell">{u.email}</td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${roleColors[role] ?? 'bg-gray-100 text-gray-500'}`}>
+                            {role}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${u.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
+                            {u.isActive ? 'Active' : 'Inactive'}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3">
+                          <button
+                            onClick={() => toggleActive.mutate({ id: u.id, isActive: u.isActive })}
+                            className="text-xs text-slate-500 hover:text-slate-800 underline"
+                          >
+                            {u.isActive ? 'Deactivate' : 'Activate'}
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+            </tbody>
+          </table>
         </CardContent>
       </Card>
     </div>