audi-app/DESIGN_BRIEF_DATAMETRIC360.md

DataMetric360 — Design brief for Claude Design

Paste the block below into a new Claude Design project that has the "Audi Dashboard UI" design system attached. Then iterate screen by screen. See the step-by-step in the chat/companion doc.

---

Prompt to paste

Entwirf eine App namens "DataMetric360" — eine private Fahrzeug-App für ein einzelnes Auto.
Nutze ausschließlich die Komponenten aus dem angehängten Design-System (Audi Dashboard UI).

WICHTIG — Grundlagen:
- Dunkles Theme ("Nacht") ist Standard, helles Theme ("Tag") existiert als Umschaltung.
- Keine Schatten, keine Verläufe. Flache Kacheln, Pill-Buttons, Haarlinien als Trenner.
- Zahlen im deutschen Format (1.234,5 · Komma als Dezimaltrennzeichen).
- Alle Texte auf Deutsch.
- Schriftgewichte nur 300 und 400 — niemals fett/600+.

RESPONSIVE — das ist zentral:
Die App läuft in zwei Kontexten und muss beide gleich gut bedienen:
1. Smartphone (iPhone/Android, ca. 390–430px breit) — Hauptkontext, Bedienung mit dem Daumen,
   Tab-Leiste unten.
2. Großer Bildschirm (Desktop/Tablet, eingebettet in ein Home-Assistant-Dashboard, ab ca. 1000px).
   Hier soll das Layout NICHT einfach eine zentrierte schmale Handy-Spalte sein, sondern die
   Fläche sinnvoll nutzen: mehrspaltige Kachel-Anordnung, Navigation seitlich statt unten,
   Listen und Detailansicht nebeneinander statt nacheinander.
Zeige für jeden Hauptbildschirm beide Varianten.

BILDSCHIRME (Hauptnavigation, 5 Bereiche):
1. "Übersicht" — Fahrzeugfoto, Modellbezeichnung, Kennzeichen, Status "sicher abgestellt",
   Reichweite + Tankfüllstand als große Zahl mit Fortschrittsbalken, Kilometerstand,
   nächster Service, letzte Fahrt und letzte Tankung als Vorschau.
2. "Mein Audi" — Übersichtsseite mit Fotogalerie und Kacheln, die zu Unterseiten führen:
   Fahrzeugdaten/Technik, Service, Reifen, Versicherung & Steuer.
3. "Fahrten" — Liste aller Fahrten, gruppiert nach Jahr und Monat (aufklappbar).
   Pro Fahrt: Datum, Uhrzeit, Strecke in km, Dauer, Fahrtart (privat/Arbeitsweg).
   Plus eine Detailansicht einer einzelnen Fahrt mit Karte, Start-/Zieladresse,
   Durchschnitts- und Höchstgeschwindigkeit.
4. "Statistik" — ausgewertete Kennzahlen über wählbare Zeiträume: gefahrene Strecke,
   Fahrzeit, Verbrauch, Kosten, Aufteilung Tag/Nacht, Aufteilung privat/Arbeitsweg.
5. "Tanken" — Liste der Tankvorgänge (Jahr/Monat gruppiert), pro Eintrag Datum, Liter,
   Preis pro Liter, Gesamtbetrag, Tankstelle. Plus Detailansicht eines Tankvorgangs
   mit Beleg-Upload.

ZUSÄTZLICHE BILDSCHIRME:
6. "Einstellungen" — erreichbar über ein Zahnrad oben rechts, nicht über die Tab-Leiste.
   Fahrzeugdaten bearbeiten (FIN, Kennzeichen, Modell), Theme-Umschaltung,
   Foto-Verwaltung, Datenexport, Backup.
7. "Ersteinrichtung" (Onboarding, einmalig beim ersten Start) — der Nutzer verbindet die App
   mit seinem eigenen Server: Feld für die Server-Adresse, Feld zum Einfügen eines
   Zugangs-Tokens, alternativ ein Button "QR-Code scannen". Freundlich und knapp erklärt,
   kein technisches Kauderwelsch.

NEU UND WICHTIG — Live-Daten:
Das Fahrzeug sendet jetzt laufend Live-Telemetrie (Position, Geschwindigkeit, Drehzahl,
Zündung an/aus, Tankfüllstand). Entwirf dafür:
- Eine "Fahrt läuft gerade"-Ansicht: Live-Karte mit aktueller Position, aktuelle
  Geschwindigkeit groß, bisherige Strecke und Dauer der laufenden Fahrt.
- Auf der Übersicht: ein deutlich sichtbarer Hinweis, wenn das Fahrzeug gerade fährt,
  mit Absprung in diese Live-Ansicht.

OFFLINE-ZUSTAND:
Die App kann ihren Server nicht immer erreichen. Entwirf einen unaufdringlichen, aber
eindeutigen "Offline"-Hinweis in der Kopfzeile: die zuletzt geladenen Daten bleiben sichtbar,
sind aber erkennbar nicht aktuell. Zeige außerdem, wie Änderungen aussehen, die offline
gemacht wurden und noch auf Übertragung warten (z. B. ein hochgeladener Beleg in einer
Warteschlange).

LEERE ZUSTÄNDE:
Zeige für Fahrten, Tankvorgänge und Statistik jeweils auch den Zustand "noch keine Daten
vorhanden" — freundlich formuliert, mit einem Hinweis, was als Nächstes passiert.

---

Notes for the implementation step (me, afterwards)

• Import via DesignSync from the resulting project, same as the Design-Audit task.
• Target repo: a new companion-app/ (Vite + React + TypeScript + Capacitor), consuming @audi-dash/ui from design-system/.
• The design system ships no Audi brand assets (licence constraint) — but DataMetric360 is sideload-only and therefore inside the private-installation scope, so real fonts/rings/badges get added back at implementation time from homeassistant/www/, not into design-system/.
• Data layer: HA REST + WebSocket, see COMPANION_APP_ARCHITECTURE.md §3.