{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "warehouse-inventory-grid", "title": "Warehouse Inventory Grid", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/warehouse-inventory-grid/warehouse-inventory-grid.component.ts", "content": "// WMS warehouse inventory and bin locator grid: facility selector, 4 summary metric\n// cards, searchable inventory table with multi-rack bin badges, on-hand/allocated/ATP\n// counts, barcode scanning support, and a slide-over bin relocation/receiving drawer.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n AlertTriangle,\n ArrowDownToLine,\n ArrowRightLeft,\n ArrowUpRight,\n Barcode,\n Boxes,\n Building2,\n Check,\n CheckCircle2,\n ClipboardCheck,\n LucideAngularModule,\n MoreHorizontal,\n Package,\n PackagePlus,\n Printer,\n QrCode,\n Search,\n Tag,\n Truck,\n Warehouse,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n} from '@/ui/sheet/sheet.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-warehouse-inventory-grid, [ui-warehouse-inventory-grid]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiProgressComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSheetCloseComponent,\n UiSheetComponent,\n UiSheetContentComponent,\n UiSheetDescriptionComponent,\n UiSheetFooterComponent,\n UiSheetHeaderComponent,\n UiSheetTitleComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \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 \n \n \n \n Bay Area Fulfillment Center #04 · Aisle A-D\n Seattle Logistics Hub #02 · High-Bay B\n Dallas Central Depot #01 · Mezzanine C\n Newark Cold Chain #03 · Zone Free-01\n \n \n\n \n\n \n
\n
\n\n \n @if (actionFeedback()) {\n \n
\n \n {{ actionFeedback() }}\n
\n \n \n \n
\n }\n\n \n
\n \n
\n
\n

\n Total SKUs in Stock\n

\n
\n \n
\n
\n
\n
\n 1,842 SKUs\n
\n

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

\n
\n
\n\n \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 \n
\n
\n

\n Low Stock Alerts\n

\n
\n \n
\n
\n
\n
\n
12
\n Action required \n
\n

Below safety stock threshold · 4 POs in transit

\n
\n
\n\n \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 \n
\n
\n
\n
\n
\n \n \n
\n\n \n \n \n \n All Categories\n Footwear & Apparel\n Outerwear\n Packaging & Materials\n Cold Chain Supplies\n WMS Equipment\n \n \n\n \n \n \n \n All Statuses\n In Stock\n Low Stock (Reorder)\n \n \n
\n\n
\n Showing {{ filteredItems().length }} of\n {{ itemCount }} inventory items\n
\n
\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (item of filteredItems(); track item.id) {\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n }\n\n @if (filteredItems().length === 0) {\n \n \n \n }\n \n
SKU & BarcodeItem & CategoryBin / Rack LocationOn HandAllocatedAvailable (ATP)Reorder & StatusActions
\n
\n
\n {{ item.sku }}\n
\n
\n \n {{ item.barcode }}\n
\n
\n 		\n
\n
\n {{ item.name }}\n
\n
\n {{ item.category }}\n ·\n {{ item.palletId }}\n
\n
\n 		\n
\n \n \n {{ item.binLocation }}\n \n
\n {{ item.zone }}\n
\n
\n 		\n
\n {{ item.onHand.toLocaleString() }}\n units\n
\n
\n {{ item.unitVolume }}\n
\n 		\n
\n {{ item.allocated.toLocaleString() }}\n units\n
\n
{{ reservedPct(item) }}% reserved
\n 		\n
\n {{ item.available.toLocaleString() }}\n units\n
\n
Ready to pick
\n 		\n
\n @if (item.status === 'in_stock') {\n \n \n In Stock\n \n } @else {\n \n \n Low Stock - Reorder\n \n }\n
\n Min safety: {{ item.reorderThreshold }} units\n
\n
\n 		\n \n \n \n Open menu\n \n \n Bin Actions\n \n \n Transfer / Relocate Bin\n \n \n \n Print Barcode Label\n \n \n \n Log Cycle Count\n \n \n \n \n Receive Restock Batch\n \n \n \n
\n No warehouse inventory items found matching your criteria.\n
\n
\n
\n
\n\n \n
\n
\n \n
\n
\n
\n @if (drawerMode() === 'transfer') {\n \n } @else {\n \n }\n
\n

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

\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\n \n @if (drawerMode() === 'transfer') {\n @if (selectedItem(); as item) {\n \n
\n
\n
\n
{{ item.sku }}
\n
{{ item.name }}
\n
{{ item.category }}
\n
\n {{ item.palletId }}\n
\n\n \n\n
\n
\n Current Bin:\n

{{ item.binLocation }}

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

{{ item.available }} units

\n
\n
\n
\n\n \n
\n
\n \n \n \n \n Aisle 01 · Rack A · Shelf 03 (Zone A-North · Standard Rack)\n Aisle 03 · Rack B · Shelf 01 (Zone A-West · Fast-Pick)\n Aisle 08 · Rack C · Shelf 04 (Zone B-Bulk · High-Bay)\n Aisle 05 · Rack D · Shelf 02 (Zone C-Cold · Cold Bay)\n \n \n
\n\n
\n
\n \n Max: {{ item.available }} units\n
\n \n
\n \n 25\n \n \n 50\n \n \n 100\n \n \n All ({{ item.available }})\n \n
\n
\n\n
\n \n \n
\n\n
\n \n \n \n \n Zone Re-slotting (Velocity Optimization)\n Consolidation & Space Reclamation\n Fast-Pick Outbound Wave Staging\n Damaged Rack Maintenance Relocation\n Quarantine & Quality Audit Transfer\n \n \n
\n\n \n
\n
\n \n \n WMS Scanner Terminal\n \n TC57-OP44\n
\n

Operator: Marcus Vance (Badge #OP-921)

\n
\n
\n }\n } @else {\n \n
\n
\n \n \n \n \n PO-2026-8910 · Acme Footwear Corp (500 units)\n PO-2026-8914 · Pacific Packaging Ltd (1,200 units)\n PO-2026-8919 · Thermal Supply Chain Co (750 units)\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n
\n\n
\n \n \n \n \n Staging Bay Inbound-02 (Aisle 00 · Cross-Dock)\n Staging Bay Inbound-05 (Cold Holding)\n Bulk Floor Staging Area B\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 \n \n
\n \n
\n @if (drawerMode() === 'transfer') {\n \n } @else {\n \n }\n
\n
\n
\n \n `,\n})\nexport class UiWarehouseInventoryGridComponent {\n protected readonly AlertTriangle = AlertTriangle\n protected readonly ArrowDownToLine = ArrowDownToLine\n protected readonly ArrowRightLeft = ArrowRightLeft\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Barcode = Barcode\n protected readonly Boxes = Boxes\n protected readonly Building2 = Building2\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ClipboardCheck = ClipboardCheck\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Package = Package\n protected readonly PackagePlus = PackagePlus\n protected readonly Printer = Printer\n protected readonly QrCode = QrCode\n protected readonly Search = Search\n protected readonly Tag = Tag\n protected readonly Truck = Truck\n protected readonly Warehouse = Warehouse\n protected readonly X = X\n\n @Input('class') className?: string\n\n readonly facility = signal('bay-area')\n readonly searchQuery = signal('')\n readonly categoryFilter = signal('all')\n readonly statusFilter = signal('all')\n readonly zoneFilter = signal('all')\n\n readonly drawerOpen = signal(false)\n readonly drawerMode = signal<'transfer' | 'receive'>('transfer')\n readonly selectedItem = signal(null)\n\n readonly transferDestination = signal('bin-dest-1')\n readonly transferQty = signal(50)\n readonly transferPalletId = signal('PLT-84920-04')\n readonly transferReason = signal('reslotting')\n\n readonly receivePo = signal('po-8910')\n readonly receiveSku = signal('SKU-84920')\n readonly receiveQty = signal(250)\n readonly receiveBin = signal('bay-02')\n\n readonly actionFeedback = signal(null)\n private feedbackTimer: ReturnType | undefined\n\n readonly itemCount = warehouseItems.length\n\n readonly filteredItems = computed(() => {\n const q = this.searchQuery().trim().toLowerCase()\n const category = this.categoryFilter()\n const status = this.statusFilter()\n const zone = this.zoneFilter()\n return warehouseItems.filter((item) => {\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 const matchesCategory = category === 'all' || item.category === category\n const matchesStatus = status === 'all' || item.status === status\n const matchesZone = zone === 'all' || item.zone.toLowerCase().includes(zone.toLowerCase())\n return matchesSearch && matchesCategory && matchesStatus && matchesZone\n })\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n reservedPct(item: WarehouseItem): number {\n return Math.round((item.allocated / item.onHand) * 100)\n }\n\n setTransferQty(v: string): void {\n const n = Number(v)\n this.transferQty.set(Number.isFinite(n) ? n : 0)\n }\n\n setReceiveQty(v: string): void {\n const n = Number(v)\n this.receiveQty.set(Number.isFinite(n) ? n : 0)\n }\n\n setQuickQty(qty: number): void {\n const item = this.selectedItem()\n this.transferQty.set(item ? Math.min(qty, item.available) : qty)\n }\n\n openTransferDrawer(item?: WarehouseItem): void {\n const target = item ?? warehouseItems[0]!\n this.selectedItem.set(target)\n this.transferPalletId.set(target.palletId)\n this.transferQty.set(Math.min(50, target.available))\n this.drawerMode.set('transfer')\n this.drawerOpen.set(true)\n }\n\n openReceiveDrawer(): void {\n this.drawerMode.set('receive')\n this.drawerOpen.set(true)\n }\n\n private flashFeedback(message: string, ms: number): void {\n this.actionFeedback.set(message)\n clearTimeout(this.feedbackTimer)\n this.feedbackTimer = setTimeout(() => this.actionFeedback.set(null), ms)\n }\n\n handleConfirmTransfer(): void {\n const item = this.selectedItem()\n if (!item) return\n this.flashFeedback(`Successfully relocated ${this.transferQty()} units of ${item.sku} to destination bin.`, 4000)\n this.drawerOpen.set(false)\n }\n\n handleConfirmReceive(): void {\n this.flashFeedback(\n `Received ${this.receiveQty()} units for ${this.receivePo().toUpperCase()} staged into Bay 02.`,\n 4000,\n )\n this.drawerOpen.set(false)\n }\n\n handlePrintBarcode(item: WarehouseItem): void {\n this.flashFeedback(`Barcode label queued for ${item.sku} (${item.barcode}) on Zebra Printer #2.`, 3500)\n }\n\n handleCycleCount(item: WarehouseItem): void {\n this.flashFeedback(`Cycle count logged and verified for bin ${item.binLocation}.`, 3500)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/warehouse-inventory-grid/warehouse-inventory-grid.component.ts" }, { "path": "packages/registry-angular/blocks/warehouse-inventory-grid/index.ts", "content": "export {\n UiWarehouseInventoryGridComponent,\n type StockStatus,\n type WarehouseItem,\n} from './warehouse-inventory-grid.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/warehouse-inventory-grid/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/sheet.json", "https://uipkge.dev/r/angular/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" ] }