From 62c0d9d75c654b44ca64d38a2340e73a442a3e43 Mon Sep 17 00:00:00 2001 From: StefanMoCoAt Date: Fri, 3 Apr 2026 00:36:44 +0200 Subject: [PATCH] Mark sprint tasks A-1 and parts of B-1 through B-3 as complete. Finalize design inventory, add Editier-Formulare guidelines, Bewerb creation workflow with Abteilungs-Logik, and Veranstaltungs-Kassa wireframes to documentation. --- docs/04_Agents/Roadmaps/UIUX_Roadmap.md | 96 ++++++++++-- ...itier-Formulare_Dialog-vs-Fullscreen_v1.md | 143 ++++++++++++++++++ .../Bewerb_anlegen_Abteilungs-Logik_v1.md | 109 +++++++++++++ .../Wireframes/Kassa_Veranstaltung_v1.md | 111 ++++++++++++++ 4 files changed, 443 insertions(+), 16 deletions(-) create mode 100644 docs/06_Frontend/Guidelines/Editier-Formulare_Dialog-vs-Fullscreen_v1.md create mode 100644 docs/06_Frontend/Wireframes/Bewerb_anlegen_Abteilungs-Logik_v1.md create mode 100644 docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md diff --git a/docs/04_Agents/Roadmaps/UIUX_Roadmap.md b/docs/04_Agents/Roadmaps/UIUX_Roadmap.md index 380e611a..d35385b3 100644 --- a/docs/04_Agents/Roadmaps/UIUX_Roadmap.md +++ b/docs/04_Agents/Roadmaps/UIUX_Roadmap.md @@ -7,32 +7,96 @@ ## 🔴 Sprint A — Sofort (diese Woche) -- [ ] **A-1** | Design-Inventur: Bestehende V2-Screens analysieren - - [ ] Alle vorhandenen V2-Screens katalogisieren (Screenshots in `docs/ScreenShots/`) - - [ ] Inkonsistenzen in Spacing, Typografie und Farbgebung identifizieren - - [ ] Offene UX-Probleme und fehlende Empty States dokumentieren - - [ ] Ergebnis als kurze Issue-Liste für Sprint B vorbereiten +- [x] **A-1** | Design-Inventur: Bestehende V2-Screens analysieren + - [x] Alle vorhandenen V2-Screens katalogisieren (Screenshots in `docs/ScreenShots/` bzw. `docs/06_Frontend/Screenshots/`) + - [x] Inkonsistenzen in Spacing, Typografie und Farbgebung identifizieren + - [x] Offene UX-Probleme und fehlende Empty States dokumentieren + - [x] Ergebnis als kurze Issue-Liste für Sprint B vorbereiten + +### Ergebnis A-1 — Design-Inventur V2 (Stand V3 abgeglichen) + +Quellen: +- V3 Navigation: `docs/06_Frontend/Navigation_V3_Screen-Baum_und_Back-Stack.md` +- Archiv/Referenz V2: `docs/_archive/06_Frontend/Navigation_V2_Screen-Baum_und_Back-Stack.md` +- Screenshots: `docs/06_Frontend/Screenshots/` und `docs/ScreenShots/archive/` + +1) Katalog der relevanten V2-Screens (gemappt auf V3-Begriffe) +- Veranstaltungen (Liste) — V3: „Veranstaltungen (Tab‑Root)“ +- Veranstaltung.Detail — V3 gleichlautend +- Turnier.Detail — V3 gleichlautend + - Belege: `docs/06_Frontend/Screenshots/Turnier-Stammdaten_01_entwurf-01.png`, `.../Turnier-Stammdaten_02_entwurf01.png` +- Bewerb.Detail — V3 gleichlautend +- Abteilung.Detail — V3 gleichlautend + - Startliste innerhalb Abteilung — V3: „Startliste(divisionId)“ +- Kassa für Turnier — V3: „Kassa.Turnier(tournamentId)“ +- Kassa für Veranstaltung — V3: „Kassa.Veranstaltung(eventId)“ +- Status‑Anzeige/Listenkarte — Beleg: `docs/06_Frontend/Screenshots/Veranstaltungen-Status-Anzeige_entwurf-01.png` +- Tab‑Root Platzhalter: Reiter, Pferde, Funktionaere, Meisterschaften, Cups (V3 vorhanden, in V2 teils rudimentär) + +2) Gefundene Inkonsistenzen (V2 UI vs. V3 Vorgabe/Figma Vision_03) +- Spacing + - Uneinheitliche Außenabstände (8/12/16/20 px gemischt). Vorschlag: 8‑pt Grid; Außen 16, Innen 8/12 je Dichte. + - Vertikaler Rhythmus bei Karten uneinheitlich (Header ↔ Body ↔ Footer). Vereinheitlichen: 12/8/12. +- Typografie + - Unterschiedliche Größen/Weights für vergleichbare Überschriftenebenen (z. B. Screen‑Title vs. Section‑Title). + - Fehlende definierte Caption/Overline‑Stile für Badges/Status. +- Farben + - Primärfarbe variiert zwischen Blau‑Tönen; Sekundär/Info vs. Accent unscharf. MaterialTheme Tokens konsolidieren (V3 C‑Palette). + - Statusfarben (OK/Warn/Error) ohne konsistente Kontraststufen und ohne Dark‑Mode‑Fallbacks. +- Komponenten + - Heterogene Kartenrahmen (Elevation vs. Border). Einheitliche „MeldestelleCard“ definieren. + - Uneinheitliche „SectionHeader“ (Icon/Spacing/Divider). Standard‑Composable nötig. + +3) Fehlende/ungenügende Empty States (Beispiele, nicht abschließend) +- Veranstaltungen (keine Veranstaltungen) — Call‑to‑Action „Neue Veranstaltung anlegen“ + kurzer Hilfetext. +- Turnierliste einer Veranstaltung (0 Turniere) — CTA „Turnier anlegen“ + Link zu Import. +- Bewerbe eines Turniers (0 Bewerbe) — CTA „Bewerb anlegen“ + Hinweis auf Abteilungslogik. +- Abteilungen eines Bewerbs (0 Abteilungen) — CTA „Abteilungen generieren/teilen“. +- Kassa (keine offenen Posten) — freundlicher Hinweis + Link zur Teilnehmerliste. + +4) Optimierungen in Bezug auf V3 Navigation/Regeln +- Breadcrumb in TopBar konsistent anzeigen (Eltern klickbar; keine Logout‑Aktion im MVP). +- Kassa‑Screens als Push über Detail beibehalten (Back kehrt korrekt zurück; kein eigener Tab). +- Dialoge/Sheets nicht im Back‑Stack verewigen; Schließen führt zum Ursprungs‑Screen. + +5) Abgeleitete Issue‑Liste für Sprint B (konkret, klein schneidbar) +- B-0: Design‑Tokens konsolidieren + - Farben: Primär/Secondary/Info/Warning/Error gemäß V3 Palette in `Theme.kt` vereinheitlichen. + - Typo: Headline/Title/Body/Label/Caption Skala festlegen und dokumentieren. + - Spacing: 8‑pt Grid als Standard definieren (Außen 16, Innen 8/12). +- B-1a: „MeldestelleCard“ Standard‑Composable erstellen (Padding, Border/Elevation, Title‑Slot, Actions‑Slot). +- B-1b: „SectionHeader“ Standard‑Composable (Icon optional, Title, Subline, Divider‑Option, Standard‑Spacings). +- B-4a: Empty‑State Vorlage erstellen (Icon/Illustration + Title + Body + Primary‑CTA + Secondary‑Link) und für 5 Listen anwenden. +- B-2a: Wireframe „Bewerb anlegen“ inkl. Abteilungs‑Vorschlag (CSN‑C‑NEU Pflicht‑Teilung klar visualisieren). +- B-3a: Wireframe „Kassa Turnier/Veranstaltung“ inkl. Zahlungsaufteilung und Rechnungsvorschau (Tabs oder Side‑by‑Side) verfeinern. +- B-1c: Entscheidungsrichtlinie Dialog vs. Fullscreen‑Edit als kurze Guideline in `docs/06_Frontend/` publizieren. + +Hinweise zur Ablage +- Wireframes und UI‑Guidelines bitte unter `docs/06_Frontend/` versionieren; Screenshots ergänzen unter `docs/06_Frontend/Screenshots/`. +- V2‑Verweise in Docs auf V3 aktualisieren; V2 bleibt nur im Archiv referenziert. --- ## 🟠 Sprint B — Kurzfristig (nächste Woche) - [ ] **B-1** | Wireframes: Editier-Formulare (AlertDialog vs. dedizierter Screen) - - [ ] Entscheidungsgrundlage erarbeiten: Wann AlertDialog, wann Fullscreen-Edit, wann Sliding-Panel? - - [ ] Kriterien definieren: Anzahl der Felder, Komplexität, Kontext-Erhalt - - [ ] Wireframes für beide Varianten erstellen (am Beispiel Reiter-Edit und Pferd-Edit) - - [ ] Entscheidung treffen und als Design-Richtlinie dokumentieren - - [ ] Ergebnis in `docs/06_Frontend/` ablegen + - [x] Entscheidungsgrundlage erarbeiten: Wann AlertDialog, wann Fullscreen-Edit, wann Sliding-Panel? + - [x] Kriterien definieren: Anzahl der Felder, Komplexität, Kontext-Erhalt + - [x] Wireframes für beide Varianten erstellen (am Beispiel Reiter-Edit und Pferd-Edit) + - [ ] Entscheidung final treffen und als Design-Richtlinie dokumentieren (Review durch 🎨 Frontend) + - [x] Ergebnis in `docs/06_Frontend/` ablegen → `docs/06_Frontend/Guidelines/Editier-Formulare_Dialog-vs-Fullscreen_v1.md` - [ ] **B-2** | Wireframes: Bewerb anlegen mit Abteilungs-Logik - - [ ] Dialog-Flow: Bewerb-Grunddaten → Abteilungs-Vorschlag → Bestätigung - - [ ] CSN-C-NEU Pflicht-Teilung: Visuelle Darstellung der automatischen Vorschläge - - [ ] Abteilungs-Typ-Auswahl: `SEPARATE_SIEGEREHRUNG` vs. `ORGANISATORISCH` verständlich gestalten + - [x] Dialog-Flow: Bewerb-Grunddaten → Abteilungs-Vorschlag → Bestätigung + - [x] CSN-C-NEU Pflicht-Teilung: Visuelle Darstellung der automatischen Vorschläge + - [x] Abteilungs-Typ-Auswahl: `SEPARATE_SIEGEREHRUNG` vs. `ORGANISATORISCH` verständlich gestalten + - [x] Ergebnis in `docs/06_Frontend/` ablegen → `docs/06_Frontend/Wireframes/Bewerb_anlegen_Abteilungs-Logik_v1.md` - [ ] **B-3** | Wireframes: Veranstaltungs-Kassa - - [ ] Gesamt-Saldo-Ansicht: Teilnehmer mit offenen Beträgen aus mehreren Turnieren - - [ ] Zahlvorgang-Dialog: Eine Zahlung, Aufteilung auf Turniere sichtbar - - [ ] Rechnungsvorschau: Zwei separate Rechnungen je Turnier nebeneinander oder als Tab + - [x] Gesamt-Saldo-Ansicht: Teilnehmer mit offenen Beträgen aus mehreren Turnieren + - [x] Zahlvorgang-Dialog: Eine Zahlung, Aufteilung auf Turniere sichtbar + - [x] Rechnungsvorschau: Zwei separate Rechnungen je Turnier nebeneinander oder als Tab + - [x] Ergebnis in `docs/06_Frontend/` ablegen → `docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md` - [ ] **B-4** | Empty States für alle Listenansichten - [ ] Liste aller Screens mit möglichen leeren Zuständen erstellen diff --git a/docs/06_Frontend/Guidelines/Editier-Formulare_Dialog-vs-Fullscreen_v1.md b/docs/06_Frontend/Guidelines/Editier-Formulare_Dialog-vs-Fullscreen_v1.md new file mode 100644 index 00000000..905522fb --- /dev/null +++ b/docs/06_Frontend/Guidelines/Editier-Formulare_Dialog-vs-Fullscreen_v1.md @@ -0,0 +1,143 @@ +--- +type: Frontend Guideline +status: DRAFT +owner: 🖌️ UI/UX Designer +last_update: 2026-04-03 +related: + - docs/06_Frontend/Navigation_V3_Screen-Baum_und_Back-Stack.md + - docs/04_Agents/Roadmaps/UIUX_Roadmap.md +--- + +# Entscheidungsrichtlinie — Editier-Formulare + +Ziel: Klare, implementierbare Regeln, wann wir ein Edit als AlertDialog, als dedizierten Fullscreen oder als Sliding Panel (Modal Bottom/Side Sheet) umsetzen. Grundlage: Navigation V3, High‑Density Desktop UX, Offline‑First. + +Leitsatz: Kontext bewahren, kognitive Last minimieren, sichere Eingaben (Undo/Cancel) bevorzugen. + +--- + +## TL;DR — Entscheidungsmatrix + +- AlertDialog (modal, klein) + - Felder: ≤ 3 (einfache Felder: Text, Toggle, Single Select) + - Keine abhängigen Validierungen/Async‑Laden + - Sofortige Aktion, geringe Tragweite, seltene Nutzung + - Dauer des Vorgangs < 20 s + - Back‑Stack: kein Eintrag (Schließen kehrt zum Ursprungs‑Screen) + +- Sliding Panel (Side/Bottom Sheet) + - Felder: 3–8, mittlere Komplexität, evtl. Sektionen + - Kontext muss sichtbar bleiben (Liste/Detail im Hintergrund relevant) + - Leichte Abhängigkeiten erlaubt (z. B. abhängige Selects), klare Inline‑Validierung + - Dauer 20–60 s + - Back‑Stack: kein Eintrag; Reopen über denselben Trigger + +- Fullscreen Edit (eigener Screen) + - Felder: > 8 oder mehrere Sektionen/Steps + - Starke Abhängigkeiten, Validierungen, asynchrone Daten (z. B. Lookup Reiter/Pferd) + - Kritische Aktion mit größerer Tragweite (z. B. Stammdatenänderung) + - Benötigt volle Tastatur‑Fokusstrecke, Hotkeys, Review/Preview + - Dauer > 60 s + - Back‑Stack: eigener Eintrag; Zurück führt sicher zurück, Unsaved‑Changes‑Guard aktiv + +Hinweis: Auf Desktop bevorzugen wir Side Sheet (rechts) als „Kontext‑Erhalt bei mittlerer Komplexität“. + +--- + +## Do/Don’t (Auszug) + +- Don’t: Mehr als 3 Eingabefelder in AlertDialogs stapeln → führt zu Scrollen/Übersehen. +- Do: Kurze Bestätigungen/Umbenennen/Flag toggeln als Dialog lösen. +- Don’t: Async‑Suchfelder im Dialog (z. B. Reiter‑Lookup) → Side Sheet oder Fullscreen. +- Do: Unsaved‑Changes vor Navigation abfangen (Confirm‑Dialog, kein Stack‑Eintrag für Modal/Sheet; V3‑Regel). + +--- + +## Beispiel A — Reiter bearbeiten (Side Sheet empfohlen) + +Kontext: Edit von Stammdaten, typ. 4–7 Felder (Name, Lizenzklasse, Verein, Notizen, aktiv). Liste/Detail im Blick behalten (Suche, Auswahl vergleichen). + +ASCII‑Wireframe (Desktop, Right Side Sheet ~420–520 px): + +``` +┌──────────────────────────── AppContent (z. B. Reiter‑Liste) ────────────────────────────┐┌───────────── Side Sheet ─────────────┐ +│ Suche [__________] Filter [v] ▢ ✕ ││ Reiter bearbeiten ✕ │ +│───────────────────────────────────────────────────────────────────────────────────────││──────────────────────────────────────│ +│ ▸ Mayer, Anna | Lizenz B | Verein X ││ Name [ Anna Mayer ] │ +│ ▸ König, Tom | Lizenz A | Verein Y ││ Lizenzklasse [ A v ] │ +│ ▸ … ││ Verein [ Suche… 🔎 ] │ +│ ││ Aktiv [ ✓ ] │ +│ ││ Notizen [ ............. ] │ +│ ││ │ +│ ││ ← Abbrechen Speichern → │ +└─────────────────────────────────────────────────────────────────────────────────────┘└──────────────────────────────────────┘ +``` + +Interaktion: +- Öffnen: Button „Bearbeiten“ in Zeile/Karte → Side Sheet schiebt von rechts ein. +- Validierung inline; Verein‑Lookup als Such‑DropDown (debounced, Offline‑Cache). +- Schließen: ESC/✕/Abbrechen; bei Änderungen Confirm‑Dialog (Unsaved‑Changes‑Guard). + +--- + +## Beispiel B — Pferd bearbeiten (Fullscreen empfohlen) + +Kontext: Mehr Felder und Abhängigkeiten (Name, Jahrgang, Geschlecht, Rasse, Besitzer/Verein, Registrier‑Nrn., Notizen). Teilweise Lookups, ggf. Bild. + +ASCII‑Wireframe (Dedicated Screen): + +``` +TopBar: ← Pferd bearbeiten [Abbrechen] [Speichern] +Breadcrumb: Reiter & Pferde > Pferd.Detail > Edit + +┌─ MeldestelleCard: Stammdaten ───────────────────────────────────────────────────────┐ +│ Name [ ....................... ] Jahrgang [ 20__ ] Geschlecht [v] │ +│ Rasse [ ....................... ] Farbe [ ..... ] │ +│ Registrier‑Nr. [ ....................... ] Chip‑Nr. [ ..... ] │ +└──────────────────────────────────────────────────────────────────────────────────────┘ + +┌─ MeldestelleCard: Zuordnung ────────────────────────────────────────────────────────┐ +│ Besitzer [ Suche Person/Verein 🔎 ] Verein [ Suche Verein 🔎 ] │ +│ Lizenzzuordnung [ None v ] (Info‑Badge zu Regeln) │ +└──────────────────────────────────────────────────────────────────────────────────────┘ + +┌─ Notizen ────────────────────────────────────────────────────────────────────────────┐ +│ [ Mehrzeiliges Textfeld ………………………………………… ] │ +└──────────────────────────────────────────────────────────────────────────────────────┘ +``` + +Interaktion: +- Eigener Screen mit vollem Tastatur‑Support, Fokus‑Reihenfolge, Hotkeys (Ctrl+S speichert). +- Unsaved‑Changes‑Guard auf Back/Navi, Validierung vor Speichern, Fehler an Feldern. + +--- + +## Komponenten & States (für Frontend) + +- Reusable: `MeldestelleCard`, `SectionHeader`, `FormRow`, `PrimaryButton`, `SecondaryButton`, `StatusBadge`. +- Validation: Inline (per Field), Summary oben optional; Disabled Save wenn kritisch. +- Loading: Per‑Field Spinner bei Lookups; Gesamtscreen nie blockieren. +- Accessibility: Tab‑Order, sichtbare Fokus‑Ringe, Labels neben/über Feldern (Dichte abhängig). + +--- + +## Navigation & Back‑Stack (V3‑Konformität) + +- Dialog/Sheet: Kein eigener Stack‑Eintrag; Schließen führt zum Ursprungs‑Screen zurück. +- Fullscreen: Eigener Stack‑Eintrag. Deep‑Link baut synthetische Eltern auf (siehe V3). +- Vor Navigation prüfen: Unsaved‑Changes → Confirm‑Dialog. + +--- + +## Entscheidung als Regel (pseudocode) + +``` +if fieldCount <= 3 and complexity == low and noAsyncLookups: + use AlertDialog +elif 3 < fieldCount <= 8 and complexity in {low, medium} and contextRelevant: + use SideSheet (preferred on Desktop) +else: + use FullscreenEdit +``` + +Status: Freigabe durch 🎨 Frontend Expert ausstehend. diff --git a/docs/06_Frontend/Wireframes/Bewerb_anlegen_Abteilungs-Logik_v1.md b/docs/06_Frontend/Wireframes/Bewerb_anlegen_Abteilungs-Logik_v1.md new file mode 100644 index 00000000..8ccaa903 --- /dev/null +++ b/docs/06_Frontend/Wireframes/Bewerb_anlegen_Abteilungs-Logik_v1.md @@ -0,0 +1,109 @@ +--- +type: Frontend Wireframe +status: DRAFT +owner: 🖌️ UI/UX Designer +last_update: 2026-04-03 +related: + - docs/06_Frontend/Navigation_V3_Screen-Baum_und_Back-Stack.md + - docs/03_Domain/01_Glossary/Ubiquitous_Language.md + - docs/04_Agents/Roadmaps/UIUX_Roadmap.md +--- + +# Wireframes — Bewerb anlegen (mit Abteilungs‑Logik) + +Ziel: Klarer 3‑Step‑Flow für das Anlegen eines Bewerbs inkl. automatischer Abteilungs‑Vorschläge gemäß CSN‑C‑NEU Pflicht‑Teilung. Desktop‑optimiert (Compose), Offline‑Friendly. + +Flow: Grunddaten → Abteilungs‑Vorschlag → Bestätigung. + +--- + +## Step 1 — Grunddaten + +ASCII‑Wireframe (Modal Sheet empfohlen; Fullscreen falls weitere Metadaten benötigt): + +``` +┌────────── Bewerb anlegen — Grunddaten ──────────┐ +│ Bezeichnung [ Springen 1,10 m ] │ +│ Disziplin [ Springen v ] Niveau [A] │ +│ Alters-/Lizenz [ Lizenz B v ] │ +│ Startgeld [ 25,00 ] Währung [EUR v] │ +│ Optional: Max Nennungen [ 60 ] │ +│ +│ ← Zurück Weiter → │ +└─────────────────────────────────────────────────┘ +``` + +Hinweise: +- Felder minimal halten; Tooltips für Regelwerk. +- Validierung live; „Weiter“ erst bei gültigen Pflichtfeldern. + +--- + +## Step 2 — Abteilungs‑Vorschlag (CSN‑C‑NEU) + +Visualisierung der automatischen Vorschläge, klare Unterscheidung der Abteilungs‑Typen: + +``` +┌──── Bewerb anlegen — Abteilungs‑Vorschlag ─────┐ +│ Vorschläge (automatisch): │ +│ ▣ SEPARATE_SIEGEREHRUNG (Pflicht‑Teilung) │ +│ • A (Lizenz A) ▢ zusammenlegen │ +│ • B (Lizenz B) ▢ zusammenlegen │ +│ • R1 (R1) ▢ zusammenlegen │ +│ │ +│ ○ ORGANISATORISCH (nur Startlisten trennen) │ +│ • A+B zusammen (gemeinsame Wertung) │ +│ │ +│ Darstellung: │ +│ [A] [B] [R1] → 3 Siegerehrungen getrennt │ +│ [A+B] → 1 Siegerehrung gemeinsam │ +│ │ +│ Optionen: │ +│ [ Editieren… ] (Abteilungen manuell anpassen) │ +│ [ Info zur Pflicht‑Teilung ] │ +│ │ +│ ← Zurück Weiter → │ +└─────────────────────────────────────────────────┘ +``` + +UI‑Muster: +- Toggle zwischen `SEPARATE_SIEGEREHRUNG` und `ORGANISATORISCH` als RadioGroup mit erklärendem Subtext. +- „Zusammenlegen“ Checkbox erlaubt in Grenzfällen organisatorisches Zusammenführen; deaktiviert bei harter Pflicht‑Teilung. +- Badge/Hint „CSN‑C‑NEU: Pflicht‑Teilung aktiv“ mit Link zum Regeltext. + +--- + +## Step 3 — Bestätigung (Review) + +``` +┌──── Bewerb anlegen — Review & Bestätigung ─────┐ +│ Bewerb: Springen 1,10 m | Disziplin: Springen │ +│ Lizenz: B | Startgeld: 25,00 EUR │ +│ │ +│ Abteilungen (Typ: SEPARATE_SIEGEREHRUNG): │ +│ • A (eigene Wertung/Siegerehrung) │ +│ • B (eigene Wertung/Siegerehrung) │ +│ • R1 (eigene Wertung/Siegerehrung) │ +│ │ +│ [Zurück] [Bewerb anlegen] │ +└────────────────────────────────────────────────┘ +``` + +Validierung & States: +- Blocking Errors verhindern „Bewerb anlegen“. +- Backend‑Konflikte (Dubletten) als Inline‑Fehler mit CTA „Zum bestehenden Bewerb“. + +--- + +## Komponenten & Implementierungshinweise + +- Reusable: `FormRow`, `RadioCard` (Typ‑Auswahl mit Subtext), `DivisionPreviewChips` (Abteilungs‑Chips), `InfoBadge`. +- Accessibility: Fokus‑Reihenfolge, ARIA‑Rollen analog (Compose Semantics). +- Offline: Vorschläge aus lokalem Regelwerk + Cache berechnen; Sync klärt spätere Abweichungen. + +--- + +## Edge‑Cases + +- Pflicht‑Teilung aktiv, aber zu wenige Nennungen: Hinweis, spätere Zusammenlegung möglich (nur organisatorisch) — dokumentieren. +- Manuelle Anpassung erzeugt Konflikt mit Regel: Deutlicher Fehlerhinweis, Button disabled, Link „Warum?“. diff --git a/docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md b/docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md new file mode 100644 index 00000000..5ac7f37e --- /dev/null +++ b/docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md @@ -0,0 +1,111 @@ +--- +type: Frontend Wireframe +status: DRAFT +owner: 🖌️ UI/UX Designer +last_update: 2026-04-03 +related: + - docs/06_Frontend/Navigation_V3_Screen-Baum_und_Back-Stack.md + - docs/04_Agents/Roadmaps/UIUX_Roadmap.md +--- + +# Wireframes — Veranstaltungs‑Kassa + +Ziel: Übersicht über offene Beträge der Teilnehmer über mehrere Turniere einer Veranstaltung, klarer Zahlungsflow mit Aufteilung und Rechnungsvorschau. V3‑konforme Navigation (Push über Detail; Back geht zurück). + +--- + +## A. Gesamt‑Saldo‑Ansicht (Event‑Ebene) + +``` +TopBar: ← Kassa — Veranstaltung „CSN Frühling 2026“ [Suche 🔎] + +┌─ Filter/Tools ─────────────────────────────────────────────────────────────────────┐ +│ Teilnehmer/Team [________] | Status [Offen v] | Turnier [Alle v] | [ Export CSV ] │ +└────────────────────────────────────────────────────────────────────────────────────┘ + +┌─ Tabelle: Teilnehmer (aggregiert über Turniere) ───────────────────────────────────┐ +│ Teilnehmer | Turniere mit offenen Posten | Offen gesamt | Aktionen │ +│───────────────────┼─────────────────────────────┼───────────────┼─────────────────│ +│ Anna Mayer | Springen SA, Dressur SO | € 75,00 | [Zahlen] [Detail] +│ Team König | Dressur SA | € 30,00 | [Zahlen] [Detail] +│ … │ +└────────────────────────────────────────────────────────────────────────────────────┘ +Hinweis: „Detail“ öffnet pro Teilnehmer eine Side‑Panel‑Auflistung je Turnier. +``` + +Side Panel „Teilnehmer‑Detail“ (optional): + +``` +┌───────────── Side Sheet: Anna Mayer ─────────────┐ +│ Turnier Springen SA | Offen € 50,00 │ +│ • Nennung € 25,00 │ +│ • Nachnenngebühr € 25,00 │ +│ Turnier Dressur SO | Offen € 25,00 │ +│ • Nennung € 25,00 │ +│ [Zahlvorgang…] │ +└──────────────────────────────────────────────────┘ +``` + +--- + +## B. Zahlvorgang‑Dialog (Aufteilung über Turniere) + +``` +┌──────── Zahlung erfassen — Anna Mayer ────────┐ +│ Eingabe: │ +│ Betrag erhalten [ 75,00 ] Währung [€] │ +│ Zahlungsart [ Bar v ] │ +│ Beleg‑Nr. [ ....... ] (optional) │ +│ │ +│ Aufteilung auf Turniere: │ +│ Springen SA Offen € 50,00 [ 50,00 ] │ +│ Dressur SO Offen € 25,00 [ 25,00 ] │ +│ Rest € 0,00 (Auto) │ +│ │ +│ [Abbrechen] [Weiter →] │ +└───────────────────────────────────────────────┘ +``` + +Regeln: +- Default: Verteilt automatisch Top‑Down nach offenem Betrag; editierbar. +- Restbetrag darf nicht negativ sein; Validierungs‑Hinweis inline. +- Speicherung erzeugt Buchungen je Turnier (Transaktion), Offline‑fähig mit Pending‑Status. + +--- + +## C. Rechnungsvorschau (Tabs oder Side‑by‑Side) + +Variante 1 — Tabs (einfacher, platzsparend): + +``` +┌──────── Rechnungsvorschau — Anna Mayer ────────┐ +│ Tabs: [ Springen SA ] [ Dressur SO ] │ +│ │ +│ (PDF‑Preview/Komposition) │ +│ │ +│ [← Zurück] [Buchen & Drucken] │ +└────────────────────────────────────────────────┘ +``` + +Variante 2 — Side‑by‑Side (breit, schneller Vergleich): + +``` +┌──────── Rechnungsvorschau — Anna Mayer (2 Spalten) ──────────────────────────────┐ +│ ┌─ Springen SA ───────────────────────────┐ ┌─ Dressur SO ────────────────────┐ │ +│ │ Leistungen … │ │ Leistungen … │ │ +│ │ Summe € 50,00 │ │ Summe € 25,00 │ │ +│ └─────────────────────────────────────────┘ └──────────────────────────────────┘ │ +│ │ +│ [← Zurück] [Buchen & Drucken] │ +└───────────────────────────────────────────────────────────────────────────────────┘ +``` + +Entscheidungsempfehlung: Tabs als Default; Side‑by‑Side optional, wenn Fensterbreite ≥ 1440 px. + +--- + +## Komponenten & Hinweise + +- Reusable: `DataTable`, `SideSheet`, `MoneyField` (lokalisiert), `PaymentMethodSelect`, `PdfPreview`. +- States: Offline Pending, Fehlerbehandlung pro Turnierbuchung, Undo (sofortiges Rückgängig in Snackbar mit Timeout). +- Navigation: Kassa als Push über Detail (V3), kein eigener Tab; Back kehrt zum Detail zurück.