);
}
/* ---------- Per-page error boundary ----------
A render exception in one page must not unmount the whole app to a blank
document. App keys this boundary by route, so a thrown page shows a
recoverable panel while the sidebar/topbar stay live; navigating to another
page mounts a fresh boundary (new key) and recovers. The error is surfaced
in the panel and logged to the console — never swallowed silently. */
class PageErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
static getDerivedStateFromError(error) {
return { error };
}
componentDidCatch(error, info) {
console.error("[PageErrorBoundary] page render failed:", error,
info && info.componentStack ? info.componentStack : "");
}
render() {
const { error } = this.state;
if (error) {
const msg = error.message || String(error) || "Unknown render error";
return (
This page hit an error.
{msg}
);
}
return this.props.children;
}
}
/* ---------- Root ---------- */
function App() {
const [page, setPage] = useState(() => {
const h = window.location.hash.replace("#", "");
return ALL_PAGES.includes(h) ? h : "overview";
});
const [model, setModel] = useState(null);
const [loading, setLoading] = useState(true);
const [status, setStatus] = useState("Loading workbook…");
const [error, setError] = useState(null);
const [refreshing, setRefreshing] = useState(false);
const [source, setSource] = useState(null);
const [pickedFile, setPickedFile] = useState(null);
const [siteRef, setSiteRef] = useState(null);
const [sitePanelOpen, setSitePanelOpen] = useState(false);
// PROP-12: deep-link payload from a tracker to PM Editor.
// Shape: { entity: 'underlay'|'overlay'|'isp'|'newUnderlay'|'site', idRef: string,
// tab?: 'comments', commentId?: string } (GA-11 adds tab/commentId so a
// notification can open the row's Discussion and highlight one comment).
// Cleared by PM page after consumption.
const [pmFocusPayload, setPmFocusPayload] = useState(null);
// PM identity / role
const [user, setUser] = useState(DEFAULT_LOCAL_USER);
const [justRefreshed, setJustRefreshed] = useState(false);
// Per-page filter state
const [underlayFilters, setUnderlayFilters] = useState({});
const [overlayFilters, setOverlayFilters] = useState({});
// Toast
const [toast, setToast] = useState({ msg: "", show: false });
const showToast = useCallback((msg) => {
setToast({ msg, show: true });
setTimeout(() => setToast((t) => ({ ...t, show: false })), 2200);
}, [source]);
// Cached workbook bytes for the export workflow
const workbookBytesRef = useRef(null);
const workbookRef = useRef(null);
/* ---------- Identity bootstrap ---------- */
useEffect(() => {
PMClient.getUser()
.then((u) => {
if (u && u.email) setUser(u);
else {
setUser(DEFAULT_LOCAL_USER);
PMClient.setUser(DEFAULT_LOCAL_USER).catch((e) => {
console.warn("Could not persist default local user", e);
});
}
})
.catch((err) => {
// IndexedDB unavailable (private browsing / sandboxed file://). Fall
// back to an in-memory anonymous engineer so the dashboard still works.
console.warn("PMClient identity unavailable, falling back:", err);
setUser(DEFAULT_LOCAL_USER);
showToast("Storage unavailable — running read-only.");
});
}, [showToast]);
const persistUser = useCallback(async (next) => {
setUser(next);
try { await PMClient.setUser(next); }
catch (e) { console.warn("Could not persist user", e); }
}, []);
/* ---------- Workbook load + model build ---------- */
const buildFromWorkbook = useCallback(async (workbook, sourceLabel) => {
setStatus("Parsing tabs and normalizing…");
const m = PRData.buildEffectiveModel
? await PRData.buildEffectiveModel(workbook, { client: PMClient, source: sourceLabel, allowWorkbookFallback: true })
: await PRData.buildModel(workbook);
if (typeof PRData.logWorkbookCompatibilityReport === "function") {
PRData.logWorkbookCompatibilityReport(m, { source: sourceLabel || source || WORKBOOK_FILENAME });
}
setModel(m);
setError(null);
setJustRefreshed(true);
setTimeout(() => setJustRefreshed(false), 700);
}, [source]);
const tryLoad = useCallback(async (file, options = {}) => {
setLoading(true);
setError(null);
try {
let workbook;
let bytes = null;
let sourceLabel = "";
const preferExternal = !!options.preferExternal;
if (file) {
setStatus(`Reading ${file.name}…`);
bytes = new Uint8Array(await file.arrayBuffer());
workbook = XLSX.read(bytes, { type: "array", cellDates: true });
sourceLabel = `Picked: ${file.name}`;
setSource(sourceLabel);
setPickedFile(file);
} else if (window.EMBEDDED_WORKBOOK_B64 && !preferExternal) {
setStatus("Reading embedded workbook…");
const bin = atob(window.EMBEDDED_WORKBOOK_B64);
bytes = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
workbook = XLSX.read(bytes, { type: "array", cellDates: true });
sourceLabel = window.EMBEDDED_WORKBOOK_LABEL || `Embedded · ${WORKBOOK_FILENAME}`;
setSource(sourceLabel);
setPickedFile(null);
} else {
try {
setStatus(`Fetching ./${WORKBOOK_FILENAME}…`);
const resp = await fetch("./" + WORKBOOK_FILENAME + "?t=" + Date.now(), { cache: "no-store" });
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
const buf = await resp.arrayBuffer();
bytes = new Uint8Array(buf);
workbook = XLSX.read(bytes, { type: "array", cellDates: true });
sourceLabel = `./${WORKBOOK_FILENAME}`;
setSource(sourceLabel);
setPickedFile(null);
} catch (externalError) {
if (!window.EMBEDDED_WORKBOOK_B64) throw externalError;
setStatus("Reading embedded workbook snapshot…");
const bin = atob(window.EMBEDDED_WORKBOOK_B64);
bytes = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
workbook = XLSX.read(bytes, { type: "array", cellDates: true });
sourceLabel = window.EMBEDDED_WORKBOOK_LABEL || `Embedded - ${WORKBOOK_FILENAME}`;
setSource(sourceLabel);
setPickedFile(null);
}
}
workbookRef.current = workbook;
workbookBytesRef.current = bytes;
await buildFromWorkbook(workbook, sourceLabel);
} catch (e) {
console.error(e);
setError(e.message || String(e));
} finally {
setLoading(false);
}
}, [buildFromWorkbook]);
useEffect(() => { tryLoad(null); }, []);
/* ---------- Live model rebuild on PMClient writes ---------- */
const rebuildFromCurrentWorkbook = useCallback(async () => {
if (!workbookRef.current) return;
try {
const m = PRData.buildEffectiveModel
? await PRData.buildEffectiveModel(workbookRef.current, { client: PMClient, source, allowWorkbookFallback: true })
: await PRData.buildModel(workbookRef.current);
setModel(m);
setJustRefreshed(true);
setTimeout(() => setJustRefreshed(false), 700);
} catch (e) {
console.error("Rebuild after mutation failed", e);
}
}, [source]);
useEffect(() => {
if (!PMClient || !PMClient.subscribe) return;
let timer = null;
const debounced = (kind) => {
// Pull the latest identity whenever the user store changes.
if (kind === "user" || kind === "import" || kind === "remote") {
PMClient.getUser().then((u) => { if (u && u.email) setUser(u); }).catch(() => {});
}
if (timer) clearTimeout(timer);
timer = setTimeout(() => { rebuildFromCurrentWorkbook(); }, 80);
};
const unsub = PMClient.subscribe(debounced);
return () => { unsub && unsub(); if (timer) clearTimeout(timer); };
}, [rebuildFromCurrentWorkbook]);
/* ---------- Focus / visibility reload ---------- */
useEffect(() => {
let lastReloadAt = Date.now();
const cooldownMs = 4000;
const trigger = () => {
if (loading) return;
const now = Date.now();
if (now - lastReloadAt < cooldownMs) return;
lastReloadAt = now;
if (pickedFile) return;
if (window.EMBEDDED_WORKBOOK_B64) return; // bundle is baked in
tryLoad(null, { preferExternal: true });
};
const onVis = () => { if (document.visibilityState === "visible") trigger(); };
window.addEventListener("focus", trigger);
document.addEventListener("visibilitychange", onVis);
return () => {
window.removeEventListener("focus", trigger);
document.removeEventListener("visibilitychange", onVis);
};
}, [tryLoad, loading, pickedFile]);
/* ---------- Hash routing ---------- */
useEffect(() => {
const onHash = () => {
const h = window.location.hash.replace("#", "");
if (ALL_PAGES.includes(h)) setPage(h);
};
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
useEffect(() => { window.location.hash = "#" + page; }, [page]);
// If role changes and active page is now forbidden, redirect to overview
useEffect(() => {
if (!user) return;
const allowed = NAV_ITEMS_BY_ROLE[user.role] || NAV_ITEMS_BY_ROLE.engineer;
if (!allowed.includes(page)) setPage("overview");
}, [user, page]);
const refresh = useCallback(async () => {
setRefreshing(true);
try {
if (pickedFile) await tryLoad(pickedFile);
else await tryLoad(null);
showToast(window.EMBEDDED_WORKBOOK_B64 && !pickedFile
? "Standalone snapshot reloaded. Rebuild or import a workbook for new Excel changes."
: "Workbook reloaded.");
} finally {
setRefreshing(false);
}
}, [pickedFile, tryLoad, showToast]);
// PROP-12 + fix: open the PM Editor focused on a specific tracker row.
// Always navigate to PM when entity is set; if idRef is missing (e.g. an
// unmatched ISP row with no linkRef/circuitId), still navigate but skip the
// focus payload so the user lands on PM rather than getting silently dropped.
const openInPM = useCallback((entity, idRef) => {
if (!entity) return;
if (idRef) setPmFocusPayload({ entity, idRef });
setPage("pm");
}, []);
const consumePmFocus = useCallback(() => {
const v = pmFocusPayload;
setPmFocusPayload(null);
return v;
}, [pmFocusPayload]);
const openSite = useCallback((ref) => {
setSiteRef(ref);
setSitePanelOpen(true);
}, []);
// GA-11: deep-link a notification to its source discussion. Mention
// notifications carry sourceEntity / sourceIdRef / commentId; route to the
// right surface, open its Discussion, and highlight the referenced comment.
// The bell marks the notification read before invoking this. Stale/missing
// targets fall back gracefully (toast + the entity's surface).
const openNotification = useCallback((n) => {
if (!n) { setPage("pm"); return; }
const entity = n.sourceEntity || "";
const idRef = n.sourceIdRef || "";
const commentId = n.commentId || "";
// Site-drawer discussion (GA-09 stores comments under entity="site").
if (entity === "site") {
const sites = (model && ((model.canonicalSites && model.canonicalSites.length) ? model.canonicalSites : model.sites)) || [];
const low = String(idRef).toLowerCase();
const found = sites.find((s) => s.id === idRef || s.siteCode === idRef || (s.siteName || "").toLowerCase() === low);
if (found) {
setSiteRef({ site: found, openDiscussion: true, discussionCommentId: commentId });
setSitePanelOpen(true);
} else {
showToast("That discussion's site is no longer in the workbook.");
}
return;
}
// PM-editor entity discussions (overlay / underlay / isp / newUnderlay).
if (idRef && (entity === "overlay" || entity === "underlay" || entity === "isp" || entity === "newUnderlay")) {
setPmFocusPayload({ entity, idRef, tab: "comments", commentId });
setPage("pm");
return;
}
// Other sources (task / change request / plan): land on PM with a hint.
setPage("pm");
if (entity) showToast("Opened Project Management — open the " + entity + " to see this discussion.");
}, [model, showToast]);
const role = user.role || "engineer";
// Render-time role gate: even if `page` is briefly set to a forbidden hash
// (direct #hash entry, history.back into a now-disallowed page after a role
// downgrade), `effectivePage` clamps the rendered route to an allowed one.
// The useEffect above still rewrites `page` and `location.hash`; this guard
// closes the one-frame window between hash change and effect run.
const allowedForRole = NAV_ITEMS_BY_ROLE[role] || NAV_ITEMS_BY_ROLE.engineer;
const effectivePage = allowedForRole.includes(page) ? page : "overview";
// Always render the portal shell — never a full-screen splash.
// If the workbook hasn't finished parsing yet, the main panel shows
// an inline loader; everything else (sidebar, topbar, RolePill,
// NotificationBell) renders immediately.
return (