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/lib/api.ts

@@ -225,7 +225,20 @@ export async function fetchMetrics(
     },
   });
 
-  return handleResponse<MetricsResponse>(response);
+  const data = await handleResponse<any>(response);
+
+  // Transform backend response to match our TypeScript types
+  // Backend uses 'name' and 'type', we use 'label' and 'format'
+  return {
+    metrics: data.metrics.map((metric: any) => ({
+      key: metric.key,
+      label: metric.name, // Map 'name' to 'label'
+      description: metric.description,
+      category: metric.category,
+      format: metric.type, // Map 'type' to 'format'
+      hasNationalAverage: metric.hasNationalAverage,
+    })),
+  };
 }
 
 /**