58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
|
/**
|
||
|
|
* FinancesSection — shared between the primary and secondary detail pages
|
||
|
|
* (the two versions were 91% identical).
|
||
|
|
*
|
||
|
|
* Server component.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import type { SchoolFinance } from '@/lib/types';
|
||
|
|
import { formatAcademicYear } from '@/lib/utils';
|
||
|
|
import { Section, sectionStyles as styles } from './sectionShared';
|
||
|
|
|
||
|
|
export function FinancesSection({
|
||
|
|
finance,
|
||
|
|
showPremises = false,
|
||
|
|
}: {
|
||
|
|
finance: SchoolFinance;
|
||
|
|
/**
|
||
|
|
* The secondary page shows a premises-cost card the primary page never had.
|
||
|
|
* Gated rather than enabled everywhere so this refactor makes no visible
|
||
|
|
* change; enabling it for primary is a one-line follow-up.
|
||
|
|
*/
|
||
|
|
showPremises?: boolean;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<Section id="finances">
|
||
|
|
<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>
|
||
|
|
)}
|
||
|
|
{showPremises && 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>
|
||
|
|
</Section>
|
||
|
|
);
|
||
|
|
}
|