From b7a94f1a52bc2859638352e43a8a920b1930f5f6 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Wed, 1 Jul 2026 23:05:05 +0100
Subject: [PATCH] =?UTF-8?q?feat(schools):=20label=20age=20range=20as=20"Ag?=
 =?UTF-8?q?es=203=E2=80=9311"=20for=20clarity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bare "3-11" range gave no unit. Add a display-only formatAgeRange
helper ("3-11" -> "Ages 3–11", en-dash) used in the primary/secondary
search rows and the secondary detail badge. The raw age_range field is
left untouched so sixth-form detection (.includes('18')) still works.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 nextjs-app/components/SchoolRow.tsx                 |  4 ++--
 nextjs-app/components/SecondarySchoolDetailView.tsx |  4 ++--
 nextjs-app/components/SecondarySchoolRow.tsx        |  4 ++--
 nextjs-app/lib/utils.ts                             | 12 ++++++++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/nextjs-app/components/SchoolRow.tsx b/nextjs-app/components/SchoolRow.tsx
index dac2186..5c5f96d 100644
--- a/nextjs-app/components/SchoolRow.tsx
+++ b/nextjs-app/components/SchoolRow.tsx
@@ -9,7 +9,7 @@
  */
 
 import type { School } from '@/lib/types';
-import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge } from '@/lib/utils';
+import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange } from '@/lib/utils';
 import styles from './SchoolRow.module.css';
 
 interface SchoolRowProps {
@@ -75,7 +75,7 @@ export function SchoolRow({
             </span>
           )}
           {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{school.age_range}</span>}
+          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
           {showDenomination && <span>{school.religious_denomination}</span>}
           {showGender && <span>{school.gender}</span>}
         </div>
diff --git a/nextjs-app/components/SecondarySchoolDetailView.tsx b/nextjs-app/components/SecondarySchoolDetailView.tsx
index 0fc33bb..0f9d87f 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.tsx
+++ b/nextjs-app/components/SecondarySchoolDetailView.tsx
@@ -23,7 +23,7 @@ import type {
   SchoolAdmissions, SenDetail, Phonics,
   SchoolDeprivation, SchoolFinance, NationalAverages,
 } from '@/lib/types';
-import { formatPercentage, formatProgress, formatAcademicYear } from '@/lib/utils';
+import { formatPercentage, formatProgress, formatAcademicYear, formatAgeRange } from '@/lib/utils';
 import { DeltaChip } from './DeltaChip';
 import { track, getNavigationSource } from '@/lib/analytics';
 import styles from './SecondarySchoolDetailView.module.css';
@@ -228,7 +228,7 @@ export function SecondarySchoolDetailView({
                 <span className={styles.badge}>{schoolInfo.gender}&apos;s school</span>
               )}
               {schoolInfo.age_range && (
-                <span className={styles.badge}>{schoolInfo.age_range}</span>
+                <span className={styles.badge}>{formatAgeRange(schoolInfo.age_range)}</span>
               )}
               {hasSixthForm && (
                 <span className={styles.badge}>Sixth form</span>
diff --git a/nextjs-app/components/SecondarySchoolRow.tsx b/nextjs-app/components/SecondarySchoolRow.tsx
index 7cf73f3..a302d6f 100644
--- a/nextjs-app/components/SecondarySchoolRow.tsx
+++ b/nextjs-app/components/SecondarySchoolRow.tsx
@@ -11,7 +11,7 @@
 'use client';
 
 import type { School } from '@/lib/types';
-import { buildOfstedListBadge, getPhaseStyle, schoolUrl } from '@/lib/utils';
+import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange } from '@/lib/utils';
 import styles from './SecondarySchoolRow.module.css';
 
 function detectAdmissionsTag(school: School): string | null {
@@ -84,7 +84,7 @@ export function SecondarySchoolRow({
             </span>
           )}
           {school.school_type && <span>{school.school_type}</span>}
-          {school.age_range && <span>{school.age_range}</span>}
+          {school.age_range && <span>{formatAgeRange(school.age_range)}</span>}
           {showGender && (
             <span className={styles.provisionTag}>{school.gender}</span>
           )}
diff --git a/nextjs-app/lib/utils.ts b/nextjs-app/lib/utils.ts
index 2f47c54..a696370 100644
--- a/nextjs-app/lib/utils.ts
+++ b/nextjs-app/lib/utils.ts
@@ -59,6 +59,18 @@ export function truncate(text: string, maxLength: number): string {
   return text.slice(0, maxLength).trim() + '...';
 }
 
+/**
+ * Format a school's age range for display, e.g. "3-11" → "Ages 3–11".
+ * Display-only — leaves the raw `age_range` field (used for sixth-form
+ * detection) untouched. Falls back to the raw value if it's not a plain range.
+ */
+export function formatAgeRange(ageRange: string | null | undefined): string {
+  if (!ageRange) return '';
+  const match = ageRange.match(/^\s*(\d+)\s*[-–]\s*(\d+)\s*$/);
+  if (!match) return ageRange;
+  return `Ages ${match[1]}–${match[2]}`;
+}
+
 // ============================================================================
 // Number Formatting
 // ============================================================================