scripte/MABEA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7dc6446a56e7dd980f9b66c775ea0d87ac9893ae
MABEA/arbeitskacheln/22_ui_redesign_v2.md
T
patrickandClaude Sonnet 5 847c303a97
CI / backend-tests (push) Successful in 2m22s
Details
CI / frontend-build (push) Successful in 25s
Details
feat(wartung): MAINT-005 Ersatzteile/Kosten je Wartungsauftrag 
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
2026-09-08 22:06:02 +02:00

4.9 KiB
Raw Blame History

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).

Reference in New Issue View Git Blame Copy Permalink