import { Head, router } from '@inertiajs/react'; import { useCallback, useMemo, useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { Checkbox } from '@/components/ui/checkbox'; import AppLayout from '@/layouts/app-layout'; import { index as zipCodesIndex } from '@/routes/admin/zip-codes'; import { sync as syncUtilities } from '@/routes/admin/zip-codes/utilities'; type State = { id: number; code: string; name: string; }; type ZipCode = { id: number; zipcode: string; place_name: string | null; state_id: number; state: State | null; }; type Utility = { id: number; name: string; code: string | null; }; type Props = { zipCode: ZipCode; utilities: Utility[]; assignedIds: number[]; }; const breadcrumbs = (zipCode: ZipCode) => [ { title: 'Zip Codes', href: zipCodesIndex.url() }, { title: zipCode.zipcode, href: '#' }, ]; export default function ZipCodeUtilities({ zipCode, utilities, assignedIds }: Props) { const [selectedIds, setSelectedIds] = useState>(new Set(assignedIds)); const [saving, setSaving] = useState(false); const toggle = useCallback((id: number) => { setSelectedIds((prev) => { const next = new Set(prev); if (next.has(id)) { next.delete(id); } else { next.add(id); } return next; }); }, []); const handleSave = useCallback(() => { setSaving(true); router.put( syncUtilities.url(zipCode.id), { utility_ids: Array.from(selectedIds) }, { onFinish: () => setSaving(false) }, ); }, [zipCode, selectedIds]); const sortedUtilities = useMemo( () => [...utilities].sort((a, b) => a.name.localeCompare(b.name)), [utilities], ); return (
{selectedIds.size} of {sortedUtilities.length} utilities assigned
{sortedUtilities.length === 0 ? (
No utilities found for this state.
) : ( sortedUtilities.map((u) => ( )) )}
); }