Phase 7a: Uebersicht, Fahrzeugstatus und Mein Audi

Erste drei Screens auf der fertigen Datenschicht. Uebersicht mit Fahrzeugbild,
Sicherungsstatus, Reichweite und Tankfuellstand, Kilometerstand samt
Service-Faelligkeit und Vorschau auf letzte Fahrt und Tankung. Fahrzeugstatus
zeigt die 16 Einzelpruefungen, wobei ein unbekannter Sensor als hohler Ring
erscheint statt als gruen geratener Punkt - dieselbe Vorsicht, die schon das
Backend walten laesst. Mein Audi buendelt Fotogalerie und Wege zu den
Unterseiten.

Dazu die geteilte Rechenlogik der Statistik portiert (Zeitraeume,
Langzeitverbrauch mit Plausibilitaetsfenster, Gruppierung nach Jahr und
Monat) und Formatierung im deutschen Format.

Bild-Komponente kapselt eine Reibung zwischen App und Bibliothek: die App
laeuft mit exactOptionalPropertyTypes, ein undefined an einem optionalen Prop
waere sonst an jeder Aufrufstelle einzeln zu behandeln.

companion-app/src/screens/register.tsx

@@ -5,7 +5,10 @@
 
 import { useDaten } from "../daten/DatenKontext"
 import type { Route, SeitenName } from "../navigation"
+import { Fahrzeugstatus } from "./Fahrzeugstatus"
+import { MeinAudi } from "./MeinAudi"
 import { Platzhalter } from "./Platzhalter"
+import { Uebersicht } from "./Uebersicht"
 
 export interface SeitenProps {
   route: Route
@@ -18,8 +21,8 @@ export interface SeitenProps {
 export function SeiteFuer(props: SeitenProps) {
   const daten = useDaten()
 
-  // Erste Ladung: nichts anzeigen außer einem Hinweis. Ein leeres Gerüst
-  // wäre schlimmer als ein ehrliches „lädt".
+  // Erste Ladung: nichts anzeigen außer einem Hinweis. Ein leeres Gerüst wäre
+  // schlimmer als ein ehrliches „lädt".
   if (!daten.bereit) {
     if (daten.ladefehler) {
       return (
@@ -32,5 +35,16 @@ export function SeiteFuer(props: SeitenProps) {
     return <div className="dm-laden">Daten werden geladen …</div>
   }
 
-  return <Platzhalter route={props.route} geheZu={props.geheZu} />
+  const { route, geheZu } = props
+
+  switch (route.name) {
+    case "home":
+      return <Uebersicht geheZu={geheZu} />
+    case "sicherheit":
+      return <Fahrzeugstatus />
+    case "audi":
+      return <MeinAudi geheZu={geheZu} />
+    default:
+      return <Platzhalter route={route} geheZu={geheZu} />
+  }
 }