import { Head, Link, router } from '@inertiajs/react'; import { ClipboardList, SearchX } from 'lucide-react'; import { useEffect, useState } from 'react'; import { EmptyState, PageHeader } from '@/components/crm/page-header'; import { FilterBar, FilterField, SearchInput, TableCard, } from '@/components/crm/toolbar'; import { NativeSelect } from '@/components/crm/native-select'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { DataPagination } from '@/components/crm/toolbar'; import { cn } from '@/lib/utils'; import { index as movementsIndex } from '@/routes/warehouse/movements'; import { show as productShow } from '@/routes/warehouse/products'; import type { Option, Paginated, StockMovementRow } from '@/types'; type Filters = { search: string | null; type: string | null; from: string | null; to: string | null; }; export default function Movements({ movements, filters, filterOptions, totals, }: { movements: Paginated; filters: Filters; filterOptions: { types: Option[] }; totals: { today: number; thisWeek: number }; }) { const [search, setSearch] = useState(filters.search ?? ''); const [from, setFrom] = useState(filters.from ?? ''); const [to, setTo] = useState(filters.to ?? ''); useEffect(() => { setSearch(filters.search ?? ''); setFrom(filters.from ?? ''); setTo(filters.to ?? ''); }, [filters.search, filters.from, filters.to]); const apply = (patch: Partial) => { const next = { ...filters, ...patch }; const params: Record = {}; if (next.search) params.search = next.search; if (next.type) params.type = next.type; if (next.from) params.from = next.from; if (next.to) params.to = next.to; router.get(movementsIndex().url, params, { preserveState: true, preserveScroll: true, replace: true, }); }; const hasFilters = Boolean( filters.search || filters.type || filters.from || filters.to, ); return ( <>

Warehouse } title="Stock ledger" description="Every change to a quantity, newest first: who moved it, when, how many, and why. Rows are never edited, so the shelf count can always be explained." actions={

{totals.today} {' '} today {totals.thisWeek} {' '} this week

} />

{ event.preventDefault(); apply({ search, from, to }); }} > router.get( movementsIndex().url, {}, { preserveState: true, replace: true, }, ) } > Clear ) : undefined } > apply({ type: event.target.value || null, }) } > {filterOptions.types.map((type) => ( ))} apply({ from: event.target.value || null }) } /> apply({ to: event.target.value || null }) } />

{movements.data.length === 0 ? ( ) : ( When Product Movement Change Balance Detail By {movements.data.map((movement) => ( {movement.occurred_at} {movement.product ? ( {movement.product.name} {movement.product.sku} ) : ( '—' )} {movement.type.label} 0 && 'text-success', movement.quantity < 0 && 'text-danger', )} > {movement.quantity > 0 ? '+' : ''} {movement.quantity} {movement.balance_after} {movement.reason ?? movement.reference ?? (movement.job ? `Job ${movement.job.job_number}` : '—')} {movement.user ?? 'System'} ))}

)}

); }