import { Head, Link } from '@inertiajs/react'; import { AlertTriangle, Boxes, ClipboardList, Info, PackageCheck, PackageX, Tags, Truck, Warehouse, } from 'lucide-react'; import { Callout, EmptyState, PageHeader, SectionCard, } from '@/components/crm/page-header'; import { KpiTile } from '@/components/crm/kpi-tile'; import { StockStatusBadge } from '@/components/crm/stock-badge'; import { Button } from '@/components/ui/button'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { cn } from '@/lib/utils'; import { inventory } from '@/routes/warehouse'; import { index as movementsIndex } from '@/routes/warehouse/movements'; import { index as productsIndex, show as productShow, } from '@/routes/warehouse/products'; import { index as categoriesIndex } from '@/routes/warehouse/categories'; import { index as suppliersIndex } from '@/routes/warehouse/suppliers'; import type { ProductSummary, StockMovementRow, WarehouseAbilities, } from '@/types'; type Props = { metrics: { activeProducts: number; lowStock: number; outOfStock: number; categories: number; suppliers: number; stockValue: number | null; movementsThisWeek: number; }; lowStock: ProductSummary[]; recentMovements: StockMovementRow[]; byCategory: Array<{ id: number; name: string; code: string | null; products_count: number; }>; can: WarehouseAbilities; }; export default function WarehouseDashboard({ metrics, lowStock, recentMovements, byCategory, can, }: Props) { const largestCategory = Math.max( 1, ...byCategory.map((category) => category.products_count), ); return ( <>
Warehouse } title="Warehouse" description="The catalogue the company buys from, the stock it holds, and the ledger that explains every change." actions={ <> } /> {recentMovements.length === 0 && metrics.activeProducts > 0 ? ( These products are headings to fill in: no brand, model or quantity has been claimed. Open a product and record a receipt when the company's first delivery arrives, and the ledger starts from there. ) : null}
0 ? 'warning' : 'success'} href={`${inventory().url}?stock=low`} /> 0 ? 'danger' : 'success'} href={`${inventory().url}?stock=out`} /> {can.viewCosts ? ( ) : ( )}
0 ? 'warning' : 'success' } flush actions={ } > {lowStock.length === 0 && metrics.outOfStock === 0 ? ( ) : lowStock.length === 0 ? ( ) : (
Product Available Minimum Status {lowStock.map((product) => ( {product.name} {product.sku} {product.available_quantity} {product.minimum_stock} ))}
)}
{byCategory.length === 0 ? (

No products have a category yet.

) : (
    {byCategory.slice(0, 8).map((category) => (
  • {category.name} {category.products_count}
    • ))}
)}
{recentMovements.length === 0 ? (

Nothing has moved yet. Receiving stock from a product page writes the first line.

) : (
    {recentMovements .slice(0, 8) .map((movement) => (

  • {movement.product ?.name ?? 'Product'}

    {movement.type.label} ·{' '} {movement.occurred_at}

    0 && 'text-success', movement.quantity < 0 && 'text-danger', )} > {movement.quantity > 0 ? '+' : ''} {movement.quantity}
    • ))}
)}
); }