/* ================================================================== Guided setup (docs/SELF_SERVE.md, "Guided setup") ------------------------------------------------------------------ Nine steps that build a real school, each saving through the admin APIs (class sections, subjects, teachers, period times) or the onboarding API (/admin/onboarding/*: profile, students via the Ledger, fees in the Ledger, portal links, invites, finish). Every step can be filled with sample data, and "Remove sample data" deletes exactly those rows. Shown while schools.onboarded_at is null (app.jsx opens it once per session, the dashboard banner and the sidebar resume it). Top-level names are prefixed with setup or Setup: every text/babel script shares ONE global scope. ================================================================== */ const SETUP_LADDER = ["Nursery", "LKG", "UKG", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"]; const SETUP_STEPS = [ { id: "profile", title: "School profile", icon: "building", sub: "Name, logo, board, contact details and the school day." }, { id: "classes", title: "Classes & sections", icon: "layers", sub: "The classes you run this year, and their sections." }, { id: "subjects", title: "Subjects", icon: "book", sub: "What is taught, and which class takes which subject." }, { id: "staff", title: "Staff", icon: "users", sub: "Your teachers. They sign in with their phone number." }, { id: "students", title: "Students", icon: "cap", sub: "Add a student, import a spreadsheet, or start with sample students." }, { id: "fees", title: "Fees", icon: "rupee", sub: "Monthly and one-time fees per class, kept in the Ledger." }, { id: "portals", title: "Try the portals", icon: "monitor", sub: "See the Teacher, Parent and Student apps as your users will." }, { id: "invite", title: "Invite the team", icon: "userPlus", sub: "Send each teacher a sign-in link on WhatsApp." }, { id: "finish", title: "Finish", icon: "checkCircle", sub: "Close the guided setup. You can reopen it from your account menu." }, ]; const SETUP_FILLABLE = new Set(["profile", "classes", "subjects", "staff", "students", "fees"]); // Styles live with the screen (theme tokens only; see theme.css). (function setupInjectCss() { if (document.getElementById("setup-css")) return; const css = ` .su-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start} .su-steps{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px} .su-step{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--ink-1);font:inherit;font-size:13px} .su-step:hover{background:var(--bg-2)} .su-step.on{background:var(--bg-3);font-weight:600;color:var(--ink-0)} .su-step .n{width:22px;height:22px;flex-shrink:0;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--bg-3);color:var(--ink-3);border:1px solid var(--line)} .su-step.done .n{background:var(--green-solid);color:var(--on-solid);border-color:transparent} .su-step .t{flex:1;min-width:0} .su-step .s{font-size:11px;color:var(--ink-3);font-weight:400} .su-progress{height:4px;border-radius:999px;background:var(--bg-4);overflow:hidden;margin:6px 10px 10px} .su-progress i{display:block;height:100%;background:var(--green-solid);border-radius:999px;transition:width .3s} .su-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .su-grid .wide{grid-column:1/-1} .su-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft)} .su-foot .l,.su-foot .r{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .su-chips{display:flex;flex-wrap:wrap;gap:6px} .su-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-size:12.5px;color:var(--ink-1)} .su-chip button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:0 2px;display:grid;place-items:center} .su-chip.sample{border-style:dashed} .su-tag{font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--amber);background:var(--amber-bg);border-radius:4px;padding:1px 5px} .su-matrix{border-collapse:collapse;font-size:12.5px;width:100%} .su-matrix th,.su-matrix td{border-bottom:1px solid var(--line-soft);padding:6px 8px;text-align:center;white-space:nowrap} .su-matrix th:first-child,.su-matrix td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)} .su-matrix thead th{font-weight:600;color:var(--ink-2);font-size:12px} .su-portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .su-portal{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .su-portal .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--bg-3);color:var(--ink-1)} .su-portal h3{margin:0;font-size:15px} .su-portal p{margin:0;font-size:12.5px;color:var(--ink-3);flex:1} .su-logo{width:56px;height:56px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:var(--bg-2);color:var(--ink-3)} .su-logo img{width:100%;height:100%;object-fit:contain} .su-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;margin-bottom:16px;border-radius:12px;border:1px solid var(--line);background:var(--surface)} .su-banner .msg{flex:1;min-width:200px;font-size:13px;color:var(--ink-1)} .su-banner .msg strong{color:var(--ink-0)} .su-table{width:100%;border-collapse:collapse;font-size:13px} .su-table th,.su-table td{padding:7px 8px;border-bottom:1px solid var(--line-soft);text-align:left} .su-table th{font-size:12px;color:var(--ink-3);font-weight:500;white-space:nowrap} .su-table input.input{min-height:30px;padding:4px 8px;max-width:110px} .su-scroll{overflow-x:auto} @media (max-width: 900px){ .su-wrap{grid-template-columns:1fr} .su-steps{position:static;flex-direction:row;overflow-x:auto;padding:6px} .su-step{flex-shrink:0} .su-step .t .s{display:none} .su-progress{display:none} }`; const el = document.createElement("style"); el.id = "setup-css"; el.textContent = css; document.head.appendChild(el); })(); const setupIcon = (name, size = 15) => ; const setupErr = (e) => (e && (e.message || e.error)) || "Something went wrong."; // multipart upload with the admin session (AppApi only speaks JSON). async function setupUpload(path, field, file) { const fd = new FormData(); fd.append(field, file); const token = window.AppApi.getToken(); const r = await fetch(window.AppApi.base + path, { method: "POST", body: fd, headers: token ? { authorization: `Bearer ${token}` } : {}, }); const data = await r.json().catch(() => ({})); if (!r.ok) throw new Error(data.message || data.error || `Upload failed (${r.status})`); return data; } // Bell times for a day from start/end and a period count: equal periods with // a 15-minute break after the third and a 30-minute lunch after the sixth. function setupBell(start, end, n) { const toMin = (s) => { const [h, m] = s.split(":").map(Number); return h * 60 + m; }; const hm = (m) => `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`; const a = toMin(start) + 10, b = toMin(end) - 15; // assembly first, a short wind-down at the end const breaks = (n > 3 ? 15 : 0) + (n > 6 ? 30 : 0); const len = Math.max(25, Math.floor((b - a - breaks) / n)); const out = []; let t = a; for (let p = 1; p <= n; p++) { out.push([hm(t), hm(t + len)]); t += len; if (p === 3 && n > 3) t += 15; if (p === 6 && n > 6) t += 30; } return out; } /* ---------------- shared step chrome ---------------- */ const SetupStepFoot = ({ step, busy, onSample, onNext, nextLabel = "Save & continue", nextDisabled, extra }) => (
{SETUP_FILLABLE.has(step) && onSample && ( )} {extra}
{onNext && ( )}
); /* ---------------- 1. profile ---------------- */ const SetupProfile = ({ data, busy, run, onSample, next }) => { const p = data.profile || {}; const [f, setF] = useState(() => ({ name: p.name || "", board: p.board || "", address: p.address || "", phone: p.phone || "", email: p.email || "", website: p.website || "", academic_year: p.academic_year || "", day_starts_at: p.day_starts_at || "08:00", day_ends_at: p.day_ends_at || "14:00", periods: 7, })); const [setBell, setSetBell] = useState(!(data.counts && data.counts.bell_periods > 0)); const [logo, setLogo] = useState(p.logo_url || null); useEffect(() => { setF((x) => ({ ...x, name: p.name || x.name, board: p.board || x.board, address: p.address || x.address, phone: p.phone || x.phone, email: p.email || x.email, website: p.website || x.website, day_starts_at: p.day_starts_at || x.day_starts_at, day_ends_at: p.day_ends_at || x.day_ends_at })); setLogo(p.logo_url || null); }, [data.profile]); const set = (k) => (e) => setF((x) => ({ ...x, [k]: e.target.value })); const save = () => run(async () => { if (setBell) { const bell = setupBell(f.day_starts_at, f.day_ends_at, Math.max(1, Math.min(8, Number(f.periods) || 7))); const periods = []; for (let d = 1; d <= 6; d++) { const n = d === 6 ? Math.ceil(bell.length / 2) : bell.length; for (let i = 0; i < n; i++) periods.push({ day_of_week: d, period_no: i + 1, starts_at: bell[i][0], ends_at: bell[i][1] }); } await window.AppApi.put("/routine/period-times", { periods, confirm_remove: true }); } // Only fields changed here count as typed by hand (sample fields stay sample). const hand_fields = ["board", "address", "phone", "email", "website", "day_starts_at", "day_ends_at"].filter((k) => (f[k] || "") !== (p[k] || "")); await window.AppApi.put("/admin/onboarding/profile", { ...f, bell_saved: setBell, hand_fields }); next(); }); const onLogo = (e) => { const file = e.target.files && e.target.files[0]; if (!file) return; run(async () => { const r = await setupUpload("/admin/onboarding/logo", "logo", file); setLogo(r.logo_url); if (window.BRAND) window.BRAND.logoUrl = r.logo_url; }, { quiet: true }); }; return ( <>
{logo ? School logo : setupIcon("building", 20)}
Logo PNG, JPEG, WebP or SVG, up to 2 MB. Shown in every app and on printouts.
); }; /* ---------------- 2. classes ---------------- */ const SetupClasses = ({ data, busy, run, onSample, next, catalog, reloadCatalog }) => { const [level, setLevel] = useState("I"); const [custom, setCustom] = useState(""); const [secs, setSecs] = useState("A"); const list = (catalog.classSections || []).filter((c) => !data.profile || c.academic_year === data.profile.academic_year); const sample = new Set(catalog.sampleIds?.class_sections || []); const add = (levels) => run(async () => { const sections = secs.split(/[\s,]+/).map((s) => s.trim().toUpperCase()).filter(Boolean); for (const l of levels) for (const s of (sections.length ? sections : ["A"])) { if (list.some((c) => c.class_level === l && (c.section || "") === s)) continue; await window.AppApi.post("/admin/class-sections", { class_level: l, section: s }); } await reloadCatalog(); }, { quiet: true }); const remove = (c) => run(async () => { await window.AppApi.del(`/admin/class-sections/${c.id}`); await reloadCatalog(); }, { quiet: true }); const presets = [["Nursery–UKG", ["Nursery", "LKG", "UKG"]], ["I–V", ["I", "II", "III", "IV", "V"]], ["VI–VIII", ["VI", "VII", "VIII"]], ["IX–X", ["IX", "X"]], ["XI–XII", ["XI", "XII"]]]; const sorted = list.slice().sort((a, b) => (SETUP_LADDER.indexOf(a.class_level) + 100 * (SETUP_LADDER.indexOf(a.class_level) < 0)) - (SETUP_LADDER.indexOf(b.class_level) + 100 * (SETUP_LADDER.indexOf(b.class_level) < 0)) || String(a.section).localeCompare(String(b.section))); return ( <>
Add a range
{presets.map(([label, lv]) => ( ))}
Or one class
{level === "__custom" && setCustom(e.target.value)} placeholder="Class name"/>}
{sorted.length ? `${sorted.length} class-section${sorted.length === 1 ? "" : "s"} for ${data.profile?.academic_year || "this year"}` : "No classes yet."}
{sorted.map((c) => ( {c.label || [c.class_level, c.section].filter(Boolean).join("-")} {c.student_count > 0 && · {c.student_count}} ))}
); }; /* ---------------- 3. subjects ---------------- */ const SETUP_COMMON_SUBJECTS = [["English", "ENG"], ["Bengali", "BEN"], ["Hindi", "HIN"], ["Mathematics", "MATH"], ["Environmental Studies", "EVS"], ["Science", "SCI"], ["Social Science", "SST"], ["Computer", "COMP"], ["Drawing", "ART"]]; const SetupSubjects = ({ busy, run, onSample, next, catalog, reloadCatalog }) => { const [name, setName] = useState(""); const [code, setCode] = useState(""); const [map, setMap] = useState(null); const subjects = catalog.subjects || []; const levels = [...new Set((catalog.classSections || []).map((c) => c.class_level))] .sort((a, b) => (SETUP_LADDER.indexOf(a) + 100 * (SETUP_LADDER.indexOf(a) < 0)) - (SETUP_LADDER.indexOf(b) + 100 * (SETUP_LADDER.indexOf(b) < 0))); const loadMap = async () => { const r = await window.AppApi.get("/admin/onboarding/class-subjects"); setMap(Object.fromEntries((r.classes || []).map((c) => [c.class_level, new Set(c.subject_ids)]))); }; useEffect(() => { loadMap().catch(() => setMap({})); }, [catalog]); const add = (n, c) => run(async () => { await window.AppApi.post("/admin/subjects", { name: n, short_code: c || undefined }); setName(""); setCode(""); await reloadCatalog(); }, { quiet: true }); const toggle = (level, sid) => run(async () => { const cur = new Set(map[level] || []); if (cur.has(sid)) cur.delete(sid); else cur.add(sid); setMap((m) => ({ ...m, [level]: cur })); await window.AppApi.put("/admin/onboarding/class-subjects", { class_level: level, subject_ids: [...cur] }); }, { quiet: true }); const missing = SETUP_COMMON_SUBJECTS.filter(([n]) => !subjects.some((s) => s.name.toLowerCase() === n.toLowerCase())); return ( <>
Common subjects
{missing.map(([n, c]) => )} {!missing.length && All added.}
{subjects.length > 0 && levels.length > 0 && (
Which class takes which subject
{subjects.map((s) => )} {levels.map((l) => ( {subjects.map((s) => ( ))} ))}
Class{s.short_code || s.name}
{l} toggle(l, s.id)}/>
)} ); }; /* ---------------- 4. staff ---------------- */ const SetupStaff = ({ data, busy, run, onSample, next, catalog, reloadCatalog }) => { const [f, setF] = useState({ name: "", phone: "", email: "", subject_id: "" }); const [teachers, setTeachers] = useState(null); const [flash, setFlash] = useState(null); const load = async () => setTeachers((await window.AppApi.get("/admin/teachers")).filter((t) => t.role !== "support_staff")); useEffect(() => { load().catch(() => setTeachers([])); }, [catalog]); const add = () => run(async () => { const digits = f.phone.replace(/\D/g, "").slice(-10); const email = f.email.trim() || (digits ? `${digits}@${data.slug}.staff.invalid` : `${f.name.toLowerCase().replace(/[^a-z]+/g, ".")}.${Date.now() % 100000}@${data.slug}.staff.invalid`); const t = await window.AppApi.post("/admin/teachers", { name: f.name.trim(), email, role: "teacher" }); if (digits) await window.AppApi.patch(`/admin/teachers/${t.id}`, { phone: f.phone }); if (f.subject_id) { const map = (await window.AppApi.get("/admin/onboarding/class-subjects")).classes || []; const takes = new Set(map.filter((c) => (c.subject_ids || []).includes(f.subject_id)).map((c) => c.class_level)); const secs = (catalog.classSections || []).filter((c) => !map.length || takes.has(c.class_level)); await window.AppApi.put(`/admin/teachers/${t.id}/assignments`, { assignments: secs.map((c) => ({ class_section_id: c.id, subject_id: f.subject_id })) }); } setFlash({ name: t.name, username: t.username, password: t.temp_password }); setF({ name: "", phone: "", email: "", subject_id: "" }); await load(); }, { quiet: true }); const staff = teachers || []; return ( <>
{flash && (
{flash.name} added. Username {flash.username}, temporary password {flash.password}. They can also sign in with their phone (step 8 sends a link).
)}
{staff.length ? `${staff.length} staff` : "No teachers yet."}
{staff.length > 0 && (
{staff.slice(0, 40).map((t) => ( ))}
NameRoleMobileClasses
{t.name}{t.role}{t.phone || "—"}{t.assignment_count}
)}
); }; /* ---------------- 5. students ---------------- */ const SetupStudents = ({ data, busy, run, onSample, next, catalog, reloadCatalog }) => { const secs = (catalog.classSections || []).filter((c) => !data.profile || c.academic_year === data.profile.academic_year); const [f, setF] = useState({ name: "", class_section_id: "", guardian_name: "", guardian_phone: "", student_type: "DAY_SCHOLAR", avails_transport: false }); const [result, setResult] = useState(null); const [students, setStudents] = useState(null); const load = async () => setStudents(await window.AppApi.get("/admin/students")); useEffect(() => { load().catch(() => setStudents([])); }, [catalog]); const add = () => run(async () => { const r = await window.AppApi.post("/admin/onboarding/students", { students: [f] }); setResult(r); if (r.admitted) setF({ ...f, name: "", guardian_name: "", guardian_phone: "" }); await reloadCatalog(); await load(); }, { quiet: true }); const onFile = (e) => { const file = e.target.files && e.target.files[0]; e.target.value = ""; if (!file) return; run(async () => { setResult(await setupUpload("/admin/onboarding/students/import", "file", file)); await reloadCatalog(); await load(); }, { quiet: true }); }; const template = () => run(async () => { const d = await window.AppApi.download("/admin/onboarding/students/template"); const a = document.createElement("a"); a.href = d.blobUrl; a.download = d.filename; a.click(); }, { quiet: true }); const list = students || []; return ( <> {!secs.length &&
Add classes first (step 2), or fill this step with sample data and the classes come with it.
}
or

Students are admitted in the Ledger (where their fees live) and appear here straight away.

{result && (
{result.admitted ? `${result.admitted} student${result.admitted === 1 ? "" : "s"} admitted.` : "No students admitted."} {(result.errors || []).slice(0, 8).map((e, i) =>
{e.row ? `Row ${e.row}: ` : ""}{e.error}
)}
)}
{list.length ? `${list.length} students` : "No students yet."}
{list.length > 0 && (
{list.slice(0, 12).map((s) => ( ))}
NameClassRollLedger ID
{s.name}{s.class_label}{s.roll_no}{s.ledger_student_uid || "—"}
)}
); }; /* ---------------- 6. fees ---------------- */ const SETUP_FEE_COLS = [ ["monthly_tuition", "Tuition / month"], ["monthly_transport", "Bus / month"], ["monthly_hostel", "Hostel / month"], ["admission_fee", "Admission"], ["readmission_fee", "Re-admission"], ["security_deposit", "Security deposit"], ]; const SetupFees = ({ data, busy, run, onSample, next, catalog }) => { const [fees, setFees] = useState(null); const [rows, setRows] = useState({}); const [err, setErr] = useState(null); const [saved, setSaved] = useState(false); const load = async () => { try { const r = await window.AppApi.get("/admin/onboarding/fees"); setFees(r); const byClass = Object.fromEntries((r.classes || []).map((c) => [c.class_name, c])); const levels = [...new Set([...(r.class_levels || []), ...Object.keys(byClass)])] .sort((a, b) => (SETUP_LADDER.indexOf(a) + 100 * (SETUP_LADDER.indexOf(a) < 0)) - (SETUP_LADDER.indexOf(b) + 100 * (SETUP_LADDER.indexOf(b) < 0))); setRows(Object.fromEntries(levels.map((l) => [l, { ...(byClass[l] || { class_name: l }) }]))); setErr(null); } catch (e) { setErr(setupErr(e)); } }; useEffect(() => { load(); }, [catalog]); const [dirty, setDirty] = useState({}); const set = (l, k) => (e) => { setSaved(false); setDirty((d) => ({ ...d, [l]: true })); setRows((r) => ({ ...r, [l]: { ...r[l], [k]: e.target.value } })); }; const copyDown = (k) => { const first = Object.values(rows).find((r) => r[k] !== undefined && r[k] !== ""); if (!first) return; setRows((r) => Object.fromEntries(Object.entries(r).map(([l, v]) => { if (v[k] !== undefined && v[k] !== "") return [l, v]; setDirty((d) => ({ ...d, [l]: true })); return [l, { ...v, [k]: first[k] }]; }))); }; const save = () => run(async () => { // Only rows edited here are saved (and so stop being sample data). const classes = Object.values(rows).filter((r) => dirty[r.class_name] && SETUP_FEE_COLS.some(([k]) => r[k] !== undefined && r[k] !== "")) .map((r) => ({ class_name: r.class_name, ...Object.fromEntries(SETUP_FEE_COLS.map(([k]) => [k, Number(r[k]) || 0])) })); const any = Object.values(rows).some((r) => r.id); if (!classes.length && !any) throw new Error("Enter at least one amount."); if (classes.length) await window.AppApi.put("/admin/onboarding/fees", { classes }); setDirty({}); setSaved(true); await load(); next(); }); const levels = Object.keys(rows); const ledgerUrl = data.apps && data.apps.ledger; return ( <> {err &&
{err}
} {fees && fees.session &&

Session {fees.session.academic_year} in the Ledger. Monthly fees run January to December.

} {!levels.length && !err &&
Add classes first (step 2).
} {levels.length > 0 && (
{SETUP_FEE_COLS.map(([k, label]) => ( ))}{levels.map((l) => ( {SETUP_FEE_COLS.map(([k]) => ( ))} ))}
Class{label}
{l} {rows[l].sample && sample}
)} {saved &&
Fees saved in the Ledger.
} {setupIcon("arrowUpRight")} Open Ledger}/> ); }; /* ---------------- 7. try the portals ---------------- */ const SetupPortals = ({ busy, run, next }) => { const [as, setAs] = useState({}); const open = (app) => { // Open the tab synchronously (popup blockers), then point it at the link. const w = window.open("about:blank", "_blank"); run(async () => { const r = await window.AppApi.post(`/admin/onboarding/try/${app}`, {}); setAs((x) => ({ ...x, [app]: r.as })); if (w) w.location.href = r.url; else window.open(r.url, "_blank"); }, { quiet: true, onError: () => { if (w) w.close(); } }); }; const cards = [ ["teacher", "Teacher app", "briefcase", "Today's routine, attendance, marks entry and parent messages."], ["parent", "Parent app", "users", "A family's view: attendance, results, fees and school notices."], ["student", "Student app", "cap", "Online tests, results and live classes."], ]; return ( <>
{cards.map(([app, title, icon, sub]) => (
{setupIcon(icon, 20)}

{title}

{sub}{as[app] && <>
Signed in as {as[app]}.}

))}

Each button signs a sample user in, once, in a new tab. No password is shared and nothing is sent to anyone.

); }; /* ---------------- 8. invite ---------------- */ const SetupInvite = ({ data, busy, run, next, catalog }) => { const [teachers, setTeachers] = useState(null); const [pick, setPick] = useState({}); const [invites, setInvites] = useState(null); const [nf, setNf] = useState({ name: "", phone: "" }); const load = async () => { const t = (await window.AppApi.get("/admin/teachers")).filter((x) => ["teacher", "hod", "coordinator"].includes(x.role) && x.status === "active" && x.active); setTeachers(t); }; useEffect(() => { load().catch(() => setTeachers([])); }, [catalog]); const addByPhone = () => run(async () => { const digits = nf.phone.replace(/\D/g, "").slice(-10); if (digits.length !== 10) throw new Error("Enter a 10-digit mobile number."); const t = await window.AppApi.post("/admin/teachers", { name: nf.name.trim(), email: `${digits}@${data.slug}.staff.invalid`, role: "teacher" }); await window.AppApi.patch(`/admin/teachers/${t.id}`, { phone: nf.phone }); setNf({ name: "", phone: "" }); setPick((p) => ({ ...p, [t.id]: true })); await load(); }, { quiet: true }); const send = () => run(async () => { const ids = Object.keys(pick).filter((k) => pick[k]); const r = await window.AppApi.post("/admin/onboarding/invite", { teacher_ids: ids }); setInvites(r.invites); }, { quiet: true }); const list = teachers || []; const chosen = Object.values(pick).filter(Boolean).length; return ( <>
Choose who to invite {list.length > 0 && }
{list.map((t) => ( ))}
setPick({ ...pick, [t.id]: e.target.checked })} aria-label={`Invite ${t.name}`}/> {t.name}{t.phone || "no mobile"}{t.role}
{invites && (
Send each link from your own WhatsApp. Links work once, for 60 minutes; after that teachers sign in with their mobile number.
{invites.map((i) => ( ))}
{i.name} {i.error ? {i.error} : (
{i.whatsapp_url && {setupIcon("message", 13)} WhatsApp}
)}
)} ); }; /* ---------------- 9. finish ---------------- */ const SetupFinish = ({ data, busy, run, onDone }) => { const steps = data.steps || []; const finish = () => run(async () => { await window.AppApi.post("/admin/onboarding/finish", {}); await onDone(); }); return ( <>
{SETUP_STEPS.filter((s) => s.id !== "finish").map((s) => { const st = steps.find((x) => x.id === s.id) || {}; return (
{setupIcon(st.done ? "checkCircle" : "dashedCircle", 16)} {s.title}{st.count != null && st.count > 0 && · {st.count}} {st.sample && sample}
); })}
{data.sample_rows > 0 &&

Sample data is still in. Remove it any time with "Remove sample data" at the top of this page.

} ); }; /* ---------------- the screen ---------------- */ const SetupScreen = ({ setScreen }) => { const Api = window.AppApi; const [data, setData] = useState(window.APP.ONBOARDING || null); const [catalog, setCatalog] = useState({}); const [active, setActive] = useState(() => { const d = window.APP.ONBOARDING; const first = d && (d.steps || []).find((s) => !s.done); return (first && first.id) || "profile"; }); const [busy, setBusy] = useState(false); const [msg, setMsg] = useState(null); const [confirmRemove, setConfirmRemove] = useState(false); const reload = async () => { const d = await Api.get("/admin/onboarding"); window.APP.ONBOARDING = d; setData(d); if (d.profile && window.APP.CURRENT_SCHOOL) window.APP.CURRENT_SCHOOL = { ...window.APP.CURRENT_SCHOOL, name: d.profile.name }; return d; }; const reloadCatalog = async () => { const [classSections, subjects] = await Promise.all([Api.get("/admin/class-sections").catch(() => []), Api.get("/admin/subjects").catch(() => [])]); window.APP.CLASS_SECTIONS = classSections; window.APP.SUBJECTS = subjects; setCatalog({ classSections, subjects }); await reload().catch(() => {}); }; useEffect(() => { reloadCatalog(); }, []); // Runs an action with the busy flag; refreshes status; shows errors. const run = async (fn, opts = {}) => { setBusy(true); if (!opts.quiet) setMsg(null); try { await fn(); } catch (e) { setMsg({ tone: "red", text: setupErr(e) }); if (opts.onError) opts.onError(e); } finally { setBusy(false); reload().catch(() => {}); } }; const go = (id) => { setActive(id); setMsg(null); window.scrollTo({ top: 0, behavior: "instant" }); }; const nextOf = (id) => { const i = SETUP_STEPS.findIndex((s) => s.id === id); return SETUP_STEPS[Math.min(SETUP_STEPS.length - 1, i + 1)].id; }; const next = () => go(nextOf(active)); const fill = (step) => run(async () => { const r = await Api.post(`/admin/onboarding/sample/${step}`, {}); const results = r.results || [r]; const made = results.flatMap((x) => Object.entries(x.created || {})).filter(([, n]) => n > 0) .map(([k, n]) => `${n} ${k.replace(/_/g, " ")}`); const notes = results.flatMap((x) => x.notes || []); setMsg({ tone: "green", text: made.length ? `Sample data added: ${made.slice(0, 8).join(", ")}${made.length > 8 ? "…" : ""}.` : "Nothing to add: this step already has data.", notes }); await reloadCatalog(); }); const removeSample = () => run(async () => { const r = await Api.post("/admin/onboarding/sample-remove", {}); setConfirmRemove(false); const n = Object.values(r.removed || {}).reduce((a, b) => a + b, 0); setMsg({ tone: "green", text: `Sample data removed (${n} rows here, ${(r.ledger && r.ledger.students) || 0} students and ${(r.ledger && r.ledger.entries) || 0} fee entries in the Ledger).`, notes: (r.kept || []).map((k) => `Kept: ${k}`) }); await reloadCatalog(); }); if (data && data.applicable === false) { return
; } const steps = (data && data.steps) || []; const doneOf = (id) => !!(steps.find((s) => s.id === id) || {}).done; const doneCount = SETUP_STEPS.filter((s) => doneOf(s.id)).length; const step = SETUP_STEPS.find((s) => s.id === active) || SETUP_STEPS[0]; const props = { data: data || {}, busy, run, next, catalog, reloadCatalog, onSample: () => fill(active) }; const Body = { profile: SetupProfile, classes: SetupClasses, subjects: SetupSubjects, staff: SetupStaff, students: SetupStudents, fees: SetupFees, portals: SetupPortals, invite: SetupInvite }[active]; return (
{data && data.sample_rows > 0 && ( )} } />
{msg && (
{msg.text} {(msg.notes || []).map((n, i) =>
{n}
)}
)} {setupIcon(step.icon, 16)} {step.title}} sub={step.sub}> {!data ?
Loading…
: active === "finish" ? { await reload().catch(() => {}); setScreen("dashboard"); }}/> : }
setConfirmRemove(false)} title="Remove sample data?" icon="trash" footer={<> }>

Deletes every class, subject, teacher, student, parent, fee and receipt that "Fill with sample data" made, here and in the Ledger. Anything you entered yourself stays.
); }; /* Dashboard banner: resume the guided setup (dismissible for this browser). */ const SetupResumeBanner = ({ setScreen }) => { const d = window.APP.ONBOARDING; const [hidden, setHidden] = useState(() => { try { return localStorage.getItem("setup.banner.hidden") === "1"; } catch { return false; } }); if (!d || !d.applicable || d.onboarded_at || hidden) return null; const done = (d.steps || []).filter((s) => s.done).length; return (
{setupIcon("sparkle", 18)}
Finish setting up {d.profile ? d.profile.name : "your school"}. {done} of {SETUP_STEPS.length} steps done.
); }; /* After a prospect demo is claimed (?claimed=1): keep the sample, or start clean. */ const SetupClaimedModal = ({ setScreen }) => { const [open, setOpen] = useState(() => { try { return new URLSearchParams(window.location.search).get("claimed") === "1"; } catch { return false; } }); const [busy, setBusy] = useState(false); const [err, setErr] = useState(null); const clearParam = () => { try { const u = new URL(window.location.href); u.searchParams.delete("claimed"); window.history.replaceState(null, "", u.pathname + u.search + u.hash); } catch {} }; const keep = () => { clearParam(); setOpen(false); setScreen("setup"); }; const clean = async () => { setBusy(true); setErr(null); try { await window.AppApi.post("/admin/onboarding/sample-remove", {}); window.APP.ONBOARDING = await window.AppApi.get("/admin/onboarding").catch(() => window.APP.ONBOARDING); clearParam(); setOpen(false); setScreen("setup"); } catch (e) { setErr(setupErr(e)); } finally { setBusy(false); } }; if (!open) return null; return ( }>

This school is now yours. Keep the sample teachers, students and fees to explore a little longer, or start clean and set up your real school. You can remove the sample data later too.

{err &&
{err}
} ); }; window.SetupScreen = SetupScreen; window.SetupResumeBanner = SetupResumeBanner; window.SetupClaimedModal = SetupClaimedModal;