{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "warehouse-inventory-grid",
  "title": "Warehouse Inventory Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/warehouse-inventory-grid/WarehouseInventoryGrid.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\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-vue-next'\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 props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst facility = ref('bay-area')\nconst searchQuery = ref('')\nconst categoryFilter = ref('all')\nconst statusFilter = ref('all')\nconst zoneFilter = ref('all')\n\nconst drawerOpen = ref(false)\nconst drawerMode = ref<'transfer' | 'receive'>('transfer')\nconst selectedItem = ref<WarehouseItem | null>(null)\n\nconst transferDestination = ref('bin-dest-1')\nconst transferQty = ref(50)\nconst transferPalletId = ref('PLT-84920-04')\nconst transferReason = ref('reslotting')\n\nconst receivePo = ref('po-8910')\nconst receiveSku = ref('SKU-84920')\nconst receiveQty = ref(250)\nconst receiveBin = ref('bay-02')\n\nconst actionFeedback = ref<string | null>(null)\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\nconst filteredItems = computed(() => {\n  return warehouseItems.filter((item) => {\n    const q = searchQuery.value.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.value === 'all' || item.category === categoryFilter.value\n    const matchesStatus = statusFilter.value === 'all' || item.status === statusFilter.value\n    const matchesZone = zoneFilter.value === 'all' || item.zone.toLowerCase().includes(zoneFilter.value.toLowerCase())\n\n    return matchesSearch && matchesCategory && matchesStatus && matchesZone\n  })\n})\n\nfunction openTransferDrawer(item?: WarehouseItem) {\n  selectedItem.value = item || warehouseItems[0]\n  transferPalletId.value = selectedItem.value.palletId\n  transferQty.value = Math.min(50, selectedItem.value.available)\n  drawerMode.value = 'transfer'\n  drawerOpen.value = true\n}\n\nfunction openReceiveDrawer() {\n  drawerMode.value = 'receive'\n  drawerOpen.value = true\n}\n\nfunction handleConfirmTransfer() {\n  if (!selectedItem.value) return\n  actionFeedback.value = `Successfully relocated ${transferQty.value} units of ${selectedItem.value.sku} to destination bin.`\n  drawerOpen.value = false\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 4000)\n}\n\nfunction handleConfirmReceive() {\n  actionFeedback.value = `Received ${receiveQty.value} units for ${receivePo.value.toUpperCase()} staged into Bay 02.`\n  drawerOpen.value = false\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 4000)\n}\n\nfunction handlePrintBarcode(item: WarehouseItem) {\n  actionFeedback.value = `Barcode label queued for ${item.sku} (${item.barcode}) on Zebra Printer #2.`\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 3500)\n}\n\nfunction handleCycleCount(item: WarehouseItem) {\n  actionFeedback.value = `Cycle count logged and verified for bin ${item.binLocation}.`\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 3500)\n}\n</script>\n\n<template>\n  <div data-slot=\"warehouse-inventory-grid\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div class=\"bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-lg\">\n            <Warehouse class=\"size-4.5 shrink-0\" />\n          </div>\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n            Warehouse Inventory & Bin Locations\n          </h1>\n          <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1.5\">\n            <span class=\"bg-success size-1.5 shrink-0 animate-pulse rounded-full\" />\n            WMS Live\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs sm:text-sm\">\n          Real-time multi-bin locator, safety stock reorder thresholds, and pallet relocation manifests.\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <!-- Warehouse Facility Select -->\n        <Select v-model=\"facility\">\n          <SelectTrigger class=\"w-full sm:w-[320px]\">\n            <Building2 class=\"text-muted-foreground size-4 shrink-0\" />\n            <SelectValue placeholder=\"Select warehouse facility\" class=\"min-w-0 truncate\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"bay-area\">Bay Area Fulfillment Center #04 · Aisle A-D</SelectItem>\n            <SelectItem value=\"seattle\">Seattle Logistics Hub #02 · High-Bay B</SelectItem>\n            <SelectItem value=\"dallas\">Dallas Central Depot #01 · Mezzanine C</SelectItem>\n            <SelectItem value=\"newark\">Newark Cold Chain #03 · Zone Free-01</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Button variant=\"outline\" class=\"gap-1.5\" @click=\"openTransferDrawer()\">\n          <ArrowRightLeft class=\"size-4 shrink-0\" />\n          Relocate Bin\n        </Button>\n\n        <Button class=\"gap-1.5 shadow-xs\" @click=\"openReceiveDrawer\">\n          <PackagePlus class=\"size-4 shrink-0\" />\n          Receive Inventory\n        </Button>\n      </div>\n    </div>\n\n    <!-- Notification / Action Feedback Banner -->\n    <div\n      v-if=\"actionFeedback\"\n      class=\"border-primary/20 bg-primary/5 text-foreground flex items-center justify-between rounded-lg border px-4 py-3 text-sm shadow-xs transition-colors\"\n    >\n      <div class=\"flex items-center gap-2.5\">\n        <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n        <span class=\"text-xs font-medium sm:text-sm\">{{ actionFeedback }}</span>\n      </div>\n      <Button\n        variant=\"ghost\"\n        size=\"xs\"\n        class=\"h-6 w-6 shrink-0 p-0\"\n        aria-label=\"Dismiss notification\"\n        @click=\"actionFeedback = null\"\n      >\n        <X class=\"size-3.5 shrink-0\" />\n      </Button>\n    </div>\n\n    <!-- 4 WMS Inventory Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Metric 1: Total SKUs -->\n      <Card class=\"shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Total SKUs in Stock\n          </CardTitle>\n          <div class=\"bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md\">\n            <Package class=\"size-4 shrink-0\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n            1,842 <span class=\"text-muted-foreground text-sm font-normal\">SKUs</span>\n          </div>\n          <p class=\"text-muted-foreground flex items-center gap-1.5 pt-1 text-xs\">\n            <span class=\"text-success flex items-center font-medium\">\n              <ArrowUpRight class=\"mr-0.5 inline size-3 shrink-0\" />+48 SKUs\n            </span>\n            <span>· 99.4% count accuracy</span>\n          </p>\n        </CardContent>\n      </Card>\n\n      <!-- Metric 2: Warehouse Capacity -->\n      <Card class=\"shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Warehouse Capacity\n          </CardTitle>\n          <div class=\"bg-info/10 text-info flex size-8 shrink-0 items-center justify-center rounded-md\">\n            <Boxes class=\"size-4 shrink-0\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">84.5%</div>\n            <span class=\"text-muted-foreground text-xs tabular-nums\">12,400 / 14,800 pallets</span>\n          </div>\n          <Progress :model-value=\"84.5\" class=\"h-1.5\" />\n          <p class=\"text-muted-foreground text-xs\">2,400 available slots in High-Bay & Bulk</p>\n        </CardContent>\n      </Card>\n\n      <!-- Metric 3: Low Stock Alerts -->\n      <Card class=\"shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Low Stock Alerts\n          </CardTitle>\n          <div class=\"bg-warning/10 text-warning flex size-8 shrink-0 items-center justify-center rounded-md\">\n            <AlertTriangle class=\"size-4 shrink-0\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"text-warning text-warning text-2xl font-bold tracking-tight tabular-nums\">12</div>\n            <Badge wrap variant=\"warning\" class=\"text-xs font-normal\"> Action required </Badge>\n          </div>\n          <p class=\"text-muted-foreground pt-1 text-xs\">Below safety stock threshold · 4 POs in transit</p>\n        </CardContent>\n      </Card>\n\n      <!-- Metric 4: Inbound Shipments Today -->\n      <Card class=\"shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n            Inbound Shipments Today\n          </CardTitle>\n          <div class=\"bg-success/10 text-success flex size-8 shrink-0 items-center justify-center rounded-md\">\n            <Truck class=\"size-4 shrink-0\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n            4 <span class=\"text-muted-foreground text-sm font-normal\">POs arriving</span>\n          </div>\n          <p class=\"text-muted-foreground pt-1 text-xs\">2,450 units expected by 16:00 · Bay 02 & 05</p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Inventory Filter & Search Toolbar -->\n    <Card class=\"shadow-xs\">\n      <CardHeader class=\"border-border border-b pb-3\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"flex flex-1 flex-wrap items-center gap-2\">\n            <div class=\"relative w-full min-w-0 md:max-w-sm\">\n              <Search class=\"text-muted-foreground absolute top-1/2 left-3 size-4 shrink-0 -translate-y-1/2\" />\n              <Input v-model=\"searchQuery\" placeholder=\"Search SKU or product\" class=\"h-9 pl-9 text-xs sm:text-sm\" />\n            </div>\n\n            <!-- Category Filter -->\n            <Select v-model=\"categoryFilter\">\n              <SelectTrigger class=\"h-9 w-[160px] text-xs\">\n                <SelectValue placeholder=\"All Categories\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"all\">All Categories</SelectItem>\n                <SelectItem value=\"Footwear & Apparel\">Footwear & Apparel</SelectItem>\n                <SelectItem value=\"Outerwear\">Outerwear</SelectItem>\n                <SelectItem value=\"Packaging & Materials\">Packaging & Materials</SelectItem>\n                <SelectItem value=\"Cold Chain Supplies\">Cold Chain Supplies</SelectItem>\n                <SelectItem value=\"WMS Equipment\">WMS Equipment</SelectItem>\n              </SelectContent>\n            </Select>\n\n            <!-- Status Filter -->\n            <Select v-model=\"statusFilter\">\n              <SelectTrigger class=\"h-9 w-[140px] text-xs\">\n                <SelectValue placeholder=\"All Stock Status\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"all\">All Statuses</SelectItem>\n                <SelectItem value=\"in_stock\">In Stock</SelectItem>\n                <SelectItem value=\"low_stock\">Low Stock (Reorder)</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n            <span\n              >Showing <strong class=\"text-foreground tabular-nums\">{{ filteredItems.length }}</strong> of\n              {{ warehouseItems.length }} inventory items</span\n            >\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <!-- Inventory Table -->\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow class=\"hover:bg-transparent\">\n                <TableHead class=\"w-[180px] text-xs font-semibold\">SKU & Barcode</TableHead>\n                <TableHead class=\"min-w-[220px] text-xs font-semibold\">Item & Category</TableHead>\n                <TableHead class=\"min-w-[210px] text-xs font-semibold\">Bin / Rack Location</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">On Hand</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Allocated</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Available (ATP)</TableHead>\n                <TableHead class=\"min-w-[160px] text-xs font-semibold\">Reorder & Status</TableHead>\n                <TableHead class=\"w-[60px] text-right text-xs font-semibold\">Actions</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"item in filteredItems\" :key=\"item.id\" class=\"hover:bg-muted/40 transition-colors\">\n                <!-- SKU & Barcode -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground font-mono text-xs font-semibold\">\n                      {{ item.sku }}\n                    </div>\n                    <div class=\"text-muted-foreground flex items-center gap-1 font-mono text-xs\">\n                      <Barcode class=\"text-muted-foreground/70 size-3 shrink-0\" />\n                      <span>{{ item.barcode }}</span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Item Name & Category -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-foreground text-sm font-medium\">\n                      {{ item.name }}\n                    </div>\n                    <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                      <span>{{ item.category }}</span>\n                      <span>·</span>\n                      <span class=\"font-mono text-xs\">{{ item.palletId }}</span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Bin / Rack Location Badge -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <Badge wrap variant=\"outline\" class=\"bg-muted/30 gap-1.5 font-mono text-xs font-medium\">\n                      <Tag class=\"text-primary size-3 shrink-0\" />\n                      {{ item.binLocation }}\n                    </Badge>\n                    <div class=\"text-muted-foreground text-xs\">\n                      {{ item.zone }}\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- On Hand -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground text-sm font-semibold tabular-nums\">\n                    {{ item.onHand.toLocaleString() }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">units</span>\n                  </div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">\n                    {{ item.unitVolume }}\n                  </div>\n                </TableCell>\n\n                <!-- Allocated -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-muted-foreground text-sm font-medium tabular-nums\">\n                    {{ item.allocated.toLocaleString() }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">units</span>\n                  </div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">\n                    {{ Math.round((item.allocated / item.onHand) * 100) }}% reserved\n                  </div>\n                </TableCell>\n\n                <!-- Available (ATP) -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                    {{ item.available.toLocaleString() }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">units</span>\n                  </div>\n                  <div class=\"text-success text-xs font-medium\">Ready to pick</div>\n                </TableCell>\n\n                <!-- Reorder Threshold & Status -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <Badge v-if=\"item.status === 'in_stock'\" variant=\"success\" class=\"gap-1 text-xs whitespace-normal\">\n                      <CheckCircle2 class=\"size-3 shrink-0\" />\n                      In Stock\n                    </Badge>\n                    <Badge wrap v-else variant=\"warning\" class=\"gap-1 text-xs\">\n                      <AlertTriangle class=\"size-3 shrink-0\" />\n                      Low Stock - Reorder\n                    </Badge>\n                    <div class=\"text-muted-foreground text-xs tabular-nums\">\n                      Min safety: {{ item.reorderThreshold }} units\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Actions Menu -->\n                <TableCell class=\"py-3 text-right\">\n                  <DropdownMenu>\n                    <DropdownMenuTrigger as-child>\n                      <Button variant=\"ghost\" size=\"icon-sm\" class=\"size-8 shrink-0\">\n                        <MoreHorizontal class=\"size-4 shrink-0\" />\n                        <span class=\"sr-only\">Open menu</span>\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent align=\"end\" class=\"w-48\">\n                      <DropdownMenuLabel class=\"text-muted-foreground text-xs\">Bin Actions</DropdownMenuLabel>\n                      <DropdownMenuItem class=\"cursor-pointer gap-2\" @click=\"openTransferDrawer(item)\">\n                        <ArrowRightLeft class=\"text-muted-foreground size-4 shrink-0\" />\n                        Transfer / Relocate Bin\n                      </DropdownMenuItem>\n                      <DropdownMenuItem class=\"cursor-pointer gap-2\" @click=\"handlePrintBarcode(item)\">\n                        <Printer class=\"text-muted-foreground size-4 shrink-0\" />\n                        Print Barcode Label\n                      </DropdownMenuItem>\n                      <DropdownMenuItem class=\"cursor-pointer gap-2\" @click=\"handleCycleCount(item)\">\n                        <ClipboardCheck class=\"text-muted-foreground size-4 shrink-0\" />\n                        Log Cycle Count\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem class=\"text-warning cursor-pointer gap-2\" @click=\"openReceiveDrawer\">\n                        <PackagePlus class=\"size-4 shrink-0\" />\n                        Receive Restock Batch\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </TableCell>\n              </TableRow>\n\n              <TableRow v-if=\"filteredItems.length === 0\">\n                <TableCell colspan=\"8\" class=\"text-muted-foreground h-32 text-center text-sm\">\n                  No warehouse inventory items found matching your criteria.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Quick Transfer / Relocate Bin Drawer (Sheet) -->\n    <Sheet v-model:open=\"drawerOpen\">\n      <SheetContent side=\"right\" class=\"w-full space-y-6 overflow-y-auto p-6 sm:max-w-md\">\n        <!-- Drawer Header -->\n        <SheetHeader class=\"space-y-1 text-left\">\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-md\">\n              <ArrowRightLeft v-if=\"drawerMode === 'transfer'\" class=\"size-4 shrink-0\" />\n              <PackagePlus v-else class=\"size-4 shrink-0\" />\n            </div>\n            <SheetTitle class=\"text-lg font-bold\">\n              {{ drawerMode === 'transfer' ? 'Relocate Bin / Pallet Transfer' : 'Receive Inventory Inbound' }}\n            </SheetTitle>\n          </div>\n          <SheetDescription class=\"text-muted-foreground text-xs\">\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          </SheetDescription>\n        </SheetHeader>\n\n        <!-- Mode: Transfer Bin -->\n        <template v-if=\"drawerMode === 'transfer' && selectedItem\">\n          <!-- Item Card Summary -->\n          <div class=\"border-border bg-muted/20 space-y-3 rounded-lg border p-4\">\n            <div class=\"flex items-start justify-between gap-2\">\n              <div>\n                <div class=\"text-primary font-mono text-xs font-semibold\">{{ selectedItem.sku }}</div>\n                <div class=\"text-foreground text-sm font-medium\">{{ selectedItem.name }}</div>\n                <div class=\"text-muted-foreground text-xs\">{{ selectedItem.category }}</div>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">{{ selectedItem.palletId }}</Badge>\n            </div>\n\n            <Separator />\n\n            <div class=\"grid grid-cols-1 gap-2 text-xs sm:grid-cols-2\">\n              <div>\n                <span class=\"text-muted-foreground\">Current Bin:</span>\n                <p class=\"text-foreground mt-0.5 font-mono text-xs font-medium\">{{ selectedItem.binLocation }}</p>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Available to Move:</span>\n                <p class=\"text-success text-success mt-0.5 font-bold tabular-nums\">\n                  {{ selectedItem.available }} units\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Transfer Form Fields -->\n          <div class=\"space-y-4\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Destination Rack / Bin Location</label>\n              <Select v-model=\"transferDestination\">\n                <SelectTrigger class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Select target bin location\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"bin-dest-1\"\n                    >Aisle 01 · Rack A · Shelf 03 (Zone A-North · Standard Rack)</SelectItem\n                  >\n                  <SelectItem value=\"bin-dest-2\">Aisle 03 · Rack B · Shelf 01 (Zone A-West · Fast-Pick)</SelectItem>\n                  <SelectItem value=\"bin-dest-3\">Aisle 08 · Rack C · Shelf 04 (Zone B-Bulk · High-Bay)</SelectItem>\n                  <SelectItem value=\"bin-dest-4\">Aisle 05 · Rack D · Shelf 02 (Zone C-Cold · Cold Bay)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between\">\n                <label class=\"text-foreground text-xs font-medium\">Transfer Quantity (Units)</label>\n                <span class=\"text-muted-foreground text-xs tabular-nums\">Max: {{ selectedItem.available }} units</span>\n              </div>\n              <Input\n                v-model.number=\"transferQty\"\n                type=\"number\"\n                :min=\"1\"\n                :max=\"selectedItem.available\"\n                class=\"text-xs tabular-nums sm:text-sm\"\n              />\n              <div class=\"flex gap-1.5 pt-1\">\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"xs\"\n                  class=\"flex-1 text-xs\"\n                  @click=\"transferQty = Math.min(25, selectedItem.available)\"\n                >\n                  25\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"xs\"\n                  class=\"flex-1 text-xs\"\n                  @click=\"transferQty = Math.min(50, selectedItem.available)\"\n                >\n                  50\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"xs\"\n                  class=\"flex-1 text-xs\"\n                  @click=\"transferQty = Math.min(100, selectedItem.available)\"\n                >\n                  100\n                </Button>\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"xs\"\n                  class=\"flex-1 text-xs\"\n                  @click=\"transferQty = selectedItem.available\"\n                >\n                  All ({{ selectedItem.available }})\n                </Button>\n              </div>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Pallet ID / Batch Lot</label>\n              <Input v-model=\"transferPalletId\" class=\"font-mono text-xs\" />\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Transfer Reason</label>\n              <Select v-model=\"transferReason\">\n                <SelectTrigger class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Select transfer reason\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"reslotting\">Zone Re-slotting (Velocity Optimization)</SelectItem>\n                  <SelectItem value=\"consolidation\">Consolidation & Space Reclamation</SelectItem>\n                  <SelectItem value=\"staging\">Fast-Pick Outbound Wave Staging</SelectItem>\n                  <SelectItem value=\"rack-repair\">Damaged Rack Maintenance Relocation</SelectItem>\n                  <SelectItem value=\"quarantine\">Quarantine & Quality Audit Transfer</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <!-- Verified Scanner / Operator Badge -->\n            <div class=\"border-border bg-muted/40 space-y-1 rounded-md border p-3 text-xs\">\n              <div class=\"text-muted-foreground flex items-center justify-between\">\n                <span class=\"flex items-center gap-1.5\">\n                  <QrCode class=\"text-primary size-3.5 shrink-0\" />\n                  WMS Scanner Terminal\n                </span>\n                <span class=\"text-foreground font-mono font-medium\">TC57-OP44</span>\n              </div>\n              <p class=\"text-muted-foreground\">Operator: Marcus Vance (Badge #OP-921)</p>\n            </div>\n          </div>\n        </template>\n\n        <!-- Mode: Receive Inbound PO -->\n        <template v-else>\n          <div class=\"space-y-4\">\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Inbound Purchase Order</label>\n              <Select v-model=\"receivePo\">\n                <SelectTrigger class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Select purchase order\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"po-8910\">PO-2026-8910 · Acme Footwear Corp (500 units)</SelectItem>\n                  <SelectItem value=\"po-8914\">PO-2026-8914 · Pacific Packaging Ltd (1,200 units)</SelectItem>\n                  <SelectItem value=\"po-8919\">PO-2026-8919 · Thermal Supply Chain Co (750 units)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Target SKU / Barcode</label>\n              <Input v-model=\"receiveSku\" placeholder=\"#SKU-84920 or UPC code\" class=\"font-mono text-xs\" />\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Received Quantity (Units)</label>\n              <Input v-model.number=\"receiveQty\" type=\"number\" class=\"text-xs tabular-nums\" />\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <label class=\"text-foreground text-xs font-medium\">Assigned Inbound Staging Bay</label>\n              <Select v-model=\"receiveBin\">\n                <SelectTrigger class=\"w-full text-xs\">\n                  <SelectValue placeholder=\"Select staging bin\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"bay-02\">Staging Bay Inbound-02 (Aisle 00 · Cross-Dock)</SelectItem>\n                  <SelectItem value=\"bay-05\">Staging Bay Inbound-05 (Cold Holding)</SelectItem>\n                  <SelectItem value=\"bay-08\">Bulk Floor Staging Area B</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"text-foreground border-success/20 bg-success/5 space-y-1 rounded-md border p-3 text-xs\">\n              <div class=\"text-success flex items-center gap-1.5 font-medium\">\n                <Check class=\"size-3.5 shrink-0\" />\n                Inbound Freight Scan Ready\n              </div>\n              <p class=\"text-muted-foreground\">\n                Pallet tags will be generated and printed automatically upon receipt confirmation.\n              </p>\n            </div>\n          </div>\n        </template>\n\n        <!-- Drawer Footer -->\n        <SheetFooter class=\"border-border flex flex-col-reverse gap-2 border-t pt-4 sm:flex-row sm:justify-end\">\n          <SheetClose as-child>\n            <Button variant=\"outline\" class=\"w-full sm:w-auto\">Cancel</Button>\n          </SheetClose>\n          <Button v-if=\"drawerMode === 'transfer'\" class=\"w-full gap-1.5 sm:w-auto\" @click=\"handleConfirmTransfer\">\n            <ArrowRightLeft class=\"size-4 shrink-0\" />\n            Confirm Bin Transfer\n          </Button>\n          <Button v-else class=\"w-full gap-1.5 sm:w-auto\" @click=\"handleConfirmReceive\">\n            <ArrowDownToLine class=\"size-4 shrink-0\" />\n            Confirm Receipt\n          </Button>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/WarehouseInventoryGrid.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/sheet.json",
    "https://uipkge.dev/r/vue/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"
  ]
}