Fix: Improve UX with empty state, miles, and metric labels

1. Show empty state by default on home page
   - Don't fetch or display schools until user searches
   - Show helpful message prompting users to search
   - Only fetch schools when search params are present

2. Change distance search to miles
   - Display 0.5, 1, and 2 mile options instead of km
   - Convert miles to km when sending to API (backend expects km)
   - Convert km back to miles for display in location banner
   - Maintains backend compatibility while improving UX

3. Fix metric labels in rankings dropdown
   - Backend returns 'name' and 'type' fields
   - Frontend expects 'label' and 'format' fields
   - Added transformation in fetchMetrics to map fields
   - Dropdown now shows proper labels like "RWM Combined %"
     instead of technical codes like "rwm_expected_pct"

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

nextjs-app/app/page.tsx

@@ -31,12 +31,24 @@ export default async function HomePage({ searchParams }: HomePageProps) {
 
   // Parse search params
   const page = parseInt(params.page || '1');
-  const radius = params.radius ? parseInt(params.radius) : undefined;
+  const radius = params.radius ? parseFloat(params.radius) : undefined;
+
+  // Check if user has performed a search
+  const hasSearchParams = !!(
+    params.search ||
+    params.local_authority ||
+    params.school_type ||
+    params.postcode
+  );
 
   // Fetch data on server with error handling
   try {
-    const [schoolsData, filtersData] = await Promise.all([
-      fetchSchools({
+    const filtersData = await fetchFilters();
+
+    // Only fetch schools if there are search parameters
+    let schoolsData;
+    if (hasSearchParams) {
+      schoolsData = await fetchSchools({
         search: params.search,
         local_authority: params.local_authority,
         school_type: params.school_type,
@@ -44,9 +56,11 @@ export default async function HomePage({ searchParams }: HomePageProps) {
         radius,
         page,
         page_size: 50,
-      }),
-      fetchFilters(),
-    ]);
+      });
+    } else {
+      // Empty state by default
+      schoolsData = { schools: [], page: 1, page_size: 50, total: 0, total_pages: 0 };
+    }
 
     return (
       <HomeView