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

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

@@ -1,30 +1,93 @@
 'use client';
 
+import { useQuery } from '@tanstack/react-query';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Plus, MapPin } from 'lucide-react';
+import { Skeleton } from '@/components/ui/skeleton';
+import { MapPin, Plus, ChevronRight } from 'lucide-react';
+import { api } from '@/lib/api';
+
+interface Zone {
+  id: string;
+  name: string;
+}
+interface Area {
+  id: string;
+  name: string;
+  description?: string;
+  zones?: Zone[];
+}
 
 export default function AreasPage() {
+  const { data, isLoading } = useQuery({
+    queryKey: ['areas'],
+    queryFn: async () => (await api.get('/api/v1/areas')).data,
+  });
+
+  const areas: Area[] = Array.isArray(data) ? data : (data?.data ?? []);
+
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-slate-800">Areas & Zones</h1>
-          <p className="text-slate-500 text-sm mt-1">Define service coverage areas</p>
+          <p className="text-slate-500 text-sm mt-1">Service area and coverage zones</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm">
+            <Plus size={14} className="mr-1.5" />Add Zone
+          </Button>
+          <Button style={{ backgroundColor: '#0891B2', color: 'white' }} size="sm">
+            <Plus size={14} className="mr-1.5" />Add Area
+          </Button>
         </div>
-        <Button style={{ backgroundColor: '#0891B2' }}>
-          <Plus size={16} className="mr-2" />
-          Add Area
-        </Button>
       </div>
 
-      <Card className="border shadow-sm">
-        <CardContent className="flex flex-col items-center justify-center py-16 text-slate-400">
-          <MapPin size={32} className="mb-3 text-slate-300" />
-          <p className="text-sm font-medium">No areas defined yet</p>
-          <p className="text-xs mt-1">Create areas to group clients by coverage zone</p>
-        </CardContent>
-      </Card>
+      {isLoading ? (
+        <div className="space-y-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} className="h-20 w-full rounded-xl" />
+          ))}
+        </div>
+      ) : areas.length === 0 ? (
+        <div className="text-center py-16 text-slate-400">
+          <MapPin size={40} className="mx-auto mb-3 opacity-30" />
+          <p>No service areas yet</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {areas.map((area) => (
+            <Card key={area.id} className="hover:border-cyan-200 transition-colors">
+              <CardContent className="p-4">
+                <div className="flex items-start justify-between">
+                  <div className="flex items-start gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-cyan-50 flex items-center justify-center mt-0.5">
+                      <MapPin size={16} className="text-cyan-600" />
+                    </div>
+                    <div>
+                      <p className="font-semibold text-slate-800">{area.name}</p>
+                      {area.description && <p className="text-sm text-slate-500 mt-0.5">{area.description}</p>}
+                      {area.zones && area.zones.length > 0 && (
+                        <div className="mt-2 flex gap-1.5 flex-wrap">
+                          {area.zones.map(z => (
+                            <span key={z.id} className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
+                              {z.name}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-slate-400">{area.zones?.length ?? 0} zone{(area.zones?.length ?? 0) !== 1 ? 's' : ''}</span>
+                    <ChevronRight size={16} className="text-slate-300" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

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>

app/(app)/tickets/page.tsx

@@ -2,16 +2,11 @@
 
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
 import { Card, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import {
-  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
-} from '@/components/ui/table';
-import { Search, Plus } from 'lucide-react';
-import { api } from '@/lib/api';
-import { useDebounce } from '@/lib/hooks';
+import { Search, Plus, ChevronRight } from 'lucide-react';
 import { format } from 'date-fns';
 
 interface Ticket {
@@ -25,141 +20,147 @@ interface Ticket {
   assignedTo?: { firstName: string; lastName: string };
 }
 
-const STATUS_COLORS: Record<string, string> = {
+const statusColors: Record<string, string> = {
   OPEN: 'bg-blue-100 text-blue-700',
   IN_PROGRESS: 'bg-yellow-100 text-yellow-700',
-  RESOLVED: 'bg-emerald-100 text-emerald-700',
+  RESOLVED: 'bg-green-100 text-green-700',
   CLOSED: 'bg-gray-100 text-gray-500',
 };
-const TYPE_COLORS: Record<string, string> = {
-  INSTALLATION: 'bg-purple-100 text-purple-700',
-  SUPPORT: 'bg-orange-100 text-orange-700',
-  BILLING: 'bg-cyan-100 text-cyan-700',
-};
-const PRIORITY_COLORS: Record<string, string> = {
-  NORMAL: 'bg-gray-100 text-gray-600',
+
+const priorityColors: Record<string, string> = {
   HIGH: 'bg-red-100 text-red-700',
+  NORMAL: 'bg-slate-100 text-slate-600',
 };
 
-const STATUSES = ['', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'];
-const TYPES = ['', 'INSTALLATION', 'SUPPORT', 'BILLING'];
+const typeColors: Record<string, string> = {
+  INSTALLATION: 'bg-cyan-100 text-cyan-700',
+  SUPPORT: 'bg-purple-100 text-purple-700',
+  BILLING: 'bg-orange-100 text-orange-700',
+};
 
 export default function TicketsPage() {
   const [search, setSearch] = useState('');
-  const [status, setStatus] = useState('');
-  const [type, setType] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [typeFilter, setTypeFilter] = useState('');
   const [page, setPage] = useState(1);
-  const debouncedSearch = useDebounce(search, 400);
-  const limit = 20;
 
-  const { data, isLoading } = useQuery({
-    queryKey: ['tickets', debouncedSearch, status, type, page],
+  const { data, isLoading } = useQuery<{ data: Ticket[]; total: number }>({
+    queryKey: ['tickets', search, statusFilter, typeFilter, page],
     queryFn: async () => {
-      const params = new URLSearchParams({ page: String(page), limit: String(limit) });
-      if (status) params.set('status', status);
-      if (type) params.set('type', type);
-      if (debouncedSearch) params.set('search', debouncedSearch);
+      const params = new URLSearchParams({ page: String(page), limit: '20' });
+      if (statusFilter) params.set('status', statusFilter);
+      if (typeFilter) params.set('type', typeFilter);
       const res = await api.get(`/api/v1/tickets?${params}`);
       return res.data;
     },
+    staleTime: 30_000,
   });
 
-  const tickets: Ticket[] = Array.isArray(data) ? data : (data?.data ?? data?.items ?? []);
-  const total = (data as any)?.meta?.total ?? (data as any)?.total ?? tickets.length;
+  const tickets = data?.data ?? [];
+  const total = data?.total ?? 0;
 
   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">Tickets</h1>
-          <p className="text-slate-500 text-sm mt-1">Support, installation, and billing issues</p>
+          <p className="text-slate-500 text-sm mt-1">{total} tickets</p>
         </div>
-        <Button style={{ backgroundColor: '#0891B2', color: 'white' }}>
-          <Plus size={16} className="mr-2" />New Ticket
-        </Button>
+        <button
+          className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white"
+          style={{ backgroundColor: '#0891B2' }}
+        >
+          <Plus size={16} />
+          New Ticket
+        </button>
       </div>
 
-      {/* Filters */}
-      <div className="mb-4 flex flex-wrap gap-3">
-        <div className="relative flex-1 min-w-[200px] max-w-sm">
+      <div className="flex gap-3 mb-4 flex-wrap">
+        <div className="relative flex-1 min-w-[200px]">
           <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
           <Input placeholder="Search tickets..." className="pl-9" value={search}
             onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
         </div>
-        <div className="flex gap-1 flex-wrap">
-          {STATUSES.map(s => (
-            <button key={s} onClick={() => { setStatus(s); setPage(1); }}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
-                status === s ? 'bg-cyan-600 text-white border-cyan-600' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
-              }`}>{s || 'All Status'}</button>
+        <select className="border rounded-md px-3 py-2 text-sm bg-white"
+          value={typeFilter} onChange={(e) => { setTypeFilter(e.target.value); setPage(1); }}>
+          <option value="">All Types</option>
+          {['INSTALLATION', 'SUPPORT', 'BILLING'].map(t => (
+            <option key={t} value={t}>{t}</option>
           ))}
-        </div>
-        <div className="flex gap-1 flex-wrap">
-          {TYPES.map(t => (
-            <button key={t} onClick={() => { setType(t); setPage(1); }}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
-                type === t ? 'bg-slate-700 text-white border-slate-700' : 'bg-white text-slate-600 border-slate-200 hover:border-slate-300'
-              }`}>{t || 'All Type'}</button>
+        </select>
+        <select className="border rounded-md px-3 py-2 text-sm bg-white"
+          value={statusFilter} onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}>
+          <option value="">All Statuses</option>
+          {['OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'].map(s => (
+            <option key={s} value={s}>{s.replace('_', ' ')}</option>
           ))}
-        </div>
+        </select>
       </div>
 
-      <Card>
+      <Card className="border shadow-sm">
         <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Subject</TableHead>
-                <TableHead>Type</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Priority</TableHead>
-                <TableHead>Client</TableHead>
-                <TableHead>Assigned To</TableHead>
-                <TableHead>Created</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
-                Array.from({ length: 8 }).map((_, i) => (
-                  <TableRow key={i}>{Array.from({ length: 7 }).map((_, j) => (
-                    <TableCell key={j}><Skeleton className="h-4 w-full" /></TableCell>
-                  ))}</TableRow>
-                ))
-              ) : tickets.length === 0 ? (
-                <TableRow><TableCell colSpan={7} className="text-center py-12 text-slate-400">No tickets found</TableCell></TableRow>
-              ) : (
-                tickets.map((t) => (
-                  <TableRow key={t.id} className="hover:bg-slate-50">
-                    <TableCell className="font-medium max-w-[200px] truncate">{t.subject}</TableCell>
-                    <TableCell>
-                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${TYPE_COLORS[t.type] ?? 'bg-gray-100 text-gray-600'}`}>
-                        {t.type}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[t.status] ?? 'bg-gray-100 text-gray-600'}`}>
-                        {t.status.replace('_', ' ')}
-                      </span>
-                    </TableCell>
-                    <TableCell>
-                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${PRIORITY_COLORS[t.priority] ?? 'bg-gray-100'}`}>
-                        {t.priority}
-                      </span>
-                    </TableCell>
-                    <TableCell className="text-sm">
-                      {t.client ? `${t.client.firstName} ${t.client.lastName}` : '—'}
-                    </TableCell>
-                    <TableCell className="text-sm text-slate-500">
-                      {t.assignedTo ? `${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
-                    </TableCell>
-                    <TableCell className="text-xs text-slate-400">
-                      {format(new Date(t.createdAt), 'MMM d, yyyy')}
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
+          <div className="overflow-x-auto">
+            <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">Subject</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden md:table-cell">Client</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Type</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Priority</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500">Status</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden lg:table-cell">Assigned</th>
+                  <th className="text-left px-4 py-3 font-medium text-slate-500 hidden xl:table-cell">Created</th>
+                  <th className="px-4 py-3"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {isLoading
+                  ? Array.from({ length: 8 }).map((_, i) => (
+                      <tr key={i} className="border-b">
+                        {Array.from({ length: 8 }).map((_, j) => (
+                          <td key={j} className="px-4 py-3"><Skeleton className="h-4 w-16" /></td>
+                        ))}
+                      </tr>
+                    ))
+                  : tickets.map((t) => (
+                      <tr key={t.id} className="border-b hover:bg-slate-50 cursor-pointer transition-colors">
+                        <td className="px-4 py-3 text-slate-800 font-medium max-w-[200px] truncate">
+                          {t.subject}
+                        </td>
+                        <td className="px-4 py-3 text-slate-600 hidden md:table-cell">
+                          {t.client ? `${t.client.firstName} ${t.client.lastName}` : '—'}
+                          <div className="text-xs text-slate-400">{t.client?.accountNumber}</div>
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${typeColors[t.type] ?? 'bg-gray-100 text-gray-500'}`}>
+                            {t.type}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${priorityColors[t.priority] ?? 'bg-gray-100 text-gray-500'}`}>
+                            {t.priority}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3">
+                          <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[t.status] ?? 'bg-gray-100 text-gray-500'}`}>
+                            {t.status?.replace('_', ' ')}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-slate-600 hidden lg:table-cell">
+                          {t.assignedTo ? `${t.assignedTo.firstName} ${t.assignedTo.lastName}` : 'Unassigned'}
+                        </td>
+                        <td className="px-4 py-3 text-slate-500 hidden xl:table-cell">
+                          {t.createdAt ? format(new Date(t.createdAt), 'MMM d') : '—'}
+                        </td>
+                        <td className="px-4 py-3 text-slate-400"><ChevronRight size={16} /></td>
+                      </tr>
+                    ))}
+              </tbody>
+            </table>
+          </div>
+          {!isLoading && tickets.length === 0 && (
+            <div className="text-center py-12 text-slate-400">No tickets found</div>
+          )}
         </CardContent>
       </Card>
     </div>