feat(ui): UI-001 Designsystem-Grundlage - Dark Mode + Readiness-Farbtokens

Epic 20 (UI-Redesign) angelegt, Stufe 1: CSS-Variablen für Dark Mode (System-Präferenz + manueller Schalter via ThemeToggle, localStorage- persistiert) und eigene Farbtokens für Einsatzbereitschaft (ready/ limited/not-ready/unknown), Basis für ReadinessBadge in UI-003. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
2026-09-06 09:57:49 +02:00
parent 01263753bf
commit bccb8d1933
5 changed files with 351 additions and 3 deletions
@@ -272,10 +272,11 @@ eigenes Modul (MAINT-\*, MABEA hat nur Prüfung, keine Wartung)**.
 | `17_zustaendigkeit.md` | ZUST-001 … ZUST-002 (vollständig, nachträglich ergänzt) |
 | `18_notifications.md` | NOTIF-001 … NOTIF-002 (vollständig, nachträglich ergänzt) |
 | `19_satelliten_server.md` | SAT-001 (Platzhalter, nachträglich ergänzt, bewusst zurückgestellt) |
+| `20_ui_redesign.md` | UI-001 … UI-008 (vollständig, nachträglich ergänzt, in Umsetzung) |

-**Alle 19 Epics durchgegangen** (16 ursprüngliche + 17 Zuständigkeit/18 Notifications/19
-Satelliten-Server, nachträglich aus dem Abgleich mit den alten Arbeitskarten ergänzt).
-Detaillierungsphase abgeschlossen (2026-09-05).
+**Alle 20 Epics durchgegangen** (16 ursprüngliche + 17 Zuständigkeit/18 Notifications/19
+Satelliten-Server/20 UI-Redesign, nachträglich ergänzt). Detaillierungsphase
+abgeschlossen (2026-09-05), UI-Redesign-Epic ergänzt (2026-09-06).

 ## Nachtrag: Externe Roadmap-Bewertung Shelf/Resgrid/Emergency Mgmt (2026-09-05)

@@ -0,0 +1,173 @@
+# Epic 20 — UI-Redesign (moderne BOS-Plattform-Optik)
+
+Ausgangspunkt: externer Redesign-Prompt vom 2026-09-06 (Nutzer-Vorgabe, siehe
+Referenzen). **Keine Neuentwicklung, keine Entfernung bestehender Funktionen** —
+bestehende API/Fachlogik/PWA/Offline-Sync bleiben unverändert, nur die Darstellung
+wird modernisiert. React/Vite/TypeScript bleibt, kein Framework-Wechsel.
+
+Aktueller Stand vor Redesign: 39 Seiten-/Komponenten-Dateien, ~7.000 Zeilen, einfaches
+`global.css` (560 Zeilen) ohne Designsystem, keine UI-Bibliothek.
+
+---
+
+## UI-001 — Designsystem-Grundlage
+
+- **Ziel:** Ein zentrales Set an Design-Tokens (Farben, Typografie, Abstände,
+  Radien, Schatten) statt verstreuter Inline-Styles.
+- **Beschreibung:** CSS-Variablen (Light + Dark), zentrale Status-Farben
+  (einsatzbereit/eingeschränkt/nicht einsatzbereit/unbekannt), Basis-Komponenten
+  (Button, Card, Input, Badge, Table) vereinheitlicht.
+- **Benutzerwert:** Konsistentes, hochwertiges Erscheinungsbild in der ganzen App.
+- **Abhängigkeiten:** keine
+- **Backend:** keins
+- **Frontend:** `styles/tokens.css`, überarbeitetes `global.css`, Dark-Mode via
+  `prefers-color-scheme` + manuellem Umschalter
+- **Mobile:** Basis für alle Folge-Kacheln
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** Dark Mode umschaltbar, alle Basis-Elemente nutzen Tokens
+  statt Hardcoded-Werten.
+- **Tests:** keine (reines Styling), visuelle Kontrolle.
+- **DoD:** offen — noch nicht begonnen.
+
+## UI-002 — App-Shell & Navigation
+
+- **Ziel:** Moderne Sidebar (Desktop) / kompakte Navigation (Mobile) statt
+  bisheriger einfacher Navigation in `AppShell.tsx`.
+- **Beschreibung:** Bereiche Dashboard/Objekte/Fahrzeuge/Material/Lager/
+  Kontrollen/Prüfungen/Mängel/Personal/Administration. Globale Suche `Ctrl/⌘+K`.
+  Quick Actions (QR scannen, Kontrolle starten, Mangel melden, Material buchen).
+- **Benutzerwert:** Schnelle Orientierung, weniger Klicks zu Kernaktionen.
+- **Abhängigkeiten:** UI-001
+- **Backend:** keins (Suche client-seitig über bereits geladene Objekt-/Material-Listen,
+  kein neuer Such-Endpunkt in Phase 1)
+- **Frontend:** `AppShell.tsx` umgebaut, neue `CommandPalette`-Komponente
+- **Mobile:** Bottom-Navigation oder Drawer statt Sidebar
+- **Rechte:** Navigationspunkte nach Rolle gefiltert (bereits vorhandene Rollen-Logik
+  wiederverwenden)
+- **Akzeptanzkriterien:** alle bestehenden Routen weiter erreichbar, Suche findet
+  Objekte per Name/Code.
+- **Tests:** keine neuen (reines Routing/UI).
+- **DoD:** offen.
+
+## UI-003 — Zentrale Statuskomponenten
+
+- **Ziel:** Wiederverwendbare Status-Anzeigen statt an mehreren Stellen dupliziertem
+  Badge-Markup.
+- **Beschreibung:** `ReadinessBadge` (einsatzbereit/eingeschränkt/nicht
+  einsatzbereit/unbekannt — „unbekannt" NIE als einsatzbereit darstellen),
+  `SyncStatus` (online/offline/synchronisiert), `InspectionStatus`,
+  `InventoryStatus`. Jede Komponente kapselt Farbe+Icon+Text an einer Stelle.
+- **Benutzerwert:** Konsistente, sofort verständliche Statusdarstellung überall.
+- **Abhängigkeiten:** UI-001
+- **Backend:** keins
+- **Frontend:** `components/status/ReadinessBadge.tsx` etc., bestehende Ad-hoc-Badges
+  (`DashboardPage.tsx`, `AktePage.tsx`, `ObjektListPage.tsx`) darauf umgestellt
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** kein Status mehr als Inline-`<span className="badge...">`
+  dupliziert.
+- **Tests:** ggf. kleiner Komponententest je Status-Mapping.
+- **DoD:** offen.
+
+## UI-004 — Dashboard neu
+
+- **Ziel:** „Was ist einsatzbereit und was muss ich jetzt tun?" in 5 Sekunden
+  beantwortbar.
+- **Beschreibung:** Einsatzbereitschaft-Übersicht (einsatzbereit/eingeschränkt/
+  nicht einsatzbereit/unbekannt), offene Mängel, fällige Kontrollen/Prüfungen,
+  fehlendes Material, aktuelle Aufgaben — alles aus bereits vorhandenen
+  Dashboard-/Fehlbestand-/Mangel-Endpunkten, keine Fake-Daten.
+- **Benutzerwert:** Kernversprechen der Kachel — sofortiger Überblick.
+- **Abhängigkeiten:** UI-001, UI-003
+- **Backend:** keins zusätzlich (bestehende Dashboard-Kennzahlen wiederverwenden)
+- **Frontend:** `DashboardPage.tsx` neu strukturiert, Card-Grid statt Liste
+- **Mobile:** gestapeltes Layout
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** alle geforderten Kennzahlen sichtbar, keine Platzhalter-/
+  Fake-Werte.
+- **Tests:** bestehende Dashboard-Tests bleiben grün.
+- **DoD:** offen.
+
+## UI-005 — Objektakte modernisiert
+
+- **Ziel:** `AktePage.tsx` (bereits FILE-006/Akte-Aggregation) optisch/strukturell
+  aufwerten, inkl. begründeter Einsatzbereitschafts-Anzeige.
+- **Beschreibung:** Status mit Begründung (z. B. „🔴 Nicht einsatzbereit — Funkgerät
+  defekt, 2 Beladungspositionen fehlen, Prüfung überfällig"), Tabs oder klar
+  getrennte Bereiche für Beladung/Kontrollen/Mängel/Prüfungen/Wartungen/
+  Dokumente/Historie.
+- **Benutzerwert:** Sofort verständlich, WARUM ein Objekt nicht einsatzbereit ist.
+- **Abhängigkeiten:** UI-001, UI-003
+- **Backend:** ggf. kleine Ergänzung am `/akte/objekt/{id}`-Endpunkt, falls die
+  Begründungs-Texte nicht schon aus den Einzelfeldern ableitbar sind (prüfen vor
+  Umsetzung)
+- **Frontend:** `AktePage.tsx` Umbau, bisherige 6 gleichartigen Card-Blöcke
+  (bereits als Simplification-Fund dokumentiert) auf gemeinsame Komponente
+  vereinheitlichen
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** „unbekannt/nie kontrolliert" wird nie als einsatzbereit
+  dargestellt (harte Regel, Akzeptanzkriterium testbar).
+- **Tests:** Begründungslogik testen (welche Bedingungen führen zu welchem Status).
+- **DoD:** offen.
+
+## UI-006 — Kontrolle & Beladung modernisiert
+
+- **Ziel:** Bestehenden Kontrollworkflow (QR/Objekt → Kontrolle starten → Position
+  prüfen → OK/Abweichung → speichern → Abschluss) beibehalten, Fortschritt
+  (`38 / 40 geprüft`) und fehlerhafte Positionen visuell hervorheben.
+- **Benutzerwert:** Schnellere, fehlerfreiere Kontrolle vor Ort.
+- **Abhängigkeiten:** UI-001, UI-003
+- **Backend:** keins
+- **Frontend:** `KontrollPage.tsx` + `pages/kontrolle/*` Fortschrittsanzeige,
+  hervorgehobene Abweichungen
+- **Mobile:** Priorität — Haupteinsatzort dieses Screens
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** Fortschritt live sichtbar, Abweichungen nicht zu übersehen.
+- **Tests:** bestehende Kontroll-Tests bleiben grün.
+- **DoD:** offen.
+
+## UI-007 — QR-Scan-Aktionsleiste
+
+- **Ziel:** Nach Scan direkt Aktionen anbieten (Kontrolle starten/Mangel melden/
+  Informationen), nicht nur Direkt-Navigation.
+- **Beschreibung:** Baut auf MOBILE-002-Fix (Scan → Akte) auf, ergänzt auf der
+  Akte-Seite eine hervorgehobene Aktionsleiste statt nur einem Button.
+- **Benutzerwert:** Weniger Klicks nach dem Scan.
+- **Abhängigkeiten:** UI-005, MOBILE-002 (bereits erledigt)
+- **Backend:** keins
+- **Frontend:** Aktionsleiste in `AktePage.tsx`
+- **Rechte:** je Aktion bestehende Rollenprüfung wiederverwenden
+- **Akzeptanzkriterien:** alle drei Aktionen von der Akte aus erreichbar.
+- **Tests:** keine neuen.
+- **DoD:** offen.
+
+## UI-008 — Restliche Module (Material, Lager, Personal, Administration)
+
+- **Ziel:** Verbleibende Seiten im neuen Designsystem angleichen.
+- **Beschreibung:** Admin-Tabs (`LagerSection.tsx` u.a.), `MangelListePage.tsx`,
+  `FehlbestandListePage.tsx` auf Tokens/Statuskomponenten umstellen.
+- **Benutzerwert:** Durchgängiges Erscheinungsbild, keine Stilbrüche.
+- **Abhängigkeiten:** UI-001..003
+- **Backend:** keins
+- **Frontend:** verbleibende Seiten
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** keine Seite mehr im alten Stil.
+- **Tests:** bestehende Tests bleiben grün.
+- **DoD:** offen.
+
+---
+
+**Reihenfolge (zwingend, laut Vorgabe):** UI-001 → UI-002 → UI-003 → UI-004 → UI-005
+→ UI-006 → UI-007 → UI-008. Jede Stufe wird einzeln abgeschlossen und bestätigt,
+bevor die nächste beginnt (Arbeitskacheln-Methodik: kein Direktcoden ohne Freigabe
+je Schritt).
+
+**Nicht-Ziele:** kein Framework-Wechsel, keine Breaking Changes an API/Fachlogik,
+keine Fake-Daten, Offline/PWA/IndexedDB-Sync bleibt unangetastet, bestehende Tests
+bleiben grün und werden erweitert wo sinnvoll.
+
+**WCAG 2.2 AA:** als Leitplanke bei UI-001 (Kontraste/Fokus-Stile) und UI-002
+(Tastaturbedienung Command Palette) mitgedacht, kein separater Prüf-Task.
+
+## Referenzen
+Externer Redesign-Prompt, vom Nutzer am 2026-09-06 eingebracht (kompakte Version
+für Coding-KI, Zielrepo MABEA).