{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "cold-chain-temp-monitor", "title": "Cold Chain Temp Monitor", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/cold-chain-temp-monitor/cold-chain-temp-monitor.component.ts", "content": "// Refrigerated pharmaceutical & perishable cargo IoT temperature logger and excursion\n// monitoring with multi-reading time-series trend chart, upper/lower threshold\n// guidelines, probe logging history table, and critical excursion alert protocol.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, computed, DestroyRef, inject, Input, signal } from '@angular/core'\nimport {\n Activity,\n Battery,\n Bell,\n Bluetooth,\n CheckCircle2,\n Download,\n Droplets,\n Flame,\n LucideAngularModule,\n PhoneCall,\n ShieldAlert,\n ShieldCheck,\n Snowflake,\n ThermometerSnowflake,\n ThermometerSun,\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 UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.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 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\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-cold-chain-temp-monitor, [ui-cold-chain-temp-monitor]',\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 UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\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

\n {{ shipmentTitle }}\n

\n
\n \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 \n
\n \n \n {{ isExporting() ? 'Exporting...' : 'Export Audit Log CSV' }}\n \n
\n
\n\n \n @if (exportNotification()) {\n \n
\n \n \n Cold-chain telemetry audit log exported successfully with cryptographic SHA-256 chain-of-custody seal.\n \n
\n \n ✕\n \n
\n }\n\n \n
\n \n
\n
\n
\n
\n \n \n
\n

Internal Core Temp

\n
\n In Target Zone\n
\n
\n
\n
\n
\n \n {{ formatTemp(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 \n
\n
\n
\n
\n \n \n
\n

Ambient External

\n
\n Dubai Tarmac\n
\n
\n
\n
\n
\n \n {{ formatTemp(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 \n
\n
\n
\n
\n \n \n
\n

Cargo Humidity

\n
\n Optimal Dry\n
\n
\n
\n
\n
\n {{ currentHumidity }}%\n RH\n
\n Zero Condensation\n
\n\n
\n
\n
\n Dew Point: -32.4°C\n Spec < 35%\n
\n
\n \n \n\n \n
\n
\n
\n
\n \n \n
\n

Excursion Events

\n
\n 100% Compliant\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 \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 \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 @for (tf of timeframes; track tf) {\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\n \n -18°C (Max)\n \n -20°C (Set)\n \n \n -22°C (Min)\n \n\n \n \n\n \n \n \n\n \n @for (pt of chartPoints(); track $index) {\n \n \n \n \n \n \n }\n \n\n \n
\n @for (pt of chartPoints(); track $index) {\n
\n

{{ pt.time }}

\n

{{ pt.milestone }}

\n

\n {{ formatTemp(pt.internalTemp) }}°C\n

\n
\n }\n
\n
\n\n \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 \n
\n \n
\n
\n
\n
\n

Temperature Logging History

\n

\n Calibrated multi-probe sensor telemetry pings across core pallet positions.\n

\n
\n \n {{ activeLogs().length }} Recent Pings\n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (log of activeLogs(); track log.id) {\n \n \n \n \n \n \n \n \n \n }\n \n
TimestampInternal TempAmbient AirDelta-TProbe LocationRH %Status
\n
\n {{ log.timestamp }}\n @if (log.isLatest) {\n Now\n }\n
\n 		\n \n {{ formatTemp(log.internalTemp) }}°C\n \n \n {{ formatTemp(log.ambientTemp) }}°C\n \n {{ log.deltaT }}°C\n \n {{ log.probeLocation }}\n ({{ log.probeId }})\n \n {{ log.humidity }}%\n \n \n {{ log.status }}\n \n
\n
\n
\n
\n\n \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 \n
\n
\n Urgent SMS / Pager Alert Trigger:\n > -15.0°C\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 \n
\n
\n
\n \n Dry Ice Solid CO2 Reserve\n
\n {{ dryIceEnduranceHours() }}h hold\n
\n
\n
\n Sublimation: 0.38 kg/hr\n 42 kg solid reserve\n
\n
\n\n
\n\n \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})\nexport class UiColdChainTempMonitorComponent {\n protected readonly Activity = Activity\n protected readonly Battery = Battery\n protected readonly Bell = Bell\n protected readonly Bluetooth = Bluetooth\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Download = Download\n protected readonly Droplets = Droplets\n protected readonly Flame = Flame\n protected readonly PhoneCall = PhoneCall\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Snowflake = Snowflake\n protected readonly ThermometerSnowflake = ThermometerSnowflake\n protected readonly ThermometerSun = ThermometerSun\n\n protected readonly timeframes = ['24h', '48h', '96h'] as const\n\n @Input() shipmentId = '#CC-9482'\n @Input() shipmentTitle = 'Vaccine Cold-Chain Consignment #CC-9482'\n @Input() tempClass = 'Ultra-Cold Frozen · Target: -20°C ± 2°C'\n @Input() beaconId = 'SensorTag #BT-4892 · BLE 5.3'\n @Input() protocolVersion = 'IATA CEIV / WHO-PQS Standard'\n @Input() batteryPercent = 94\n @Input() batteryDays = 180\n @Input() currentInternalTemp = -19.4\n @Input() currentAmbientTemp = 24.8\n @Input() currentHumidity = 18\n @Input() totalExcursions = 0\n @Input() monitoringHours = 96\n @Input() set logs(v: LogEntry[] | undefined) {\n this.logsOverride.set(v)\n }\n @Input() set chartData(v: ChartReading[] | undefined) {\n this.chartDataOverride.set(v)\n }\n @Input('class') className?: string\n\n private readonly logsOverride = signal(undefined)\n private readonly chartDataOverride = signal(undefined)\n\n readonly activeLogs = computed(() => this.logsOverride() ?? defaultLogs)\n readonly activeChartData = computed(() => this.chartDataOverride() ?? defaultChartData)\n\n readonly isExporting = signal(false)\n readonly exportNotification = signal(false)\n readonly activeTimeframe = signal<'24h' | '48h' | '96h'>('24h')\n readonly selectedReadingIndex = signal(null)\n readonly dryIceEnduranceHours = signal(72)\n readonly dryIceCapacityPercent = signal(78)\n\n private exportTimers: ReturnType[] = []\n\n constructor() {\n inject(DestroyRef).onDestroy(() => this.exportTimers.forEach((t) => clearTimeout(t)))\n }\n\n handleExportCSV(): void {\n this.isExporting.set(true)\n this.exportTimers.push(\n setTimeout(() => {\n this.isExporting.set(false)\n this.exportNotification.set(true)\n this.exportTimers.push(\n setTimeout(() => {\n this.exportNotification.set(false)\n }, 4500),\n )\n }, 500),\n )\n }\n\n // Coordinate mapping for SVG telemetry chart\n // Internal Temp scale: -24°C (Y: 200) to -16°C (Y: 20)\n // Setpoint -20°C -> Y: 110\n // Upper threshold -18°C -> Y: 65\n // Lower threshold -22°C -> Y: 155\n readonly chartPoints = computed(() => {\n const data = this.activeChartData()\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 // Map -24°C..-16°C to 195..25\n // formula: y = 110 - (temp - (-20)) * 22.5\n const yInternal = 110 - (d.internalTemp - -20) * 22.5\n // Map ambient -10°C..+45°C to 200..30\n const yAmbient = 180 - ((d.ambientTemp - -10) / 55) * 150\n\n return {\n x,\n yInternal,\n yAmbient,\n ...d,\n }\n })\n })\n\n readonly internalPath = computed(() => {\n const pts = this.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 })\n\n readonly internalArea = computed(() => {\n const pts = this.chartPoints()\n if (!pts.length) return ''\n const firstX = pts[0].x\n const lastX = pts[pts.length - 1].x\n return `${this.internalPath()} L ${lastX},210 L ${firstX},210 Z`\n })\n\n readonly ambientPath = computed(() => {\n const pts = this.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 })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-6', this.className)\n }\n\n get exportIconClass(): string {\n return cn('size-3.5', this.isExporting() && 'animate-bounce')\n }\n\n formatTemp(value: number): string {\n return value > 0 ? `+${value}` : `${value}`\n }\n\n statusVariant(status: LogEntry['status']): 'success' | 'outline' | 'warning' {\n if (status === 'optimal') return 'success'\n if (status === 'in-spec') return 'outline'\n return 'warning'\n }\n\n timeframeClass(tf: '24h' | '48h' | '96h'): string {\n return cn(\n 'rounded-md px-2.5 py-1 font-medium transition-colors',\n this.activeTimeframe() === tf\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n milestoneClass(idx: number): string {\n return cn(\n 'rounded p-1 text-center transition-colors',\n this.selectedReadingIndex() === idx && 'bg-muted border-border/80 border',\n )\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/cold-chain-temp-monitor/cold-chain-temp-monitor.component.ts" }, { "path": "packages/registry-angular/blocks/cold-chain-temp-monitor/index.ts", "content": "export { UiColdChainTempMonitorComponent, type LogEntry, type ChartReading } from './cold-chain-temp-monitor.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/cold-chain-temp-monitor/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/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }