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>
   );
 }