{/* The KinetiX mark. logo-dark.svg is the near-black artwork meant to
sit directly on the white pill — no tile behind it. */}
{school?.name || "Adarshabani"}
Admin Cockpit
{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 && (
{ setOpen(false); setArmed(-1); }}
aria-hidden="true"/>
)}
{sections.map((s, i) => (
))}
);
};
// Small local icon for the top bar's activity button — the shared CX icon set
// lives in a screen file that loads after the shell.
const CxTopIcon = ({ name }) => (
);
/* ---------- 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.KXUI while the bell uses it directly.
Why this exists: the bell previously handled six kinds and let everything
else fall through to a branch that assumed an attempt_submitted payload.
The database has sixteen kinds, and the most common of them by a wide
margin — attendance_checkin_reminder, 148 rows — has a payload of just
{ date }. Rendered through the submission branch it produced the literal
text "submitted · undefined / undefined auto-graded · undefined".
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",
kinetix_access_request_raised: "KinetiX access request",
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",
form_submission_received: "Form application",
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) };
case "kinetix_access_request_raised":
return { pill: "blue", label: "KinetiX access",
title: `${someone(p.student_name, "A student")} requested KinetiX access`,
sub: p.reason || "" };
case "form_submission_received":
return { pill: "amber", label: p.kind === "vacancy" ? "Job application" : "Application",
title: `${someone(p.applicant_name, "Someone")} applied to ${p.form_title || "a form"}`,
sub: [p.headline, p.phone, p.resubmission ? "updated an earlier submission" : null]
.filter(Boolean).join(" · ") };
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.KXApi 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.KXApi.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.KXApi.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.KXApi.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 KX.EVAL_CONTEXT and asks app.jsx to
// switch screens via the navigate hook.
if (typeof window.KX?.navigate === "function") {
window.KX.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("kx.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.KX?.navigate === "function") {
window.KX.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.KX?.navigate === "function") window.KX.navigate("notifications");
setOpen(false);
} else if (n.kind === "form_submission_received") {
// Someone filled a form the office raised. Land on the Applications tab
// of the Forms screen — the bell said there was something to READ, so
// opening on the list of forms would be one click short.
window.KX = window.KX || {};
window.KX.FORMS_CONTEXT = { tab: "inbox" };
if (typeof window.KX?.navigate === "function") window.KX.navigate("forms");
setOpen(false);
}
};
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("kx.openEditQuestion", onOpen);
return () => window.removeEventListener("kx.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);
const res = await fetch(`/api/questions/${payload.question_id}`, {
method: "PATCH",
headers: { "content-type": "application/json" },
body: JSON.stringify(body),
});
if (!res.ok) throw new Error((await res.json().catch(() => ({})))?.error || `HTTP ${res.status}`);
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. The bell
// used to carry its own six-branch chain, which is how the
// most common notification kind ended up rendering as
// "undefined / undefined auto-graded · undefined".
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.KX?.navigate) window.KX.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: "#fff", 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)"}