{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "warehouse-inventory-grid", "title": "Warehouse Inventory Grid", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/warehouse-inventory-grid/WarehouseInventoryGrid.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertTriangle,\n ArrowDownToLine,\n ArrowRightLeft,\n ArrowUpRight,\n Barcode,\n Boxes,\n Building2,\n Check,\n CheckCircle2,\n ClipboardCheck,\n MoreHorizontal,\n Package,\n PackagePlus,\n Printer,\n QrCode,\n Search,\n Tag,\n Truck,\n Warehouse,\n X,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n} from '@/components/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type StockStatus = 'in_stock' | 'low_stock'\n\nexport interface WarehouseItem {\n id: string\n sku: string\n barcode: string\n name: string\n category: string\n palletId: string\n zone: string\n binLocation: string\n aisle: string\n rack: string\n shelf: string\n onHand: number\n allocated: number\n available: number\n reorderThreshold: number\n unitVolume: string\n status: StockStatus\n lastCycleCount: string\n}\n\nconst warehouseItems: WarehouseItem[] = [\n {\n id: 'wh-1',\n sku: '#SKU-84920',\n barcode: 'UPC-018249',\n name: 'Aero Runner 10.5 Matte Black',\n category: 'Footwear & Apparel',\n palletId: 'PLT-84920-04',\n zone: 'Zone A-West (High-Velocity)',\n binLocation: 'Aisle 04 · Rack B · Shelf 02',\n aisle: 'Aisle 04',\n rack: 'Rack B',\n shelf: 'Shelf 02',\n onHand: 450,\n allocated: 85,\n available: 365,\n reorderThreshold: 100,\n unitVolume: '0.04 m³',\n status: 'in_stock',\n lastCycleCount: '2 days ago',\n },\n {\n id: 'wh-2',\n sku: '#SKU-84921',\n barcode: 'UPC-029481',\n name: 'Technical Shell Jacket L',\n category: 'Outerwear',\n palletId: 'PLT-84921-02',\n zone: 'Zone A-North (Apparel Pick)',\n binLocation: 'Aisle 02 · Rack D · Shelf 01',\n aisle: 'Aisle 02',\n rack: 'Rack D',\n shelf: 'Shelf 01',\n onHand: 38,\n allocated: 30,\n available: 8,\n reorderThreshold: 50,\n unitVolume: '0.02 m³',\n status: 'low_stock',\n lastCycleCount: 'Yesterday',\n },\n {\n id: 'wh-3',\n sku: '#SKU-77210',\n barcode: 'UPC-093812',\n name: 'Heavy Duty Pallet Straps (50m)',\n category: 'Packaging & Materials',\n palletId: 'PLT-77210-09',\n zone: 'Zone B-Bulk (Industrial)',\n binLocation: 'Aisle 07 · Rack A · Shelf 04',\n aisle: 'Aisle 07',\n rack: 'Rack A',\n shelf: 'Shelf 04',\n onHand: 820,\n allocated: 140,\n available: 680,\n reorderThreshold: 200,\n unitVolume: '0.08 m³',\n status: 'in_stock',\n lastCycleCount: '5 days ago',\n },\n {\n id: 'wh-4',\n sku: '#SKU-99341',\n barcode: 'UPC-048201',\n name: 'Thermal Packaging Liner 24x24',\n category: 'Cold Chain Supplies',\n palletId: 'PLT-99341-01',\n zone: 'Zone C-Cold (Temp Controlled)',\n binLocation: 'Aisle 01 · Rack C · Shelf 03',\n aisle: 'Aisle 01',\n rack: 'Rack C',\n shelf: 'Shelf 03',\n onHand: 24,\n allocated: 18,\n available: 6,\n reorderThreshold: 60,\n unitVolume: '0.05 m³',\n status: 'low_stock',\n lastCycleCount: 'Today',\n },\n {\n id: 'wh-5',\n sku: '#SKU-65239',\n barcode: 'UPC-067194',\n name: 'Industrial Barcode Scanner BT',\n category: 'WMS Equipment',\n palletId: 'PLT-65239-03',\n zone: 'Zone D-Secure (High-Value)',\n binLocation: 'Aisle 09 · Rack A · Shelf 01',\n aisle: 'Aisle 09',\n rack: 'Rack A',\n shelf: 'Shelf 01',\n onHand: 115,\n allocated: 15,\n available: 100,\n reorderThreshold: 30,\n unitVolume: '0.01 m³',\n status: 'in_stock',\n lastCycleCount: '3 days ago',\n },\n {\n id: 'wh-6',\n sku: '#SKU-54018',\n barcode: 'UPC-081924',\n name: 'Anti-Static Bubble Wrap Roll',\n category: 'Packaging & Materials',\n palletId: 'PLT-54018-05',\n zone: 'Zone B-Bulk (Packaging Bay)',\n binLocation: 'Aisle 06 · Rack E · Shelf 02',\n aisle: 'Aisle 06',\n rack: 'Rack E',\n shelf: 'Shelf 02',\n onHand: 190,\n allocated: 45,\n available: 145,\n reorderThreshold: 75,\n unitVolume: '0.12 m³',\n status: 'in_stock',\n lastCycleCount: '1 week ago',\n },\n]\n\nexport function WarehouseInventoryGrid({ className, ...props }: React.HTMLAttributes) {\n const [facility, setFacility] = React.useState('bay-area')\n const [searchQuery, setSearchQuery] = React.useState('')\n const [categoryFilter, setCategoryFilter] = React.useState('all')\n const [statusFilter, setStatusFilter] = React.useState('all')\n const [zoneFilter, setZoneFilter] = React.useState('all')\n\n const [drawerOpen, setDrawerOpen] = React.useState(false)\n const [drawerMode, setDrawerMode] = React.useState<'transfer' | 'receive'>('transfer')\n const [selectedItem, setSelectedItem] = React.useState(null)\n\n const [transferDestination, setTransferDestination] = React.useState('bin-dest-1')\n const [transferQty, setTransferQty] = React.useState(50)\n const [transferPalletId, setTransferPalletId] = React.useState('PLT-84920-04')\n const [transferReason, setTransferReason] = React.useState('reslotting')\n\n const [receivePo, setReceivePo] = React.useState('po-8910')\n const [receiveSku, setReceiveSku] = React.useState('SKU-84920')\n const [receiveQty, setReceiveQty] = React.useState(250)\n const [receiveBin, setReceiveBin] = React.useState('bay-02')\n\n const [actionFeedback, setActionFeedback] = React.useState(null)\n\n const filteredItems = React.useMemo(() => {\n return warehouseItems.filter((item) => {\n const q = searchQuery.trim().toLowerCase()\n const matchesSearch =\n !q ||\n item.name.toLowerCase().includes(q) ||\n item.sku.toLowerCase().includes(q) ||\n item.barcode.toLowerCase().includes(q) ||\n item.binLocation.toLowerCase().includes(q) ||\n item.category.toLowerCase().includes(q)\n\n const matchesCategory = categoryFilter === 'all' || item.category === categoryFilter\n const matchesStatus = statusFilter === 'all' || item.status === statusFilter\n const matchesZone = zoneFilter === 'all' || item.zone.toLowerCase().includes(zoneFilter.toLowerCase())\n\n return matchesSearch && matchesCategory && matchesStatus && matchesZone\n })\n }, [searchQuery, categoryFilter, statusFilter, zoneFilter])\n\n const openTransferDrawer = (item?: WarehouseItem) => {\n const target = item || warehouseItems[0]\n setSelectedItem(target)\n setTransferPalletId(target.palletId)\n setTransferQty(Math.min(50, target.available))\n setDrawerMode('transfer')\n setDrawerOpen(true)\n }\n\n const openReceiveDrawer = () => {\n setDrawerMode('receive')\n setDrawerOpen(true)\n }\n\n const handleConfirmTransfer = () => {\n if (!selectedItem) return\n setActionFeedback(`Successfully relocated ${transferQty} units of ${selectedItem.sku} to destination bin.`)\n setDrawerOpen(false)\n setTimeout(() => {\n setActionFeedback(null)\n }, 4000)\n }\n\n const handleConfirmReceive = () => {\n setActionFeedback(`Received ${receiveQty} units for ${receivePo.toUpperCase()} staged into Bay 02.`)\n setDrawerOpen(false)\n setTimeout(() => {\n setActionFeedback(null)\n }, 4000)\n }\n\n const handlePrintBarcode = (item: WarehouseItem) => {\n setActionFeedback(`Barcode label queued for ${item.sku} (${item.barcode}) on Zebra Printer #2.`)\n setTimeout(() => {\n setActionFeedback(null)\n }, 3500)\n }\n\n const handleCycleCount = (item: WarehouseItem) => {\n setActionFeedback(`Cycle count logged and verified for bin ${item.binLocation}.`)\n setTimeout(() => {\n setActionFeedback(null)\n }, 3500)\n }\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

\n Warehouse Inventory & Bin Locations\n

\n \n \n WMS Live\n \n
\n

\n Real-time multi-bin locator, safety stock reorder thresholds, and pallet relocation manifests.\n

\n
\n\n
\n {/* Warehouse Facility Select */}\n \n\n \n\n \n
\n
\n\n {/* Notification / Action Feedback Banner */}\n {actionFeedback && (\n
\n
\n \n {actionFeedback}\n
\n setActionFeedback(null)}\n >\n \n \n
\n )}\n\n {/* 4 WMS Inventory Metric Cards */}\n
\n {/* Metric 1: Total SKUs */}\n \n \n \n Total SKUs in Stock\n \n
\n \n
\n \n \n
\n 1,842 SKUs\n
\n

\n \n \n +48 SKUs\n \n · 99.4% count accuracy\n

\n \n \n\n {/* Metric 2: Warehouse Capacity */}\n \n \n \n Warehouse Capacity\n \n
\n \n
\n \n \n
\n
84.5%
\n 12,400 / 14,800 pallets\n
\n \n

2,400 available slots in High-Bay & Bulk

\n \n \n\n {/* Metric 3: Low Stock Alerts */}\n \n \n \n Low Stock Alerts\n \n
\n \n
\n \n \n
\n
12
\n \n Action required\n \n
\n

Below safety stock threshold · 4 POs in transit

\n \n \n\n {/* Metric 4: Inbound Shipments Today */}\n \n \n \n Inbound Shipments Today\n \n
\n \n
\n \n \n
\n 4 POs arriving\n
\n

2,450 units expected by 16:00 · Bay 02 & 05

\n \n \n
\n\n {/* Inventory Filter & Search Toolbar */}\n \n \n
\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search SKU or product\"\n className=\"h-9 pl-9 text-xs sm:text-sm\"\n />\n
\n\n {/* Category Filter */}\n \n\n {/* Status Filter */}\n \n
\n\n
\n \n Showing {filteredItems.length} of{' '}\n {warehouseItems.length} inventory items\n \n
\n
\n \n\n \n {/* Inventory Table */}\n
\n \n \n \n SKU & Barcode\n Item & Category\n Bin / Rack Location\n On Hand\n Allocated\n Available (ATP)\n Reorder & Status\n Actions\n \n \n \n {filteredItems.map((item) => (\n \n {/* SKU & Barcode */}\n \n
\n
{item.sku}
\n
\n \n {item.barcode}\n
\n
\n \n\n {/* Item Name & Category */}\n \n
\n
{item.name}
\n
\n {item.category}\n ·\n {item.palletId}\n
\n
\n \n\n {/* Bin / Rack Location Badge */}\n \n
\n \n \n {item.binLocation}\n \n
{item.zone}
\n
\n \n\n {/* On Hand */}\n \n
\n {item.onHand.toLocaleString()}{' '}\n units\n
\n
{item.unitVolume}
\n \n\n {/* Allocated */}\n \n
\n {item.allocated.toLocaleString()}{' '}\n units\n
\n
\n {Math.round((item.allocated / item.onHand) * 100)}% reserved\n
\n \n\n {/* Available (ATP) */}\n \n
\n {item.available.toLocaleString()}{' '}\n units\n
\n
Ready to pick
\n \n\n {/* Reorder Threshold & Status */}\n \n
\n {item.status === 'in_stock' ? (\n \n \n In Stock\n \n ) : (\n \n \n Low Stock - Reorder\n \n )}\n
\n Min safety: {item.reorderThreshold} units\n
\n
\n \n\n {/* Actions Menu */}\n \n \n \n \n \n \n Bin Actions\n openTransferDrawer(item)}>\n \n Transfer / Relocate Bin\n \n handlePrintBarcode(item)}>\n \n Print Barcode Label\n \n handleCycleCount(item)}>\n \n Log Cycle Count\n \n \n \n \n Receive Restock Batch\n \n \n \n \n \n ))}\n\n {filteredItems.length === 0 && (\n \n \n No warehouse inventory items found matching your criteria.\n \n \n )}\n \n
\n
\n \n \n\n {/* Quick Transfer / Relocate Bin Drawer (Sheet) */}\n \n \n {/* Drawer Header */}\n \n
\n
\n {drawerMode === 'transfer' ? (\n \n ) : (\n \n )}\n
\n \n {drawerMode === 'transfer' ? 'Relocate Bin / Pallet Transfer' : 'Receive Inventory Inbound'}\n \n
\n \n {drawerMode === 'transfer'\n ? 'Relocate inventory pallets between rack coordinates and generate WMS transfer manifests.'\n : 'Process inbound freight shipments, inspect UPC barcodes, and assign initial staging bins.'}\n \n \n\n {/* Mode: Transfer Bin */}\n {drawerMode === 'transfer' && selectedItem && (\n
\n {/* Item Card Summary */}\n
\n
\n
\n
{selectedItem.sku}
\n
{selectedItem.name}
\n
{selectedItem.category}
\n
\n \n {selectedItem.palletId}\n \n
\n\n \n\n
\n
\n Current Bin:\n

{selectedItem.binLocation}

\n
\n
\n Available to Move:\n

\n {selectedItem.available} units\n

\n
\n
\n
\n\n {/* Transfer Form Fields */}\n
\n
\n \n \n
\n\n
\n
\n \n \n Max: {selectedItem.available} units\n \n
\n setTransferQty(Number(e.target.value))}\n className=\"text-xs tabular-nums sm:text-sm\"\n />\n
\n setTransferQty(Math.min(25, selectedItem.available))}\n >\n 25\n \n setTransferQty(Math.min(50, selectedItem.available))}\n >\n 50\n \n setTransferQty(Math.min(100, selectedItem.available))}\n >\n 100\n \n setTransferQty(selectedItem.available)}\n >\n All ({selectedItem.available})\n \n
\n
\n\n
\n \n setTransferPalletId(e.target.value)}\n className=\"font-mono text-xs\"\n />\n
\n\n
\n \n \n
\n\n {/* Verified Scanner / Operator Badge */}\n
\n
\n \n \n WMS Scanner Terminal\n \n TC57-OP44\n
\n

Operator: Marcus Vance (Badge #OP-921)

\n
\n
\n
\n )}\n\n {/* Mode: Receive Inbound PO */}\n {drawerMode === 'receive' && (\n
\n
\n \n \n
\n\n
\n \n setReceiveSku(e.target.value)}\n placeholder=\"#SKU-84920 or UPC code\"\n className=\"font-mono text-xs\"\n />\n
\n\n
\n \n setReceiveQty(Number(e.target.value))}\n className=\"text-xs tabular-nums\"\n />\n
\n\n
\n \n \n
\n\n
\n
\n \n Inbound Freight Scan Ready\n
\n

\n Pallet tags will be generated and printed automatically upon receipt confirmation.\n

\n
\n
\n )}\n\n {/* Drawer Footer */}\n \n \n \n \n {drawerMode === 'transfer' ? (\n \n ) : (\n \n )}\n \n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/WarehouseInventoryGrid.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/sheet.json", "https://uipkge.dev/r/react/table.json" ], "description": "WMS warehouse inventory and bin locator grid: facility selector, 4 summary metric cards for SKUs, capacity, low-stock triggers, and inbound shipments, searchable inventory table with multi-rack bin badges, on-hand/allocated/ATP counts, barcode scanning support, and slide-over bin relocation and receiving drawer.", "categories": [ "logistics", "app", "ecommerce", "dashboard" ] }