import { Head, Link, router } from '@inertiajs/react'; import { Building2, Pencil, Plus, Trash2 } from 'lucide-react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import { EmptyState } from '@/components/empty-state'; import { PageHeader } from '@/components/page-header'; import { StatusBadge } from '@/components/status-badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { create, destroy, edit } from '@/routes/offices'; type Office = { id: string; name: string; address: string; city: string | null; state: string | null; phone: string | null; email: string | null; is_head_office: boolean; is_active: boolean; }; function Kpi({ label, value }: { label: string; value: string | number }) { return (

{label}

{value}

); } export default function OfficesIndex({ offices }: { offices: Office[] }) { const active = offices.filter((o) => o.is_active).length; const headOffice = offices.find((o) => o.is_head_office); return ( <>

Add office } />

{offices.length === 0 ? ( Add office } /> ) : ( Name Location Phone Status Actions {offices.map((office) => ( {office.name} {office.is_head_office && ( Head office )} {[office.city, office.state] .filter(Boolean) .join(', ') || '—'} {office.phone ?? '—'} {office.is_active ? 'Active' : 'Inactive'}

router.delete( destroy( office.id, ).url, ) } trigger={ } />

))}

)}

); }