feat(platform): route vehicle searches to detail

vehicle-data-platform/apps/web/src/App.tsx

@@ -8,20 +8,31 @@ import { Realtime } from './pages/Realtime';
 import { VehicleDetail } from './pages/VehicleDetail';
 import { Vehicles } from './pages/Vehicles';
 
-const pages: Record<PageKey, JSX.Element> = {
-  dashboard: <Dashboard />,
-  vehicles: <Vehicles />,
-  realtime: <Realtime />,
-  detail: <VehicleDetail />,
-  history: <History />,
-  mileage: <Mileage />,
-  quality: <Quality />
-};
-
 export default function App() {
   const [activePage, setActivePage] = useState<PageKey>('dashboard');
+  const [activeVin, setActiveVin] = useState('LB9A32A24R0LS1426');
+
+  const openVehicle = (vin: string) => {
+    const nextVin = vin.trim();
+    if (!nextVin) {
+      return;
+    }
+    setActiveVin(nextVin);
+    setActivePage('detail');
+  };
+
+  const pages: Record<PageKey, JSX.Element> = {
+    dashboard: <Dashboard />,
+    vehicles: <Vehicles onOpenVehicle={openVehicle} />,
+    realtime: <Realtime />,
+    detail: <VehicleDetail vin={activeVin} />,
+    history: <History />,
+    mileage: <Mileage />,
+    quality: <Quality />
+  };
+
   return (
-    <AppShell activePage={activePage} onChange={setActivePage}>
+    <AppShell activePage={activePage} onChange={setActivePage} onVehicleSearch={openVehicle}>
       {pages[activePage]}
     </AppShell>
   );