From 17b8873f0f7080b522b6a2775952e02017be082c Mon Sep 17 00:00:00 2001
From: Tudor <tudor@sitaru.org>
Date: Sun, 29 Mar 2026 15:06:27 +0100
Subject: [PATCH] fix(detail): add missing location map section to secondary
 school page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../SecondarySchoolDetailView.module.css        |  9 ++++++++-
 .../components/SecondarySchoolDetailView.tsx    | 17 +++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css
index c853dd3..1c966a5 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.module.css
+++ b/nextjs-app/components/SecondarySchoolDetailView.module.css
@@ -373,13 +373,20 @@
   color: var(--accent-teal, #2d7d7d);
 }
 
-/* ── Charts ──────────────────────────────────────────── */
+/* ── Charts & Map ────────────────────────────────────── */
 .chartContainer {
   width: 100%;
   height: 280px;
   position: relative;
 }
 
+.mapContainer {
+  width: 100%;
+  height: 300px;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
 /* ── History table ───────────────────────────────────── */
 .tableWrapper {
   overflow-x: auto;
diff --git a/nextjs-app/components/SecondarySchoolDetailView.tsx b/nextjs-app/components/SecondarySchoolDetailView.tsx
index 76bb24e..8f486ad 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.tsx
+++ b/nextjs-app/components/SecondarySchoolDetailView.tsx
@@ -11,6 +11,7 @@ import { useRouter } from 'next/navigation';
 import { useComparison } from '@/hooks/useComparison';
 import { PerformanceChart } from './PerformanceChart';
 import { MetricTooltip } from './MetricTooltip';
+import { SchoolMap } from './SchoolMap';
 import type {
   School, SchoolResult, AbsenceData,
   OfstedInspection, OfstedParentView, SchoolCensus,
@@ -91,6 +92,7 @@ export function SecondarySchoolDetailView({
   const hasFinance = finance != null && finance.per_pupil_spend != null;
   const hasParents = parentView != null && parentView.total_responses != null && parentView.total_responses > 0;
   const hasDeprivation = deprivation != null && deprivation.idaci_decile != null;
+  const hasLocation = schoolInfo.latitude != null && schoolInfo.longitude != null;
   const hasWellbeing = (latestResults?.sen_support_pct != null || latestResults?.sen_ehcp_pct != null) || hasDeprivation;
   const p8Suspended = latestResults != null && latestResults.year >= 202425;
   const hasResults = latestResults?.attainment_8_score != null;
@@ -118,6 +120,7 @@ export function SecondarySchoolDetailView({
   if (hasResults) navItems.push({ id: 'gcse', label: 'GCSEs' });
   if (admissions) navItems.push({ id: 'admissions', label: 'Admissions' });
   if (hasWellbeing) navItems.push({ id: 'wellbeing', label: 'Wellbeing' });
+  if (hasLocation) navItems.push({ id: 'location', label: 'Location' });
   if (hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
   if (yearlyData.length > 1) navItems.push({ id: 'history', label: 'History' });
 
@@ -618,6 +621,20 @@ export function SecondarySchoolDetailView({
         </section>
       )}
 
+      {/* ── Location ───────────────────────────────────── */}
+      {hasLocation && (
+        <section id="location" className={styles.card}>
+          <h2 className={styles.sectionTitle}>Location</h2>
+          <div className={styles.mapContainer}>
+            <SchoolMap
+              schools={[schoolInfo]}
+              center={[schoolInfo.latitude!, schoolInfo.longitude!]}
+              zoom={15}
+            />
+          </div>
+        </section>
+      )}
+
       {/* ── Finances ───────────────────────────────────── */}
       {hasFinance && finance && (
         <section id="finances" className={styles.card}>