{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "backorder-split-shipment-manager", "title": "Backorder Split Shipment Manager", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/backorder-split-shipment-manager/backorder-split-shipment-manager.component.ts", "content": "import { Component, Input, signal, ChangeDetectionStrategy } from '@angular/core'\nimport { ArrowRightLeft, CheckCircle2, Clock, LucideAngularModule, Send, Split, Truck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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\n/**\n * Angular port of the React BackorderSplitShipmentManager block: an order summary card\n * (fulfillment rule, ready and backordered value) above one card per split package, each\n * with its carrier, a dispatch / re-route action and a line-item table. Dispatching a\n * ready package marks it and its items as dispatched. Edit the sample packages below.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-backorder-split-shipment-manager, [ui-backorder-split-shipment-manager]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"backorder-split-shipment-manager\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \n
\n
\n
\n
\n {{ orderId }}\n {{ customerTier }}\n \n \n Split Fulfillment (2 Shipments)\n \n
\n

Split Shipment & Backorder Triage

\n

\n Account: {{ customerName }} · Multi-Node Routing\n

\n
\n\n
\n \n \n
\n
\n\n
\n \n
\n
FULFILLMENT RULE
\n
Partial Dispatch Allowed (Speed Priority)
\n
Ship available items immediately without backorder delay.
\n
\n\n \n
\n
READY SHIPMENT VALUE
\n
$630.00 USD
\n
6 units allocated from East Coast Hub.
\n
\n\n \n
\n
BACKORDERED VALUE
\n
$420.00 USD
\n
1 unit waiting on PO-2026-881 inbound dock.
\n
\n
\n
\n\n \n
\n @for (pkg of packages(); track pkg.packageId) {\n
\n
\n
\n
\n {{ pkg.packageId }}\n {{\n statusLabel(pkg.status)\n }}\n
\n \n
\n Carrier: {{ pkg.carrier }}@if (pkg.trackingNumber) {\n · Tracking: {{ pkg.trackingNumber }}\n }\n
\n
\n\n
\n @if (pkg.status === 'ready_to_ship') {\n \n }\n @if (pkg.status === 'awaiting_inventory') {\n \n }\n @if (pkg.status === 'dispatched') {\n Dispatched\n }\n
\n
\n\n
\n
\n \n \n SKU & Description\n Fulfillment Origin\n Qty\n Unit Price\n Line Total\n Inventory Status / ETA\n \n \n \n @for (item of pkg.items; track item.id) {\n \n \n
{{ item.name }}
\n
{{ item.sku }}
\n \n\n \n {{\n item.originHub\n }}\n \n\n {{ item.qty }}\n\n \n {{ money(item.unitPrice) }}\n \n\n \n {{ money(item.qty * item.unitPrice) }}\n \n\n \n @if (item.status === 'ready') {\n
\n \n Allocated & Packed\n
\n }\n @if (item.status === 'dispatched') {\n
\n \n In Transit\n
\n }\n @if (item.status === 'backordered') {\n
\n \n {{ item.restockEta }}\n
\n }\n \n \n }\n \n
\n
\n
\n }\n
\n `,\n})\nexport class UiBackorderSplitShipmentManagerComponent {\n @Input() orderId = 'ORD-SPLIT-9921'\n @Input() customerName = 'Aero Dynamics Corp'\n @Input() customerTier = 'Enterprise VIP · Net-30'\n @Input('class') className?: string\n\n protected readonly ArrowRightLeft = ArrowRightLeft\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Send = Send\n protected readonly Split = Split\n protected readonly Truck = Truck\n\n readonly packages = signal([\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 get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n dispatchPackage(pkgId: string): void {\n this.packages.update((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 protected statusVariant(status: SplitPackage['status']): BadgeVariant {\n return status === 'dispatched' ? 'default' : status === 'ready_to_ship' ? 'secondary' : 'outline'\n }\n\n protected statusLabel(status: SplitPackage['status']): string {\n return status.replace(/_/g, ' ')\n }\n\n protected money(value: number): string {\n return `$${value.toFixed(2)}`\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/backorder-split-shipment-manager/backorder-split-shipment-manager.component.ts" }, { "path": "packages/registry-angular/blocks/backorder-split-shipment-manager/index.ts", "content": "export { UiBackorderSplitShipmentManagerComponent } from './backorder-split-shipment-manager.component'\nexport type {\n ShipmentItem,\n SplitPackage,\n BackorderSplitShipmentProps,\n} from './backorder-split-shipment-manager.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/backorder-split-shipment-manager/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Order fulfillment split shipment manager with stock triage, backorder tracking, and multi-node dispatch controls.", "categories": [ "dashboard", "data-display" ] }