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

{/* Header Section */}

Warehouse Inventory & Bin Locations

WMS Live

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

{/* Warehouse Facility Select */}

{/* Notification / Action Feedback Banner */} {actionFeedback && (

{actionFeedback}

)} {/* 4 WMS Inventory Metric Cards */}

{/* Metric 1: Total SKUs */} Total SKUs in Stock

1,842 SKUs

+48 SKUs · 99.4% count accuracy

{/* Metric 2: Warehouse Capacity */} Warehouse Capacity

84.5%

12,400 / 14,800 pallets

2,400 available slots in High-Bay & Bulk

{/* Metric 3: Low Stock Alerts */} Low Stock Alerts

Action required

Below safety stock threshold · 4 POs in transit

{/* Metric 4: Inbound Shipments Today */} Inbound Shipments Today

4 POs arriving

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

{/* Inventory Filter & Search Toolbar */}

setSearchQuery(e.target.value)} placeholder="Search SKU or product" className="h-9 pl-9 text-xs sm:text-sm" />

{/* Category Filter */} {/* Status Filter */}

Showing {filteredItems.length} of{' '} {warehouseItems.length} inventory items

{/* Inventory Table */}

SKU & Barcode Item & Category Bin / Rack Location On Hand Allocated Available (ATP) Reorder & Status Actions {filteredItems.map((item) => ( {/* SKU & Barcode */}

{item.sku}

{item.barcode}

{/* Item Name & Category */}

{item.name}

{item.category} · {item.palletId}

{/* Bin / Rack Location Badge */}

{item.binLocation}

{item.zone}

{/* On Hand */}

{item.onHand.toLocaleString()}{' '} units

{item.unitVolume}

{/* Allocated */}

{item.allocated.toLocaleString()}{' '} units

{Math.round((item.allocated / item.onHand) * 100)}% reserved

{/* Available (ATP) */}

{item.available.toLocaleString()}{' '} units

Ready to pick

{/* Reorder Threshold & Status */}

{item.status === 'in_stock' ? ( In Stock ) : ( Low Stock - Reorder )}

Min safety: {item.reorderThreshold} units

{/* Actions Menu */} Bin Actions openTransferDrawer(item)}> Transfer / Relocate Bin handlePrintBarcode(item)}> Print Barcode Label handleCycleCount(item)}> Log Cycle Count Receive Restock Batch ))} {filteredItems.length === 0 && ( No warehouse inventory items found matching your criteria. )}

{/* Quick Transfer / Relocate Bin Drawer (Sheet) */} {/* Drawer Header */}

{drawerMode === 'transfer' ? ( ) : ( )}

{drawerMode === 'transfer' ? 'Relocate Bin / Pallet Transfer' : 'Receive Inventory Inbound'}

{drawerMode === 'transfer' ? 'Relocate inventory pallets between rack coordinates and generate WMS transfer manifests.' : 'Process inbound freight shipments, inspect UPC barcodes, and assign initial staging bins.'} {/* Mode: Transfer Bin */} {drawerMode === 'transfer' && selectedItem && (

{/* Item Card Summary */}

{selectedItem.sku}

{selectedItem.name}

{selectedItem.category}

{selectedItem.palletId}

Current Bin:

{selectedItem.binLocation}

Available to Move:

{selectedItem.available} units

{/* Transfer Form Fields */}

Destination Rack / Bin Location

Transfer Quantity (Units) Max: {selectedItem.available} units

setTransferQty(Number(e.target.value))} className="text-xs tabular-nums sm:text-sm" />

Pallet ID / Batch Lot setTransferPalletId(e.target.value)} className="font-mono text-xs" />

Transfer Reason

{/* Verified Scanner / Operator Badge */}

WMS Scanner Terminal TC57-OP44

Operator: Marcus Vance (Badge #OP-921)

)} {/* Mode: Receive Inbound PO */} {drawerMode === 'receive' && (

Inbound Purchase Order

Target SKU / Barcode setReceiveSku(e.target.value)} placeholder="#SKU-84920 or UPC code" className="font-mono text-xs" />

Received Quantity (Units) setReceiveQty(Number(e.target.value))} className="text-xs tabular-nums" />

Assigned Inbound Staging Bay

Inbound Freight Scan Ready

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

)} {/* Drawer Footer */} {drawerMode === 'transfer' ? ( ) : ( )}

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/warehouse-inventory-grid/WarehouseInventoryGrid.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/WarehouseInventoryGrid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]