import { Head, Link } from '@inertiajs/react'; import { useState } from 'react'; import HeadingSmall from '@/components/heading-small'; import { SortableHeader, SortDirection } from '@/components/sortable-header'; import { useUserTimezone } from '@/hooks/use-user-timezone'; import AppLayout from '@/layouts/app-layout'; import { formatDateTime } from '@/lib/format-date'; type Supplier = { id: number; name: string; slug: string; }; type SupplierProduct = { id: number; external_id: string; status: string; updated_at: string; utility: { id: number; name: string } | null; state: { id: number; code: string } | null; }; type Utility = { id: number; name: string; }; type Props = { suppliers: Supplier[]; activeSupplierId: number | null; status: string; utilityId: number | null; utilities: Utility[]; products: SupplierProduct[]; }; type ProductSortKey = 'external_id' | 'utility' | 'state' | 'status' | 'updated_at'; function StatusBadge({ status }: { status: string }) { const colors: Record = { active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300', inactive: 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400', archived: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300', }; return ( {status} ); } export default function SupplierProducts({ suppliers, activeSupplierId, status, utilityId, utilities, products, }: Props) { const timezone = useUserTimezone(); const baseUrl = '/admin/supplier-products'; function buildUrl(params: Record) { const filtered = Object.entries(params).filter(([, v]) => v !== undefined && v !== ''); if (filtered.length === 0) return baseUrl; return `${baseUrl}?${new URLSearchParams(filtered.map(([k, v]) => [k, String(v)])).toString()}`; } const [productSortColumn, setProductSortColumn] = useState('updated_at'); const [productSortDirection, setProductSortDirection] = useState('desc'); function handleProductSort(column: string) { const key = column as ProductSortKey; if (key === productSortColumn) { setProductSortDirection((d: SortDirection) => (d === 'asc' ? 'desc' : 'asc')); } else { setProductSortColumn(key); setProductSortDirection('asc'); } } const sortedProducts = [...products].sort((a, b) => { let aVal: string | number | null; let bVal: string | number | null; switch (productSortColumn) { case 'utility': aVal = a.utility?.name ?? ''; bVal = b.utility?.name ?? ''; break; case 'state': aVal = a.state?.code ?? ''; bVal = b.state?.code ?? ''; break; default: aVal = a[productSortColumn] ?? ''; bVal = b[productSortColumn] ?? ''; } if (aVal < bVal) return productSortDirection === 'asc' ? -1 : 1; if (aVal > bVal) return productSortDirection === 'asc' ? 1 : -1; return 0; }); const breadcrumbs = [ { title: 'Supplier Products', href: activeSupplierId === null ? baseUrl : `${baseUrl}?supplier_id=${activeSupplierId}`, }, ]; return (

Supplier Products

{activeSupplierId === null ? (
Pick a supplier to view products.
) : (

Products ({products.length})

{sortedProducts.map((product) => ( ))}
{product.external_id} {product.utility?.name ?? '—'} {product.state?.code ?? '—'} {formatDateTime(product.updated_at, timezone)}
{products.length === 0 && (
No products found for this supplier.
)}
Refresh
)}
); }