}
hint="Click a row to expand task scores inline, or open the full report.">
);
}
/* ── Screening completion card ── */
function ScreeningCompletionCard({ status, klass, school }) {
const tasksCompleted = klass.students.reduce((a, s) => a + s.tasksDone, 0);
const tasksMax = klass.students.length * TASKS.length;
const taskPct = Math.round(tasksCompleted / tasksMax * 100);
const studentPct = Math.round(status.completed / (status.total || 1) * 100);
return (
Screening completion
{status.completed} of {status.total} students fully completed ({studentPct}%)
{status.completed}
{status.partial}
{status.notstarted}
{/* Task-level progress bar */}
{tasksCompleted} of {tasksMax} individual tasks completed across the class
);
}
/* ── Single high-level recommendation ── */
function RecommendationCard({ rec, completionPct }) {
const incomplete = completionPct < 80;
return (
Class recommendation
Suggested focus
{incomplete ?
Finish screening first. A class recommendation is generated once most students have completed the screener ({completionPct}% complete so far).
:
{rec.text}
}
Recommendation is based on the overall class shape and task profile. Pair with classroom evidence and teacher judgement.
);
}
function computeRecommendation(counts, status) {
const total = counts.low + counts.moderate + counts.high || 1;
const highPct = counts.high / total;
const weakestTone = highPct > 0.25 ? 'concern' : counts.moderate > counts.low ? 'emerging' : 'neutral';
let text;
if (highPct > 0.25) {
text = `More than a quarter of the class may benefit from targeted support. Plan structured small-group instruction focused on foundational number sense alongside whole-class Tier 1 teaching.`;
} else if (counts.moderate > counts.low) {
text = `Several students may benefit from additional support. Consider small-group teaching and monitor for movement in the next screening window.`;
} else {
text = `The class profile is broadly in the low-risk range. Continue Tier 1 instruction and monitor students in the moderate band.`;
}
return { tone: weakestTone, text };
}
/* ── Simple view selector replacing the old FilterPanel ── */
function ViewSelector({ value, onChange }) {
const opts = [
{ id: 'all', label: 'Show all' },
{ id: 'high', label: 'High risk' },
{ id: 'moderate', label: 'Moderate risk' },
{ id: 'low', label: 'Low risk' },
{ id: 'incomplete',label: 'Incomplete' },
];
return (