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