'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' ? ( ) : ( )}

) }