112 lines
6.5 KiB
Markdown
112 lines
6.5 KiB
Markdown
---
|
||
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.
|