feat: settings pages — users table, areas/zones cards

app/(app)/settings/users/page.tsx

@@ -1,49 +1,103 @@
 'use client';
 
+import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { UserPlus } from 'lucide-react';
+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 { api } from '@/lib/api';
+import { format } from 'date-fns';
+
+interface UserItem {
+  id: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  isActive: boolean;
+  createdAt: string;
+  roleAssignments?: { role: string }[];
+}
+
+const ROLE_COLORS: 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',
+};
+
+export default function UsersSettingsPage() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => (await api.get('/api/v1/users')).data,
+  });
+
+  const users: UserItem[] = Array.isArray(data) ? data : (data?.data ?? []);
 
-export default function UsersPage() {
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-slate-800">Users</h1>
-          <p className="text-slate-500 text-sm mt-1">Manage staff accounts and permissions</p>
+          <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>
         </div>
-        <Button style={{ backgroundColor: '#0891B2' }}>
+        <Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
           <UserPlus size={16} className="mr-2" />
-          Invite User
+          Add User
         </Button>
       </div>
 
-      <Card className="border shadow-sm">
+      <Card>
         <CardContent className="p-0">
           <Table>
             <TableHeader>
               <TableRow>
                 <TableHead>Name</TableHead>
                 <TableHead>Email</TableHead>
-                <TableHead>Role</TableHead>
+                <TableHead>Roles</TableHead>
                 <TableHead>Status</TableHead>
-                <TableHead>Actions</TableHead>
+                <TableHead>Joined</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              <TableRow>
-                <TableCell colSpan={5} className="text-center py-12 text-slate-400">
-                  No users found. Invite your team members.
-                </TableCell>
-              </TableRow>
+              {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>
         </CardContent>