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.
This commit is contained in:
parent
2b3e2d8c1b
commit
62c0d9d75c
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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?“.
|
||||
111
docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md
Normal file
111
docs/06_Frontend/Wireframes/Kassa_Veranstaltung_v1.md
Normal file
|
|
@ -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.
|
||||
Loading…
Reference in New Issue
Block a user