meldestelle/docs/06_Frontend/FIGMA/Vision_03/docs

Turnierverwaltungs-Anwendung - Projekt-Dokumentation

📋 Projekt-Übersicht

Eine professionelle Desktop-Turnierverwaltungs-Anwendung für den Pferdesport, entwickelt mit React, TypeScript und Material Design 3 (Material-UI).

Hauptziel

Verwaltung der kompletten Hierarchie: Veranstalter (Vereine) → Veranstaltungen → Turniere → Bewerbe

---

🎯 Zielgruppe

• Turnier-Veranstalter
• Turnier-Organisatoren
• Turnier-Sekretariat
• Rechnungsstellen

---

🏗️ Projekt-Status

Version: Prototyp v1.0
Status: Entwicklungsphase
Letztes Update: 2026-03-24

Implementierte Features ✅

1. Authentication System

• Login-Maske mit Demo-Credentials
  • User: admin
  • Passwort: Admin#1234

2. Veranstalter-Verwaltung

• Vollständige CRUD-Operationen
• Veranstalter-Übersicht mit Tabelle
• Veranstalter-Auswahl bei Veranstaltungs-Erstellung

3. Veranstaltungs-Verwaltung

• Veranstaltung - Übersicht mit Turnieren
• Turnier-Karten mit Status-Badges
• "Neues Turnier anlegen"-Workflow

4. Turnier-Verwaltung (8 Tabs)

• Tab 1: Stammdaten

  • Turnier-Konfiguration (ZNS-Import, ÖTO/FEI-Typ)
  • Turnier-Beschreibung (Titel/Sub-Titel)
  • Sponsoren-Verwaltung (Name + Logo)

• Tab 2: Organisation

  • Zeitplan
  • Kontakte & Verantwortliche
  • Organisatorische Details

• Tab 3: Bewerbe

  • Bewerbs-Übersicht mit Tabelle
  • CRUD-Operationen für Bewerbe
  • Wichtigste Konfigurationsseite

• Tab 4: Artikel

  • Nennungs- und Startgebühren
  • Stallungen & Boxen
  • Zusatzleistungen
  • Diverse Gebühren

• Tab 5: Abrechnung ⭐

  • Buchungstabelle (Soll/Haben/Saldo)
  • Teilnehmer-Auswahl (Reiter/Pferd)
  • Zahlungsarten (Bar, Scheck, Bankomat, Kreditkarte)
  • Direktdruck (Saldo, Rechnung)
  • Gebührenverwaltung

• Tab 6: Nennungen ⭐

  • Pferd & Reiter Suche mit Cross-Reference
  • Nennungen-Tabelle (Reiter/Pferd/Bewerbe)
  • Verkauf/Buchungen
  • Bewerbsliste zum Nennen

• Tab 7: Startlisten

  • Platzhalter für Startlisten-Generierung

• Tab 8: Ergebnislisten

  • Platzhalter für Ergebnis-Erfassung

---

🛠️ Technologie-Stack

Frontend

• React 18+ (Function Components, Hooks)
• TypeScript (Type-Safety)
• React Router v7 (Data Mode Pattern)
• Material-UI v6 (Material Design 3)
• Tailwind CSS v4 (Utility-First CSS)

Design System

• Primärfarbe: Indigo (#3F51B5)
• Design-Sprache: Material Design 3
• Layout: Desktop-optimiert (1440px+)
• Schriftgrößen: 10px - 13px (kompakt)

Build Tools

• Vite (Build Tool)
• PNPM (Package Manager)

---

📁 Projekt-Struktur

/src
├── /app
│   ├── App.tsx                    # Haupt-Komponente mit Router
│   ├── routes.tsx                 # React Router Konfiguration
│   │
│   └── /components
│       ├── Login.tsx              # Login-Maske
│       ├── Dashboard.tsx          # Admin-Übersicht mit Veranstaltungen
│       ├── VeranstalterVerwaltung.tsx
│       ├── VeranstalterAuswahl.tsx
│       ├── TurnierErstellen.tsx   # Veranstaltungs-Übersicht
│       ├── TurnierAnsicht.tsx     # Turnier-Tabs
│       │
│       ├── NennungsMaske.tsx      # Desktop Nennungs-Maske
│       ├── PferdReiterEingabe.tsx
│       ├── NennungenTabelle.tsx
│       ├── VerkaufBuchungen.tsx
│       ├── Bewerbsliste.tsx
│       │
│       └── /turnier
│           ├── StammdatenTab.tsx
│           ├── OrganisationTab.tsx
│           ├── BewerbeTab.tsx
│           ├── ArtikelTab.tsx
│           ├── AbrechnungTab.tsx      # NEU: Bar-Zahlungen
│           ├── NennungenTab.tsx       # NEU: Wrapper
│           ├── StartlistenTab.tsx
│           └── ErgebnislistenTab.tsx
│
├── /styles
│   ├── theme.css              # Tailwind Theme + CSS Variables
│   └── fonts.css              # Font Imports
│
└── /imports                   # Figma-Assets (falls vorhanden)

---

🔄 Daten-Hierarchie

Veranstalter (Verein)
└── Veranstaltung (Event)
    └── Turnier
        ├── Stammdaten
        ├── Organisation
        ├── Bewerbe
        │   └── Einzelne Bewerbe
        ├── Artikel/Preisliste
        ├── Abrechnung
        │   └── Buchungen pro Teilnehmer
        ├── Nennungen
        │   ├── Reiter
        │   ├── Pferd
        │   └── Bewerbs-Nennungen
        ├── Startlisten
        └── Ergebnislisten

---

🎨 Design-Prinzipien

1. Desktop-First: Optimiert für 1440px+ Displays
2. Kompakt: Kleine Schriftgrößen (10-11px), hohe Informationsdichte
3. Tastatur-optimiert: Tab-Navigation, Shortcuts
4. Material Design 3: Konsistente MUI-Komponenten
5. Indigo-Farbschema: Primärfarbe #3F51B5
6. Responsive Tabs: Flexible Tab-Struktur für verschiedene Workflows

---

🚀 Quick Start

Installation

pnpm install

Entwicklung

pnpm dev

Login

• Username: admin
• Passwort: Admin#1234

---

📖 Dokumentations-Übersicht

Für jedes Team gibt es spezifische Dokumentationen:

1. ARCHITECTURE.md - Lead-Architekt
2. BACKEND.md - Backend Developer
3. FRONTEND.md - Frontend Developer
4. UI-UX.md - UI/UX Designer

---

📝 Development Log

Session 2026-03-24: Abrechnung & Nennungen-Integration

Implementiert:

1. Abrechnung-Tab (Tab 5)

• Buchungstabelle mit Soll/Haben/Saldo
• Teilnehmer-Auswahl (Reiter/Pferd Dropdown)
• Zahlungsarten: Bar, Scheck (+30€), Bankomat, Kreditkarte
• Direkt-Druck: Saldo & Rechnung
• Aktions-Buttons: Aktualisieren, Übersicht, Tabelle Leeren
• Summenzeile mit Gesamt-Saldo
• Info-Box mit Hinweisen

2. Nennungen-Tab (Tab 6)

• Integration der Desktop-Nennungs-Maske
• Pferd & Reiter Eingabe mit Cross-Reference
• Nennungen-Tabelle mit drei Tabs (Reiter/Pferd/Bewerbe)
• Verkauf/Buchungen Panel
• Bewerbsliste mit Doppelklick-Nennung
• Navigation Buttons: Startliste, Ergebnisse, Abrechnung

3. Tab-Struktur finalisiert:

• Stammdaten → Organisation → Bewerbe → Artikel → Abrechnung → Nennungen → Startlisten → Ergebnislisten

Workflow:

Admin - Verwaltung
  → Neue Veranstaltung
    → Veranstalter Auswahl
      → Veranstalter-Übersicht
        → Veranstaltung
          → Turnier-Stammdaten
            → 8 Turnier-Tabs

---

🔮 Nächste Schritte

Backend-Integration

• Supabase oder REST API Integration
• Datenbank-Schema implementieren
• CRUD-Operationen für alle Entitäten
• Echtzeit-Updates für Nennungen
• Zahlungs-Transaktionen persistieren

Frontend-Erweiterungen

• Startlisten-Generierung implementieren
• Ergebnislisten-Erfassung implementieren
• Druck-Funktionen (PDF-Export)
• Filter & Such-Funktionen optimieren
• Excel-Export für Übersichten

UI/UX Verbesserungen

• Drag & Drop für Startlisten
• Keyboard Shortcuts dokumentieren
• Loading States & Error Handling
• Toast Notifications
• Confirmation Dialogs

---

👥 Team-Kontakte

• Lead-Architekt: [Name]
• Backend Developer: [Name]
• Frontend Developer: [Name]
• UI/UX Designer: [Name]

---

📄 Lizenz

[Lizenz-Information]

---

Erstellt am: 2026-03-24
Zuletzt aktualisiert: 2026-03-24