{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "inventory-reorder-forecast", "title": "Inventory Reorder Forecast", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/inventory-reorder-forecast/inventory-reorder-forecast.component.ts", "content": "import { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n AlertTriangle,\n ArrowUpRight,\n Boxes,\n Building2,\n CheckCircle2,\n Clock,\n DollarSign,\n Download,\n FileCheck,\n LucideAngularModule,\n PackageCheck,\n PackagePlus,\n Search,\n TrendingUp,\n X,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogCloseComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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 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\n/**\n * InventoryReorderForecast -- the React block, 1:1: a supply chain inventory\n * replenishment planner with a facility selector, 4 forecasting KPI metric cards, safety\n * stock triggers, a multi-SKU demand table with search + category + health filters, and\n * single/bulk purchase order generation dialogs with a feedback banner.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-inventory-reorder-forecast, [ui-inventory-reorder-forecast]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogCloseComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n
\n

\n Inventory Demand & Reorder Forecast\n

\n \n \n 4 SKUs Need Reorder\n \n
\n

\n Multi-channel supply chain replenishment planner with lead-time demand forecasting and automated purchase\n order generation.\n

\n
\n\n
\n \n \n \n \n Global Fulfillment Center\n North America West Distribution Hub\n European Central Logistics Depot\n APAC Regional Hub · Singapore\n \n \n\n \n \n \n Export Replenishment Plan\n \n\n \n \n
\n
\n\n \n @if (actionFeedback()) {\n \n
\n \n {{ actionFeedback() }}\n
\n \n \n \n
\n }\n\n \n
\n \n
\n
\n

\n Critical Reorder SKUs\n

\n
\n \n
\n
\n
\n
\n
\n 4 SKUs\n
\n Action Required\n
\n

Below safety threshold · 2 in urgent stockout zone

\n
\n
\n\n \n
\n
\n

\n Estimated Stockout Days\n

\n
\n \n
\n
\n
\n
\n
\n 6.4 Days\n
\n Critical Risk\n
\n

6.4 Days until stockout on top SKU · Urgent PO needed

\n
\n
\n\n \n
\n
\n

\n Suggested PO Value\n

\n
\n \n
\n
\n
\n
$48,250.00
\n

\n \n 4 replenishment POs\n \n · 620 units total\n

\n
\n
\n\n \n
\n
\n

\n Inventory Turnover Rate\n

\n
\n \n
\n
\n
\n
\n 8.4x / year\n
\n

\n \n +1.2x\n \n vs industry benchmark (7.2x)\n

\n
\n
\n
\n\n \n
\n
\n
\n
\n
\n \n \n
\n\n \n \n \n \n All Categories\n Footwear\n Outerwear\n Electronics\n Accessories\n \n \n\n \n \n \n \n All Stock Status\n Critical Stockout (<7d)\n Reorder Warning (7-15d)\n Healthy Stock (>30d)\n \n \n
\n\n
\n \n Showing {{ filteredItems().length }} of\n {{ allItems.length }} forecast SKUs\n \n
\n
\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (item of filteredItems(); track item.id) {\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n }\n\n @if (filteredItems().length === 0) {\n \n \n \n }\n \n
SKU Identifier & ProductCurrent On-HandSales VelocityDays RemainingSupplier Lead TimeRecommended QtyEst. PO CostQuick Action
\n
\n
{{ item.sku }}
\n
{{ item.name }}
\n
\n {{ item.category }}\n ·\n {{ item.supplier }}\n
\n
\n 		\n
\n {{ item.onHandStock.toLocaleString() }}\n units\n
\n
\n Safety: {{ item.safetyStockThreshold }} units\n
\n 		\n
\n {{ item.dailySalesVelocity.toFixed(1) }}\n units/day\n
\n = 0 ? 'text-success' : 'text-destructive'\"\n >\n {{ item.velocityTrend >= 0 ? '+' : '' }}{{ item.velocityTrend.toFixed(1) }}% 7d\n \n 		\n
\n @if (item.status === 'critical') {\n \n \n {{ item.daysOfInventoryRemaining.toFixed(1) }} Days\n \n } @else if (item.status === 'warning') {\n \n \n {{ item.daysOfInventoryRemaining.toFixed(1) }} Days\n \n } @else {\n \n \n {{ item.daysOfInventoryRemaining.toFixed(1) }} Days\n \n }\n
\n {{\n item.status === 'critical'\n ? 'Stockout before delivery'\n : item.status === 'warning'\n ? 'Reorder buffer thin'\n : 'Healthy inventory level'\n }}\n
\n
\n 		\n
\n {{ item.supplierLeadTimeDays }}\n Days\n
\n
Mfg & Freight
\n 		\n
\n {{ item.recommendedReorderQty }}\n units\n
\n
Optimal batch
\n 		\n
\n {{ money(item.estimatedPoCost) }}\n
\n
{{ money(item.unitCost) }} / unit
\n 		\n
\n \n \n Create PO\n \n
\n
\n No inventory forecast items match your current filter criteria.\n
\n
\n
\n
\n\n \n \n \n
\n
\n
\n \n
\n

Draft Purchase Order

\n
\n

\n Review demand velocity, set purchase order quantity, and dispatch replenishment order to supplier.\n

\n
\n\n @if (selectedSkuItem(); as selected) {\n
\n \n
\n
\n
\n
{{ selected.sku }}
\n
{{ selected.name }}
\n
{{ selected.supplier }} · {{ selected.category }}
\n
\n \n {{ selected.daysOfInventoryRemaining }} Days Stock Left\n \n
\n\n
\n\n
\n
\n On Hand:\n

{{ selected.onHandStock }} units

\n
\n
\n Daily Velocity:\n

{{ selected.dailySalesVelocity }} / day

\n
\n
\n Lead Time:\n

{{ selected.supplierLeadTimeDays }} Days

\n
\n
\n
\n\n \n
\n
\n \n \n Recommended: {{ selected.recommendedReorderQty }} units\n \n
\n \n
\n \n 50% ({{ halfQty(selected) }})\n \n \n Recommended ({{ selected.recommendedReorderQty }})\n \n \n 150% ({{ oneHalfQty(selected) }})\n \n
\n
\n\n \n
\n \n \n \n \n \n Standard Consolidated Freight (Est. 14 Days)\n \n Expedited Air Express (Est. 4 Days · +$420)\n \n Full Ocean Container FCL (Est. 28 Days · Economy)\n \n \n \n
\n\n \n
\n
\n Unit Cost:\n {{ money(selected.unitCost) }}\n
\n
\n Units to Order:\n {{ customReorderQty() }} units\n
\n
\n
\n Total Estimated PO Value:\n \n {{ money(dialogCalculatedCost()) }}\n \n
\n
\n
\n }\n\n
\n \n \n
\n \n \n\n \n \n \n
\n
\n
\n \n
\n

Generate Bulk Purchase Orders

\n
\n

\n Automatically create and batch replenishment purchase orders for all SKUs below safe safety threshold.\n

\n
\n\n
\n \n
\n
\n Destination Facility:\n Global Fulfillment Center\n
\n
\n Total Purchase Orders:\n 4 Vendor POs\n
\n
\n Total Replenishment Units:\n 620 Units\n
\n
\n
\n Combined Total PO Value:\n $48,250.00\n
\n
\n\n \n
\n
Purchase Order Breakdown by Supplier
\n
\n @for (item of criticalAndWarningItems(); track item.id) {\n
\n
\n {{ item.supplier }}\n
\n {{ item.sku }} ({{ item.recommendedReorderQty }} units)\n
\n
\n \n {{ money(item.estimatedPoCost) }}\n \n
\n }\n
\n
\n
\n\n
\n \n \n
\n \n \n
\n `,\n})\nexport class UiInventoryReorderForecastComponent {\n protected readonly AlertTriangle = AlertTriangle\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Boxes = Boxes\n protected readonly Building2 = Building2\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly DollarSign = DollarSign\n protected readonly Download = Download\n protected readonly FileCheck = FileCheck\n protected readonly PackageCheck = PackageCheck\n protected readonly PackagePlus = PackagePlus\n protected readonly Search = Search\n protected readonly TrendingUp = TrendingUp\n protected readonly X = X\n protected readonly Zap = Zap\n\n protected readonly allItems = reorderItems\n\n @Input('class') className?: string\n\n readonly facility = signal('global-fulfillment')\n readonly searchQuery = signal('')\n readonly categoryFilter = signal('all')\n readonly statusFilter = signal('all')\n\n readonly createPoDialogOpen = signal(false)\n readonly bulkPoDialogOpen = signal(false)\n readonly selectedSkuItem = signal(null)\n readonly customReorderQty = signal(250)\n readonly selectedShippingMethod = signal('standard-freight')\n\n readonly actionFeedback = signal(null)\n\n readonly filteredItems = computed(() => {\n return reorderItems.filter((item) => {\n const q = this.searchQuery().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 = this.categoryFilter() === 'all' || item.category === this.categoryFilter()\n const matchesStatus = this.statusFilter() === 'all' || item.status === this.statusFilter()\n\n return matchesSearch && matchesCategory && matchesStatus\n })\n })\n\n readonly criticalAndWarningItems = computed(() => {\n return reorderItems.filter((item) => item.status === 'critical' || item.status === 'warning')\n })\n\n readonly dialogCalculatedCost = computed(() => {\n const selected = this.selectedSkuItem()\n if (!selected) return 0\n return this.customReorderQty() * selected.unitCost\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n money(value: number): string {\n return '$' + value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n }\n\n setCustomQty(raw: string): void {\n this.customReorderQty.set(Number(raw) || 0)\n }\n\n setQtyFraction(item: ReorderItem, fraction: number): void {\n this.customReorderQty.set(Math.round(item.recommendedReorderQty * fraction))\n }\n\n halfQty(item: ReorderItem): number {\n return Math.round(item.recommendedReorderQty * 0.5)\n }\n\n oneHalfQty(item: ReorderItem): number {\n return Math.round(item.recommendedReorderQty * 1.5)\n }\n\n openCreatePoDialog(item: ReorderItem): void {\n this.selectedSkuItem.set(item)\n this.customReorderQty.set(item.recommendedReorderQty)\n this.selectedShippingMethod.set('standard-freight')\n this.createPoDialogOpen.set(true)\n }\n\n handleConfirmCreatePo(): void {\n const selected = this.selectedSkuItem()\n if (!selected) return\n const poNumber = `PO-2026-${Math.floor(1000 + Math.random() * 9000)}`\n this.actionFeedback.set(\n `Draft ${poNumber} created for ${selected.sku} (${this.customReorderQty()} units · $${this.dialogCalculatedCost().toLocaleString('en-US', { minimumFractionDigits: 2 })}) routed to ${selected.supplier}.`,\n )\n this.createPoDialogOpen.set(false)\n setTimeout(() => this.actionFeedback.set(null), 4500)\n }\n\n openBulkPoDialog(): void {\n this.bulkPoDialogOpen.set(true)\n }\n\n handleConfirmBulkPos(): void {\n this.actionFeedback.set(\n `Successfully generated 4 Purchase Orders (Total $48,250.00) for Global Fulfillment Center replenishment.`,\n )\n this.bulkPoDialogOpen.set(false)\n setTimeout(() => this.actionFeedback.set(null), 5000)\n }\n\n handleExportPlan(): void {\n this.actionFeedback.set(`Replenishment forecast plan for ${reorderItems.length} SKUs exported successfully as CSV.`)\n setTimeout(() => this.actionFeedback.set(null), 4000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/inventory-reorder-forecast/inventory-reorder-forecast.component.ts" }, { "path": "packages/registry-angular/blocks/inventory-reorder-forecast/index.ts", "content": "export {\n UiInventoryReorderForecastComponent,\n type ReorderItem,\n type StockHealthStatus,\n} from './inventory-reorder-forecast.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/inventory-reorder-forecast/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }