import { Head, Link, router } from '@inertiajs/react'; import { AlertTriangle, Boxes, PackageCheck, PackageX, Scale, } from 'lucide-react'; import { useEffect, useState } from 'react'; import { EmptyState, PageHeader, SectionCard, } from '@/components/crm/page-header'; import { KpiTile } from '@/components/crm/kpi-tile'; import { StockStatusBadge, VerificationBadge, } from '@/components/crm/stock-badge'; import { DataPagination, FilterBar, FilterField, SearchInput, TableCard, } from '@/components/crm/toolbar'; import { NativeSelect } from '@/components/crm/native-select'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { inventory } from '@/routes/warehouse'; import { show as productShow } from '@/routes/warehouse/products'; import type { InventoryRow, Paginated, WarehouseAbilities } from '@/types'; type Filters = { search: string | null; category: number | null; stock: string; }; type Props = { rows: Paginated; filters: Filters; metrics: { outOfStock: number; lowStock: number; activeProducts: number; totalUnits: number; stockValue: number | null; }; filterOptions: { categories: Array<{ value: number; label: string }>; stockStatuses: Array<{ value: string; label: string }>; }; can: WarehouseAbilities; }; export default function Inventory({ rows, filters, metrics, filterOptions, can, }: Props) { const [search, setSearch] = useState(filters.search ?? ''); useEffect(() => { setSearch(filters.search ?? ''); }, [filters.search]); const apply = (patch: Partial) => { const next = { ...filters, ...patch }; const params: Record = {}; if (next.search) params.search = next.search; if (next.category) params.category = String(next.category); if (next.stock && next.stock !== 'attention') params.stock = next.stock; router.get(inventory().url, params, { preserveState: true, preserveScroll: true, replace: true, }); }; return ( <>

Warehouse } title="Stock levels" description="What is on the shelf, what is already promised to a job, and what can still be picked. Available is derived from the other two; it is never typed in." actions={ } />

0 ? 'danger' : 'success'} /> 0 ? 'warning' : 'success'} /> {can.viewCosts ? ( ) : ( )}

{ event.preventDefault(); apply({ search }); }} > apply({ category: event.target.value ? Number(event.target.value) : null, }) } > {filterOptions.categories.map((category) => ( ))} apply({ stock: event.target.value }) } > {filterOptions.stockStatuses.map((status) => ( ))}

{rows.data.length === 0 ? ( ) : ( Product Provenance On hand Reserved Damaged Available Minimum Suggested order Status {rows.data.map((row) => ( {row.name} {row.sku} {row.storage_location ? ` · ${row.storage_location}` : ''} {row.physical_quantity} {row.reserved_quantity} {row.damaged_quantity} {row.available_quantity} {row.minimum_stock} {row.suggested_order_quantity > 0 ? row.suggested_order_quantity : '—'} ))}

)}

); }