{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inventory-reorder-forecast", "title": "Inventory Reorder Forecast", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/inventory-reorder-forecast/InventoryReorderForecast.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n AlertTriangle,\n ArrowUpRight,\n Boxes,\n Building2,\n CheckCircle2,\n Clock,\n DollarSign,\n Download,\n FileCheck,\n PackageCheck,\n PackagePlus,\n Search,\n TrendingUp,\n X,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\nexport function InventoryReorderForecast({ className, ...props }: React.HTMLAttributes) {\n const [facility, setFacility] = React.useState('global-fulfillment')\n const [searchQuery, setSearchQuery] = React.useState('')\n const [categoryFilter, setCategoryFilter] = React.useState('all')\n const [statusFilter, setStatusFilter] = React.useState('all')\n\n const [createPoDialogOpen, setCreatePoDialogOpen] = React.useState(false)\n const [bulkPoDialogOpen, setBulkPoDialogOpen] = React.useState(false)\n const [selectedSkuItem, setSelectedSkuItem] = React.useState(null)\n const [customReorderQty, setCustomReorderQty] = React.useState(250)\n const [selectedShippingMethod, setSelectedShippingMethod] = React.useState('standard-freight')\n\n const [actionFeedback, setActionFeedback] = React.useState(null)\n\n const filteredItems = React.useMemo(() => {\n return reorderItems.filter((item) => {\n const q = 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 = categoryFilter === 'all' || item.category === categoryFilter\n const matchesStatus = statusFilter === 'all' || item.status === statusFilter\n\n return matchesSearch && matchesCategory && matchesStatus\n })\n }, [searchQuery, categoryFilter, statusFilter])\n\n const criticalAndWarningItems = React.useMemo(() => {\n return reorderItems.filter((item) => item.status === 'critical' || item.status === 'warning')\n }, [])\n\n const dialogCalculatedCost = React.useMemo(() => {\n if (!selectedSkuItem) return 0\n return customReorderQty * selectedSkuItem.unitCost\n }, [selectedSkuItem, customReorderQty])\n\n const openCreatePoDialog = (item: ReorderItem) => {\n setSelectedSkuItem(item)\n setCustomReorderQty(item.recommendedReorderQty)\n setSelectedShippingMethod('standard-freight')\n setCreatePoDialogOpen(true)\n }\n\n const handleConfirmCreatePo = () => {\n if (!selectedSkuItem) return\n const poNumber = `PO-2026-${Math.floor(1000 + Math.random() * 9000)}`\n setActionFeedback(\n `Draft ${poNumber} created for ${selectedSkuItem.sku} (${customReorderQty} units · $${dialogCalculatedCost.toLocaleString('en-US', { minimumFractionDigits: 2 })}) routed to ${selectedSkuItem.supplier}.`,\n )\n setCreatePoDialogOpen(false)\n setTimeout(() => {\n setActionFeedback(null)\n }, 4500)\n }\n\n const openBulkPoDialog = () => {\n setBulkPoDialogOpen(true)\n }\n\n const handleConfirmBulkPos = () => {\n setActionFeedback(\n `Successfully generated 4 Purchase Orders (Total $48,250.00) for Global Fulfillment Center replenishment.`,\n )\n setBulkPoDialogOpen(false)\n setTimeout(() => {\n setActionFeedback(null)\n }, 5000)\n }\n\n const handleExportPlan = () => {\n setActionFeedback(`Replenishment forecast plan for ${reorderItems.length} SKUs exported successfully as CSV.`)\n setTimeout(() => {\n setActionFeedback(null)\n }, 4000)\n }\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

\n Inventory Demand & Reorder Forecast\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 {/* Facility Selector */}\n \n\n {/* Export Plan Button */}\n \n \n Export Replenishment Plan\n \n\n {/* Primary Action: Generate Bulk POs */}\n \n
\n
\n\n {/* Notification / Action Feedback Banner */}\n {actionFeedback && (\n
\n
\n \n {actionFeedback}\n
\n setActionFeedback(null)}\n >\n \n \n
\n )}\n\n {/* 4 Forecasting KPI Cards */}\n
\n {/* Metric 1: Critical Reorder SKUs */}\n \n \n \n Critical Reorder SKUs\n \n
\n \n
\n \n \n
\n
\n 4 SKUs\n
\n \n Action Required\n \n
\n

Below safety threshold · 2 in urgent stockout zone

\n \n \n\n {/* Metric 2: Estimated Stockout Days */}\n \n \n \n Estimated Stockout Days\n \n
\n \n
\n \n \n
\n
\n 6.4 Days\n
\n \n Critical Risk\n \n
\n

6.4 Days until stockout on top SKU · Urgent PO needed

\n \n \n\n {/* Metric 3: Suggested Purchase Order Value */}\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 {/* Metric 4: Inventory Turnover Rate */}\n \n \n \n Inventory Turnover Rate\n \n
\n \n
\n \n \n
\n 8.4x / year\n
\n

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

\n \n \n
\n\n {/* Reorder Demand Forecast Table Toolbar & Card */}\n \n \n
\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Search SKU, product name, supplier...\"\n className=\"h-9 pl-9 text-xs sm:text-sm\"\n />\n
\n\n {/* Category Filter */}\n \n\n {/* Status Filter */}\n \n
\n\n
\n \n Showing {filteredItems.length} of{' '}\n {reorderItems.length} forecast SKUs\n \n
\n
\n \n\n \n {/* Demand Table */}\n
\n \n \n \n SKU Identifier & Product\n Current On-Hand\n Sales Velocity\n Days Remaining\n Supplier Lead Time\n Recommended Qty\n Est. PO Cost\n Quick Action\n \n \n \n {filteredItems.map((item) => (\n \n {/* SKU Identifier & Product Name */}\n \n
\n
{item.sku}
\n
{item.name}
\n
\n {item.category}\n ·\n {item.supplier}\n
\n
\n \n\n {/* Current On-Hand Stock */}\n \n
\n {item.onHandStock.toLocaleString()}{' '}\n units\n
\n
\n Safety: {item.safetyStockThreshold} units\n
\n \n\n {/* Average Daily Sales Velocity */}\n \n
\n {item.dailySalesVelocity.toFixed(1)}{' '}\n units/day\n
\n = 0 ? 'text-success' : 'text-destructive',\n )}\n >\n {item.velocityTrend >= 0 ? '+' : ''}\n {item.velocityTrend.toFixed(1)}% 7d\n \n \n\n {/* Days of Inventory Remaining Badge */}\n \n
\n {item.status === 'critical' ? (\n \n \n {item.daysOfInventoryRemaining.toFixed(1)} Days\n \n ) : item.status === 'warning' ? (\n \n \n {item.daysOfInventoryRemaining.toFixed(1)} Days\n \n ) : (\n \n \n {item.daysOfInventoryRemaining.toFixed(1)} Days\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 {/* Supplier Lead Time */}\n \n
\n {item.supplierLeadTimeDays}{' '}\n Days\n
\n
Mfg & Freight
\n \n\n {/* Recommended Reorder Qty */}\n \n
\n {item.recommendedReorderQty}{' '}\n units\n
\n
Optimal batch
\n \n\n {/* Estimated PO Cost */}\n \n
\n ${item.estimatedPoCost.toLocaleString('en-US', { minimumFractionDigits: 2 })}\n
\n
\n ${item.unitCost.toFixed(2)} / unit\n
\n \n\n {/* Quick Action Button */}\n \n
\n openCreatePoDialog(item)}\n >\n \n Create PO\n \n
\n \n \n ))}\n\n {filteredItems.length === 0 && (\n \n \n No inventory forecast items match your current filter criteria.\n \n \n )}\n \n
\n
\n \n \n\n {/* Create Purchase Order Draft Dialog */}\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 {selectedSkuItem && (\n
\n {/* SKU Summary Banner */}\n
\n
\n
\n
{selectedSkuItem.sku}
\n
{selectedSkuItem.name}
\n
\n {selectedSkuItem.supplier} · {selectedSkuItem.category}\n
\n
\n \n {selectedSkuItem.daysOfInventoryRemaining} Days Stock Left\n \n
\n\n \n\n
\n
\n On Hand:\n

{selectedSkuItem.onHandStock} units

\n
\n
\n Daily Velocity:\n

\n {selectedSkuItem.dailySalesVelocity} / day\n

\n
\n
\n Lead Time:\n

\n {selectedSkuItem.supplierLeadTimeDays} Days\n

\n
\n
\n
\n\n {/* Quantity Input & Quick Chips */}\n
\n
\n \n \n Recommended: {selectedSkuItem.recommendedReorderQty} units\n \n
\n setCustomReorderQty(Number(e.target.value))}\n className=\"text-xs tabular-nums sm:text-sm\"\n />\n
\n setCustomReorderQty(Math.round(selectedSkuItem.recommendedReorderQty * 0.5))}\n >\n 50% ({Math.round(selectedSkuItem.recommendedReorderQty * 0.5)})\n \n setCustomReorderQty(selectedSkuItem.recommendedReorderQty)}\n >\n Recommended ({selectedSkuItem.recommendedReorderQty})\n \n setCustomReorderQty(Math.round(selectedSkuItem.recommendedReorderQty * 1.5))}\n >\n 150% ({Math.round(selectedSkuItem.recommendedReorderQty * 1.5)})\n \n
\n
\n\n {/* Shipping Freight Method */}\n
\n \n \n
\n\n {/* Cost Calculation Summary Box */}\n
\n
\n Unit Cost:\n ${selectedSkuItem.unitCost.toFixed(2)}\n
\n
\n Units to Order:\n {customReorderQty} units\n
\n \n
\n Total Estimated PO Value:\n \n $\n {dialogCalculatedCost.toLocaleString('en-US', {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n \n
\n
\n
\n )}\n\n \n \n \n \n \n \n \n \n\n {/* Bulk POs Generation Dialog */}\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 {/* Summary Metrics */}\n
\n
\n Destination Facility:\n \n Global Fulfillment Center\n \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 {/* PO List Breakdown */}\n
\n
Purchase Order Breakdown by Supplier
\n
\n {criticalAndWarningItems.map((item) => (\n
\n
\n {item.supplier}\n
\n {item.sku} ({item.recommendedReorderQty} units)\n
\n
\n \n ${item.estimatedPoCost.toLocaleString('en-US', { minimumFractionDigits: 2 })}\n \n
\n ))}\n
\n
\n
\n\n \n \n \n \n \n \n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/InventoryReorderForecast.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/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" ] }