{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "stock-transfer-manager", "title": "Stock Transfer Manager", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/stock-transfer-manager/stock-transfer-manager.component.ts", "content": "import { Component, Input, OnInit, computed, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n ArrowRight,\n Barcode,\n CheckCircle2,\n LucideAngularModule,\n Plus,\n QrCode,\n Trash2,\n Truck,\n Warehouse,\n} 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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type TransferItemCondition = 'sellable' | 'quarantine' | 'damaged'\nexport type StockTransferStatus = 'draft' | 'staged' | 'in_transit' | 'received'\n\nexport interface TransferItem {\n id: string\n sku: string\n name: string\n barcode: string\n lotNumber: string\n sourceBin: string\n targetBin: string\n availableQty: number\n transferQty: number\n unit: string\n condition: TransferItemCondition\n}\n\nexport interface StockTransferProps {\n transferId?: string\n initialStatus?: StockTransferStatus\n className?: string\n}\n\n/**\n * Angular port of the React StockTransferManager block: a transfer header card (id, status\n * badge, dispatch / receipt / reset action, origin / destination / shipping selects) above a\n * manifest table with bin routing, editable transfer quantities and item conditions. The\n * scan box adds one unit to the line whose barcode or SKU matches. Edit the sample\n * manifest below.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-stock-transfer-manager, [ui-stock-transfer-manager]',\n standalone: true,\n host: {\n '[attr.data-slot]': '\"stock-transfer-manager\"',\n '[class]': 'hostClass',\n },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n \n
\n
\n
\n
\n {{ transferId }}\n {{ statusLabel() }}\n
\n

Inter-Warehouse Stock Transfer

\n

\n Transfer goods between fulfillment hubs with bin-level tracking and scan verification.\n

\n
\n
\n @if (status() === 'staged') {\n \n }\n @if (status() === 'in_transit') {\n \n }\n @if (status() === 'received') {\n \n }\n
\n
\n\n
\n \n
\n
\n \n ORIGIN FACILITY\n
\n \n \n \n East Coast Fulfillment (NJ-01)\n West Coast Distribution (CA-04)\n Midwest Logistics Hub (IL-02)\n \n \n
\n\n \n
\n
\n \n DESTINATION FACILITY\n
\n \n \n \n Central Distribution Center (TX-01)\n Northern Sorting Facility (WA-02)\n Southeast Regional Hub (GA-03)\n \n \n
\n\n \n
\n
\n \n SHIPPING METHOD\n
\n \n \n \n Dedicated LTL Freight (Palletized)\n Priority Courier (Same Day Air)\n Internal Fleet Transfer (Route 09)\n \n \n
\n
\n
\n\n \n
\n
\n
\n

Manifest Line Items

\n

\n {{ totalLineItems() }} unique SKUs · {{ totalUnits() }} total units staged for transfer\n

\n
\n\n \n
\n
\n \n \n
\n \n \n \n \n
\n
\n\n
\n
\n \n \n Product / SKU\n Lot / Batch\n Source Bin\n Target Bin\n Available\n Transfer Qty\n Condition\n \n \n \n \n @for (item of items(); track item.id) {\n \n \n \n
{{ item.name }}
\n
\n {{ item.sku }}\n ·\n {{ item.barcode }}\n
\n \n\n \n \n {{ item.lotNumber }}\n \n\n \n \n {{\n item.sourceBin\n }}\n \n\n \n \n {{ item.targetBin }}\n \n\n \n \n {{ item.availableQty }} {{ item.unit }}\n \n\n \n \n \n \n\n \n \n \n \n \n Sellable\n Quarantine\n Damaged\n \n \n \n\n \n \n \n \n \n \n \n }\n \n
\n
\n\n \n
All inventory movements are recorded in immutable ledger log #LOG-9402.
\n
\n Total: {{ totalUnits() }} items across\n {{ totalLineItems() }} positions\n
\n
\n \n `,\n})\nexport class UiStockTransferManagerComponent implements OnInit {\n @Input() transferId = 'TRF-2026-8841'\n @Input() initialStatus: StockTransferStatus = 'staged'\n @Input('class') className?: string\n\n protected readonly ArrowRight = ArrowRight\n protected readonly Barcode = Barcode\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Plus = Plus\n protected readonly QrCode = QrCode\n protected readonly Trash2 = Trash2\n protected readonly Truck = Truck\n protected readonly Warehouse = Warehouse\n\n readonly status = signal('staged')\n readonly sourceWarehouse = signal('wh-east-01')\n readonly targetWarehouse = signal('wh-central-02')\n readonly transportType = signal('pallet_freight')\n readonly barcodeQuery = signal('')\n\n readonly items = signal([\n {\n id: 'itm-1',\n sku: 'SKU-LOGI-884',\n name: 'Industrial Barcode Scanner IP65',\n barcode: '079357318921',\n lotNumber: 'LOT-2026-A1',\n sourceBin: 'A-04-R2-B12',\n targetBin: 'C-01-R1-B03',\n availableQty: 140,\n transferQty: 25,\n unit: 'pcs',\n condition: 'sellable',\n },\n {\n id: 'itm-2',\n sku: 'SKU-PWR-331',\n name: 'Lithium Iron Battery Pack 48V',\n barcode: '079357318945',\n lotNumber: 'LOT-2025-X9',\n sourceBin: 'B-12-R4-B01',\n targetBin: 'D-08-R2-B09',\n availableQty: 48,\n transferQty: 12,\n unit: 'units',\n condition: 'sellable',\n },\n {\n id: 'itm-3',\n sku: 'SKU-SENS-102',\n name: 'Optical Proximity Sensor M18',\n barcode: '079357318988',\n lotNumber: 'LOT-2026-C4',\n sourceBin: 'A-02-R1-B06',\n targetBin: 'A-09-R3-B02',\n availableQty: 320,\n transferQty: 80,\n unit: 'pcs',\n condition: 'sellable',\n },\n ])\n\n readonly totalUnits = computed(() => this.items().reduce((sum, item) => sum + Number(item.transferQty || 0), 0))\n readonly totalLineItems = computed(() => this.items().length)\n\n /** Origin, destination and shipping method can only change before dispatch. */\n readonly routingLocked = computed(() => this.status() !== 'draft' && this.status() !== 'staged')\n\n /** React seeds its status state from `initialStatus` once, on mount. */\n ngOnInit(): void {\n this.status.set(this.initialStatus)\n }\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n protected statusVariant(): BadgeVariant {\n const status = this.status()\n return status === 'received' ? 'default' : status === 'in_transit' ? 'secondary' : 'outline'\n }\n\n protected statusLabel(): string {\n return this.status().replace('_', ' ')\n }\n\n addItem(): void {\n this.items.update((prev) => [\n ...prev,\n {\n id: `itm-${Date.now()}`,\n sku: 'SKU-GEN-001',\n name: 'Standard Packing Material Kit',\n barcode: '079357399999',\n lotNumber: 'LOT-UNASSIGNED',\n sourceBin: 'A-01-R1-B01',\n targetBin: 'B-01-R1-B01',\n availableQty: 100,\n transferQty: 10,\n unit: 'kits',\n condition: 'sellable',\n },\n ])\n }\n\n removeItem(id: string): void {\n this.items.update((prev) => prev.filter((i) => i.id !== id))\n }\n\n updateItemQty(id: string, qty: string | number): void {\n const transferQty = Number(qty)\n this.items.update((prev) => prev.map((i) => (i.id === id ? { ...i, transferQty } : i)))\n }\n\n updateItemCondition(id: string, condition: string): void {\n this.items.update((prev) =>\n prev.map((i) => (i.id === id ? { ...i, condition: condition as TransferItemCondition } : i)),\n )\n }\n\n handleScan(): void {\n const query = this.barcodeQuery()\n if (!query) return\n this.items.update((prev) =>\n prev.map((i) => (i.barcode === query || i.sku === query ? { ...i, transferQty: i.transferQty + 1 } : i)),\n )\n this.barcodeQuery.set('')\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/stock-transfer-manager/stock-transfer-manager.component.ts" }, { "path": "packages/registry-angular/blocks/stock-transfer-manager/index.ts", "content": "export { UiStockTransferManagerComponent } from './stock-transfer-manager.component'\nexport type {\n TransferItem,\n TransferItemCondition,\n StockTransferProps,\n StockTransferStatus,\n} from './stock-transfer-manager.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/stock-transfer-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/input.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/table.json" ], "description": "Inter-facility inventory transfer console with bin-level routing, barcode lookup, and condition classification.", "categories": [ "dashboard", "data-display" ] }