import { Head, router } from '@inertiajs/react'; import { useEffect, useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, useSort } from '@/components/sortable-header'; import AppLayout from '@/layouts/app-layout'; import { exportMethod, index } from '@/routes/admin/test-zip-codes'; type TestZipCode = { id: number; zip_code: string; utility: { id: number; name: string; code: string; state: { id: number; code: string; name: string; } | null; }; }; type Supplier = { id: number; name: string; }; type Props = { testZipCodes: TestZipCode[]; suppliers: Supplier[]; }; const breadcrumbs = [{ title: 'Test Zip Codes', href: index.url() }]; export default function TestZipCodes({ testZipCodes, suppliers }: Props) { const [supplierId, setSupplierId] = useState(''); useEffect(() => { router.get(index.url(), supplierId ? { supplier_id: supplierId } : {}, { preserveState: true, replace: true, }); }, [supplierId]); const { sorted, sortColumn, sortDirection, toggleSort } = useSort( testZipCodes, 'zip_code', 'asc', { utility: (item) => item.utility.name, state: (item) => item.utility.state?.code, }, ); return (

Test Zip Codes

Export
{sorted.map((t) => ( ))}
{t.zip_code} {t.utility.name} {t.utility.code} {t.utility.state?.name ?? '—'}
{testZipCodes.length === 0 && (
No test zip codes yet.
)}
); }