{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cold-chain-temp-monitor", "title": "Cold Chain Temp Monitor", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/cold-chain-temp-monitor/ColdChainTempMonitor.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n Battery,\n Bell,\n Bluetooth,\n CheckCircle2,\n Download,\n Droplets,\n Flame,\n PhoneCall,\n ShieldAlert,\n ShieldCheck,\n Snowflake,\n ThermometerSnowflake,\n ThermometerSun,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface LogEntry {\n id: string\n timestamp: string\n timeAgo: string\n internalTemp: number\n ambientTemp: number\n deltaT: number\n probeLocation: string\n probeId: string\n humidity: number\n status: 'optimal' | 'in-spec' | 'warning' | 'breach'\n isLatest?: boolean\n}\n\nexport interface ChartReading {\n time: string\n hourLabel: string\n internalTemp: number\n ambientTemp: number\n milestone: string\n}\n\nexport interface ColdChainTempMonitorProps extends React.HTMLAttributes {\n shipmentId?: string\n shipmentTitle?: string\n tempClass?: string\n beaconId?: string\n protocolVersion?: string\n batteryPercent?: number\n batteryDays?: number\n currentInternalTemp?: number\n currentAmbientTemp?: number\n currentHumidity?: number\n totalExcursions?: number\n monitoringHours?: number\n logs?: LogEntry[]\n chartData?: ChartReading[]\n}\n\nconst defaultChartData: ChartReading[] = [\n { time: '00:00', hourLabel: '00:00 UTC', internalTemp: -19.8, ambientTemp: 18.2, milestone: 'FRA Departure Tarmac' },\n { time: '03:00', hourLabel: '03:00 UTC', internalTemp: -20.4, ambientTemp: -4.5, milestone: 'Flight EK046 Climb' },\n {\n time: '06:00',\n hourLabel: '06:00 UTC',\n internalTemp: -20.8,\n ambientTemp: -6.2,\n milestone: 'Cruise Flight Level 380',\n },\n {\n time: '09:00',\n hourLabel: '09:00 UTC',\n internalTemp: -20.1,\n ambientTemp: 12.4,\n milestone: 'DXB Descent & Approach',\n },\n {\n time: '12:00',\n hourLabel: '12:00 UTC',\n internalTemp: -19.2,\n ambientTemp: 38.6,\n milestone: 'DXB Ramp Tarmac Transfer',\n },\n {\n time: '15:00',\n hourLabel: '15:00 UTC',\n internalTemp: -19.6,\n ambientTemp: 32.0,\n milestone: 'Perishable Hub Staging',\n },\n { time: '18:00', hourLabel: '18:00 UTC', internalTemp: -19.8, ambientTemp: 26.5, milestone: 'Active Reefer Bay #4' },\n {\n time: '21:00',\n hourLabel: '21:00 UTC',\n internalTemp: -19.5,\n ambientTemp: 25.0,\n milestone: 'Pre-Connection QA Inspection',\n },\n { time: '24:00', hourLabel: '14:30 UTC', internalTemp: -19.4, ambientTemp: 24.8, milestone: 'Dubai Hub Terminal 2' },\n]\n\nconst defaultLogs: LogEntry[] = [\n {\n id: 'log-1',\n timestamp: 'Aug 21, 14:30 UTC',\n timeAgo: '24s ago',\n internalTemp: -19.4,\n ambientTemp: 24.8,\n deltaT: 44.2,\n probeLocation: 'Pallet Center Core',\n probeId: 'Probe #A1',\n humidity: 18,\n status: 'optimal',\n isLatest: true,\n },\n {\n id: 'log-2',\n timestamp: 'Aug 21, 14:00 UTC',\n timeAgo: '30m ago',\n internalTemp: -19.5,\n ambientTemp: 25.2,\n deltaT: 44.7,\n probeLocation: 'Upper Cargo Lid',\n probeId: 'Probe #B2',\n humidity: 18,\n status: 'optimal',\n },\n {\n id: 'log-3',\n timestamp: 'Aug 21, 13:30 UTC',\n timeAgo: '1h ago',\n internalTemp: -19.2,\n ambientTemp: 28.4,\n deltaT: 47.6,\n probeLocation: 'Lower Ventral Core',\n probeId: 'Probe #C1',\n humidity: 19,\n status: 'in-spec',\n },\n {\n id: 'log-4',\n timestamp: 'Aug 21, 13:00 UTC',\n timeAgo: '1.5h ago',\n internalTemp: -19.8,\n ambientTemp: 36.1,\n deltaT: 55.9,\n probeLocation: 'Pallet Center Core',\n probeId: 'Probe #A1',\n humidity: 20,\n status: 'optimal',\n },\n {\n id: 'log-5',\n timestamp: 'Aug 21, 12:30 UTC',\n timeAgo: '2h ago',\n internalTemp: -20.1,\n ambientTemp: 38.6,\n deltaT: 58.7,\n probeLocation: 'Outer Thermal Jacket',\n probeId: 'Probe #D4',\n humidity: 19,\n status: 'optimal',\n },\n]\n\nexport const ColdChainTempMonitor = React.forwardRef(\n (\n {\n className,\n shipmentId = '#CC-9482',\n shipmentTitle = 'Vaccine Cold-Chain Consignment #CC-9482',\n tempClass = 'Ultra-Cold Frozen · Target: -20°C ± 2°C',\n beaconId = 'SensorTag #BT-4892 · BLE 5.3',\n protocolVersion = 'IATA CEIV / WHO-PQS Standard',\n batteryPercent = 94,\n batteryDays = 180,\n currentInternalTemp = -19.4,\n currentAmbientTemp = 24.8,\n currentHumidity = 18,\n totalExcursions = 0,\n monitoringHours = 96,\n logs = defaultLogs,\n chartData = defaultChartData,\n ...props\n },\n ref,\n ) => {\n const [isExporting, setIsExporting] = React.useState(false)\n const [exportNotification, setExportNotification] = React.useState(false)\n const [activeTimeframe, setActiveTimeframe] = React.useState<'24h' | '48h' | '96h'>('24h')\n const [selectedReadingIndex, setSelectedReadingIndex] = React.useState(null)\n const [dryIceCapacityPercent] = React.useState(78)\n const [dryIceEnduranceHours] = React.useState(72)\n\n const handleExportCSV = () => {\n setIsExporting(true)\n setTimeout(() => {\n setIsExporting(false)\n setExportNotification(true)\n setTimeout(() => {\n setExportNotification(false)\n }, 4500)\n }, 500)\n }\n\n const chartPoints = React.useMemo(() => {\n const data = chartData\n const svgWidth = 740\n const paddingX = 40\n const usableWidth = svgWidth - paddingX * 2\n\n return data.map((d, i) => {\n const x = paddingX + (i / (data.length - 1)) * usableWidth\n const yInternal = 110 - (d.internalTemp - -20) * 22.5\n const yAmbient = 180 - ((d.ambientTemp - -10) / 55) * 150\n\n return {\n x,\n yInternal,\n yAmbient,\n ...d,\n }\n })\n }, [chartData])\n\n const internalPath = React.useMemo(() => {\n const pts = chartPoints\n if (!pts.length) return ''\n let path = `M ${pts[0].x},${pts[0].yInternal}`\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1]\n const curr = pts[i]\n const cx = (prev.x + curr.x) / 2\n path += ` C ${cx},${prev.yInternal} ${cx},${curr.yInternal} ${curr.x},${curr.yInternal}`\n }\n return path\n }, [chartPoints])\n\n const internalArea = React.useMemo(() => {\n const pts = chartPoints\n if (!pts.length) return ''\n const firstX = pts[0].x\n const lastX = pts[pts.length - 1].x\n return `${internalPath} L ${lastX},210 L ${firstX},210 Z`\n }, [chartPoints, internalPath])\n\n const ambientPath = React.useMemo(() => {\n const pts = chartPoints\n if (!pts.length) return ''\n let path = `M ${pts[0].x},${pts[0].yAmbient}`\n for (let i = 1; i < pts.length; i++) {\n const prev = pts[i - 1]\n const curr = pts[i]\n const cx = (prev.x + curr.x) / 2\n path += ` C ${cx},${prev.yAmbient} ${cx},${curr.yAmbient} ${curr.x},${curr.yAmbient}`\n }\n return path\n }, [chartPoints])\n\n return (\n \n {/* Header Section */}\n
\n
\n
\n
\n
\n \n
\n

{shipmentTitle}

\n
\n {/* Temperature Class Badge in Sky Blue */}\n \n \n {tempClass}\n \n
\n\n
\n
\n \n {beaconId}\n
\n ·\n
\n \n {batteryPercent}%\n ({batteryDays} days remaining)\n
\n ·\n
\n \n \n \n \n Live Telemetry\n · DXB Terminal 2 Transit\n
\n
\n
\n\n {/* Action Button */}\n
\n \n \n {isExporting ? 'Exporting...' : 'Export Audit Log CSV'}\n \n
\n
\n\n {/* Export Success Banner */}\n {exportNotification && (\n \n
\n \n \n Cold-chain telemetry audit log exported successfully with cryptographic SHA-256 chain-of-custody seal.\n \n
\n setExportNotification(false)}\n >\n ✕\n \n \n )}\n\n {/* 4 Telemetry Overview Cards */}\n
\n {/* 1. Current Internal Temperature */}\n \n \n
\n
\n
\n \n
\n Internal Core Temp\n
\n \n In Target Zone\n \n
\n \n \n
\n
\n \n {currentInternalTemp > 0 ? `+${currentInternalTemp}` : currentInternalTemp}°C\n \n Payload\n
\n ±0.6°C setpoint\n
\n\n
\n
\n Target Corridor:\n -22.0°C to -18.0°C\n
\n

Probe #A1 (Pallet Center Core)

\n
\n \n \n\n {/* 2. Ambient External Temperature */}\n \n \n
\n
\n
\n \n
\n Ambient External\n
\n \n Dubai Tarmac\n \n
\n \n \n
\n
\n \n {currentAmbientTemp > 0 ? `+${currentAmbientTemp}` : currentAmbientTemp}°C\n \n Air Temp\n
\n
\n \n ΔT 44.2°C\n
\n
\n\n
\n
\n Transfer Node:\n DXB Cargo T2\n
\n

VIP Cryo-Insulation Envelope Active

\n
\n \n \n\n {/* 3. Relative Humidity */}\n \n \n
\n
\n
\n \n
\n Cargo Humidity\n
\n \n Optimal Dry\n \n
\n \n \n
\n
\n \n {currentHumidity}%\n \n RH\n
\n Zero Condensation\n
\n\n
\n \n
\n \n Dew Point: -32.4°C\n \n Spec < 35%\n
\n
\n \n \n\n {/* 4. Total Excursions / Breach Events */}\n \n \n
\n
\n
\n \n
\n Excursion Events\n
\n \n 100% Compliant\n \n
\n \n \n
\n
\n \n {totalExcursions}\n \n Breaches\n
\n \n {monitoringHours}h in-transit\n \n
\n\n
\n
\n Mean Kinetic Temp (MKT):\n -19.7°C\n
\n

0 cumulative seconds out-of-spec

\n
\n \n \n
\n\n {/* 24-Hour Temperature Curve / Telemetry Graph */}\n \n \n
\n
\n
\n \n 24-Hour Payload & Ambient Telemetry Curve\n
\n \n Continuous thermal gradient monitoring comparing internal core payload against ambient flight & tarmac\n temperatures with strict excursion threshold corridors.\n \n
\n\n {/* Legend & Timeframe */}\n
\n
\n
\n \n Internal Core\n
\n
\n \n Ambient Air\n
\n
\n \n Upper Limit (-18°C)\n
\n
\n \n Lower Limit (-22°C)\n
\n
\n\n
\n setActiveTimeframe('24h')}\n >\n 24h\n \n setActiveTimeframe('48h')}\n >\n 48h\n \n setActiveTimeframe('96h')}\n >\n 96h\n \n
\n
\n
\n \n\n \n {/* SVG Chart Area */}\n
\n \n \n \n \n \n \n \n\n {/* Target Corridor Shaded Band (-18°C [y=65] to -22°C [y=155]) */}\n \n\n {/* Grid Lines */}\n \n \n \n \n \n\n {/* Y-Axis Threshold Labels */}\n \n -18°C (Max)\n \n \n -20°C (Set)\n \n \n -22°C (Min)\n \n\n {/* Ambient Temperature Curve (Dashed Amber) */}\n \n\n {/* Internal Temperature Gradient Area & Curve (Solid Sky) */}\n \n \n\n {/* Data Point Markers */}\n {chartPoints.map((pt, idx) => (\n \n {/* Internal Point */}\n setSelectedReadingIndex(idx)}\n />\n {/* Ambient Point */}\n \n \n ))}\n \n\n {/* X-Axis Timeline Milestones */}\n
\n {chartPoints.map((pt, idx) => (\n \n

{pt.time}

\n

{pt.milestone}

\n

\n {pt.internalTemp > 0 ? `+${pt.internalTemp}` : pt.internalTemp}°C\n

\n
\n ))}\n
\n \n\n {/* Metric Summary Strip */}\n
\n
\n Min Internal Temp\n

-20.8°C

\n At cruise altitude\n
\n
\n Max Internal Temp\n

-19.2°C

\n During DXB ramp transfer\n
\n
\n 24h Mean Temp\n

-19.7°C

\n Optimal Setpoint\n
\n
\n Standard Deviation\n

±0.4°C

\n Tight thermal hold\n
\n
\n Peak External Heat\n

+38.6°C

\n DXB Tarmac 12:00 UTC\n
\n
\n \n \n\n {/* Temperature Logging History Table & Protocol Card */}\n
\n {/* Table: 2 cols on lg */}\n \n \n
\n
\n Temperature Logging History\n \n Calibrated multi-probe sensor telemetry pings across core pallet positions.\n \n
\n \n {logs.length} Recent Pings\n \n
\n \n \n
\n \n \n \n Timestamp\n Internal Temp\n Ambient Air\n Delta-T\n Probe Location\n RH %\n Status\n \n \n \n {logs.map((log) => (\n \n \n
\n {log.timestamp}\n {log.isLatest && (\n \n Now\n \n )}\n
\n \n \n \n {log.internalTemp > 0 ? `+${log.internalTemp}` : log.internalTemp}°C\n \n \n \n {log.ambientTemp > 0 ? `+${log.ambientTemp}` : log.ambientTemp}°C\n \n \n {log.deltaT}°C\n \n \n {log.probeLocation}\n ({log.probeId})\n \n \n {log.humidity}%\n \n \n \n {log.status}\n \n \n \n ))}\n \n
\n
\n \n \n\n {/* Critical Excursion Alert Protocol Card */}\n \n \n
\n
\n \n Excursion Alert Protocol\n
\n \n \n Armed\n \n
\n \n Automated escalation rules and dry ice reserve endurance monitoring.\n \n \n \n {/* Escalation Rule 1 */}\n
\n
\n Urgent SMS / Pager Alert Trigger:\n \n > -15.0°C\n \n
\n

\n Triggers priority emergency dispatch if payload core temperature rises above -15.0°C for ≥ 30\n consecutive minutes.\n

\n
\n\n {/* Cryogenic Dry Ice Reserve */}\n
\n
\n
\n \n Dry Ice Solid CO2 Reserve\n
\n \n {dryIceEnduranceHours}h hold\n \n
\n \n
\n Sublimation: 0.38 kg/hr\n 42 kg solid reserve\n
\n
\n\n \n\n {/* Emergency Response Logistics Desk */}\n
\n
\n
\n \n Rapid Intervention Desk:\n
\n DXB Hub Team\n
\n
\n Emergency Pager:\n +971 4 216 4890\n
\n
\n Re-Icing Intervention SLA:\n < 20 minutes\n
\n
\n Standard Operating SOP:\n SOP-BIO-904\n
\n
\n \n \n
\n \n )\n },\n)\n\nColdChainTempMonitor.displayName = 'ColdChainTempMonitor'\n", "type": "registry:block", "target": "~/components/blocks/ColdChainTempMonitor.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/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Refrigerated pharmaceutical & perishable cargo IoT temperature logger and excursion monitoring with multi-reading time-series trend chart, upper/lower threshold guidelines, probe logging history table, and critical excursion alert protocol.", "categories": [ "logistics", "dashboard", "app" ] }