{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "backorder-split-shipment-manager",
  "title": "Backorder Split Shipment Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/backorder-split-shipment-manager/BackorderSplitShipmentManager.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRightLeft, CheckCircle2, Clock, Send, Split, Truck } from 'lucide-vue-next'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface ShipmentItem {\n  id: string\n  sku: string\n  name: string\n  qty: number\n  unitPrice: number\n  originHub: string\n  status: 'ready' | 'backordered' | 'dispatched'\n  restockEta?: string\n}\n\nexport interface SplitPackage {\n  packageId: string\n  carrier: string\n  trackingNumber?: string\n  status: 'ready_to_ship' | 'awaiting_inventory' | 'dispatched'\n  items: ShipmentItem[]\n}\n\nexport interface BackorderSplitShipmentProps {\n  orderId?: string\n  customerName?: string\n  customerTier?: string\n}\n\nconst props = withDefaults(defineProps<BackorderSplitShipmentProps>(), {\n  orderId: 'ORD-SPLIT-9921',\n  customerName: 'Aero Dynamics Corp',\n  customerTier: 'Enterprise VIP · Net-30',\n})\n\nconst packages = ref<SplitPackage[]>([\n  {\n    packageId: 'PKG-A (In Stock · WH-East)',\n    carrier: 'FedEx Priority Overnight',\n    trackingNumber: 'FX-8891-4401-US',\n    status: 'ready_to_ship',\n    items: [\n      {\n        id: 'pkg-1-1',\n        sku: 'SKU-SERVO-01',\n        name: 'Precision Micro Servo Motor 12V',\n        qty: 4,\n        unitPrice: 125,\n        originHub: 'wh-east-01',\n        status: 'ready',\n      },\n      {\n        id: 'pkg-1-2',\n        sku: 'SKU-FLANGE-99',\n        name: 'Anodized Billet Flange Mount 45mm',\n        qty: 2,\n        unitPrice: 65,\n        originHub: 'wh-east-01',\n        status: 'ready',\n      },\n    ],\n  },\n  {\n    packageId: 'PKG-B (Backordered · Sourcing WH-West)',\n    carrier: 'UPS Standard Ground',\n    status: 'awaiting_inventory',\n    items: [\n      {\n        id: 'pkg-2-1',\n        sku: 'SKU-CTRL-BOARD',\n        name: 'Industrial Embedded Controller Rev 3.2',\n        qty: 1,\n        unitPrice: 420,\n        originHub: 'wh-west-02',\n        status: 'backordered',\n        restockEta: 'Inbound PO arrives in 2 business days',\n      },\n    ],\n  },\n])\n\nfunction dispatchPackage(pkgId: string) {\n  const pkg = packages.value.find((p) => p.packageId === pkgId)\n  if (pkg) {\n    pkg.status = 'dispatched'\n    pkg.items.forEach((i) => (i.status = 'dispatched'))\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"backorder-split-shipment-manager\" class=\"w-full space-y-6\">\n    <!-- Header Summary Card -->\n    <Card>\n      <CardHeader class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"space-y-1\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-foreground font-mono text-sm font-semibold\">{{ orderId }}</span>\n            <Badge variant=\"outline\">{{ customerTier }}</Badge>\n            <Badge variant=\"secondary\" class=\"gap-1\">\n              <Split class=\"text-foreground size-3\" />\n              Split Fulfillment (2 Shipments)\n            </Badge>\n          </div>\n          <CardTitle class=\"text-xl\">Split Shipment & Backorder Triage</CardTitle>\n          <CardDescription>\n            Account: <strong class=\"text-foreground font-medium\">{{ customerName }}</strong> · Multi-Node Routing\n          </CardDescription>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5\">\n            <Clock class=\"size-3.5\" />\n            Hold Entire Order\n          </Button>\n          <Button variant=\"default\" size=\"sm\" class=\"gap-1.5\">\n            <Send class=\"size-3.5\" />\n            Release Ready Packages\n          </Button>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"border-border grid grid-cols-1 gap-4 border-t pt-4 sm:grid-cols-3\">\n        <!-- Fulfillment Policy -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">FULFILLMENT RULE</div>\n          <div class=\"text-foreground text-sm font-semibold\">Partial Dispatch Allowed (Speed Priority)</div>\n          <div class=\"text-muted-foreground text-xs\">Ship available items immediately without backorder delay.</div>\n        </div>\n\n        <!-- In-Stock Value -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">READY SHIPMENT VALUE</div>\n          <div class=\"text-foreground font-mono text-xl font-semibold\">$630.00 USD</div>\n          <div class=\"text-muted-foreground text-xs\">6 units allocated from East Coast Hub.</div>\n        </div>\n\n        <!-- Backordered Value -->\n        <div class=\"border-border space-y-1 rounded-lg border p-3\">\n          <div class=\"text-muted-foreground text-xs font-medium\">BACKORDERED VALUE</div>\n          <div class=\"text-foreground font-mono text-xl font-semibold\">$420.00 USD</div>\n          <div class=\"text-muted-foreground text-xs\">1 unit waiting on PO-2026-881 inbound dock.</div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Split Packages Breakdown -->\n    <div class=\"space-y-4\">\n      <Card v-for=\"pkg in packages\" :key=\"pkg.packageId\">\n        <CardHeader class=\"flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-foreground font-semibold\">{{ pkg.packageId }}</span>\n              <Badge\n                :variant=\"\n                  pkg.status === 'dispatched' ? 'default' : pkg.status === 'ready_to_ship' ? 'secondary' : 'outline'\n                \"\n                class=\"capitalize\"\n              >\n                {{ pkg.status.replace(/_/g, ' ') }}\n              </Badge>\n            </div>\n            <div class=\"text-muted-foreground font-mono text-xs\">\n              Carrier: {{ pkg.carrier }}\n              <span v-if=\"pkg.trackingNumber\">· Tracking: {{ pkg.trackingNumber }}</span>\n            </div>\n          </div>\n\n          <div class=\"flex items-center gap-2\">\n            <Button\n              v-if=\"pkg.status === 'ready_to_ship'\"\n              size=\"sm\"\n              variant=\"default\"\n              class=\"gap-1.5\"\n              @click=\"dispatchPackage(pkg.packageId)\"\n            >\n              <Truck class=\"size-3.5\" />\n              Dispatch Package Now\n            </Button>\n            <Button v-else-if=\"pkg.status === 'awaiting_inventory'\" size=\"sm\" variant=\"outline\" class=\"gap-1.5\">\n              <ArrowRightLeft class=\"size-3.5\" />\n              Re-route to 3PL\n            </Button>\n            <Badge v-else variant=\"outline\" class=\"text-xs\">Dispatched</Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent class=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"w-[300px]\">SKU & Description</TableHead>\n                <TableHead>Fulfillment Origin</TableHead>\n                <TableHead class=\"text-right\">Qty</TableHead>\n                <TableHead class=\"text-right\">Unit Price</TableHead>\n                <TableHead class=\"text-right\">Line Total</TableHead>\n                <TableHead>Inventory Status / ETA</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"item in pkg.items\" :key=\"item.id\">\n                <TableCell>\n                  <div class=\"text-foreground font-medium\">{{ item.name }}</div>\n                  <div class=\"text-muted-foreground font-mono text-xs\">{{ item.sku }}</div>\n                </TableCell>\n\n                <TableCell>\n                  <span class=\"bg-muted text-foreground rounded px-2 py-0.5 font-mono text-xs font-medium\">\n                    {{ item.originHub }}\n                  </span>\n                </TableCell>\n\n                <TableCell class=\"text-right font-mono text-sm\">\n                  {{ item.qty }}\n                </TableCell>\n\n                <TableCell class=\"text-muted-foreground text-right font-mono text-sm\">\n                  ${{ item.unitPrice.toFixed(2) }}\n                </TableCell>\n\n                <TableCell class=\"text-right font-mono text-sm font-medium\">\n                  ${{ (item.qty * item.unitPrice).toFixed(2) }}\n                </TableCell>\n\n                <TableCell>\n                  <div v-if=\"item.status === 'ready'\" class=\"text-foreground flex items-center gap-1.5 text-xs\">\n                    <CheckCircle2 class=\"size-3.5\" />\n                    <span>Allocated & Packed</span>\n                  </div>\n                  <div\n                    v-else-if=\"item.status === 'dispatched'\"\n                    class=\"text-foreground flex items-center gap-1.5 text-xs\"\n                  >\n                    <Truck class=\"size-3.5\" />\n                    <span>In Transit</span>\n                  </div>\n                  <div v-else class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                    <Clock class=\"size-3.5\" />\n                    <span>{{ item.restockEta }}</span>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/backorder-split-shipment-manager/BackorderSplitShipmentManager.vue"
    },
    {
      "path": "packages/registry-vue/blocks/backorder-split-shipment-manager/index.ts",
      "content": "export { default as BackorderSplitShipmentManager } from './BackorderSplitShipmentManager.vue'\nexport type { ShipmentItem, SplitPackage, BackorderSplitShipmentProps } from './BackorderSplitShipmentManager.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/backorder-split-shipment-manager/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Order fulfillment split shipment manager with stock triage, backorder tracking, and multi-node dispatch controls.",
  "categories": [
    "dashboard",
    "data-display"
  ]
}