/* ============================================================ HALO SMS — App shell (demo toolbar, sidebar, topbar, router) ============================================================ */ (function () { const { useState, useEffect, h } = window.HReact; const D = window.HALO; /* ---------------- demo toolbar (persistent) ---------------- */ function DemoToolbar({ role, setRole, theme, setTheme, brand, setBrand, onTour }) { const [open, setOpen] = useState(null); const b = D.BRANDS[brand]; const roleLabel = (D.ROLES.find((r) => r.id === role) || {}).label || "Role"; return h("div", { className: "demobar" }, h("div", { className: "brandmark" }, h("span", { className: "pulse" }), h("span", { className: "longlbl" }, "HALO · PROTOTYPE")), onTour && h("button", { onClick: onTour, style: { display: "flex", alignItems: "center", gap: 6, height: 26, padding: "0 9px", borderRadius: 7, background: "oklch(0.32 0.012 55)", border: "1px solid oklch(0.4 0.01 60)", color: "oklch(0.9 0.006 75)", fontSize: 12, marginLeft: 6 } }, h(Icon, { name: "info", style: { fontSize: 13 } }), "Tour"), h("div", { className: "spacer" }), h("div", { className: "ctrls" }, // role h("div", { className: "democtrl" }, h("button", { onClick: () => setOpen(open === "role" ? null : "role") }, h(Icon, { name: "swap" }), h("span", { className: "k" }, "Role"), roleLabel, h(Icon, { name: "chevdown" })), open === "role" && h(Menu, { dark: true, style: { right: 0, top: 36, minWidth: 230 }, onClose: () => setOpen(null) }, h("div", { className: "mlabel" }, "View the app as"), D.ROLES.map((r) => h(MenuItem, { key: r.id, label: r.label, sub: r.desc, selected: r.id === role, onClick: () => { setRole(r.id); setOpen(null); } })))), // theme h("div", { className: "democtrl" }, h("button", { onClick: () => setTheme(theme === "light" ? "dark" : "light") }, h(Icon, { name: theme === "light" ? "sun" : "moon" }), h("span", { className: "k" }, "Theme"), theme === "light" ? "Light" : "Dark")), // brand h("div", { className: "democtrl" }, h("button", { onClick: () => setOpen(open === "brand" ? null : "brand") }, h("span", { className: "swatch-dot", style: { background: "var(--brand)" } }), h("span", { className: "k" }, "Brand"), b.short, h(Icon, { name: "chevdown" })), open === "brand" && h(Menu, { dark: true, style: { right: 0, top: 36, minWidth: 230 }, onClose: () => setOpen(null) }, h("div", { className: "mlabel" }, "School identity"), Object.values(D.BRANDS).map((s) => h("button", { key: s.id, className: "mitem" + (s.id === brand ? " sel" : ""), onClick: () => { setBrand(s.id); setOpen(null); } }, h("span", { className: "swatch-dot", style: { width: 13, height: 13, background: `var(--brand)`, ...(s.id !== brand ? { filter: "none" } : {}) } }), h("span", { style: { flex: 1 } }, s.name, h("span", { className: "sub" }, s.type)), s.id === brand && h("span", { className: "tick" }, h(Icon, { name: "check" })))))))); } /* ---------------- sidebar (staff desktop) ---------------- */ function Sidebar({ role, route, navigate, onSignOut }) { const [um, setUm] = useState(false); const b = D.BRANDS[document.documentElement.getAttribute("data-brand")]; const nav = D.NAV[role] || D.NAV.admin; const active = route.split(":")[0]; return h("div", { className: "sidebar desktop-only" }, h("div", { className: "org" }, h("div", { className: "logo" }, b.short), h("div", null, h("div", { className: "nm" }, b.name.split(" ")[0] + (b.name.split(" ")[1] ? " " + b.name.split(" ")[1] : "")), h("div", { className: "sub" }, (D.ROLES.find((r) => r.id === role) || {}).label))), h("div", { className: "navscroll scroll" }, nav.map((grp) => h("div", { key: grp.group }, h("div", { className: "navgroup" }, grp.group), grp.items.map((it) => h("button", { key: it.id, className: "navitem" + (active === it.id ? " on" : ""), onClick: () => navigate(it.id) }, h(Icon, { name: it.icon }), h("span", { style: { flex: 1, textAlign: "left" } }, it.label), it.badge && h("span", { className: "badge" }, it.badge)))))), h("div", { className: "foot", style: { position: "relative" } }, um && h(Menu, { style: { left: 12, right: 12, bottom: 62, minWidth: 0 }, onClose: () => setUm(false) }, h(MenuItem, { icon: "shield", label: "Account & security", onClick: () => { navigate("account"); setUm(false); } }), h(MenuItem, { icon: "logout", label: "Sign out", onClick: () => { setUm(false); onSignOut(); } })), h("button", { className: "userchip", onClick: () => setUm(!um) }, h(Avatar, { name: D.IDENTITY.name, size: 34, variant: "brand" }), h("div", { style: { textAlign: "left", flex: 1 } }, h("div", { className: "nm" }, D.IDENTITY.name), h("div", { className: "ro" }, D.IDENTITY.email.split("@")[0])), h(Icon, { name: "chevdown" })))); } /* ---------------- top bar (with REAL context switcher) ---------------- */ function TopBar({ role, route, navigate, setRole }) { const [cm, setCm] = useState(false); const nav = (D.NAV[role] || D.NAV.admin).flatMap((g) => g.items); const cur = nav.find((i) => i.id === route.split(":")[0]); const title = cur ? cur.label : "Account & security"; const held = D.IDENTITY.heldRoles; return h("div", { className: "topbar desktop-only" }, h("h1", { className: "title" }, title), h("div", { className: "spacer" }), h("div", { className: "searchbox", style: { maxWidth: 260 } }, h(Icon, { name: "search" }), h("input", { placeholder: "Search students, staff…" }), h("kbd", null, "/")), h("button", { className: "iconbtn" }, h(Icon, { name: "bell" }), h("span", { className: "dot" })), // context switch — real feature h("div", { className: "ctxswitch" }, h("button", { onClick: () => setCm(!cm) }, h(Avatar, { name: D.IDENTITY.name, size: 28, variant: "brand" }), h("div", { className: "who" }, h("div", { className: "nm" }, D.IDENTITY.name.replace("Mrs. ", "")), h("div", { className: "ro" }, (D.ROLES.find((r) => r.id === role) || {}).label)), h(Icon, { name: "chevdown" })), cm && h(Menu, { style: { right: 0, top: 50, minWidth: 250 }, onClose: () => setCm(false) }, h("div", { className: "mlabel" }, "Switch context · one login"), held.map((rid) => { const r = D.ROLES.find((x) => x.id === rid); return h(MenuItem, { key: rid, icon: rid === "parent" ? "home" : "graduation", label: "Continue as " + r.label, sub: r.desc, selected: role === rid, onClick: () => { setRole(rid); setCm(false); } }); }), h("div", { className: "mdiv" }), h(MenuItem, { icon: "shield", label: "Account & security", onClick: () => { navigate("account"); setCm(false); } })))); } /* ---------------- mobile app bar ---------------- */ function MobileBar({ role, route, navigate }) { const nav = (D.NAV[role] || D.NAV.admin).flatMap((g) => g.items); const cur = nav.find((i) => i.id === route.split(":")[0]); return h("div", { className: "appbar-m mobile-only" }, h("div", { className: "ttl" }, cur ? cur.label : "Halo"), h("button", { className: "iconbtn" }, h(Icon, { name: "bell" }), h("span", { className: "dot" }))); } function MobileTabs({ role, route, navigate }) { const items = (D.NAV[role] || D.NAV.admin).flatMap((g) => g.items).slice(0, 4); const active = route.split(":")[0]; return h("div", { className: "tabbar mobile-only" }, items.map((it) => h("button", { key: it.id, className: "tab" + (active === it.id ? " on" : ""), onClick: () => navigate(it.id) }, h(Icon, { name: it.icon }), it.label.split(" ")[0]))); } /* ---------------- stub for not-yet-built areas ---------------- */ function Stub({ id, batch }) { const titles = { staff: "Staff", guardians: "Guardians", structure: "Academic structure", results: "Results", finance: "Finance", settings: "Settings", integrations: "Integrations", backups: "Backups", audit: "Audit log", scores: "Score entry", assignments: "Assignments", affective: "Affective & psychomotor", remarks: "Remarks", calendar: "Calendar", notices: "Notifications", record: "Record payment", invoices: "Invoices", discounts: "Discounts", reports: "Financial reports", approvals: "Approvals" }; const map = { staff: 1, guardians: 1, structure: 2, results: 2, scores: 2, affective: 2, remarks: 2, finance: 3, record: 3, invoices: 3, discounts: 3, reports: 3, approvals: 3, assignments: 4, calendar: 4, notices: 4, settings: 5, integrations: 5, backups: 5, audit: 5 }; return h("div", { className: "page-pad wide" }, h("div", { className: "eyebrow", style: { marginBottom: 7 } }, "Coming up"), h("h1", { style: { fontSize: 27, marginBottom: 24 } }, titles[id] || "Screen"), h("div", { className: "card" }, h(EmptyState, { icon: "inbox", title: (titles[id] || "This screen") + " arrives in Batch " + (map[id] || "1") }, "Batch 0 covers auth, the app shell, one dashboard and the full student slice. This area is wired into navigation and ships next — the design language you see here carries straight through."))); } /* ---------------- staff shell ---------------- */ function StaffShell({ role, setRole, route, navigate, onSignOut, roster, upsertStudent, staffList, upsertStaff, roles, upsertRole, guardianList, upsertGuardian, onLinkUpdate, assess, setAssess }) { const seg = route.split(":"); const id = seg[0]; const [calEvents, setCalEvents] = useState(() => D.EVENTS.map((e) => ({ ...e }))); let screen; if (id === "dashboard") screen = role === "bursar" ? h(window.Finance, { screen: "finance", navigate, students: roster, upsertStudent, role }) : h(Dashboard, { role, navigate }); else if (id === "students") screen = h(Students, { params: seg.slice(1), navigate, roster, upsertStudent, canEdit: role === "admin" || role === "principal" }); else if (id === "staff") screen = h(window.Staff, { params: seg.slice(1), navigate, list: staffList, upsertStaff }); else if (id === "guardians") screen = h(window.Guardians, { params: seg.slice(1), navigate, list: guardianList, upsertGuardian, students: roster, onLinkUpdate }); else if (id === "roles") screen = h(window.Roles, { params: seg.slice(1), navigate, roles, upsertRole, staffList }); else if (id === "structure") screen = h(window.AcademicStructure, { navigate }); else if (id === "assessment") screen = h(window.AssessmentSettings, { assess, setAssess }); else if (id === "scores") screen = h(window.ScoreEntry, { params: seg.slice(1), navigate, students: roster, assess }); else if (id === "results") screen = h(window.Results, { params: seg.slice(1), navigate, students: roster, upsertStudent, role }); else if (id === "affective") screen = h(window.Affective, { params: seg.slice(1), navigate, students: roster }); else if (id === "remarks") screen = h(window.Remarks, { params: seg.slice(1), navigate, students: roster, role }); else if (id === "promote") screen = h(window.BulkPromote, { navigate, students: roster, assess, upsertStudent }); else if (id === "attendance") screen = h(window.Attendance, { params: seg.slice(1), navigate, students: roster }); else if (id === "timetable") screen = h(window.Timetable, { params: seg.slice(1), navigate, role }); else if (id === "assignments") screen = h(window.Assignments, { params: seg.slice(1), navigate, students: roster, role }); else if (id === "calendar") screen = h(window.Calendar, { navigate, role, events: calEvents, onAdd: (ev) => setCalEvents((p) => [...p, ev]) }); else if (id === "notices") screen = h(window.Notifications, { params: seg.slice(1), navigate, role }); else if (id === "settings") screen = h(window.SettingsHub, { navigate }); else if (id === "feesettings") screen = h(window.FinanceSettings, { navigate }); else if (id === "branding") screen = h(window.Branding, { navigate }); else if (id === "modules") screen = h(window.Modules, { navigate }); else if (id === "integrations") screen = h(window.Integrations, { navigate }); else if (id === "admformat") screen = h(window.AdmissionFormat, { navigate }); else if (id === "audit") screen = h(window.AuditLog, { navigate }); else if (id === "backups") screen = h(window.Backups, { navigate }); else if (["finance", "record", "invoices", "feestructure", "discounts", "approvals", "reports"].includes(id)) screen = h(window.Finance, { screen: id, params: seg.slice(1), navigate, students: roster, upsertStudent, role }); else if (id === "account") screen = h(AccountSecurity, null); else screen = h(Stub, { id }); return h("div", { className: "viewport" }, h(Sidebar, { role, route, navigate, onSignOut }), h("div", { className: "maincol" }, h(TopBar, { role, route, navigate, setRole }), h(MobileBar, { role, route, navigate }), h("div", { className: "page scroll" }, screen), h(MobileTabs, { role, route, navigate }))); } window.StaffShell = StaffShell; window.DemoToolbar = DemoToolbar; })();