Tudor
e8175561d5
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 46s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m15s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 32s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s
802 lines
39 KiB
TypeScript
802 lines
39 KiB
TypeScript
/**
|
|
* SecondarySchoolDetailView Component
|
|
* Dedicated detail view for secondary schools with tabbed navigation:
|
|
* Overview | Academic | Admissions | Wellbeing | Parents | Finance
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useComparison } from '@/hooks/useComparison';
|
|
import { PerformanceChart } from './PerformanceChart';
|
|
import { MetricTooltip } from './MetricTooltip';
|
|
import type {
|
|
School, SchoolResult, AbsenceData,
|
|
OfstedInspection, OfstedParentView, SchoolCensus,
|
|
SchoolAdmissions, SenDetail, Phonics,
|
|
SchoolDeprivation, SchoolFinance, NationalAverages,
|
|
} from '@/lib/types';
|
|
import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
|
|
import styles from './SecondarySchoolDetailView.module.css';
|
|
|
|
const OFSTED_LABELS: Record<number, string> = {
|
|
1: 'Outstanding', 2: 'Good', 3: 'Requires Improvement', 4: 'Inadequate',
|
|
};
|
|
|
|
const RC_LABELS: Record<number, string> = {
|
|
1: 'Exceptional', 2: 'Strong', 3: 'Expected standard', 4: 'Needs attention', 5: 'Urgent improvement',
|
|
};
|
|
|
|
const RC_CATEGORIES = [
|
|
{ key: 'rc_inclusion' as const, label: 'Inclusion' },
|
|
{ key: 'rc_curriculum_teaching' as const, label: 'Curriculum & Teaching' },
|
|
{ key: 'rc_achievement' as const, label: 'Achievement' },
|
|
{ key: 'rc_attendance_behaviour' as const, label: 'Attendance & Behaviour' },
|
|
{ key: 'rc_personal_development' as const, label: 'Personal Development' },
|
|
{ key: 'rc_leadership_governance' as const, label: 'Leadership & Governance' },
|
|
{ key: 'rc_early_years' as const, label: 'Early Years' },
|
|
{ key: 'rc_sixth_form' as const, label: 'Sixth Form' },
|
|
];
|
|
|
|
type Tab = 'overview' | 'academic' | 'admissions' | 'wellbeing' | 'parents' | 'finance';
|
|
|
|
interface SecondarySchoolDetailViewProps {
|
|
schoolInfo: School;
|
|
yearlyData: SchoolResult[];
|
|
absenceData: AbsenceData | null;
|
|
ofsted: OfstedInspection | null;
|
|
parentView: OfstedParentView | null;
|
|
census: SchoolCensus | null;
|
|
admissions: SchoolAdmissions | null;
|
|
senDetail: SenDetail | null;
|
|
phonics: Phonics | null;
|
|
deprivation: SchoolDeprivation | null;
|
|
finance: SchoolFinance | null;
|
|
}
|
|
|
|
function progressClass(val: number | null | undefined, modStyles: Record<string, string>): string {
|
|
if (val == null) return '';
|
|
if (val > 0) return modStyles.progressPositive;
|
|
if (val < 0) return modStyles.progressNegative;
|
|
return '';
|
|
}
|
|
|
|
function deprivationDesc(decile: number): string {
|
|
if (decile <= 3) return `This school is in one of England's most deprived areas (decile ${decile}/10). Many pupils may face additional challenges at home.`;
|
|
if (decile <= 7) return `This school is in an area with average levels of deprivation (decile ${decile}/10).`;
|
|
return `This school is in one of England's less deprived areas (decile ${decile}/10).`;
|
|
}
|
|
|
|
export function SecondarySchoolDetailView({
|
|
schoolInfo, yearlyData,
|
|
ofsted, parentView, admissions, senDetail, deprivation, finance, absenceData,
|
|
}: SecondarySchoolDetailViewProps) {
|
|
const router = useRouter();
|
|
const { addSchool, removeSchool, isSelected } = useComparison();
|
|
const isInComparison = isSelected(schoolInfo.urn);
|
|
|
|
const latestResults = yearlyData.length > 0 ? yearlyData[yearlyData.length - 1] : null;
|
|
|
|
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
|
const [nationalAvg, setNationalAvg] = useState<NationalAverages | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/national-averages')
|
|
.then(r => r.ok ? r.json() : null)
|
|
.then(data => { if (data) setNationalAvg(data); })
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const secondaryAvg = nationalAvg?.secondary ?? {};
|
|
|
|
const hasSixthForm = schoolInfo.age_range?.includes('18') ?? false;
|
|
const hasFinance = finance != null && finance.per_pupil_spend != null;
|
|
const hasParents = parentView != null || ofsted != null;
|
|
const hasDeprivation = deprivation != null && deprivation.idaci_decile != null;
|
|
const p8Suspended = latestResults != null && latestResults.year >= 202425;
|
|
|
|
const admissionsTag = (() => {
|
|
const policy = schoolInfo.admissions_policy?.toLowerCase() ?? '';
|
|
if (policy.includes('selective')) return 'Selective';
|
|
const denom = schoolInfo.religious_denomination ?? '';
|
|
if (denom && denom !== 'Does not apply') return 'Faith priority';
|
|
return null;
|
|
})();
|
|
|
|
const tabs: { key: Tab; label: string }[] = [
|
|
{ key: 'overview', label: 'Overview' },
|
|
{ key: 'academic', label: 'Academic' },
|
|
{ key: 'admissions', label: 'Admissions' },
|
|
{ key: 'wellbeing', label: 'Wellbeing' },
|
|
...(hasParents ? [{ key: 'parents' as Tab, label: 'Parents' }] : []),
|
|
...(hasFinance ? [{ key: 'finance' as Tab, label: 'Finance' }] : []),
|
|
];
|
|
|
|
const handleComparisonToggle = () => {
|
|
if (isInComparison) {
|
|
removeSchool(schoolInfo.urn);
|
|
} else {
|
|
addSchool(schoolInfo);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
{/* ── Header ─────────────────────────────────────── */}
|
|
<header className={styles.header}>
|
|
<div className={styles.headerContent}>
|
|
<div className={styles.titleSection}>
|
|
<h1 className={styles.schoolName}>{schoolInfo.school_name}</h1>
|
|
<div className={styles.badges}>
|
|
{schoolInfo.school_type && (
|
|
<span className={styles.badge}>{schoolInfo.school_type}</span>
|
|
)}
|
|
{schoolInfo.gender && schoolInfo.gender !== 'Mixed' && (
|
|
<span className={styles.badge}>{schoolInfo.gender}'s school</span>
|
|
)}
|
|
{schoolInfo.age_range && (
|
|
<span className={styles.badge}>{schoolInfo.age_range}</span>
|
|
)}
|
|
{hasSixthForm && (
|
|
<span className={styles.badge}>Sixth form</span>
|
|
)}
|
|
{admissionsTag && (
|
|
<span className={`${styles.badge} ${admissionsTag === 'Selective' ? styles.badgeSelective : styles.badgeFaith}`}>
|
|
{admissionsTag}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{schoolInfo.address && (
|
|
<p className={styles.address}>
|
|
{schoolInfo.address}{schoolInfo.postcode && `, ${schoolInfo.postcode}`}
|
|
</p>
|
|
)}
|
|
<div className={styles.headerDetails}>
|
|
{schoolInfo.headteacher_name && (
|
|
<span className={styles.headerDetail}>
|
|
<strong>Headteacher:</strong> {schoolInfo.headteacher_name}
|
|
</span>
|
|
)}
|
|
{schoolInfo.website && (
|
|
<span className={styles.headerDetail}>
|
|
<a href={/^https?:\/\//i.test(schoolInfo.website) ? schoolInfo.website : `https://${schoolInfo.website}`} target="_blank" rel="noopener noreferrer">
|
|
School website ↗
|
|
</a>
|
|
</span>
|
|
)}
|
|
{latestResults?.total_pupils != null && (
|
|
<span className={styles.headerDetail}>
|
|
<strong>Pupils:</strong> {latestResults.total_pupils.toLocaleString()}
|
|
{schoolInfo.capacity != null && ` (capacity: ${schoolInfo.capacity})`}
|
|
</span>
|
|
)}
|
|
{schoolInfo.trust_name && (
|
|
<span className={styles.headerDetail}>
|
|
Part of <strong>{schoolInfo.trust_name}</strong>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className={styles.actions}>
|
|
<button
|
|
onClick={handleComparisonToggle}
|
|
className={isInComparison ? styles.btnRemove : styles.btnAdd}
|
|
>
|
|
{isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* ── Tab navigation (sticky) ─────────────────────── */}
|
|
<nav className={styles.tabNav} aria-label="Detail sections">
|
|
<div className={styles.tabNavInner}>
|
|
<button onClick={() => router.back()} className={styles.backBtn}>← Back</button>
|
|
<div className={styles.tabNavDivider} />
|
|
{tabs.map(({ key, label }) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => setActiveTab(key)}
|
|
className={`${styles.tabBtn} ${activeTab === key ? styles.tabBtnActive : ''}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* ── Overview Tab ─────────────────────────────────── */}
|
|
{activeTab === 'overview' && (
|
|
<div className={styles.tabContent}>
|
|
{/* Ofsted summary card */}
|
|
{ofsted && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>
|
|
{ofsted.framework === 'ReportCard' ? 'Ofsted Report Card' : 'Ofsted Rating'}
|
|
{ofsted.inspection_date && (
|
|
<span className={styles.ofstedDate}>
|
|
{' '}Inspected {new Date(ofsted.inspection_date).toLocaleDateString('en-GB', { month: 'long', year: 'numeric' })}
|
|
</span>
|
|
)}
|
|
<a
|
|
href={`https://reports.ofsted.gov.uk/provider/21/${schoolInfo.urn}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={styles.ofstedReportLink}
|
|
>
|
|
Full report ↗
|
|
</a>
|
|
</h2>
|
|
{ofsted.framework === 'ReportCard' ? (
|
|
<p className={styles.sectionSubtitle}>
|
|
From November 2025, Ofsted replaced single overall grades with Report Cards.
|
|
</p>
|
|
) : (
|
|
<div className={styles.ofstedHeader}>
|
|
<span className={`${styles.ofstedGrade} ${styles[`ofstedGrade${ofsted.overall_effectiveness}`]}`}>
|
|
{ofsted.overall_effectiveness ? OFSTED_LABELS[ofsted.overall_effectiveness] : 'Not rated'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{parentView?.q_recommend_pct != null && parentView.total_responses != null && parentView.total_responses > 0 && (
|
|
<p className={styles.parentRecommendLine}>
|
|
<strong>{Math.round(parentView.q_recommend_pct)}%</strong> of parents would recommend this school ({parentView.total_responses.toLocaleString()} responses)
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Attainment 8 headline */}
|
|
{latestResults?.attainment_8_score != null && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>
|
|
GCSE Performance at a Glance ({formatAcademicYear(latestResults.year)})
|
|
</h2>
|
|
<div className={styles.metricsGrid}>
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Attainment 8</div>
|
|
<div className={styles.metricValue}>{latestResults.attainment_8_score.toFixed(1)}</div>
|
|
{secondaryAvg.attainment_8_score != null && (
|
|
<div className={styles.metricHint}>National avg: {secondaryAvg.attainment_8_score.toFixed(1)}</div>
|
|
)}
|
|
</div>
|
|
{latestResults.english_maths_standard_pass_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>English & Maths Grade 4+</div>
|
|
<div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_standard_pass_pct)}</div>
|
|
{secondaryAvg.english_maths_standard_pass_pct != null && (
|
|
<div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_standard_pass_pct.toFixed(0)}%</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{admissions?.oversubscribed != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Admissions</div>
|
|
<div className={`${styles.metricValue} ${admissions.oversubscribed ? styles.statusWarn : styles.statusGood}`}>
|
|
{admissions.oversubscribed ? 'Oversubscribed' : 'Places available'}
|
|
</div>
|
|
<div className={styles.metricHint}>Last year</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{p8Suspended && (
|
|
<div className={styles.p8Banner}>
|
|
Progress 8 scores for 2024/25 are not used for accountability purposes following the KS2 assessment disruption. Treat with caution.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Top Parent View scores */}
|
|
{parentView != null && parentView.total_responses != null && parentView.total_responses > 0 && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>What Parents Say</h2>
|
|
<div className={styles.parentViewGrid}>
|
|
{[
|
|
{ label: 'My child is happy here', pct: parentView.q_happy_pct },
|
|
{ label: 'Would recommend this school', pct: parentView.q_recommend_pct },
|
|
].filter(q => q.pct != null).map(({ label, pct }) => (
|
|
<div key={label} className={styles.parentViewRow}>
|
|
<span className={styles.parentViewLabel}>{label}</span>
|
|
<div className={styles.parentViewBar}>
|
|
<div className={styles.parentViewFill} style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<span className={styles.parentViewPct}>{Math.round(pct!)}%</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button onClick={() => setActiveTab('parents')} className={styles.tabLink}>
|
|
See all parent feedback →
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Academic Tab ─────────────────────────────────── */}
|
|
{activeTab === 'academic' && latestResults && (
|
|
<div className={styles.tabContent}>
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>
|
|
GCSE Results ({formatAcademicYear(latestResults.year)})
|
|
</h2>
|
|
<p className={styles.sectionSubtitle}>
|
|
GCSE results for Year 11 pupils. National averages shown for comparison.
|
|
</p>
|
|
|
|
{p8Suspended && (
|
|
<div className={styles.p8Banner}>
|
|
Progress 8 scores for 2024/25 are not used for accountability purposes following the KS2 assessment disruption. Treat with caution.
|
|
</div>
|
|
)}
|
|
|
|
<div className={styles.metricsGrid}>
|
|
{latestResults.attainment_8_score != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>
|
|
Attainment 8
|
|
<MetricTooltip metricKey="attainment_8_score" />
|
|
</div>
|
|
<div className={styles.metricValue}>{latestResults.attainment_8_score.toFixed(1)}</div>
|
|
{secondaryAvg.attainment_8_score != null && (
|
|
<div className={styles.metricHint}>National avg: {secondaryAvg.attainment_8_score.toFixed(1)}</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{latestResults.progress_8_score != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>
|
|
Progress 8
|
|
<MetricTooltip metricKey="progress_8_score" />
|
|
</div>
|
|
<div className={`${styles.metricValue} ${progressClass(latestResults.progress_8_score, styles)}`}>
|
|
{formatProgress(latestResults.progress_8_score)}
|
|
</div>
|
|
{(latestResults.progress_8_lower_ci != null || latestResults.progress_8_upper_ci != null) && (
|
|
<div className={styles.metricHint}>
|
|
CI: {latestResults.progress_8_lower_ci?.toFixed(2) ?? '?'} to {latestResults.progress_8_upper_ci?.toFixed(2) ?? '?'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{latestResults.english_maths_standard_pass_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>
|
|
English & Maths Grade 4+
|
|
<MetricTooltip metricKey="english_maths_standard_pass_pct" />
|
|
</div>
|
|
<div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_standard_pass_pct)}</div>
|
|
{secondaryAvg.english_maths_standard_pass_pct != null && (
|
|
<div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_standard_pass_pct.toFixed(0)}%</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{latestResults.english_maths_strong_pass_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>
|
|
English & Maths Grade 5+
|
|
<MetricTooltip metricKey="english_maths_strong_pass_pct" />
|
|
</div>
|
|
<div className={styles.metricValue}>{formatPercentage(latestResults.english_maths_strong_pass_pct)}</div>
|
|
{secondaryAvg.english_maths_strong_pass_pct != null && (
|
|
<div className={styles.metricHint}>National avg: {secondaryAvg.english_maths_strong_pass_pct.toFixed(0)}%</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* A8 component breakdown */}
|
|
{(latestResults.progress_8_english != null || latestResults.progress_8_maths != null ||
|
|
latestResults.progress_8_ebacc != null || latestResults.progress_8_open != null) && (
|
|
<>
|
|
<h3 className={styles.subSectionTitle}>Attainment 8 Components (Progress 8 contribution)</h3>
|
|
<div className={styles.metricTable}>
|
|
{[
|
|
{ label: 'English', val: latestResults.progress_8_english },
|
|
{ label: 'Maths', val: latestResults.progress_8_maths },
|
|
{ label: 'EBacc subjects', val: latestResults.progress_8_ebacc },
|
|
{ label: 'Open (other GCSEs)', val: latestResults.progress_8_open },
|
|
].filter(r => r.val != null).map(({ label, val }) => (
|
|
<div key={label} className={styles.metricRow}>
|
|
<span className={styles.metricName}>{label}</span>
|
|
<span className={`${styles.metricValue} ${progressClass(val, styles)}`}>
|
|
{formatProgress(val!)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* EBacc */}
|
|
{(latestResults.ebacc_entry_pct != null || latestResults.ebacc_standard_pass_pct != null) && (
|
|
<>
|
|
<h3 className={styles.subSectionTitle} style={{ marginTop: '1rem' }}>
|
|
English Baccalaureate (EBacc)
|
|
<MetricTooltip metricKey="ebacc_entry_pct" />
|
|
</h3>
|
|
<div className={styles.metricTable}>
|
|
{latestResults.ebacc_entry_pct != null && (
|
|
<div className={styles.metricRow}>
|
|
<span className={styles.metricName}>Pupils entered for EBacc</span>
|
|
<span className={styles.metricValue}>{formatPercentage(latestResults.ebacc_entry_pct)}</span>
|
|
</div>
|
|
)}
|
|
{latestResults.ebacc_standard_pass_pct != null && (
|
|
<div className={styles.metricRow}>
|
|
<span className={styles.metricName}>EBacc Grade 4+</span>
|
|
<span className={styles.metricValue}>{formatPercentage(latestResults.ebacc_standard_pass_pct)}</span>
|
|
</div>
|
|
)}
|
|
{latestResults.ebacc_strong_pass_pct != null && (
|
|
<div className={styles.metricRow}>
|
|
<span className={styles.metricName}>EBacc Grade 5+</span>
|
|
<span className={styles.metricValue}>{formatPercentage(latestResults.ebacc_strong_pass_pct)}</span>
|
|
</div>
|
|
)}
|
|
{latestResults.ebacc_avg_score != null && (
|
|
<div className={styles.metricRow}>
|
|
<span className={styles.metricName}>EBacc average point score</span>
|
|
<span className={styles.metricValue}>{latestResults.ebacc_avg_score.toFixed(2)}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Performance over time */}
|
|
{yearlyData.length > 0 && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>Results Over Time</h2>
|
|
<div className={styles.chartContainer}>
|
|
<PerformanceChart
|
|
data={yearlyData}
|
|
schoolName={schoolInfo.school_name}
|
|
isSecondary={true}
|
|
/>
|
|
</div>
|
|
{yearlyData.length > 1 && (
|
|
<>
|
|
<p className={styles.historicalSubtitle}>Detailed year-by-year figures</p>
|
|
<div className={styles.tableWrapper}>
|
|
<table className={styles.dataTable}>
|
|
<thead>
|
|
<tr>
|
|
<th>Year</th>
|
|
<th>Attainment 8</th>
|
|
<th>Progress 8</th>
|
|
<th>Eng & Maths 4+</th>
|
|
<th>EBacc entry %</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{yearlyData.map((result) => (
|
|
<tr key={result.year}>
|
|
<td className={styles.yearCell}>{formatAcademicYear(result.year)}</td>
|
|
<td>{result.attainment_8_score != null ? result.attainment_8_score.toFixed(1) : '-'}</td>
|
|
<td>{result.progress_8_score != null ? formatProgress(result.progress_8_score) : '-'}</td>
|
|
<td>{result.english_maths_standard_pass_pct != null ? formatPercentage(result.english_maths_standard_pass_pct) : '-'}</td>
|
|
<td>{result.ebacc_entry_pct != null ? formatPercentage(result.ebacc_entry_pct) : '-'}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Admissions Tab ───────────────────────────────── */}
|
|
{activeTab === 'admissions' && (
|
|
<div className={styles.tabContent}>
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>Admissions</h2>
|
|
|
|
{admissionsTag && (
|
|
<div className={`${styles.admissionsTypeBadge} ${admissionsTag === 'Selective' ? styles.admissionsSelective : styles.admissionsFaith}`}>
|
|
<strong>{admissionsTag}</strong>{' '}
|
|
{admissionsTag === 'Selective'
|
|
? '— Entry to this school is by selective examination (e.g. 11+).'
|
|
: `— This school has a faith-based admissions priority (${schoolInfo.religious_denomination}).`}
|
|
</div>
|
|
)}
|
|
|
|
{admissions ? (
|
|
<>
|
|
<div className={styles.metricsGrid}>
|
|
{admissions.published_admission_number != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Year 7 places per year (PAN)</div>
|
|
<div className={styles.metricValue}>{admissions.published_admission_number}</div>
|
|
</div>
|
|
)}
|
|
{admissions.total_applications != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Total applications</div>
|
|
<div className={styles.metricValue}>{admissions.total_applications.toLocaleString()}</div>
|
|
</div>
|
|
)}
|
|
{admissions.first_preference_applications != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>1st preference applications</div>
|
|
<div className={styles.metricValue}>{admissions.first_preference_applications.toLocaleString()}</div>
|
|
</div>
|
|
)}
|
|
{admissions.first_preference_offer_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Families who got their first choice</div>
|
|
<div className={styles.metricValue}>{admissions.first_preference_offer_pct}%</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{admissions.oversubscribed != null && (
|
|
<div className={`${styles.admissionsBadge} ${admissions.oversubscribed ? styles.statusWarn : styles.statusGood}`}>
|
|
{admissions.oversubscribed
|
|
? '⚠ Applications exceeded places last year'
|
|
: '✓ Places were available last year'}
|
|
</div>
|
|
)}
|
|
<p className={styles.sectionSubtitle} style={{ marginTop: '1rem' }}>
|
|
Historical distance cut-off data is not available for this school. Contact the admissions authority for oversubscription criteria details.
|
|
</p>
|
|
</>
|
|
) : (
|
|
<p className={styles.sectionSubtitle}>Admissions data for this school is not yet available.</p>
|
|
)}
|
|
|
|
{hasSixthForm && (
|
|
<div className={styles.sixthFormNote}>
|
|
This school has a sixth form (Post-16 provision). Post-16 destination data coming soon.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Wellbeing Tab ────────────────────────────────── */}
|
|
{activeTab === 'wellbeing' && (
|
|
<div className={styles.tabContent}>
|
|
{/* SEN */}
|
|
{(latestResults?.sen_support_pct != null || latestResults?.sen_ehcp_pct != null) && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>Special Educational Needs (SEN)</h2>
|
|
<div className={styles.metricsGrid}>
|
|
{latestResults?.sen_support_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>
|
|
Pupils receiving SEN support
|
|
<MetricTooltip metricKey="sen_support_pct" />
|
|
</div>
|
|
<div className={styles.metricValue}>{formatPercentage(latestResults.sen_support_pct)}</div>
|
|
<div className={styles.metricHint}>SEN support without an EHCP</div>
|
|
</div>
|
|
)}
|
|
{latestResults?.sen_ehcp_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>
|
|
Pupils with an EHCP
|
|
<MetricTooltip metricKey="sen_ehcp_pct" />
|
|
</div>
|
|
<div className={styles.metricValue}>{formatPercentage(latestResults.sen_ehcp_pct)}</div>
|
|
<div className={styles.metricHint}>Education, Health and Care Plan</div>
|
|
</div>
|
|
)}
|
|
{latestResults?.total_pupils != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Total pupils</div>
|
|
<div className={styles.metricValue}>{latestResults.total_pupils.toLocaleString()}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Deprivation */}
|
|
{hasDeprivation && deprivation && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>
|
|
Local Area Context
|
|
<MetricTooltip metricKey="idaci_decile" />
|
|
</h2>
|
|
<div className={styles.deprivationDots}>
|
|
{Array.from({ length: 10 }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`${styles.deprivationDot} ${i < deprivation.idaci_decile! ? styles.deprivationDotFilled : ''}`}
|
|
title={`Decile ${i + 1}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className={styles.deprivationScaleLabel}>
|
|
<span>Most deprived</span>
|
|
<span>Least deprived</span>
|
|
</div>
|
|
<p className={styles.deprivationDesc}>{deprivationDesc(deprivation.idaci_decile!)}</p>
|
|
</div>
|
|
)}
|
|
|
|
{latestResults?.sen_support_pct == null && latestResults?.sen_ehcp_pct == null && !hasDeprivation && (
|
|
<div className={styles.card}>
|
|
<p className={styles.sectionSubtitle}>Wellbeing data is not yet available for this school.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Parents Tab ─────────────────────────────────── */}
|
|
{activeTab === 'parents' && (
|
|
<div className={styles.tabContent}>
|
|
{/* Full Ofsted detail */}
|
|
{ofsted && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>
|
|
{ofsted.framework === 'ReportCard' ? 'Ofsted Report Card' : 'Ofsted Rating'}
|
|
{ofsted.inspection_date && (
|
|
<span className={styles.ofstedDate}>
|
|
{' '}Inspected {new Date(ofsted.inspection_date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
|
|
</span>
|
|
)}
|
|
<a
|
|
href={`https://reports.ofsted.gov.uk/provider/21/${schoolInfo.urn}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={styles.ofstedReportLink}
|
|
>
|
|
Full report ↗
|
|
</a>
|
|
</h2>
|
|
{ofsted.framework === 'ReportCard' ? (
|
|
<>
|
|
<p className={styles.ofstedDisclaimer}>
|
|
From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
|
|
</p>
|
|
<div className={styles.metricsGrid}>
|
|
{ofsted.rc_safeguarding_met != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Safeguarding</div>
|
|
<div className={`${styles.metricValue} ${ofsted.rc_safeguarding_met ? styles.safeguardingMet : styles.safeguardingNotMet}`}>
|
|
{ofsted.rc_safeguarding_met ? 'Met' : 'Not met'}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{RC_CATEGORIES.filter(({ key }) => key !== 'rc_early_years' || ofsted[key] != null).map(({ key, label }) => {
|
|
const value = ofsted[key] as number | null;
|
|
return value != null ? (
|
|
<div key={key} className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>{label}</div>
|
|
<div className={`${styles.metricValue} ${styles[`rcGrade${value}`]}`}>
|
|
{RC_LABELS[value]}
|
|
</div>
|
|
</div>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className={styles.ofstedHeader}>
|
|
<span className={`${styles.ofstedGrade} ${styles[`ofstedGrade${ofsted.overall_effectiveness}`]}`}>
|
|
{ofsted.overall_effectiveness ? OFSTED_LABELS[ofsted.overall_effectiveness] : 'Not rated'}
|
|
</span>
|
|
{ofsted.previous_overall != null &&
|
|
ofsted.previous_overall !== ofsted.overall_effectiveness && (
|
|
<span className={styles.ofstedPrevious}>
|
|
Previously: {OFSTED_LABELS[ofsted.previous_overall]}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className={styles.ofstedDisclaimer}>
|
|
From September 2024, Ofsted no longer makes an overall effectiveness judgement in inspections.
|
|
</p>
|
|
<div className={styles.metricsGrid}>
|
|
{[
|
|
{ label: 'Quality of Teaching', value: ofsted.quality_of_education },
|
|
{ label: 'Behaviour in School', value: ofsted.behaviour_attitudes },
|
|
{ label: 'Pupils\' Wider Development', value: ofsted.personal_development },
|
|
{ label: 'School Leadership', value: ofsted.leadership_management },
|
|
...(ofsted.early_years_provision != null
|
|
? [{ label: 'Early Years (Reception)', value: ofsted.early_years_provision }]
|
|
: []),
|
|
].map(({ label, value }) => value != null && (
|
|
<div key={label} className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>{label}</div>
|
|
<div className={`${styles.metricValue} ${styles[`ofstedGrade${value}`]}`}>
|
|
{OFSTED_LABELS[value]}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Parent View survey */}
|
|
{parentView && parentView.total_responses != null && parentView.total_responses > 0 && (
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>
|
|
What Parents Say
|
|
<span className={styles.responseBadge}>
|
|
{parentView.total_responses.toLocaleString()} responses
|
|
</span>
|
|
</h2>
|
|
<p className={styles.sectionSubtitle}>
|
|
From the Ofsted Parent View survey — parents share their experience of this school.
|
|
</p>
|
|
<div className={styles.parentViewGrid}>
|
|
{[
|
|
{ label: 'Would recommend this school', pct: parentView.q_recommend_pct },
|
|
{ label: 'My child is happy here', pct: parentView.q_happy_pct },
|
|
{ label: 'My child feels safe here', pct: parentView.q_safe_pct },
|
|
{ label: 'Teaching is good', pct: parentView.q_teaching_pct },
|
|
{ label: 'My child makes good progress', pct: parentView.q_progress_pct },
|
|
{ label: 'School looks after pupils\' wellbeing', pct: parentView.q_wellbeing_pct },
|
|
{ label: 'Behaviour is well managed', pct: parentView.q_behaviour_pct },
|
|
{ label: 'School deals well with bullying', pct: parentView.q_bullying_pct },
|
|
{ label: 'Communicates well with parents', pct: parentView.q_communication_pct },
|
|
].filter(q => q.pct != null).map(({ label, pct }) => (
|
|
<div key={label} className={styles.parentViewRow}>
|
|
<span className={styles.parentViewLabel}>{label}</span>
|
|
<div className={styles.parentViewBar}>
|
|
<div className={styles.parentViewFill} style={{ width: `${pct}%` }} />
|
|
</div>
|
|
<span className={styles.parentViewPct}>{Math.round(pct!)}%</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!ofsted && (!parentView || parentView.total_responses == null || parentView.total_responses === 0) && (
|
|
<div className={styles.card}>
|
|
<p className={styles.sectionSubtitle}>Parent and Ofsted data is not yet available for this school.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Finance Tab ─────────────────────────────────── */}
|
|
{activeTab === 'finance' && hasFinance && finance && (
|
|
<div className={styles.tabContent}>
|
|
<div className={styles.card}>
|
|
<h2 className={styles.sectionTitle}>School Finances ({formatAcademicYear(finance.year)})</h2>
|
|
<p className={styles.sectionSubtitle}>
|
|
Per-pupil spending shows how much the school has to spend on each child's education.
|
|
</p>
|
|
<div className={styles.metricsGrid}>
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Total spend per pupil per year</div>
|
|
<div className={styles.metricValue}>£{Math.round(finance.per_pupil_spend!).toLocaleString()}</div>
|
|
<div className={styles.metricHint}>How much the school has to spend on each pupil annually</div>
|
|
</div>
|
|
{finance.teacher_cost_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Share of budget spent on teachers</div>
|
|
<div className={styles.metricValue}>{finance.teacher_cost_pct.toFixed(1)}%</div>
|
|
</div>
|
|
)}
|
|
{finance.staff_cost_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Share of budget spent on all staff</div>
|
|
<div className={styles.metricValue}>{finance.staff_cost_pct.toFixed(1)}%</div>
|
|
</div>
|
|
)}
|
|
{finance.premises_cost_pct != null && (
|
|
<div className={styles.metricCard}>
|
|
<div className={styles.metricLabel}>Share of budget spent on premises</div>
|
|
<div className={styles.metricValue}>{finance.premises_cost_pct.toFixed(1)}%</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|