import { Head, router, useForm } from '@inertiajs/react'; import { Plus, Save, Truck, X } from 'lucide-react'; import { useEffect, useState } from 'react'; import { PageHeader, SectionCard } from '@/components/crm/page-header'; import { Field } from '@/components/crm/form-field'; import { DataPagination, FilterBar, SearchInput, } from '@/components/crm/toolbar'; import { Button } from '@/components/ui/button'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { index as suppliersIndex, store, update, } from '@/routes/warehouse/suppliers'; import type { Paginated, SupplierRow } from '@/types'; export default function Suppliers({ suppliers, filters, can, }: { suppliers: Paginated; filters: { search: string | null }; can: { manage: boolean }; }) { const [search, setSearch] = useState(filters.search ?? ''); const [editing, setEditing] = useState(null); const [showCreate, setShowCreate] = useState(false); useEffect(() => { setSearch(filters.search ?? ''); }, [filters.search]); const applySearch = (value: string) => { router.get(suppliersIndex().url, value ? { search: value } : {}, { preserveState: true, preserveScroll: true, replace: true, }); }; return ( <>

Warehouse } title="Suppliers" description="Who the company buys from, with the account reference and lead time a buyer needs when stock runs short. Suppliers are deactivated rather than deleted." actions={ can.manage ? ( ) : undefined } /> {can.manage && showCreate ? ( setShowCreate(false)} /> ) : null}

Supplier Contact Lead time Products Status {can.manage ? ( ) : null} {suppliers.data.length === 0 ? ( No suppliers yet. ) : null} {suppliers.data.map((supplier) => editing === supplier.id ? ( setEditing(null) } /> ) : ( {supplier.name} {supplier.account_reference ? ( Account{' '} { supplier.account_reference } ) : null} {supplier.contact_name ? ( {supplier.contact_name} ) : null} {supplier.email ? ( {supplier.email} ) : null} {supplier.phone ? ( {supplier.phone} ) : null} {!supplier.contact_name && !supplier.email && !supplier.phone ? '—' : null} {supplier.lead_time_days === null ? '—' : `${supplier.lead_time_days} days`} {supplier.products_count} {supplier.is_active ? 'Active' : 'Inactive'} {can.manage ? ( ) : null} ), )}

); } function SupplierForm({ supplier, onDone, }: { supplier?: SupplierRow; onDone: () => void; }) { const form = useForm({ name: supplier?.name ?? '', contact_name: supplier?.contact_name ?? '', email: supplier?.email ?? '', phone: supplier?.phone ?? '', website: supplier?.website ?? '', account_reference: supplier?.account_reference ?? '', catalogue_url: supplier?.catalogue_url ?? '', lead_time_days: supplier?.lead_time_days === null || supplier?.lead_time_days === undefined ? '' : String(supplier.lead_time_days), notes: supplier?.notes ?? '', is_active: supplier?.is_active ?? true, }); const submit = () => { if (supplier) { form.patch(update(supplier.id).url, { preserveScroll: true, onSuccess: onDone, }); } else { form.post(store().url, { preserveScroll: true, onSuccess: () => { form.reset(); onDone(); }, }); } }; return (

{ event.preventDefault(); submit(); }} className="flex flex-col gap-3" >

form.setData('name', event.target.value) } required /> form.setData('contact_name', event.target.value) } /> form.setData('email', event.target.value) } /> form.setData('phone', event.target.value) } /> form.setData('website', event.target.value) } placeholder="https://" /> form.setData( 'account_reference', event.target.value, ) } /> form.setData('catalogue_url', event.target.value) } placeholder="https://" /> form.setData('lead_time_days', event.target.value) } /> form.setData('notes', event.target.value) } /> form.setData('is_active', checked === true) } /> Active

); }