{/* Brand mark from brand.js: the configured logo, or a neutral
initial-letter tile when no logo is set. */}
{school?.name || window.BRAND.orgName}
{window.BRAND.appName}
{menuOpen && (
<>
setMenuOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 190 }}/>
)}
{user?.name || "Not signed in"}
{school?.name ? `${school.name} · ${user?.role || "—"}` : (user?.role || "—")}
{children.map((c) => (
))}
{open && (
;
}
const letter = String(B.orgShortName || B.orgName || "S").trim().charAt(0).toUpperCase() || "S";
return (
);
};
/* ---------- Notification rendering (shared) ----------
ONE renderer for both surfaces: the topbar bell and the full Notifications
screen. It lives here because shell.jsx loads before the screens, so the
screen can read it off window.AppUI while the bell uses it directly.
Payloads vary widely by kind (some carry only { date }). Two rules for anything added here:
1. every field access is guarded — a payload is data from another
subsystem and may legitimately lack a key;
2. the fallback prints a humanised kind, never a raw snake_case string
and never the word "undefined". */
const NOTIFICATION_KIND_LABEL = {
progress_extra_logged: "Outside-schedule class",
progress_period_prompt: "Period log due",
attempt_submitted: "Submission",
question_reported: "Reported question",
doubt_raised: "Doubt raised",
doubt_message: "Doubt follow-up",
retest_requested: "Retest request",
chat_report_raised: "Chat report",
parent_chat_message: "Parent message",
attendance_checkin_reminder: "Check-in reminder",
attendance_absent_report: "Absence report",
attendance_checkout_override: "Off-site check-out",
teacher_registration_pending: "New staff registration",
parent_registration_pending: "New parent registration",
password_reset_requested: "Password reset request",
leave_application_raised: "Leave application",
leave_application_approved: "Leave approved",
leave_cover_assigned: "Cover assigned",
};
// "attendance_checkin_reminder" → "Attendance checkin reminder". Only ever
// used for a kind the server has added and this file does not know yet.
const humaniseKind = (k) =>
String(k || "notification").replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
const notificationMeta = (n) => {
const p = (n && n.payload) || {};
const label = NOTIFICATION_KIND_LABEL[n?.kind] || humaniseKind(n?.kind);
const someone = (v, fallback) => v || fallback;
const dateish = (d) => {
if (!d) return "";
const dt = new Date(String(d).length === 10 ? d + "T00:00:00" : d);
return Number.isNaN(dt.getTime())
? String(d)
: dt.toLocaleDateString("en-IN", { day: "numeric", month: "short" });
};
switch (n?.kind) {
case "attempt_submitted":
return { pill: "blue", label: "Submitted",
title: `${someone(p.student_name, "A student")} submitted ${p.test_title || "a test"}`,
sub: [
(p.auto_score != null && p.max_marks != null) ? `${p.auto_score} / ${p.max_marks} auto-graded` : null,
p.student_roll, p.physical_handin ? "handed in on paper" : null,
].filter(Boolean).join(" · ") };
case "question_reported":
return { pill: "amber", label: "Reported",
title: `${someone(p.student_name, "A student")} reported Q${p.q_no ?? "?"} in ${p.test_title || "a test"}`,
sub: (p.note || "").slice(0, 160) || "(no note)" };
case "doubt_raised":
return { pill: "amber", label: "Doubt",
title: `${someone(p.student_name, "A student")} asked about Q${p.q_no ?? "?"} in ${p.test_title || "a test"}`,
sub: p.body_preview || "" };
case "doubt_message":
return { pill: "amber", label: "Doubt · follow-up",
title: `New message on Q${p.q_no ?? "?"}${p.test_title ? " · " + p.test_title : ""}`,
sub: p.body_preview || "" };
case "retest_requested":
return { pill: "amber", label: "Retest",
title: `${someone(p.student_name, "A student")} requested a retest`,
sub: [p.test_title || p.test_display_id, p.reason].filter(Boolean).join(" · ") };
/* ---- Attendance ---- */
case "attendance_checkin_reminder":
return { pill: "", label: "Check-in",
title: "Attendance check-in is open",
sub: p.date ? `For ${dateish(p.date)} — staff who have not checked in yet` : "" };
case "attendance_absent_report": {
const n2 = Number(p.count ?? (p.names || []).length) || 0;
return { pill: "amber", label: "Absences",
title: `${n2} staff member${n2 === 1 ? "" : "s"} unmarked${p.date ? " on " + dateish(p.date) : ""}`,
sub: (p.names || []).slice(0, 4).join(", ") + ((p.names || []).length > 4 ? ` +${p.names.length - 4} more` : "") };
}
case "attendance_checkout_override":
return { pill: "amber", label: "Off-site",
title: `${someone(p.teacher_name, "A teacher")} checked out off-site`,
sub: p.distance != null ? `${Math.round(Number(p.distance))} m from the gate` : "" };
/* ---- Teaching log ---- */
case "progress_extra_logged":
return { pill: "green", label: "Progress",
title: `${someone(p.teacher_name, "A teacher")} logged an outside-schedule class`,
sub: [
(p.classes || []).join(", ") || null, p.subject_name,
p.started_at ? `${p.started_at}–${p.ended_at || ""}` : null, p.topic,
].filter(Boolean).join(" · ") };
case "progress_period_prompt":
return { pill: "", label: "Period log",
title: `Log period ${p.period_no ?? "?"}${p.class_label ? " · " + p.class_label : ""}`,
sub: [p.subject_name, dateish(p.work_date)].filter(Boolean).join(" · ") };
/* ---- Leave ---- */
case "leave_application_raised":
return { pill: "amber", label: "Leave",
title: `${someone(p.teacher_name, "A teacher")} applied for leave`,
sub: [
p.start_date ? `${dateish(p.start_date)}${p.end_date && p.end_date !== p.start_date ? " – " + dateish(p.end_date) : ""}` : null,
p.reason_category, p.reason_note,
].filter(Boolean).join(" · ") };
case "leave_application_approved":
return { pill: "green", label: "Leave approved",
title: `Leave approved${p.decided_by_name ? " by " + p.decided_by_name : ""}`,
sub: [
p.start_date ? `${dateish(p.start_date)}${p.end_date && p.end_date !== p.start_date ? " – " + dateish(p.end_date) : ""}` : null,
p.reason_category, p.decision_note,
].filter(Boolean).join(" · ") };
case "leave_cover_assigned": {
const per = p.periods || [];
return { pill: "blue", label: "Cover",
title: `You are covering for ${someone(p.absent_teacher_name, "a colleague")}`,
sub: per.length
? per.slice(0, 3).map((x) =>
`P${x.period_no} ${x.class_label || ""}${x.subject_name ? " · " + x.subject_name : ""}`).join(" · ")
+ (per.length > 3 ? ` +${per.length - 3} more` : "")
: "" };
}
/* ---- People ---- */
case "parent_registration_pending":
return { pill: "amber", label: "New parent",
title: `${someone(p.parent_name, "Someone")} registered as a parent`,
sub: [p.phone, p.child_count ? `${p.child_count} child(ren)` : null,
"approve on the Parents screen"].filter(Boolean).join(" · ") };
case "teacher_registration_pending":
return { pill: "amber", label: "New staff",
title: `${someone(p.teacher_name, "Someone")} registered and is awaiting approval`,
sub: [p.role, p.phone, "approve on the Teachers screen"].filter(Boolean).join(" · ") };
case "password_reset_requested":
return { pill: "amber", label: "Password reset",
title: `${someone(p.teacher_name, "A teacher")} requested a password reset`,
sub: p.phone || "" };
case "parent_chat_message":
return { pill: "blue", label: "Parent message",
title: "A parent replied in a chat thread",
sub: (p.body || "").slice(0, 140) };
case "chat_report_raised":
return { pill: "amber", label: "Chat report",
title: "A chat message was reported",
sub: (p.reason || p.body || "").slice(0, 140) };
default:
// An unrecognised kind still reads as a sentence, never as a raw key.
return { pill: "", label, title: label, sub: p.date ? dateish(p.date) : "" };
}
};
/* ---------- Notifications panel ---------- */
// Hangs off the topbar bell. Polls /api/notifications every 30s for new items
// and on open. Click an item to navigate (attempt_submitted → submissions
// screen for that test) or open the edit-question modal (question_reported).
const relTime = (iso) => {
const ms = Date.now() - new Date(iso).getTime();
const s = Math.floor(ms / 1000);
if (s < 60) return `${s}s ago`;
if (s < 3600) return `${Math.floor(s/60)}m ago`;
if (s < 86400) return `${Math.floor(s/3600)}h ago`;
return `${Math.floor(s/86400)}d ago`;
};
const NotificationsBell = () => {
const [open, setOpen] = useState(false);
const [items, setItems] = useState([]);
const [unread, setUnread] = useState(0);
const [loading, setLoading] = useState(false);
// Route through window.AppApi so the Authorization: Bearer header from the
// login flow rides every request. Raw fetch() never attached it, which is
// why /api/notifications kept returning 401 even when the admin's session
// was healthy and the other admin routes worked.
const refresh = useCallback(async () => {
try {
setLoading(true);
const data = await window.AppApi.get("/notifications");
setItems(data?.items || []);
setUnread(data?.unread || 0);
} catch (_e) {
// Silent — the bell polls every 30 s and we don't want a transient
// network blip to clobber the existing items.
} finally { setLoading(false); }
}, []);
useEffect(() => {
refresh();
const t = setInterval(refresh, 30000);
return () => clearInterval(t);
}, [refresh]);
// Refresh again whenever the panel is opened, in case items came in between polls.
useEffect(() => { if (open) refresh(); }, [open, refresh]);
const markRead = async (id) => {
try { await window.AppApi.post(`/notifications/${id}/read`, {}); } catch (_e) { /* best-effort */ }
setItems(xs => xs.map(x => x.id === id ? { ...x, read_at: new Date().toISOString() } : x));
setUnread(n => Math.max(0, n - 1));
};
const markAll = async () => {
try { await window.AppApi.post(`/notifications/read-all`, {}); } catch (_e) { /* best-effort */ }
setItems(xs => xs.map(x => x.read_at ? x : { ...x, read_at: new Date().toISOString() }));
setUnread(0);
};
const handleClick = (n) => {
if (!n.read_at) markRead(n.id);
if (n.kind === "attempt_submitted") {
// Jump to the evaluate screen for this test. Mirrors the dashboard
// "Submissions →" button — sets APP.EVAL_CONTEXT and asks app.jsx to
// switch screens via the navigate hook.
if (typeof window.APP?.navigate === "function") {
window.APP.navigate("evaluate", { testDisplayId: n.payload?.test_display_id });
}
setOpen(false);
} else if (n.kind === "question_reported") {
// Open inline edit modal — keeps the teacher on the current screen.
window.dispatchEvent(new CustomEvent("app.openEditQuestion", { detail: n.payload }));
setOpen(false);
} else if (n.kind === "doubt_raised" || n.kind === "doubt_message") {
// Open the doubts screen with the right thread preselected.
if (typeof window.APP?.navigate === "function") {
window.APP.navigate("doubts", { doubtId: n.payload?.doubt_id, tab: "open" });
}
setOpen(false);
} else if (n.kind === "progress_extra_logged") {
// Jump to the full notifications panel.
if (typeof window.APP?.navigate === "function") window.APP.navigate("notifications");
setOpen(false);
}
};
return (
{ setOpen(false); setArmed(-1); }}
aria-hidden="true"/>
)}
{sections.map((s, i) => (
))}
);
};
/* ---------- Brand mark ----------
The configured logo (window.BRAND.logoUrl), or — when none is set — a
neutral rounded square carrying the organisation's initial. Shared by the
top bar, the login screen and any printout header. */
const BrandMark = ({ size = 32 }) => {
const B = window.BRAND || {};
if (B.logoUrl) {
return
{/* Portalled to , deliberately.
An overlay must position against the VIEWPORT, and inside the topbar
it could not: the topbar carries a backdrop-filter for the glass
material, and a filtered element becomes the containing block for
its position:fixed descendants. The panel was therefore resolving
its inset against the topbar's box and only fitting the screen by
coincidence. A portal removes the coupling entirely. */}
{open && ReactDOM.createPortal(
<>
setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 190 }}/>
,
document.body,
)}
);
};
/* ---------- Edit-question modal (triggered by question_reported notifications) ---------- */
const EditQuestionModal = () => {
const [payload, setPayload] = useState(null);
const [text, setText] = useState("");
const [marks, setMarks] = useState("");
const [saving, setSaving] = useState(false);
const [err, setErr] = useState(null);
useEffect(() => {
const onOpen = (e) => {
setPayload(e.detail);
setText(e.detail?.question_text || "");
setMarks(e.detail?.question_marks != null ? String(e.detail.question_marks) : "");
setErr(null);
};
window.addEventListener("app.openEditQuestion", onOpen);
return () => window.removeEventListener("app.openEditQuestion", onOpen);
}, []);
if (!payload) return null;
const close = () => setPayload(null);
const save = async () => {
setSaving(true); setErr(null);
try {
const body = { text };
if (marks && !Number.isNaN(Number(marks))) body.marks = Number(marks);
await window.AppApi.patch(`/questions/${payload.question_id}`, body);
close();
} catch (e) { setErr(e.message); }
finally { setSaving(false); }
};
return (
Notifications
{unread > 0 && (
)}
{items.length === 0 && (
{loading ? "Loading…" : "No notifications yet."}
)}
{items.map(n => {
// One shared renderer — see notificationMeta above.
const meta = notificationMeta(n);
return (
handleClick(n)} style={{
display: "block", padding: "11px 16px",
borderBottom: "1px solid var(--line-soft)",
background: n.read_at ? "transparent" : "var(--accent-bg)",
cursor: "pointer",
}}>
);
})}
{!n.read_at && }
{meta.label}
{relTime(n.created_at)}
{meta.title}
{meta.sub}
{ if (window.APP?.navigate) window.APP.navigate("notifications"); setOpen(false); }}
style={{ padding: "12px 16px", textAlign: "center", cursor: "pointer", fontWeight: 500,
color: "var(--accent)", fontSize: 13, borderTop: "1px solid var(--line-soft)" }}>
View all notifications →
e.stopPropagation()} style={{
background: "var(--surface)", border: "1px solid var(--line-strong)", borderRadius: 20,
boxShadow: "var(--shadow-pop)",
width: 560, maxWidth: "92vw", padding: 22,
}}>
Edit Q{payload.q_no} · {payload.test_title}
Reported by {payload.student_name} ({payload.student_roll})
{payload.note || "(no note)"}