// App shell, wires routes/screens together with shared state.
const { useState: useStateApp, useEffect: useEffectApp } = React;
// Format an ISO sync timestamp into a short local-time string. Returns
// "pending" if the value is missing so the UI never shows a fake time.
function formatSyncTime(iso) {
if (!iso) return "pending";
const d = new Date(iso);
if (isNaN(d.getTime())) return "pending";
// e.g. "14:32 MDT" (24-h) with the user's local time zone abbreviation.
const time = d.toLocaleTimeString("en-CA", { hour: "2-digit", minute: "2-digit", hour12: false });
const tz = (d.toLocaleTimeString("en-US", { timeZoneName: "short" }).split(" ").pop()) || "";
return tz ? `${time} ${tz}` : time;
}
// Same idea, longer form for the hero subtext.
function formatSyncTimeLong(iso) {
if (!iso) return "pending";
const d = new Date(iso);
if (isNaN(d.getTime())) return "pending";
const time = d.toLocaleTimeString("en-CA", { hour: "2-digit", minute: "2-digit", hour12: false });
const tz = (d.toLocaleTimeString("en-US", { timeZoneName: "short" }).split(" ").pop()) || "";
const sameDay = d.toDateString() === new Date().toDateString();
if (sameDay) return tz ? `${time} ${tz}` : time;
const date = d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
return tz ? `${date} ${time} ${tz}` : `${date} ${time}`;
}
window.formatSyncTime = formatSyncTime;
window.formatSyncTimeLong = formatSyncTimeLong;
const TWEAKS = /*EDITMODE-BEGIN*/{
"showFleetSummary": true,
"compactCalendar": false
}/*EDITMODE-END*/;
function App() {
const [state, setState] = useStateApp(() => {
// Default to the CURRENT month in Mountain time, not a hardcoded snapshot.
// localTodayISO returns "YYYY-MM-DD" anchored to America/Edmonton, so the
// calendar opens on "today" regardless of when this file was last touched.
const [ty, tm] = window.NORFAB_DATA.localTodayISO().split("-").map(Number);
return {
unitId: "ALL",
weightFilter: "all", // all | heavy | light (defaults to "all" so first impression isn't filtered)
year: ty,
month: tm - 1, // JS months are 0-indexed
includeMinor: false,
};
});
// Feature #2, deep-linkable URLs. Init from hash; sync on change.
const initial = window.NORFAB_LOCAL.hashToRoute(window.location.hash);
const [route, setRoute] = useStateApp(initial);
const [modal, setModal] = useStateApp(null); // {kind: 'daily-log', unitId, dayISO}
const [toast, setToast] = useStateApp(null);
// Feature #1, command palette
const [paletteOpen, setPaletteOpen] = useStateApp(false);
// Bumps when data.js polls and gets fresh JSON. Forces the React tree
// to re-render so children re-read window.NORFAB_DATA from their
// function bodies and pick up the new numbers. Without this, only a
// browser refresh would pull new pipeline output.
const [refreshTick, setRefreshTick] = useStateApp(0);
useEffectApp(() => {
const onRefresh = () => setRefreshTick(t => t + 1);
window.addEventListener("nf-data-refreshed", onRefresh);
return () => window.removeEventListener("nf-data-refreshed", onRefresh);
}, []);
useEffectApp(() => {
const desired = window.NORFAB_LOCAL.routeToHash(route);
if (window.location.hash !== desired) {
// pushState (not replaceState) so every screen becomes a history
// entry — this is what makes the browser back button and the app's
// "Back" buttons actually return to the previous screen. The one
// exception: landing on the default route with no hash yet; replace
// so back doesn't dead-end on a hashless duplicate of the same page.
if (!window.location.hash && route.name === "fleet") {
window.history.replaceState(null, "", desired || "#");
} else {
window.history.pushState(null, "", desired || "#");
}
}
}, [route]);
useEffectApp(() => {
const onPop = () => setRoute(window.NORFAB_LOCAL.hashToRoute(window.location.hash));
const onKey = (e) => {
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
e.preventDefault();
setPaletteOpen(true);
}
};
// The TopBar Search button dispatches this custom event; without the
// listener the button silently does nothing (only Ctrl/Cmd+K worked).
const onOpenPalette = () => setPaletteOpen(true);
window.addEventListener("popstate", onPop);
window.addEventListener("hashchange", onPop);
window.addEventListener("keydown", onKey);
window.addEventListener("nf-open-palette", onOpenPalette);
return () => {
window.removeEventListener("popstate", onPop);
window.removeEventListener("hashchange", onPop);
window.removeEventListener("keydown", onKey);
window.removeEventListener("nf-open-palette", onOpenPalette);
};
}, []);
const navigate = (name, params = {}) => {
if (name === "daily-log") { setModal({ kind: "daily-log", ...params }); return; }
setRoute({ name, ...params });
};
// Back = browser back, so the screen the user actually came from is
// restored (routes live in the URL hash). Falls back to the fleet
// overview when this tab has no history, e.g. a pasted deep link.
const goBack = () => {
if (window.history.length > 1) window.history.back();
else setRoute({ name: "fleet" });
};
const copyLink = async (drv) => {
const url = window.NORFAB_DATA.roadsideUrl(drv.id);
try {
await navigator.clipboard.writeText(url);
setToast(`Copied · ${drv.name.split(" ")[0]}'s roadside link`);
} catch (e) {
setToast(`Copy failed, ${url}`);
}
setTimeout(() => setToast(null), 2400);
};
// Tweaks panel
const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAKS) : [TWEAKS, () => {}];
return (
);
}
// Stale-pipeline heartbeat. The pipeline depends on a GitHub Actions cron
// (dropbox-sync.yml, '7 * * * *') which sometimes silently skips runs
// during GitHub platform incidents. When that happens, new Titan/SiteDocs
// files accumulate in Dropbox but never make it into the dashboard.
//
// This component watches LATEST_SYNC_UTC against wall-clock and surfaces
// a manual-recovery button when sync is stale during Titan's delivery
// window (6am-6pm Mountain, hourly on the hour). Clicking opens the
// GitHub Actions UI for the Dropbox Sync workflow where Ray can press
// "Run workflow" to force a sync.
//
// Threshold: 90 min during work hours. Titan delivers hourly so any gap
// over ~70 min is suspicious; 90 absorbs normal pipeline latency.
//
// Permanent fix tracked in memory/project_pending_cloudflare_cron.md.
function HeartbeatIndicator() {
const [now, setNow] = useStateApp(Date.now());
useEffectApp(() => {
const id = setInterval(() => setNow(Date.now()), 60000);
return () => clearInterval(id);
}, []);
const syncUtc = window.NORFAB_DATA && window.NORFAB_DATA.LATEST_SYNC_UTC;
if (!syncUtc) return null;
const syncMs = new Date(syncUtc).getTime();
if (!Number.isFinite(syncMs)) return null;
const minutesSinceSync = (now - syncMs) / 60000;
// Are we currently in Titan's delivery window (6am - 6pm Mountain)?
// The pipeline can legitimately go quiet overnight, so suppress the
// warning outside delivery hours to avoid alarming Ray at 11pm.
const mountainHour = parseInt(
new Date().toLocaleString("en-US", { timeZone: "America/Edmonton", hour: "numeric", hour12: false }),
10,
);
const inDeliveryWindow = mountainHour >= 6 && mountainHour < 19;
const isStale = inDeliveryWindow && minutesSinceSync > 90;
if (!isStale) return null;
const workflowUrl = "https://github.com/RayFindlay/SFC-Automation-Project/actions/workflows/dropbox-sync.yml";
const minutesText = minutesSinceSync >= 60
? `${Math.floor(minutesSinceSync / 60)}h ${Math.floor(minutesSinceSync % 60)}m ago`
: `${Math.floor(minutesSinceSync)}m ago`;
return (
Stale {minutesText} · run sync ↗
);
}
function SfcChip() {
// Both text spans pin line-height to 12px so the bolder SFC code and
// the lighter validity tail share the same line-box, avoiding the
// subpixel rounding drift that made the original look off-baseline.
return (
SFC AB-NSC-013-2241
valid to 2028-11-30
);
}
// Wait for the real-data adapter to finish loading latest.json + the registry
// before mounting React. Without this, the first render would see empty arrays
// and the route never re-renders because the design only rekeys on route change.
function NF_bootstrap() {
ReactDOM.createRoot(document.getElementById("root")).render();
}
if (window.NORFAB_DATA && window.NORFAB_DATA.ready) {
NF_bootstrap();
} else {
window.addEventListener("nf-data-ready", NF_bootstrap, { once: true });
// Belt-and-braces fallback: never block forever if the data fetch errors out.
setTimeout(() => { if (!window.__nfMounted) { window.__nfMounted = true; NF_bootstrap(); } }, 6000);
window.addEventListener("nf-data-ready", () => { window.__nfMounted = true; }, { once: true });
}