patrickandClaude Sonnet 5
847c303a97
Neue Tabelle wartungsauftrag_teil (Migration 0033), CRUD-Endpunkte
/wartungsauftraege/{id}/teile, UI-Panel in WartungSection.tsx mit
Summenanzeige. Backlog Epic 22 (UI-Redesign Runde 2, Kacheln UI2-001..005)
als geplant ergänzt, Umsetzung folgt separat.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
108 lines
4.9 KiB
Markdown
108 lines
4.9 KiB
Markdown
# 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,
|
|
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.
|
|
|
|
---
|
|
|
|
## UI2-001 — Granularere Design-Tokens (Card/Popover/Sidebar)
|
|
|
|
- **Ziel:** Card-/Popover-/Sidebar-Hintergründe über eigene Tokens statt generischem
|
|
`--color-primary`/`bg-white`.
|
|
- **Beschreibung:** `--color-card`, `--color-card-foreground`, `--color-popover` etc.
|
|
in `frontend/src/styles/global/tokens.css` ergänzen (Light+Dark), bestehende
|
|
Komponenten schrittweise umstellen.
|
|
- **Benutzerwert:** Konsistentere Flächenhierarchie, einfacheres Dark-Mode-Feintuning.
|
|
- **Abhängigkeiten:** UI-001 (bereits erledigt)
|
|
- **Backend:** keins
|
|
- **Frontend:** `styles/global/tokens.css`
|
|
- **Rechte:** keine Änderung
|
|
- **Akzeptanzkriterien:** neue Tokens vorhanden, mind. Card-Komponente nutzt sie statt
|
|
Hardcoded-Werten.
|
|
- **Tests:** keine (reines Styling).
|
|
- **DoD:** offen.
|
|
|
|
## UI2-002 — AdminPage Sidebar/Sheet-Umschaltung
|
|
|
|
- **Ziel:** Touch-taugliche Navigation für AdminPage-Tabs — Desktop Sidebar, Mobile
|
|
Sheet-Overlay statt aktuellem Tab-Leisten-Umbruch.
|
|
- **Beschreibung:** Pattern aus Starter-Kit (`useIsMobile`-Hook + Radix-Dialog-Sheet),
|
|
MABEA hat bereits `useIsDesktop` — Umschaltung analog, kein natives Drag&Drop.
|
|
- **Benutzerwert:** Bessere Bedienbarkeit auf Tablet im Feld.
|
|
- **Abhängigkeiten:** UI2-001
|
|
- **Backend:** keins
|
|
- **Frontend:** `AdminPage.tsx`, ggf. neue `components/ui/sheet.tsx`
|
|
- **Mobile:** Priorität — Zielgerät Tablet
|
|
- **Rechte:** keine Änderung
|
|
- **Akzeptanzkriterien:** AdminPage-Tabs auf schmalem Viewport über Sheet erreichbar,
|
|
bestehende Tab-Inhalte unverändert.
|
|
- **Tests:** keine neuen (reines UI/Routing).
|
|
- **DoD:** offen.
|
|
|
|
## UI2-003 — Formular-Feld-Komposition
|
|
|
|
- **Ziel:** Wiederverwendbarer Feld-Baustein (Label+Input+Fehlermeldung) statt
|
|
individueller State-Verdrahtung pro Feld in Formularen.
|
|
- **Beschreibung:** Leichtgewichtiges `FormField`-Pattern (kein react-hook-form/zod
|
|
nötig, MABEA nutzt bereits einfache `useState`-Formulare — nur Layout/Fehler-
|
|
Darstellung vereinheitlichen), zuerst in `ObjektAnlegenFormular.tsx` und
|
|
`ObjekttypSection.tsx` angewendet.
|
|
- **Benutzerwert:** Einheitliche Fehlerdarstellung, weniger Boilerplate bei neuen
|
|
Formularen.
|
|
- **Abhängigkeiten:** UI2-001
|
|
- **Backend:** keins
|
|
- **Frontend:** neue `components/ui/form-field.tsx`, `ObjektAnlegenFormular.tsx`,
|
|
`ObjekttypSection.tsx` darauf umgestellt
|
|
- **Rechte:** keine Änderung
|
|
- **Akzeptanzkriterien:** beide Formulare nutzen den neuen Baustein, Verhalten
|
|
unverändert.
|
|
- **Tests:** bestehende Vitest-Tests bleiben grün.
|
|
- **DoD:** offen.
|
|
|
|
## UI2-004 — Skeleton-Loading für Dashboard-Kacheln
|
|
|
|
- **Ziel:** Skeleton-Platzhalter statt Spinner/nichts beim Nachladen von
|
|
Dashboard-Kacheln.
|
|
- **Beschreibung:** Einfache `animate-pulse`-Komponente (`components/ui/skeleton.tsx`),
|
|
in Dashboard-Tiles während Ladezustand eingesetzt.
|
|
- **Benutzerwert:** Wahrgenommene Ladezeit sinkt, weniger Layout-Sprung.
|
|
- **Abhängigkeiten:** UI2-001
|
|
- **Backend:** keins
|
|
- **Frontend:** neue `components/ui/skeleton.tsx`, Dashboard-Tiles (`*Tile.tsx`)
|
|
- **Rechte:** keine Änderung
|
|
- **Akzeptanzkriterien:** sichtbarer Skeleton-Zustand vor Dateneintreffen, kein
|
|
Layout-Sprung beim Einblenden der echten Daten.
|
|
- **Tests:** keine neuen.
|
|
- **DoD:** offen.
|
|
|
|
## UI2-005 — Scrollbarer Table-Wrapper für Materiallisten
|
|
|
|
- **Ziel:** Materiallisten/Kontroll-Tabellen brechen auf schmalem Tablet-Viewport
|
|
nicht das Seiten-Layout, sondern scrollen innerhalb eines eigenen Containers.
|
|
- **Beschreibung:** Gemeinsamer Table-Wrapper (`overflow-x: auto`) statt Ad-hoc-Lösung
|
|
je Seite, zuerst in `KontrollPage.tsx`-Listen angewendet.
|
|
- **Benutzerwert:** Kein horizontales Seiten-Scrollen mehr auf kleinen Screens.
|
|
- **Abhängigkeiten:** UI2-001
|
|
- **Backend:** keins
|
|
- **Frontend:** `KontrollPage.tsx` bzw. betroffene Listen-Komponenten
|
|
- **Mobile:** Priorität — Tablet-Ziel
|
|
- **Rechte:** keine Änderung
|
|
- **Akzeptanzkriterien:** Tabelle scrollt intern, Seite selbst nie horizontal.
|
|
- **Tests:** keine neuen.
|
|
- **DoD:** offen.
|
|
|
|
---
|
|
|
|
**Reihenfolge (empfohlen, nicht blockierend zwischen 002-005):** UI2-001 zuerst
|
|
(Basis für alle), danach UI2-002..005 in beliebiger Reihenfolge nach Nutzerpriorität.
|
|
|
|
**Nicht-Ziele:** kein Wechsel auf react-hook-form/zod/Radix, kein kompletter
|
|
Frontend-Neubau, keine Breaking Changes an bestehender Fachlogik/API.
|
|
|
|
## Referenzen
|
|
Subagenten-Analyse `ai-coding-starter-kit-v2`, Chat 2026-09-08 (kein Frontend-Neubau,
|
|
Patterns schrittweise als Kacheln übernehmen).
|