docs(arbeitskacheln): Open-Source-/HiOrg-Vergleich ausgewertet, 14 neue Kacheln ausgearbeitet

Vergleich mit InvenTree, Snipe-IT, Grocy, Shelf.nu, Resgrid, KP Front, FleetMS,
HiOrg-Server ergibt neue Kacheln (ASSET-010 Custody, FILE-008 Hash-Audit-Journal,
FILE-009 Notizen, NOTIF-003, MAINT-007 Tankbuch, ZUST-003 Standort-Scoping,
FOUND-007 Import/Export, FOUND-008 Fristen-Dienst, READY-006 Statistik-Dashboard,
UI2-006..010) sowie Referenz-Ergänzungen bei bestehenden Lücken. Alle Design-
Entscheidungen (Datenmodell, Sicherheitsanforderungen bei ASSET-010) geklärt.

Neues Epic 23 (Flutter-Begleit-App, Sondierungs-Prototyp FLUT-001) inkl. geklärtem
TLS-Blocker (Domain mabea.perlbach-edv.de mit Let's-Encrypt-Zertifikat statt
selbstsigniertem Server-Zertifikat).

Alle Kacheln bleiben offen/ungeplant, nur ausgearbeitet, keine Implementierung.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV

arbeitskacheln/22_ui_redesign_v2.md

@@ -1,7 +1,9 @@
 # Epic 22 — UI-Redesign Runde 2 (Patterns aus ai-coding-starter-kit-v2)
 
-Ausgangspunkt: Subagenten-Analyse von `gitea.perlbach24.de/scripte/ai-coding-starter-kit-v2`
-(2026-09-08), reines shadcn/ui-Komponenten-Skelett (Vite/React/TS, Tailwind v3, Radix,
+Details zu UI2-001 … UI2-010, alle offen/ungeplant (Backlog-Planung, bewusst noch nicht
+gestartet). Ausgangspunkt: Subagenten-Analyse von
+`gitea.perlbach24.de/scripte/ai-coding-starter-kit-v2` (2026-09-08), vertieft am
+2026-09-09, reines shadcn/ui-Komponenten-Skelett (Vite/React/TS, Tailwind v3, Radix,
 react-hook-form+zod). Kein Framework-Wechsel, kein Neubau — Epic 20 (UI-001..008) bleibt
 Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken geschlossen.
 **Kein kompletter Frontend-Neubau** — bewusste Entscheidung, siehe Chat 2026-09-08.
@@ -23,6 +25,13 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Akzeptanzkriterien:** neue Tokens vorhanden, mind. Card-Komponente nutzt sie statt
   Hardcoded-Werten.
 - **Tests:** keine (reines Styling).
+- **ACHTUNG (QA-Review 2026-09-09, siehe CLAUDE.md „Wichtige Stolperfallen"):**
+  Neue Token-Namen in `tokens.css` dürfen NIEMALS denselben Namen wie ein
+  Tailwind-`@theme`-Token bekommen — führte in diesem Projekt bereits zweimal zu
+  app-weit kaputten Farben (zirkuläre Custom-Properties, guaranteed-invalid
+  value). Vor dem Anlegen von `--color-card` etc. gegen `tailwind.css`/`@theme`
+  prüfen, keine Namenskollision. Diese Warnung gilt für UI2-001 als Basis
+  genauso wie für UI2-010 (Dark-Mode-Vorbereitung), die direkt darauf aufbaut.
 - **DoD:** offen.
 
 ## UI2-002 — AdminPage Sidebar/Sheet-Umschaltung
@@ -61,6 +70,29 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
   unverändert.
 - **Tests:** bestehende Vitest-Tests bleiben grün.
 - **DoD:** offen.
+- **Referenz (vertiefte Starter-Kit-Analyse 2026-09-09):** `form.tsx` im Quell-Repo
+  verdrahtet a11y konkret statt nur visuell — `FormLabel` wird bei Fehler rot,
+  `FormControl` setzt `aria-invalid`, `FormMessage` nur bei vorhandenem Error gerendert,
+  `aria-describedby` verlinkt zur Fehlermeldung. 1:1 mit MABEAs `useState`-Ansatz
+  nachbaubar (kein react-hook-form/Context nötig) — sollte in den `FormField`-Baustein
+  mit einfließen, nicht nur reines Layout.
+
+## UI2-009 — Formular-Fehlerzustand-Verdrahtung (a11y, ergänzt UI2-003)
+
+- **Ziel:** `aria-invalid`/`aria-describedby`/Fehlerfarbe systematisch statt nur visuell.
+- **Beschreibung:** siehe Referenz-Absatz bei UI2-003 — kein eigenständiges Feature,
+  sondern eine konkrete Ausbaustufe von UI2-003, aus organisatorischen Gründen als
+  eigene Kachel geführt (klar abhakbar, statt in UI2-003 zu verschwimmen).
+- **Benutzerwert:** Bessere Screenreader-/Assistive-Tech-Unterstützung, klarere
+  Fehlererkennung bei schlechtem Licht/Handschuhen (Fehlerfarbe + Text statt nur Farbe).
+- **Abhängigkeiten:** UI2-003
+- **Backend:** keins
+- **Frontend:** `components/ui/form-field.tsx`
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** Fehlerfeld hat `aria-invalid="true"` und `aria-describedby`
+  auf die Fehlermeldung, kein Verlust bestehender Funktionalität.
+- **Tests:** keine neuen (reines Markup/Attribut).
+- **DoD:** offen.
 
 ## UI2-004 — Skeleton-Loading für Dashboard-Kacheln
 
@@ -94,14 +126,99 @@ Grundlage, hier werden zusätzliche, im Code konkret nachgewiesene Lücken gesch
 - **Tests:** keine neuen.
 - **DoD:** offen.
 
+## UI2-006 — Toast/Benachrichtigungskomponente
+
+- **Ziel:** Aktionsfeedback (gespeichert/Fehler/Sync-Status) ohne Modal-Unterbrechung.
+- **Beschreibung:** Leichtgewichtige Toast-Komponente (kein `sonner`-Paket-Zwang,
+  Pattern nachbaubar: Portal + Auto-Dismiss-Timer + Stapel-Anzeige bei mehreren
+  gleichzeitigen Meldungen).
+- **Benutzerwert:** Häufige kleine Aktionen (Kontrolle bestätigen, Position speichern)
+  unterbrechen den Arbeitsfluss nicht mit einem Wegklick-Dialog.
+- **Abhängigkeiten:** UI2-001
+- **Backend:** keins
+- **Frontend:** neue `components/ui/toast.tsx`, zentrale Toast-Provider-Einbindung
+- **Mobile:** Dauer konfigurierbar halten (bei schlechtem Netz/langsamer Interaktion
+  reicht kurze Anzeigedauer sonst nicht)
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** Toast erscheint bei Erfolg/Fehler, verschwindet automatisch,
+  mehrere gleichzeitige Toasts stapeln statt überschreiben.
+- **Tests:** keine neuen (reines UI).
+- **DoD:** offen.
+
+## UI2-007 — Dialog/AlertDialog-Baustein für Bestätigungen
+
+- **Ziel:** Einheitliche Bestätigungsdialoge (z.B. „Material löschen?") statt nativem
+  `window.confirm()`.
+- **Beschreibung:** Radix-artiges Dialog-Pattern mit Fokus-Trap und Escape-zum-Schließen,
+  große Touch-taugliche Buttons.
+- **Benutzerwert:** Konsistentes Aussehen statt Browser-natives, unstyliertes
+  `confirm()`-Popup; Fokus-Trap verhindert versehentliches Wegtippen auf Tablet.
+- **Abhängigkeiten:** UI2-001
+- **Backend:** keins
+- **Frontend:** neue `components/ui/dialog.tsx`/`alert-dialog.tsx`, schrittweise
+  bestehende `confirm()`-Aufrufe ersetzen
+- **Mobile:** Priorität — Fokus-Trap/Escape wichtig bei externer Tastatur an Tablets
+  mit Kartenleser
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** mind. eine bestehende `confirm()`-Stelle ersetzt, Verhalten
+  (Bestätigen/Abbrechen) unverändert.
+- **Tests:** bestehende Tests an der ersetzten Stelle bleiben grün.
+- **DoD:** offen.
+
+## UI2-008 — Badge-Komponente für Status-Chips
+
+- **Ziel:** Bestandsstatus/Ablaufdatum-Kennzeichnung visuell einheitlich statt
+  Ad-hoc-Farbklassen je Stelle.
+- **Beschreibung:** Kleine `Badge`-Komponente mit Varianten (ok/warnung/kritisch/
+  abgelaufen), nutzt UI2-001-Tokens.
+- **Benutzerwert:** Schneller visueller Überblick in Listen/Kacheln, geringer Aufwand.
+- **Abhängigkeiten:** UI2-001
+- **Backend:** keins
+- **Frontend:** neue `components/ui/badge.tsx`, Einsatz in Materiallisten/Dashboard
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** mind. eine Liste (z.B. Ablaufdatum-Übersicht) nutzt Badge
+  statt Inline-Farbklassen.
+- **Tests:** keine neuen.
+- **DoD:** offen.
+
+## UI2-010 — Dark-Mode-fähige Token-Struktur (Vorbereitung, kein Umschalter)
+
+- **Ziel:** UI2-001-Tokens so anlegen, dass ein späterer Dark-Mode-Umschalter keinen
+  Umbau der Token-Struktur erfordert — auch wenn der Umschalter selbst kein aktueller
+  Bedarf ist (Tablet im Feld, meist Tageslicht).
+- **Beschreibung:** Je Token aus UI2-001 (`--color-card`, `--color-popover`, etc.)
+  zusätzlich einen `.dark`/`[data-theme=dark]`-Override-Block in `tokens.css`
+  vorsehen, auch wenn er anfangs mit denselben Werten wie Light gefüllt ist.
+- **Benutzerwert:** Kein nachträglicher Breaking-Umbau, falls Dark Mode später doch
+  gebraucht wird (z.B. Nachteinsätze).
+- **Abhängigkeiten:** UI2-001
+- **Backend:** keins
+- **Frontend:** `styles/global/tokens.css`
+- **Rechte:** keine Änderung
+- **Akzeptanzkriterien:** jeder neue UI2-001-Token hat einen Dark-Override-Platzhalter,
+  keine funktionale Änderung im Light-Modus.
+- **Tests:** keine neuen (reines CSS).
+- **DoD:** offen. **Achtung MABEA-spezifisch:** Cascade-Layer-Struktur beachten
+  (`global-css`-Layer niedriger als Tailwind-Layer, siehe CLAUDE.md „Wichtige
+  Stolperfallen") — Dark-Override darf keine Layer-Kollision mit Tailwinds `@theme`
+  erzeugen, insbesondere keinen Tailwind-Token-Namen doppelt vergeben.
+
 ---
 
-**Reihenfolge (empfohlen, nicht blockierend zwischen 002-005):** UI2-001 zuerst
-(Basis für alle), danach UI2-002..005 in beliebiger Reihenfolge nach Nutzerpriorität.
+**Reihenfolge (empfohlen, nicht blockierend innerhalb der Gruppen):** UI2-001 zuerst
+(Basis für alle). Danach zwei unabhängige Gruppen: UI2-002/003+009/010 (Struktur/
+Formulare/Tokens) und UI2-004/005/006/007/008 (einzelne UI-Bausteine) — Reihenfolge
+innerhalb der Gruppen nach Nutzerpriorität.
 
 **Nicht-Ziele:** kein Wechsel auf react-hook-form/zod/Radix, kein kompletter
-Frontend-Neubau, keine Breaking Changes an bestehender Fachlogik/API.
+Frontend-Neubau, keine Breaking Changes an bestehender Fachlogik/API. Bewusst NICHT
+übernommen (Overkill/Desktop-lastig für ein Fach-Tool, siehe vertiefte Analyse
+2026-09-09): Command-Palette/Combobox, Navigation-Menu, Accordion/Collapsible, Avatar,
+Pagination, Tooltip (auf Touch unzuverlässig), Sidebar-Zusatzfeatures wie
+Cookie-Persistenz/Keyboard-Shortcuts.
 
 ## Referenzen
 Subagenten-Analyse `ai-coding-starter-kit-v2`, Chat 2026-09-08 (kein Frontend-Neubau,
-Patterns schrittweise als Kacheln übernehmen).
+Patterns schrittweise als Kacheln übernehmen). Vertiefte Analyse derselben Quelle
+2026-09-09 (vollständige Komponentenliste, a11y-Patterns, Dark-Mode-Struktur) ergab
+UI2-006..010.