// Unit Detail screen, equipment specs, recent activity, flag history. const UnitDetail = ({ unitId, onClose, onOpenDay }) => { const D = window.NORFAB_DATA; const unit = D.UNITS.find(u => u.id === unitId); if (!unit) return null; // Real trips for this unit (have an assigned driver). Yard moves are // tracked separately on D.YARD_MOVES — brief unassigned movements at // Head Office, surfaced so 'truck was touched' is visible on days that // would otherwise look idle. const allTrips = D.TRIPS.filter(t => t.unit === unitId).sort((a, b) => b.date.localeCompare(a.date) || b.start_min - a.start_min); const yardMoves = (D.YARD_MOVES || []).filter(t => t.unit === unitId); // Merge for the Recent trips table — yard moves are tagged so the row // can render a different status pill. const allActivity = [ ...allTrips, ...yardMoves.map(t => ({ ...t, _isYardMove: true })), ].sort((a, b) => b.date.localeCompare(a.date) || b.start_min - a.start_min); const last90Cutoff = (() => { const d = new Date(Date.UTC(2026, 4, 7)); d.setUTCDate(d.getUTCDate() - 90); return d.toISOString().slice(0, 10); })(); const recent = allTrips.filter(t => t.date >= last90Cutoff); const yardMoves90 = yardMoves.filter(t => t.date >= last90Cutoff); const totalKm90 = recent.reduce((s, t) => s + t.km, 0); const flagged90 = recent.filter(t => t.flagged); const days90 = new Set(recent.map(t => t.date)).size; // Pick the most recent active day for this unit. Find the driver who drove // it (most trips that day wins) and grab their Pre/Post DVIs for that day. // This becomes the duty-status graph anchor. If the unit hasn't moved // recently, the chart shows a single flat Off-Duty line, which is honest. const dutyDay = (() => { if (!allTrips.length) return null; const day = allTrips[0].date; const dayTrips = allTrips.filter(t => t.date === day); const driverCounts = dayTrips.reduce((acc, t) => { const key = t.driver || "(unknown)"; acc[key] = (acc[key] || 0) + 1; return acc; }, {}); const driver = Object.entries(driverCounts).sort((a, b) => b[1] - a[1])[0][0]; const driver_name = (dayTrips.find(t => t.driver === driver) || {}).driver_name || driver; const driverDayTrips = dayTrips.filter(t => t.driver === driver); const pre = (D.DVIR || []).find(v => v.date_local === day && v.unit === unitId && v.driver === driver && v.trip_type === "Pre") || null; const post = (D.DVIR || []).find(v => v.date_local === day && v.unit === unitId && v.driver === driver && v.trip_type === "Post") || null; return { day, driver, driver_name, trips: driverDayTrips, pre, post }; })(); return (
← Back
{unit.photo && (
{`${unit.id}
)}
Unit · {unit.klass === "heavy" ? "NSC time-record" : "Light vehicle"}
{unit.id}
{unit.year} {unit.make} {unit.model}
}>Print }>View live JSON
{/* Specs row */}
Vehicle specifications GVW {unit.gvw_kg.toLocaleString()} kg
{[ ["Class", unit.klass === "heavy" ? "≥ 11,794 kg (NSC)" : "< 11,794 kg (Light)"], ["Operating area", unit.klass === "heavy" ? "160 km radius (AB exempt)" : "Local Calgary & area"], ["Driver of record", unit.driver], ["Year / Make / Model", `${unit.year} ${unit.make} ${unit.model}`], ["Plate", `${unit.id}-AB`], ["VIN", "1FDXX0000NXXX" + unit.id.slice(-3)], ["Last odometer", (unit.odo || 142000).toLocaleString() + " km"], ["Last inspection", "Apr 18, 2026"], ].map(([k, v], i) => (
{k}
{v}
))}
Last 90 days
t.date)).size} day${new Set(yardMoves90.map(t => t.date)).size === 1 ? "" : "s"}` : "None"} style={{ borderLeft: "none", padding: "14px 18px" }} />
{/* Duty-status graph for this unit's most recent active day. The day's primary driver (most trips wins ties) is the anchor; their pre/post DVIs for the day populate the shoulders. If the unit has no recent trips, the chart shows a flat Off-Duty line. */}
Driver's daily log {dutyDay ? (
{dutyDay.driver_name} on {dutyDay.day}
) : (
No recorded activity in the last 90 days
)}
{dutyDay && ( onOpenDay?.(dutyDay.day)}> Open day detail )}
{dutyDay && window.DutyChart ? ( ) : (
Nothing to chart for this unit yet.
)} {/* Recent activity table + Flag log */}
Recent trips
{["Date", "Time", "From", "To", "Km", "Status"].map(h => ( ))} {allActivity.slice(0, 12).map((t, i) => ( onOpenDay?.(t.date)} onMouseEnter={e => e.currentTarget.style.background = "var(--steel-50)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}> ))}
{h}
{t.date} {D.minToHHMM(t.start_min)} {window.LocationCell ? : (t.start_site || "")} {window.LocationCell ? : (t.end_site || "")} {t.km.toFixed(1)} {t._isYardMove ? In-yard move : t.flagged ? {t.outside_radius ? "Outside radius" : ((t.flags && t.flags[0]) || "Flagged")} : Compliant}
Flag log
{flagged90.length === 0 ? (
No flags in the last 90 days.
) : (
{flagged90.slice(0, 20).map(t => { const rawFlag = (t.flags && t.flags[0]) || ""; // Relabel upstream DVI-prefixed flags to "Pre-Trip" for UI // clarity. The pipeline emits "DVI late" / "DVI missing" // generically; in practice these are pre-trip events (the // post-trip is informational and not separately tracked). const flagLabel = rawFlag ? rawFlag.replace(/\bDVI\b/g, "Pre-Trip") : "Flagged in source data"; const fromTo = [t.start_site, t.end_site].filter(Boolean).join(" to ") || t.site || ""; return (
{t.outside_radius ? "Outside 160 km radius (from day-start)" : flagLabel}
{t.date}{fromTo ? " · " + fromTo : ""}
); })}
)}
{/* Maintenance for this specific unit - next 3 due + last 5 events */}
); }; // Maintenance summary for one unit. Shows the next 3 due items + last 5 // log entries for this unit, plus a link out to the full Maintenance // section. Hidden entirely if no schedule rules apply to this unit AND // there's no log history for it. function UnitMaintenanceCard({ unitId }) { const D = window.NORFAB_DATA; // Up to 3 most-urgent due items for this unit const due = (typeof D.maintenanceDueList === "function" ? D.maintenanceDueList() : []) .filter(m => m.unit === unitId && m.due_date) .map(m => ({ ...m, days: D.daysUntil(m.due_date) })) .sort((a, b) => (a.days == null ? 9e9 : a.days) - (b.days == null ? 9e9 : b.days)) .slice(0, 3); // Vehicle expiries for this unit const vm = D.vehicleMeta ? D.vehicleMeta(unitId) : {}; const expiries = [ { kind: "CVIP", date: vm.cvip_expires }, { kind: "Registration", date: vm.registration_expires }, { kind: "Insurance", date: vm.insurance_expires }, ].filter(e => e.date).map(e => ({ ...e, days: D.daysUntil(e.date) })); // Last 5 log entries const log = ((D.MAINTENANCE && D.MAINTENANCE.log) || []) .filter(e => e.unit === unitId) .sort((a, b) => (b.date || "").localeCompare(a.date || "")) .slice(0, 5); if (due.length === 0 && expiries.length === 0 && log.length === 0) return null; return (
Upcoming maintenance & compliance { e.preventDefault(); window.location.hash = `#maintenance/vehicle/${unitId}`; }} title={`Open ${unitId}'s full maintenance history`}> See all
{due.length + expiries.length === 0 ? (
No upcoming items on file for this unit.
) : (
{due.map((m, i) => { const tone = m.days != null && m.days < 0 ? "accent" : m.days != null && m.days <= 30 ? "warn" : "neutral"; return (
{m.item}
Due {m.due_date}
{m.days == null ? "" : m.days < 0 ? `Overdue ${Math.abs(m.days)}d` : `${m.days}d`}
); })} {expiries.map((e, i) => { const tone = e.days != null && e.days < 0 ? "accent" : e.days != null && e.days <= 30 ? "warn" : "neutral"; return (
{e.kind}
Expires {e.date}
{e.days == null ? "" : e.days < 0 ? `Overdue ${Math.abs(e.days)}d` : `${e.days}d`}
); })}
)}
Recent maintenance log
{log.length === 0 ? (
No log entries on file for this unit yet.
) : (
{log.map((e, i) => (
{e.item}
{e.date}
{[ e.odometer_km != null ? `${e.odometer_km.toLocaleString()} km` : "", e.performer || "", e.notes || "", ].filter(Boolean).join(" · ")}
))}
)}
); } window.UnitDetail = UnitDetail;