// SAT Results Report - page assembly // Ported from the design bundle (report-app.jsx) and wired to live data. // Reads globals REPORT, TESTS, EXAM, TARGET_SCORE, set by data-report.jsx. // Two edits from the mock version: // 1. TopicBreakdown reads sub.note (server-selected) instead of TOPIC_NOTES[sub.name]. // 2. RecommendedPlan reads sec.nextSteps (server-built) instead of a hardcoded list. const { useState: useStateApp } = React; const TAG_META = { weak: { label: "Weak Area", color: "var(--error)", tint: "#FBD9D6", desc: "Wrong even on easy items, so fundamentals need rebuilding" }, depth: { label: "Lack of Depth", color: "#C98A1E", tint: "#FBEFCF", desc: "Easy items fine, but missing on the harder questions" }, solid: { label: "Solid", color: "#5C7E3F", tint: "#E4EFD6", desc: "Tested with no misses" }, untested: { label: "Not tested", color: "#7CA158", tint: "#EDF1DD", desc: "Not assessed on this test" }, }; const WP_META = { label: "Word Problems", color: "#2E6B8A", tint: "#DCE9F1", desc: "Misses cluster on the word-problem versions of this skill" }; function Card({ children, pad = 24, style, className }) { return
{children}
; } function SecHead({ eyebrow, title, sub, right }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{sub &&
{sub}
}
{right}
); } // ─── 1 · Snapshot hero (V1 warm story style) ─── function SnapshotHero() { // All live, from the /exam/report payload. No mock values. const rw = REPORT.rw, math = REPORT.math; const comp = REPORT.composite || { score: rw.scoreMid + math.scoreMid, percentile: null }; const tests = (typeof TESTS !== "undefined" && TESTS) || []; const prev = tests.length >= 2 ? tests[tests.length - 2] : null; const growth = prev ? comp.score - prev.med : null; const target = (typeof TARGET_SCORE !== "undefined" && TARGET_SCORE) || null; const vsTarget = target != null ? comp.score - target : null; const totalLow = (rw.low != null && math.low != null) ? rw.low + math.low : null; const totalHigh = (rw.high != null && math.high != null) ? rw.high + math.high : null; const name = REPORT.studentName || null; const signed = (n) => (n > 0 ? "+" + n : n < 0 ? "−" + Math.abs(n) : "0"); return (
{EXAM.typeLabel} {EXAM.sessionLabel} · completed
Date taken {EXAM.dateTaken} Exam ID {EXAM.id}
{growth != null && growth > 0 ? Nice work{name ? ", " + name : ""}. You grew ~{growth} points since your last test. : Here is your score report{name ? ", " + name : ""}.}
{totalLow != null ? totalLow : comp.score}–{totalHigh != null ? totalHigh : comp.score}
Total score range · median {comp.score} / 1600
{growth != null && = 0 ? "up" : undefined} />} {vsTarget != null && = 0 ? "up" : undefined} />} {comp.percentile != null && }
); } function HeroRange({ name, range, mid, border }) { return (
{name}
{range} / 800
median {mid}
); } function HeroStat({ label, value, tone }) { return (
{label}
{value}
); } // ─── Panel frame inside the 2×2 grid ─── function GridPanel({ title, sub, children, style }) { return (

{title}

{sub &&
{sub}
}
{children}
); } // ─── In-depth topic breakdown (respects active section) ─── function TopicBreakdown({ sec }) { const [open, setOpen] = useStateApp(() => new Set(sec.topics.filter(t => t.tag === "weak" || t.tag === "depth").map(t => t.name))); const toggle = (n) => { const s = new Set(open); s.has(n) ? s.delete(n) : s.add(n); setOpen(s); }; // sort: weak → depth → solid → untested const rank = { weak: 0, depth: 1, solid: 2, untested: 3 }; const doms = [...sec.topics].sort((a, b) => rank[a.tag] - rank[b.tag]); return (
{["weak", "depth"].map(k => )} {["solid", "untested"].map(k => )}
{doms.map((dom, i) => { const isOpen = open.has(dom.name); const m = TAG_META[dom.tag]; return (
{isOpen && (
{dom.subs.map((sub, j) => { const note = sub.tot > 0 ? sub.note : null; const untested = sub.tag === "untested"; return (
{sub.name} {sub.tag !== "solid" && sub.tag !== "untested" && } {sub.wp && sub.tag !== "solid" && sub.tag !== "untested" && } {untested ? not on this test : {sub.cor} / {sub.tot}} {!untested && ( {sub.byDiff.filter(d => d.n > 0).map(d => ( 0 ? "#fff" : "var(--slate)", background: d.wrong > 0 ? (d.d === "E" ? "var(--error)" : d.d === "M" ? "#E0A82E" : "#E07A2E") : "var(--sage-l)", padding: "1px 5px", borderRadius: 4 }}>{d.d}{d.wrong > 0 ? `−${d.wrong}` : ""} ))} )}
{sub.pct != null ? : —}
{note && (

SRUTHI{note}

)}
); })}
)}
); })}
); } function Tag({ tag, wp, small }) { const m = wp ? WP_META : TAG_META[tag]; return {m.label}; } function LegendRow({ m }) { return (
{m.label} {m.desc}
); } function AccMini({ v, tag, w = 64 }) { const c = TAG_META[tag].color; return (
{v}%
); } // Next Steps - top priority items from the server function RecommendedPlan({ sec }) { const tintFor = (c) => c === "var(--error)" ? "#FBD9D6" : c === "#C98A1E" ? "#FBEFCF" : "#DCE9F1"; // The server sends { t, tag, why }; the accent color is derived from the tag here // (presentation), so the payload stays free of styling. const colorFor = (tag) => tag === "Weak Area" ? "var(--error)" : tag === "Lack of Depth" ? "#C98A1E" : tag === "Word Problems" ? WP_META.color : "#6FA5DE"; const items = (sec.nextSteps || []).map((a) => Object.assign({ c: colorFor(a.tag) }, a)); return (
{items.map((a, i) => (
{i + 1}
{a.t} {a.tag}

{a.why}

))}
); } // ─── Services / packages ─── function Services() { const pkgs = [ { name: "1-on-1 Targeted Sessions", price: "from $40/hr", best: false, desc: "Live work on your exact weak areas, covering trig setup, quadratic graphing and pacing.", points: ["Personalized to this report", "Flexible weekly scheduling", "Homework + review built in"] }, { name: "Test-Prep Sprint", price: "Coming soon", best: true, desc: "A structured plan focused on the exact weak areas in this report, in the weeks before your next official test.", points: ["2 sessions / week", "Full practice test every 2 weeks", "A report like this one each time", "Parent progress updates"] }, { name: "Self-Study + Drill Library", price: "Coming soon", best: false, desc: "Targeted question sets for every topic flagged here, with worked solutions.", points: ["Weak-area drill sets", "Pacing trainer", "Cancel anytime"] }, ]; return (
{pkgs.map((p, i) => (
{p.best && Best match}
{p.name}
{p.price}

{p.desc}

{p.points.map((pt, j) => (
✓ {pt}
))}
))}
); } // ─── Root ─── function ReportApp() { const [tab, setTab] = useStateApp("math"); const sec = REPORT[tab]; return (
{/* Cohort compare near top. Only shown once there is a real cohort: the distribution and percentile are computed from cohortMid/cohortSd, which are null until enough students have taken this test. We never fabricate a peer group, so below the threshold this renders an honest placeholder. */} {REPORT.cohortReady && REPORT.rw.cohortMid != null && REPORT.math.cohortMid != null ? (
) : (

Not enough students have taken this exam yet to show a reliable comparison. Your percentile against other test-takers will appear here once the group is large enough.

)} {/* Trajectory */} } /> {/* Tabbed deep-dive */}
{["rw", "math"].map(k => ( ))}
} />
{/* stat strip */}
{sec.cohortMid != null ? 0 ? "+" : ""}${sec.scoreMid - sec.cohortMid} pts`} tone={sec.scoreMid - sec.cohortMid > 0 ? "up" : "down"} /> : }
{/* 2×2 grid */}
{/* topic breakdown */}
LearningWithSruthi · SAT Results Report · generated June 15, 2026 · questions? reply to your results email
); } function MiniStat({ label, value, tone }) { return (
{label}
{value}
); } function TrajLegend() { return (
low · median · high Target
); } Object.assign(window, { ReportApp });