94 lines
3.4 KiB
TypeScript
94 lines
3.4 KiB
TypeScript
'use client';
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
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">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>
|
|
</div>
|
|
|
|
{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>
|
|
);
|
|
}
|