{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "inventory-reorder-forecast",
  "title": "Inventory Reorder Forecast",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/inventory-reorder-forecast/InventoryReorderForecast.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  AlertTriangle,\n  ArrowUpRight,\n  Boxes,\n  Building2,\n  CheckCircle2,\n  Clock,\n  DollarSign,\n  Download,\n  FileCheck,\n  PackageCheck,\n  PackagePlus,\n  Search,\n  TrendingUp,\n  X,\n  Zap,\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  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type StockHealthStatus = 'critical' | 'warning' | 'healthy'\n\nexport interface ReorderItem {\n  id: string\n  sku: string\n  name: string\n  category: string\n  supplier: string\n  onHandStock: number\n  safetyStockThreshold: number\n  dailySalesVelocity: number\n  velocityTrend: number\n  daysOfInventoryRemaining: number\n  supplierLeadTimeDays: number\n  recommendedReorderQty: number\n  unitCost: number\n  estimatedPoCost: number\n  status: StockHealthStatus\n}\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst facility = ref('global-fulfillment')\nconst searchQuery = ref('')\nconst categoryFilter = ref('all')\nconst statusFilter = ref('all')\n\nconst createPoDialogOpen = ref(false)\nconst bulkPoDialogOpen = ref(false)\nconst selectedSkuItem = ref<ReorderItem | null>(null)\nconst customReorderQty = ref<number>(250)\nconst selectedShippingMethod = ref('standard-freight')\n\nconst actionFeedback = ref<string | null>(null)\n\nconst reorderItems: ReorderItem[] = [\n  {\n    id: 'sku-1',\n    sku: 'SKU-RN-105-BLK',\n    name: 'Aero Minimalist Runner 10.5',\n    category: 'Footwear',\n    supplier: 'Apex Footwear Ltd',\n    onHandStock: 42,\n    safetyStockThreshold: 80,\n    dailySalesVelocity: 12.4,\n    velocityTrend: 14.2,\n    daysOfInventoryRemaining: 3.4,\n    supplierLeadTimeDays: 14,\n    recommendedReorderQty: 250,\n    unitCost: 50.0,\n    estimatedPoCost: 12500.0,\n    status: 'critical',\n  },\n  {\n    id: 'sku-2',\n    sku: 'SKU-PK-082-SLT',\n    name: 'Technical Shell Parka L',\n    category: 'Outerwear',\n    supplier: 'Nordic Outerwear Co',\n    onHandStock: 18,\n    safetyStockThreshold: 50,\n    dailySalesVelocity: 4.5,\n    velocityTrend: 8.5,\n    daysOfInventoryRemaining: 4.0,\n    supplierLeadTimeDays: 21,\n    recommendedReorderQty: 120,\n    unitCost: 145.0,\n    estimatedPoCost: 17400.0,\n    status: 'critical',\n  },\n  {\n    id: 'sku-3',\n    sku: 'SKU-HD-419-PRO',\n    name: 'Pro Studio Headphones',\n    category: 'Electronics',\n    supplier: 'Sonic Acoustics Inc',\n    onHandStock: 65,\n    safetyStockThreshold: 85,\n    dailySalesVelocity: 8.2,\n    velocityTrend: 5.0,\n    daysOfInventoryRemaining: 7.9,\n    supplierLeadTimeDays: 10,\n    recommendedReorderQty: 100,\n    unitCost: 110.0,\n    estimatedPoCost: 11000.0,\n    status: 'warning',\n  },\n  {\n    id: 'sku-4',\n    sku: 'SKU-CD-904-BRN',\n    name: 'Leather Cardholder',\n    category: 'Accessories',\n    supplier: 'Tuscan Goods Ltd',\n    onHandStock: 88,\n    safetyStockThreshold: 100,\n    dailySalesVelocity: 6.0,\n    velocityTrend: 2.1,\n    daysOfInventoryRemaining: 14.7,\n    supplierLeadTimeDays: 12,\n    recommendedReorderQty: 150,\n    unitCost: 32.0,\n    estimatedPoCost: 4800.0,\n    status: 'warning',\n  },\n  {\n    id: 'sku-5',\n    sku: 'SKU-WC-331-WHT',\n    name: 'Wireless Charger Mat',\n    category: 'Electronics',\n    supplier: 'Volt Innovations',\n    onHandStock: 340,\n    safetyStockThreshold: 120,\n    dailySalesVelocity: 8.1,\n    velocityTrend: -1.4,\n    daysOfInventoryRemaining: 42.0,\n    supplierLeadTimeDays: 7,\n    recommendedReorderQty: 100,\n    unitCost: 25.5,\n    estimatedPoCost: 2550.0,\n    status: 'healthy',\n  },\n]\n\nconst filteredItems = computed(() => {\n  return reorderItems.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.category.toLowerCase().includes(q) ||\n      item.supplier.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\n    return matchesSearch && matchesCategory && matchesStatus\n  })\n})\n\nconst criticalAndWarningItems = computed(() => {\n  return reorderItems.filter((item) => item.status === 'critical' || item.status === 'warning')\n})\n\nconst totalBulkPoCost = computed(() => {\n  return reorderItems.reduce((acc, item) => acc + item.estimatedPoCost, 0)\n})\n\nconst dialogCalculatedCost = computed(() => {\n  if (!selectedSkuItem.value) return 0\n  return customReorderQty.value * selectedSkuItem.value.unitCost\n})\n\nfunction openCreatePoDialog(item: ReorderItem) {\n  selectedSkuItem.value = item\n  customReorderQty.value = item.recommendedReorderQty\n  selectedShippingMethod.value = 'standard-freight'\n  createPoDialogOpen.value = true\n}\n\nfunction handleConfirmCreatePo() {\n  if (!selectedSkuItem.value) return\n  const poNumber = `PO-2026-${Math.floor(1000 + Math.random() * 9000)}`\n  actionFeedback.value = `Draft ${poNumber} created for ${selectedSkuItem.value.sku} (${customReorderQty.value} units · $${dialogCalculatedCost.value.toLocaleString('en-US', { minimumFractionDigits: 2 })}) routed to ${selectedSkuItem.value.supplier}.`\n  createPoDialogOpen.value = false\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 4500)\n}\n\nfunction openBulkPoDialog() {\n  bulkPoDialogOpen.value = true\n}\n\nfunction handleConfirmBulkPos() {\n  actionFeedback.value = `Successfully generated 4 Purchase Orders (Total $48,250.00) for Global Fulfillment Center replenishment.`\n  bulkPoDialogOpen.value = false\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 5000)\n}\n\nfunction handleExportPlan() {\n  actionFeedback.value = `Replenishment forecast plan for ${reorderItems.length} SKUs exported successfully as CSV.`\n  setTimeout(() => {\n    actionFeedback.value = null\n  }, 4000)\n}\n</script>\n\n<template>\n  <div data-slot=\"inventory-reorder-forecast\" :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 items-center justify-center rounded-lg\">\n            <Boxes class=\"size-4.5\" />\n          </div>\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n            Inventory Demand & Reorder Forecast\n          </h1>\n          <Badge variant=\"warning\" class=\"border-warning/30 bg-warning/10 text-warning gap-1.5\">\n            <span class=\"bg-warning size-1.5 animate-pulse rounded-full\" />\n            4 SKUs Need Reorder\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs sm:text-sm\">\n          Multi-channel supply chain replenishment planner with lead-time demand forecasting and automated purchase\n          order generation.\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <!-- Facility Selector -->\n        <Select v-model=\"facility\">\n          <SelectTrigger class=\"w-full sm:w-[280px]\">\n            <Building2 class=\"text-muted-foreground size-4 shrink-0\" />\n            <SelectValue placeholder=\"Select fulfillment facility\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"global-fulfillment\">Global Fulfillment Center</SelectItem>\n            <SelectItem value=\"na-west-hub\">North America West Distribution Hub</SelectItem>\n            <SelectItem value=\"eu-central-dc\">European Central Logistics Depot</SelectItem>\n            <SelectItem value=\"apac-regional\">APAC Regional Hub · Singapore</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <!-- Export Plan Button -->\n        <Button aria-label=\"Download attachment\" variant=\"outline\" class=\"gap-1.5 shadow-xs\" @click=\"handleExportPlan\">\n          <Download class=\"size-4\" />\n          Export Replenishment Plan\n        </Button>\n\n        <!-- Primary Action: Generate Bulk POs -->\n        <Button class=\"gap-1.5 shadow-xs\" @click=\"openBulkPoDialog\">\n          <PackagePlus class=\"size-4\" />\n          Generate Bulk POs\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 p-0\"\n        aria-label=\"Dismiss notification\"\n        @click=\"actionFeedback = null\"\n      >\n        <X class=\"size-3.5\" />\n      </Button>\n    </div>\n\n    <!-- 4 Forecasting KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Metric 1: Critical Reorder 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            Critical Reorder SKUs\n          </CardTitle>\n          <div class=\"bg-warning/10 text-warning flex size-8 items-center justify-center rounded-md\">\n            <AlertTriangle class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex items-baseline gap-2\">\n            <div class=\"text-warning text-warning text-2xl font-bold tracking-tight tabular-nums\">\n              4 <span class=\"text-muted-foreground text-sm font-normal\">SKUs</span>\n            </div>\n            <Badge variant=\"warning\" class=\"text-xs font-normal\">Action Required</Badge>\n          </div>\n          <p class=\"text-muted-foreground pt-1 text-xs\">Below safety threshold · 2 in urgent stockout zone</p>\n        </CardContent>\n      </Card>\n\n      <!-- Metric 2: Estimated Stockout Days -->\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            Estimated Stockout Days\n          </CardTitle>\n          <div class=\"bg-destructive/10 text-destructive flex size-8 items-center justify-center rounded-md\">\n            <Clock class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"flex items-baseline gap-2\">\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n              6.4 <span class=\"text-muted-foreground text-sm font-normal\">Days</span>\n            </div>\n            <Badge variant=\"destructive\" class=\"text-xs font-normal\">Critical Risk</Badge>\n          </div>\n          <p class=\"text-muted-foreground pt-1 text-xs\">6.4 Days until stockout on top SKU · Urgent PO needed</p>\n        </CardContent>\n      </Card>\n\n      <!-- Metric 3: Suggested Purchase Order Value -->\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            Suggested PO Value\n          </CardTitle>\n          <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n            <DollarSign class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$48,250.00</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              <Zap class=\"mr-1 inline size-3\" />4 replenishment POs\n            </span>\n            <span>· 620 units total</span>\n          </p>\n        </CardContent>\n      </Card>\n\n      <!-- Metric 4: Inventory Turnover Rate -->\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            Inventory Turnover Rate\n          </CardTitle>\n          <div class=\"bg-success/10 text-success flex size-8 items-center justify-center rounded-md\">\n            <TrendingUp class=\"size-4\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-1\">\n          <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n            8.4x <span class=\"text-muted-foreground text-sm font-normal\">/ year</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\" />+1.2x\n            </span>\n            <span>vs industry benchmark (7.2x)</span>\n          </p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Reorder Demand Forecast Table Toolbar & Card -->\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 max-w-sm\">\n              <Search class=\"text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2\" />\n              <Input\n                v-model=\"searchQuery\"\n                placeholder=\"Search SKU, product name, supplier...\"\n                class=\"h-9 pl-9 text-xs sm:text-sm\"\n              />\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\">Footwear</SelectItem>\n                <SelectItem value=\"Outerwear\">Outerwear</SelectItem>\n                <SelectItem value=\"Electronics\">Electronics</SelectItem>\n                <SelectItem value=\"Accessories\">Accessories</SelectItem>\n              </SelectContent>\n            </Select>\n\n            <!-- Status Filter -->\n            <Select v-model=\"statusFilter\">\n              <SelectTrigger class=\"h-9 w-[170px] text-xs\">\n                <SelectValue placeholder=\"All Health Status\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"all\">All Stock Status</SelectItem>\n                <SelectItem value=\"critical\">Critical Stockout (&lt;7d)</SelectItem>\n                <SelectItem value=\"warning\">Reorder Warning (7-15d)</SelectItem>\n                <SelectItem value=\"healthy\">Healthy Stock (&gt;30d)</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              {{ reorderItems.length }} forecast SKUs\n            </span>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <!-- Demand Table -->\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow class=\"hover:bg-transparent\">\n                <TableHead class=\"w-[240px] text-xs font-semibold\">SKU Identifier & Product</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Current On-Hand</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Sales Velocity</TableHead>\n                <TableHead class=\"min-w-[150px] text-xs font-semibold\">Days Remaining</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Supplier Lead Time</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Recommended Qty</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Est. PO Cost</TableHead>\n                <TableHead class=\"w-[120px] text-right text-xs font-semibold\">Quick Action</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 Identifier & Product Name -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <div class=\"text-foreground font-mono text-xs font-semibold\">\n                      {{ item.sku }}\n                    </div>\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>{{ item.supplier }}</span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Current On-Hand Stock -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground text-sm font-semibold tabular-nums\">\n                    {{ item.onHandStock.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                    Safety: {{ item.safetyStockThreshold }} units\n                  </div>\n                </TableCell>\n\n                <!-- Average Daily Sales Velocity -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground text-sm font-semibold tabular-nums\">\n                    {{ item.dailySalesVelocity.toFixed(1) }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">units/day</span>\n                  </div>\n                  <div\n                    class=\"text-xs font-medium tabular-nums\"\n                    :class=\"item.velocityTrend >= 0 ? 'text-success' : 'text-destructive'\"\n                  >\n                    {{ item.velocityTrend >= 0 ? '+' : '' }}{{ item.velocityTrend.toFixed(1) }}% 7d\n                  </div>\n                </TableCell>\n\n                <!-- Days of Inventory Remaining Badge -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1.5\">\n                    <Badge\n                      v-if=\"item.status === 'critical'\"\n                      variant=\"destructive\"\n                      class=\"gap-1 font-mono text-xs font-semibold\"\n                    >\n                      <AlertTriangle class=\"size-3\" />\n                      {{ item.daysOfInventoryRemaining.toFixed(1) }} Days\n                    </Badge>\n                    <Badge\n                      v-else-if=\"item.status === 'warning'\"\n                      variant=\"warning\"\n                      class=\"text-warning gap-1 font-mono text-xs font-semibold\"\n                    >\n                      <Clock class=\"size-3\" />\n                      {{ item.daysOfInventoryRemaining.toFixed(1) }} Days\n                    </Badge>\n                    <Badge v-else variant=\"success\" class=\"gap-1 font-mono text-xs font-semibold\">\n                      <CheckCircle2 class=\"size-3\" />\n                      {{ item.daysOfInventoryRemaining.toFixed(1) }} Days\n                    </Badge>\n                    <div class=\"text-muted-foreground text-xs\">\n                      {{\n                        item.status === 'critical'\n                          ? 'Stockout before delivery'\n                          : item.status === 'warning'\n                            ? 'Reorder buffer thin'\n                            : 'Healthy inventory level'\n                      }}\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Supplier Lead Time -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                    {{ item.supplierLeadTimeDays }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">Days</span>\n                  </div>\n                  <div class=\"text-muted-foreground text-xs\">Mfg & Freight</div>\n                </TableCell>\n\n                <!-- Recommended Reorder Qty -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                    {{ item.recommendedReorderQty }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">units</span>\n                  </div>\n                  <div class=\"text-muted-foreground text-xs\">Optimal batch</div>\n                </TableCell>\n\n                <!-- Estimated PO Cost -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"text-foreground font-mono text-sm font-bold tabular-nums\">\n                    ${{ item.estimatedPoCost.toLocaleString('en-US', { minimumFractionDigits: 2 }) }}\n                  </div>\n                  <div class=\"text-muted-foreground text-xs tabular-nums\">${{ item.unitCost.toFixed(2) }} / unit</div>\n                </TableCell>\n\n                <!-- Quick Action Button -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"flex items-center justify-end gap-1.5\">\n                    <Button\n                      size=\"sm\"\n                      class=\"gap-1 shadow-xs\"\n                      :variant=\"item.status === 'critical' ? 'default' : 'outline'\"\n                      @click=\"openCreatePoDialog(item)\"\n                    >\n                      <PackageCheck class=\"size-3.5\" />\n                      Create PO\n                    </Button>\n                  </div>\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 inventory forecast items match your current filter criteria.\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Create Purchase Order Draft Dialog -->\n    <Dialog v-model:open=\"createPoDialogOpen\">\n      <DialogContent class=\"sm:max-w-lg\">\n        <DialogHeader>\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n              <PackageCheck class=\"size-4\" />\n            </div>\n            <DialogTitle class=\"text-lg font-bold\">Draft Purchase Order</DialogTitle>\n          </div>\n          <DialogDescription class=\"text-muted-foreground text-xs\">\n            Review demand velocity, set purchase order quantity, and dispatch replenishment order to supplier.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div v-if=\"selectedSkuItem\" class=\"space-y-4 py-2\">\n          <!-- SKU Summary Banner -->\n          <div class=\"border-border bg-muted/20 space-y-3 rounded-lg border p-3.5\">\n            <div class=\"flex items-start justify-between gap-2\">\n              <div>\n                <div class=\"text-primary font-mono text-xs font-semibold\">{{ selectedSkuItem.sku }}</div>\n                <div class=\"text-foreground text-sm font-semibold\">{{ selectedSkuItem.name }}</div>\n                <div class=\"text-muted-foreground text-xs\">\n                  {{ selectedSkuItem.supplier }} · {{ selectedSkuItem.category }}\n                </div>\n              </div>\n              <Badge\n                :variant=\"\n                  selectedSkuItem.status === 'critical'\n                    ? 'destructive'\n                    : selectedSkuItem.status === 'warning'\n                      ? 'warning'\n                      : 'success'\n                \"\n                class=\"text-xs\"\n              >\n                {{ selectedSkuItem.daysOfInventoryRemaining }} Days Stock Left\n              </Badge>\n            </div>\n\n            <Separator />\n\n            <div class=\"grid grid-cols-3 gap-2 text-xs\">\n              <div>\n                <span class=\"text-muted-foreground\">On Hand:</span>\n                <p class=\"text-foreground font-semibold tabular-nums\">{{ selectedSkuItem.onHandStock }} units</p>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Daily Velocity:</span>\n                <p class=\"text-foreground font-semibold tabular-nums\">{{ selectedSkuItem.dailySalesVelocity }} / day</p>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Lead Time:</span>\n                <p class=\"text-foreground font-semibold tabular-nums\">\n                  {{ selectedSkuItem.supplierLeadTimeDays }} Days\n                </p>\n              </div>\n            </div>\n          </div>\n\n          <!-- Quantity Input & Quick Chips -->\n          <div class=\"space-y-1.5\">\n            <div class=\"flex items-center justify-between\">\n              <label class=\"text-foreground text-xs font-medium\">Reorder Quantity (Units)</label>\n              <span class=\"text-muted-foreground text-xs\"\n                >Recommended: {{ selectedSkuItem.recommendedReorderQty }} units</span\n              >\n            </div>\n            <Input v-model.number=\"customReorderQty\" type=\"number\" :min=\"1\" class=\"text-xs tabular-nums sm:text-sm\" />\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=\"customReorderQty = Math.round(selectedSkuItem.recommendedReorderQty * 0.5)\"\n              >\n                50% ({{ Math.round(selectedSkuItem.recommendedReorderQty * 0.5) }})\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"xs\"\n                class=\"flex-1 text-xs\"\n                @click=\"customReorderQty = selectedSkuItem.recommendedReorderQty\"\n              >\n                Recommended ({{ selectedSkuItem.recommendedReorderQty }})\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"xs\"\n                class=\"flex-1 text-xs\"\n                @click=\"customReorderQty = Math.round(selectedSkuItem.recommendedReorderQty * 1.5)\"\n              >\n                150% ({{ Math.round(selectedSkuItem.recommendedReorderQty * 1.5) }})\n              </Button>\n            </div>\n          </div>\n\n          <!-- Shipping Freight Method -->\n          <div class=\"space-y-1.5\">\n            <label class=\"text-foreground text-xs font-medium\">Inbound Freight Method</label>\n            <Select v-model=\"selectedShippingMethod\">\n              <SelectTrigger class=\"w-full text-xs\">\n                <SelectValue placeholder=\"Select shipping method\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"standard-freight\">Standard Consolidated Freight (Est. 14 Days)</SelectItem>\n                <SelectItem value=\"expedited-air\">Expedited Air Express (Est. 4 Days · +$420)</SelectItem>\n                <SelectItem value=\"ocean-container\">Full Ocean Container FCL (Est. 28 Days · Economy)</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n\n          <!-- Cost Calculation Summary Box -->\n          <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Unit Cost:</span>\n              <span class=\"text-foreground font-mono tabular-nums\">${{ selectedSkuItem.unitCost.toFixed(2) }}</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Units to Order:</span>\n              <span class=\"text-foreground font-mono tabular-nums\">{{ customReorderQty }} units</span>\n            </div>\n            <Separator />\n            <div class=\"flex items-center justify-between text-sm font-semibold\">\n              <span class=\"text-foreground\">Total Estimated PO Value:</span>\n              <span class=\"text-primary font-mono text-base font-bold tabular-nums\">\n                ${{\n                  dialogCalculatedCost.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n                }}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <DialogFooter class=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n          <DialogClose as-child>\n            <Button variant=\"outline\">Cancel</Button>\n          </DialogClose>\n          <Button class=\"gap-1.5\" @click=\"handleConfirmCreatePo\">\n            <FileCheck class=\"size-4\" />\n            Generate Purchase Order\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n\n    <!-- Bulk POs Generation Dialog -->\n    <Dialog v-model:open=\"bulkPoDialogOpen\">\n      <DialogContent class=\"sm:max-w-lg\">\n        <DialogHeader>\n          <div class=\"flex items-center gap-2\">\n            <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n              <PackagePlus class=\"size-4\" />\n            </div>\n            <DialogTitle class=\"text-lg font-bold\">Generate Bulk Purchase Orders</DialogTitle>\n          </div>\n          <DialogDescription class=\"text-muted-foreground text-xs\">\n            Automatically create and batch replenishment purchase orders for all SKUs below safe safety threshold.\n          </DialogDescription>\n        </DialogHeader>\n\n        <div class=\"space-y-4 py-2\">\n          <!-- Summary Metrics -->\n          <div class=\"border-border bg-muted/20 space-y-3 rounded-lg border p-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground text-xs\">Destination Facility:</span>\n              <Badge variant=\"outline\" class=\"text-xs font-medium\">Global Fulfillment Center</Badge>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground text-xs\">Total Purchase Orders:</span>\n              <span class=\"text-foreground text-xs font-semibold tabular-nums\">4 Vendor POs</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground text-xs\">Total Replenishment Units:</span>\n              <span class=\"text-foreground text-xs font-semibold tabular-nums\">620 Units</span>\n            </div>\n            <Separator />\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-foreground text-xs font-semibold\">Combined Total PO Value:</span>\n              <span class=\"text-primary font-mono text-base font-bold tabular-nums\">$48,250.00</span>\n            </div>\n          </div>\n\n          <!-- PO List Breakdown -->\n          <div class=\"space-y-2\">\n            <div class=\"text-foreground text-xs font-semibold\">Purchase Order Breakdown by Supplier</div>\n            <div class=\"border-border space-y-2 rounded-md border p-2.5 text-xs\">\n              <div\n                v-for=\"item in criticalAndWarningItems\"\n                :key=\"item.id\"\n                class=\"flex items-center justify-between py-1\"\n              >\n                <div>\n                  <span class=\"text-foreground font-medium\">{{ item.supplier }}</span>\n                  <div class=\"text-muted-foreground font-mono text-xs\">\n                    {{ item.sku }} ({{ item.recommendedReorderQty }} units)\n                  </div>\n                </div>\n                <span class=\"text-foreground font-mono font-semibold tabular-nums\">\n                  ${{ item.estimatedPoCost.toLocaleString('en-US', { minimumFractionDigits: 2 }) }}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <DialogFooter class=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n          <DialogClose as-child>\n            <Button variant=\"outline\">Cancel</Button>\n          </DialogClose>\n          <Button class=\"gap-1.5\" @click=\"handleConfirmBulkPos\">\n            <PackagePlus class=\"size-4\" />\n            Generate 4 Purchase Orders\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/InventoryReorderForecast.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/dialog.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Supply chain inventory replenishment planner with lead-time demand forecasting, 4 forecasting KPI metric cards, safety stock triggers, multi-SKU demand table, and automated purchase order generation.",
  "categories": [
    "logistics",
    "app",
    "ecommerce",
    "dashboard"
  ]
}