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

feat(school-detail): editorial hero with signal chips, at-a-glance stats, summary
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 15s
Details
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 51s
Details
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 12s
Details
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Details

Browse Source 
Elevates the primary school detail hero from a flat report header into a
scannable editorial block. Parents can read the headline signal in seconds.

- A1: bump .schoolName to clamp(2rem, 5vw, 3.25rem) Playfair.
- A2: framework-aware signal chip strip via new buildOfstedHeroChip() helper.
  Branches on ofsted.framework so Report Card schools never show a fake
  overall grade — they get "Ofsted Report Card" + inspection date +
  Safeguarding: Met/Not met. OEIF schools keep the grade word.
- A3: oversized Playfair stats — Reading, Writing & Maths % (primary) or
  Attainment 8 (secondary) with inline DeltaChip vs national, Ofsted
  verdict with tone colouring, and first-choice offer rate.
- B1: italic serif one-sentence summary via buildSchoolSummary() helper,
  also framework-aware so Report Card schools are described by framework,
  not a synthetic grade.
- C1: new DeltaChip component reused in the two headline KS2 metric cards
  (rwm_expected_pct, rwm_high_pct).

All copy uses "Reading, Writing & Maths" in full. Secondary detail view
untouched in this slice.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Tudor Sitaru
2026-04-08 10:32:33 +01:00
parent f053b35c6f
commit c749d72a6a
5 changed files with 563 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs-app/components/SchoolDetailView.tsx
+145 -3
View File
@@ -17,7 +17,11 @@ import type {
SchoolAdmissions, SenDetail, Phonics,
SchoolDeprivation, SchoolFinance, NationalAverages,
} from '@/lib/types';
import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
import {
formatPercentage, formatProgress, formatAcademicYear,
buildOfstedHeroChip, buildSchoolSummary,
} from '@/lib/utils';
import { DeltaChip } from './DeltaChip';
import styles from './SchoolDetailView.module.css';
const OFSTED_LABELS: Record<number, string> = {
@@ -134,6 +138,20 @@ export function SchoolDetailView({
if (hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
if (yearlyData.length > 0) navItems.push({ id: 'history', label: 'History' });
// ── Hero: framework-aware signal chip + narrative summary ─────────────
const ofstedHeroChip = buildOfstedHeroChip(ofsted);
const heroSummary = buildSchoolSummary(schoolInfo, ofsted, admissions, latestResults);
// KS2 headline numbers for the at-a-glance row
const heroRwm = isPrimary ? latestResults?.rwm_expected_pct ?? null : null;
const heroRwmNat = primaryAvg.rwm_expected_pct ?? null;
// KS4 headline number for secondary/all-through schools
const heroAtt8 = isSecondary ? latestResults?.attainment_8_score ?? null : null;
const heroAtt8Nat = secondaryAvg.attainment_8_score ?? null;
const heroAcademicYear = latestResults ? formatAcademicYear(latestResults.year) : '';
return (
<div className={styles.container}>
{/* Header */}
@@ -192,6 +210,110 @@ export function SchoolDetailView({
</button>
</div>
</div>
{/* Hero signal chip strip */}
<div className={styles.heroChips}>
<div className={`${styles.heroChip} ${styles[ofstedHeroChip.toneClass] ?? ''}`}>
<div className={styles.heroChipTitle}>{ofstedHeroChip.title}</div>
<div className={styles.heroChipSub}>{ofstedHeroChip.subtitle}</div>
{ofstedHeroChip.detail && (
<div className={styles.heroChipDetail}>{ofstedHeroChip.detail}</div>
)}
</div>
{admissions?.oversubscribed && (
<div className={`${styles.heroChip} ${styles.heroChipWarn}`}>
<div className={styles.heroChipTitle}>Oversubscribed</div>
<div className={styles.heroChipSub}>
{admissions.first_preference_offer_pct != null
? `${Math.round(admissions.first_preference_offer_pct)}% got first choice`
: 'More applicants than places'}
</div>
</div>
)}
{isPrimary && heroRwm != null && heroRwmNat != null && heroRwm > heroRwmNat && (
<div className={`${styles.heroChip} ${styles.heroChipGood}`}>
<div className={styles.heroChipTitle}>Above national average</div>
<div className={styles.heroChipSub}>
Reading, Writing &amp; Maths · {Math.round(heroRwm)} vs {Math.round(heroRwmNat)}
</div>
</div>
)}
{isSecondary && heroAtt8 != null && heroAtt8Nat != null && heroAtt8 > heroAtt8Nat && (
<div className={`${styles.heroChip} ${styles.heroChipGood}`}>
<div className={styles.heroChipTitle}>Above national average</div>
<div className={styles.heroChipSub}>
Attainment 8 · {heroAtt8.toFixed(1)} vs {heroAtt8Nat.toFixed(1)}
</div>
</div>
)}
</div>
{/* At-a-glance stats row */}
{latestResults && (
<div className={styles.heroStats}>
{isPrimary && heroRwm != null && (
<div className={styles.heroStat}>
<div className={styles.heroStatNumber}>{Math.round(heroRwm)}%</div>
<div className={styles.heroStatLabel}>Reading, Writing &amp; Maths</div>
{heroRwmNat != null && (
<DeltaChip value={heroRwm} baseline={heroRwmNat} unit="pts" suffix="vs national" />
)}
</div>
)}
{isSecondary && heroAtt8 != null && (
<div className={styles.heroStat}>
<div className={styles.heroStatNumber}>{heroAtt8.toFixed(1)}</div>
<div className={styles.heroStatLabel}>Attainment 8 score</div>
{heroAtt8Nat != null && (
<DeltaChip value={heroAtt8} baseline={heroAtt8Nat} unit="pts" suffix="vs national" />
)}
</div>
)}
{ofsted && (
<div className={styles.heroStat}>
<div className={`${styles.heroStatNumberSerif} ${styles[ofstedHeroChip.toneClass] ?? ''}`}>
{ofstedHeroChip.state === 'oeif'
? ofstedHeroChip.title.replace(/^Ofsted\s+/, '')
: ofstedHeroChip.state === 'reportCard'
? 'Report Card'
: '—'}
</div>
<div className={styles.heroStatLabel}>
{ofstedHeroChip.subtitle}
</div>
{ofstedHeroChip.detail && (
<div className={styles.heroStatFoot}>{ofstedHeroChip.detail}</div>
)}
</div>
)}
{admissions?.first_preference_offer_pct != null && (
<div className={styles.heroStat}>
<div className={styles.heroStatNumber}>
{Math.round(admissions.first_preference_offer_pct)}%
</div>
<div className={styles.heroStatLabel}>First-choice offer rate</div>
{admissions.oversubscribed && (
<div className={styles.heroStatFoot}>Oversubscribed</div>
)}
</div>
)}
</div>
)}
{heroSummary && (
<p className={styles.heroSummary}>{heroSummary}</p>
)}
{heroAcademicYear && (
<p className={styles.heroDataNote}>
Latest data: {heroAcademicYear}
</p>
)}
</header>
{/* Sticky Section Navigation */}
@@ -361,7 +483,17 @@ export function SchoolDetailView({
Reading, Writing &amp; Maths combined
<MetricTooltip metricKey="rwm_expected_pct" />
</div>
<div className={styles.metricValue}>{formatPercentage(latestResults.rwm_expected_pct)}</div>
<div className={styles.metricValue}>
{formatPercentage(latestResults.rwm_expected_pct)}
{primaryAvg.rwm_expected_pct != null && (
<DeltaChip
value={latestResults.rwm_expected_pct}
baseline={primaryAvg.rwm_expected_pct}
unit="pts"
size="sm"
/>
)}
</div>
{primaryAvg.rwm_expected_pct != null && (
<div className={styles.metricHint}>National avg: {primaryAvg.rwm_expected_pct.toFixed(0)}%</div>
)}
@@ -373,7 +505,17 @@ export function SchoolDetailView({
Exceeding expected level (Reading, Writing &amp; Maths)
<MetricTooltip metricKey="rwm_high_pct" />
</div>
<div className={styles.metricValue}>{formatPercentage(latestResults.rwm_high_pct)}</div>
<div className={styles.metricValue}>
{formatPercentage(latestResults.rwm_high_pct)}
{primaryAvg.rwm_high_pct != null && (
<DeltaChip
value={latestResults.rwm_high_pct}
baseline={primaryAvg.rwm_high_pct}
unit="pts"
size="sm"
/>
)}
</div>
{primaryAvg.rwm_high_pct != null && (
<div className={styles.metricHint}>National avg: {primaryAvg.rwm_high_pct.toFixed(0)}%</div>
)}