tudor/school_compare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(list): redesign primary school card — single metric, vs-national delta, fix label

Browse Source
This commit is contained in:
Tudor Sitaru
2026-04-13 13:59:26 +01:00
parent b1e025d468
commit 44fdcfa18b
1 changed files with 64 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolRow.tsx
+64 -73
View File
@@ -2,30 +2,23 @@
* SchoolRow Component
* Four-line row for primary school search results
*
* Line 1: School name · Ofsted badge
* Line 1: School name · Ofsted badge (framework-aware)
* Line 2: School type · Age range · Denomination · Gender
* Line 3: R,W&M % · Progress score · Pupil count
* Line 4: Local authority · Distance
* Line 3: Reading, Writing & Maths % · trend arrow · vs-national delta · Pupils
* Line 4: Local authority · Distance
*/
import type { School } from '@/lib/types';
import { formatPercentage, formatProgress, calculateTrend, getPhaseStyle, schoolUrl } from '@/lib/utils';
import { progressBand } from '@/lib/metrics';
import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge } from '@/lib/utils';
import styles from './SchoolRow.module.css';
const OFSTED_LABELS: Record<number, string> = {
1: 'Outstanding',
2: 'Good',
3: 'Req. Improvement',
4: 'Inadequate',
};
interface SchoolRowProps {
school: School;
isLocationSearch?: boolean;
isInCompare?: boolean;
onAddToCompare?: (school: School) => void;
onRemoveFromCompare?: (urn: number) => void;
nationalAvgRwm?: number | null;
}
export function SchoolRow({
@@ -34,13 +27,22 @@ export function SchoolRow({
isInCompare = false,
onAddToCompare,
onRemoveFromCompare,
nationalAvgRwm,
}: SchoolRowProps) {
const trend = calculateTrend(school.rwm_expected_pct, school.prev_rwm_expected_pct);
const phase = getPhaseStyle(school.phase);
const ofstedBadge = buildOfstedListBadge(school);
// Use reading progress as representative; fall back to writing, then maths
const progressScore =
school.reading_progress ?? school.writing_progress ?? school.maths_progress ?? null;
const showGender = school.gender && school.gender.toLowerCase() !== 'mixed';
const showDenomination =
school.religious_denomination &&
school.religious_denomination !== 'Does not apply';
// vs-national delta
const rwmDelta =
school.rwm_expected_pct != null && nationalAvgRwm != null
? Math.round(school.rwm_expected_pct - nationalAvgRwm)
: null;
const handleCompareClick = () => {
if (isInCompare) {
@@ -50,11 +52,6 @@ export function SchoolRow({
}
};
const showGender = school.gender && school.gender.toLowerCase() !== 'mixed';
const showDenomination =
school.religious_denomination &&
school.religious_denomination !== 'Does not apply';
return (
<div className={`${styles.row} ${phase.key ? styles[`phase${phase.key}`] : ''} ${isInCompare ? styles.rowInCompare : ''}`}>
{/* Left: four content lines */}
@@ -65,16 +62,9 @@ export function SchoolRow({
<a href={schoolUrl(school.urn, school.school_name)} className={styles.schoolName}>
{school.school_name}
</a>
{school.ofsted_grade && (
<span className={`${styles.ofstedBadge} ${styles[`ofsted${school.ofsted_grade}`]}`}>
{OFSTED_LABELS[school.ofsted_grade]}
{school.ofsted_date && (
<span className={styles.ofstedDate}>
{' '}({new Date(school.ofsted_date).getFullYear()})
</span>
)}
</span>
)}
<span className={`${styles.ofstedBadge} ${styles[ofstedBadge.cssClass]}`}>
{ofstedBadge.label}
</span>
</div>
{/* Line 2: Context tags */}
@@ -92,50 +82,51 @@ export function SchoolRow({
{/* Line 3: Key stats */}
<div className={styles.line3}>
{school.rwm_expected_pct != null ? (
<span className={styles.stat}>
<strong className={styles.statValue}>
{formatPercentage(school.rwm_expected_pct, 0)}
</strong>
{school.prev_rwm_expected_pct != null && (
<span
className={`${styles.trend} ${styles[`trend${trend.charAt(0).toUpperCase() + trend.slice(1)}`]}`}
title={`Previous year: ${formatPercentage(school.prev_rwm_expected_pct)}`}
>
{trend === 'up' && (
<svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend up">
<path d="M8 3L14 10H2L8 3Z" fill="currentColor" />
</svg>
)}
{trend === 'down' && (
<svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend down">
<path d="M8 13L2 6H14L8 13Z" fill="currentColor" />
</svg>
)}
{trend === 'stable' && (
<svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend stable">
<rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
</svg>
)}
</span>
)}
<span className={styles.statLabel}>R, W &amp; M</span>
</span>
) : (
<span className={styles.stat}>
<strong className={styles.statValue}>—</strong>
<span className={styles.statLabel}>R, W &amp; M</span>
</span>
)}
{progressScore != null && (
<span className={styles.stat}>
<strong className={styles.statValue}>{formatProgress(progressScore)}</strong>
<span className={styles.statLabel}>
progress · {progressBand(progressScore)}
<span className={styles.stat}>
<strong className={styles.statValue}>
{school.rwm_expected_pct != null ? formatPercentage(school.rwm_expected_pct, 0) : '—'}
</strong>
{school.prev_rwm_expected_pct != null && (
<span
className={`${styles.trend} ${styles[`trend${trend.charAt(0).toUpperCase() + trend.slice(1)}`]}`}
title={`Previous year: ${formatPercentage(school.prev_rwm_expected_pct)}`}
>
{trend === 'up' && (
<svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend up">
<path d="M8 3L14 10H2L8 3Z" fill="currentColor" />
</svg>
)}
{trend === 'down' && (
<svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend down">
<path d="M8 13L2 6H14L8 13Z" fill="currentColor" />
</svg>
)}
{trend === 'stable' && (
<svg viewBox="0 0 16 16" fill="none" width="9" height="9" aria-label="Trend stable">
<rect x="2" y="7" width="12" height="2" rx="1" fill="currentColor" />
</svg>
)}
</span>
</span>
)}
)}
<span className={styles.statLabel}>Reading, Writing &amp; Maths</span>
{rwmDelta != null && (
<span
className={
rwmDelta >= 2
? styles.vsNational
: rwmDelta <= -2
? styles.vsNationalNeg
: styles.vsNationalFlat
}
>
{rwmDelta >= 2
? `+${rwmDelta} pts vs national`
: rwmDelta <= -2
? `${rwmDelta} pts vs national`
: '≈ national avg'}
</span>
)}
</span>
{school.total_pupils != null && (
<span className={styles.stat}>