{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "backorder-split-shipment-manager",
  "title": "Backorder Split Shipment Manager",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/backorder-split-shipment-manager/BackorderSplitShipmentManager.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRightLeft, CheckCircle2, Clock, Send, Split, Truck } from 'lucide-react'\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  className?: string\n}\n\nexport function BackorderSplitShipmentManager({\n  orderId = 'ORD-SPLIT-9921',\n  customerName = 'Aero Dynamics Corp',\n  customerTier = 'Enterprise VIP · Net-30',\n  className,\n}: BackorderSplitShipmentProps) {\n  const [packages, setPackages] = React.useState<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\n  function dispatchPackage(pkgId: string) {\n    setPackages((prev) =>\n      prev.map((pkg) =>\n        pkg.packageId === pkgId\n          ? {\n              ...pkg,\n              status: 'dispatched' as const,\n              items: pkg.items.map((i) => ({ ...i, status: 'dispatched' as const })),\n            }\n          : pkg,\n      ),\n    )\n  }\n\n  return (\n    <div data-slot=\"backorder-split-shipment-manager\" className={`w-full space-y-6 ${className ?? ''}`}>\n      {/* Header Summary Card */}\n      <Card>\n        <CardHeader className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-foreground font-mono text-sm font-semibold\">{orderId}</span>\n              <Badge variant=\"outline\">{customerTier}</Badge>\n              <Badge variant=\"secondary\" className=\"gap-1\">\n                <Split className=\"text-foreground size-3\" />\n                Split Fulfillment (2 Shipments)\n              </Badge>\n            </div>\n            <CardTitle className=\"text-xl\">Split Shipment & Backorder Triage</CardTitle>\n            <CardDescription>\n              Account: <strong className=\"text-foreground font-medium\">{customerName}</strong> · Multi-Node Routing\n            </CardDescription>\n          </div>\n\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5\">\n              <Clock className=\"size-3.5\" />\n              Hold Entire Order\n            </Button>\n            <Button variant=\"default\" size=\"sm\" className=\"gap-1.5\">\n              <Send className=\"size-3.5\" />\n              Release Ready Packages\n            </Button>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"border-border grid grid-cols-1 gap-4 border-t pt-4 sm:grid-cols-3\">\n          {/* Fulfillment Policy */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">FULFILLMENT RULE</div>\n            <div className=\"text-foreground text-sm font-semibold\">Partial Dispatch Allowed (Speed Priority)</div>\n            <div className=\"text-muted-foreground text-xs\">\n              Ship available items immediately without backorder delay.\n            </div>\n          </div>\n\n          {/* In-Stock Value */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">READY SHIPMENT VALUE</div>\n            <div className=\"text-foreground font-mono text-xl font-semibold\">$630.00 USD</div>\n            <div className=\"text-muted-foreground text-xs\">6 units allocated from East Coast Hub.</div>\n          </div>\n\n          {/* Backordered Value */}\n          <div className=\"border-border space-y-1 rounded-lg border p-3\">\n            <div className=\"text-muted-foreground text-xs font-medium\">BACKORDERED VALUE</div>\n            <div className=\"text-foreground font-mono text-xl font-semibold\">$420.00 USD</div>\n            <div className=\"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 className=\"space-y-4\">\n        {packages.map((pkg) => (\n          <Card key={pkg.packageId}>\n            <CardHeader className=\"flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"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                    className=\"capitalize\"\n                  >\n                    {pkg.status.replace(/_/g, ' ')}\n                  </Badge>\n                </div>\n                <div className=\"text-muted-foreground font-mono text-xs\">\n                  Carrier: {pkg.carrier}\n                  {pkg.trackingNumber && <span>· Tracking: {pkg.trackingNumber}</span>}\n                </div>\n              </div>\n\n              <div className=\"flex items-center gap-2\">\n                {pkg.status === 'ready_to_ship' && (\n                  <Button\n                    size=\"sm\"\n                    variant=\"default\"\n                    className=\"gap-1.5\"\n                    onClick={() => dispatchPackage(pkg.packageId)}\n                  >\n                    <Truck className=\"size-3.5\" />\n                    Dispatch Package Now\n                  </Button>\n                )}\n                {pkg.status === 'awaiting_inventory' && (\n                  <Button size=\"sm\" variant=\"outline\" className=\"gap-1.5\">\n                    <ArrowRightLeft className=\"size-3.5\" />\n                    Re-route to 3PL\n                  </Button>\n                )}\n                {pkg.status === 'dispatched' && (\n                  <Badge variant=\"outline\" className=\"text-xs\">\n                    Dispatched\n                  </Badge>\n                )}\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"p-0\">\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead className=\"w-[300px]\">SKU & Description</TableHead>\n                    <TableHead>Fulfillment Origin</TableHead>\n                    <TableHead className=\"text-right\">Qty</TableHead>\n                    <TableHead className=\"text-right\">Unit Price</TableHead>\n                    <TableHead className=\"text-right\">Line Total</TableHead>\n                    <TableHead>Inventory Status / ETA</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  {pkg.items.map((item) => (\n                    <TableRow key={item.id}>\n                      <TableCell>\n                        <div className=\"text-foreground font-medium\">{item.name}</div>\n                        <div className=\"text-muted-foreground font-mono text-xs\">{item.sku}</div>\n                      </TableCell>\n\n                      <TableCell>\n                        <span className=\"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 className=\"text-right font-mono text-sm\">{item.qty}</TableCell>\n\n                      <TableCell className=\"text-muted-foreground text-right font-mono text-sm\">\n                        ${item.unitPrice.toFixed(2)}\n                      </TableCell>\n\n                      <TableCell className=\"text-right font-mono text-sm font-medium\">\n                        ${(item.qty * item.unitPrice).toFixed(2)}\n                      </TableCell>\n\n                      <TableCell>\n                        {item.status === 'ready' && (\n                          <div className=\"text-foreground flex items-center gap-1.5 text-xs\">\n                            <CheckCircle2 className=\"size-3.5\" />\n                            <span>Allocated & Packed</span>\n                          </div>\n                        )}\n                        {item.status === 'dispatched' && (\n                          <div className=\"text-foreground flex items-center gap-1.5 text-xs\">\n                            <Truck className=\"size-3.5\" />\n                            <span>In Transit</span>\n                          </div>\n                        )}\n                        {item.status === 'backordered' && (\n                          <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                            <Clock className=\"size-3.5\" />\n                            <span>{item.restockEta}</span>\n                          </div>\n                        )}\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/backorder-split-shipment-manager/BackorderSplitShipmentManager.tsx"
    },
    {
      "path": "packages/registry-react/blocks/backorder-split-shipment-manager/index.ts",
      "content": "export { BackorderSplitShipmentManager } from './BackorderSplitShipmentManager'\nexport type { ShipmentItem, SplitPackage, BackorderSplitShipmentProps } from './BackorderSplitShipmentManager'\n",
      "type": "registry:block",
      "target": "~/components/blocks/backorder-split-shipment-manager/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Order fulfillment split shipment manager with stock triage, backorder tracking, and multi-node dispatch controls.",
  "categories": [
    "dashboard",
    "data-display"
  ]
}