meldestelle/docs/06_Frontend/FIGMA

Turnierverwaltungs-Anwendung - Nennungs-Maske

📋 Projektübersicht

Professionelle Desktop-Anwendung für die Verwaltung von Pferdesport-Turnieren mit Fokus auf die Nennungs-Maske als Herzstück der Anwendung.

Die Anwendung ermöglicht die effiziente Erfassung von Turnier-Nennungen durch ein intelligentes Pferd-Reiter-Suchsystem mit Cross-Reference-Funktionalität und IMS-Kennzeichnung (Im System).

---

🎨 Design-System

• Design Framework: Material Design 3 (MUI v5+)
• Primärfarbe: Indigo (#3F51B5)
• UI-Philosophie: Kompakt, informationsdicht, tastaturoptimiert
• Zielplattform: Desktop (keine Mobile-Optimierung erforderlich)

---

🛠 Technologie-Stack

Core

• React 18+ mit TypeScript
• Material-UI (MUI) v5+ für UI-Komponenten
• Emotion für CSS-in-JS Styling

Dependencies

{
  "@mui/material": "^5.x",
  "@emotion/react": "^11.x",
  "@emotion/styled": "^11.x",
  "@mui/icons-material": "^5.x",
  "react": "^18.x",
  "react-dom": "^18.x",
  "typescript": "^5.x"
}

---

📐 Layout-Struktur

2-Spalten 3-Zeilen Grid (60% / 40% horizontal)

┌─────────────────────────────────┬──────────────────────┐
│  Pferd/Reiter Suche (60%)       │  Verkauf/Buchungen   │  50%
│  - Pferd Suche + Details        │  (40%)               │
│  - Reiter Suche + Details       │                      │
├─────────────────────────────────┴──────────────────────┤
│  Navigation (Startliste | Ergebnisse | Abrechnung)     │  5%
├─────────────────────────────────┬──────────────────────┤
│  Nennungsübersicht (60%)        │  Bewerbsübersicht    │  45%
│  - Reiter | Pferd | Bewerbe     │  (40%)               │
│  - Tabbed Interface             │  - Doppelklick nennt │
└─────────────────────────────────┴──────────────────────┘

---

🏗 Komponenten-Architektur

Komponenten-Hierarchie

App.tsx
└── NennungsMaske.tsx (Hauptlayout)
    ├── PferdReiterEingabe.tsx (Such-System)
    ├── VerkaufBuchungen.tsx (Verkauf/Buchungen)
    ├── NennungenTabelle.tsx (Nennungsübersicht)
    └── Bewerbsliste.tsx (Bewerbsübersicht)

Datei-Übersicht

Datei	Beschreibung	Zeilen
App.tsx	Root Component mit MUI Theme Provider	~30
theme.tsx	Material Design 3 Theme (Indigo)	~50
NennungsMaske.tsx	Hauptlayout mit Grid-Struktur	~120
PferdReiterEingabe.tsx	Intelligentes Such-System	~400
VerkaufBuchungen.tsx	Verkauf & Buchungen Tabs	~250
NennungenTabelle.tsx	Nennungsübersicht mit Tabs	~180
Bewerbsliste.tsx	Bewerbsübersicht	~180

---

🔍 Core Features

1. Intelligentes Such-System

Pferd-Suche

• Eingabe: Kopfnummer oder Name
• Echtzeit-Filterung: Während der Eingabe alle Treffer anzeigen
• Nach Auswahl: Top 4 Ergebnisse behalten (scrollbar)
• Cross-Reference: Zeigt automatisch Reiter des ausgewählten Pferdes
• IMS-Kennzeichnung: Bereits genannte Pferde mit "IMS" Badge

Reiter-Suche

• Eingabe: Vorname und/oder Nachname
• Echtzeit-Filterung: Während der Eingabe alle Treffer anzeigen
• Nach Auswahl: Top 4 Ergebnisse behalten (scrollbar)
• Cross-Reference: Zeigt automatisch Pferde des ausgewählten Reiters
• IMS-Kennzeichnung: Bereits genannte Reiter mit "IMS" Badge
• Geburtsjahr: Bei Namensgleichheit zur Unterscheidung (*1998, *2002)

Tastaturnavigation

• ↑/↓: Navigation durch Suchergebnisse
• Enter: Auswahl bestätigen
• Tab: Zum nächsten Feld
• Doppelklick: Alternative zur Enter-Taste

2. IMS-System (Im System)

Definition: Pferd-Reiter-Kombinationen, die bereits für dieses Turnier genannt haben.

Verhalten:

// Mock-Daten Beispiel
const turnieNennungen = [
  { reiterId: 2, pferdId: 5, bewerbNr: 3 }, // Thomas Bauer mit Domino in Bewerb 3
  { reiterId: 1, pferdId: 1, bewerbNr: 2 }, // Anna Schneider mit Obora's Donna
];

Vorteile:

• ✅ Schneller Zugriff auf häufig verwendete Kombinationen
• ✅ Vermeidung von Duplikaten
• ✅ Verkauf (z.B. "Heu") kann schnell auf bestehende Pferde gebucht werden

3. Cross-Reference-Funktionalität

Szenario A: Reiter → Pferde

1. Reiter "Ba" eingeben
2. Suchergebnis: "Thomas BAUER" (IMS)
3. Automatisch im Pferd-Feld: "Domino" (IMS)
4. Pferd auswählen → Verkauf buchen ODER
5. Anderes Pferd suchen → Neue Nennung

Szenario B: Pferd → Reiter

1. Pferd "Domino" suchen
2. Pferd auswählen
3. Automatisch im Reiter-Feld: "Thomas Bauer" (IMS)
4. Reiter bestätigen ODER
5. Anderen Reiter suchen → Pferd hat 2 Reiter

4. Workflow: Nennung erstellen

┌─────────────────────────────────────────────────────┐
│ 1. Pferd suchen (oder via Reiter-Cross-Reference)  │
│    → Pfeiltasten navigieren                         │
│    → Enter oder Doppelklick bestätigen              │
├─────────────────────────────────────────────────────┤
│ 2. Reiter suchen (oder via Pferd-Cross-Reference)  │
│    → Pfeiltasten navigieren                         │
│    → Enter oder Doppelklick bestätigen              │
├─────────────────────────────────────────────────────┤
│ 3. Pferd + Reiter Details werden angezeigt         │
│    → Validierung (Lizenz, Konto-Saldo)             │
├─────────────────────────────────────────────────────┤
│ 4. Bewerb aus Bewerbsübersicht wählen              │
│    → Doppelklick auf Bewerb                         │
├─────────────────────────────────────────────────────┤
│ 5. Nennung erscheint in Nennungsübersicht          │
│    → Filterbar nach Reiter/Pferd/Bewerb            │
└─────────────────────────────────────────────────────┘

5. Verkauf & Buchungen

Verkauf-Tab

• Artikel-Liste: Nenngeld, Stallmiete, Heu, Stroh, etc.
• Menge anpassen: +/- Buttons oder direkte Eingabe
• Auto-Berechnung: Betrag = Menge × Einzelpreis
• Hervorhebung: Wichtige Artikel (Nenngeld, Stallmiete) gelb hinterlegt
• Buchung: Nur auf ausgewähltes Pferd möglich

Buchungen-Tab

• Übersicht: Alle getätigten Buchungen
• Stornierung: Einzelne Buchungen rückgängig machen

6. Nennungsübersicht

3 Tabs

• Reiter: Alle Nennungen gefiltert nach ausgewähltem Reiter
• Pferd: Alle Nennungen gefiltert nach ausgewähltem Pferd
• Bewerbe: Alle Nennungen chronologisch

Funktionen

• Positionieren: Startreihenfolge manuell festlegen
• Stornieren: Nennung entfernen
• Farbcodierung:
  • Grün: Startwunsch "Vorne"
  • Blau: Startwunsch "Hinten"

7. Bewerbsübersicht

• Alle Bewerbe: Tag, Platz, Nr, Name, Beginn, Anzahl Nennungen
• Doppelklick: Nennung erstellen (nur wenn Pferd + Reiter ausgewählt)
• Filter: Bewerbe nach Kriterien filtern
• Aktualisierung: Echtzeit-Update der Nennungsanzahl

---

🎯 Bedienkonzept

Kompakte Desktop-UI

• Font-Größe: 10-11px (kompakt, informationsdicht)
• Button-Größe: size="small" mit reduziertem Padding
• Tabellen: Dense-Modus mit minimalen Zeilenhöhen
• Icons: 14-16px (klein aber erkennbar)

Tastatur-First

• Tab-Navigation: Durch alle Eingabefelder
• Pfeiltasten: Navigation in Listen
• Enter: Bestätigung
• Escape: Abbrechen (TODO)
• Shortcuts: (TODO: Strg+N für Neu, Strg+S für Speichern)

---

📊 Datenmodell (Mock)

Pferd

interface Pferd {
  id: number;
  kopfnr: string;        // z.B. "A123", "4568"
  name: string;          // z.B. "Obora's Donna"
  rasse: string;         // z.B. "Hannoveraner"
  farbe: string;         // z.B. "Brauner"
  besitzer: string;      // z.B. "Franz Huber"
  stall: string;         // z.B. "Box 12"
}

Reiter

interface Reiter {
  id: number;
  kopfnr: string;        // z.B. "201"
  vorname: string;       // z.B. "Thomas"
  nachname: string;      // z.B. "Bauer"
  verein: string;        // z.B. "RC Graz"
  lizenz: string;        // z.B. "LNR-2024-4587"
  lizenzGueltig: boolean;
  kontoSaldo: number;    // z.B. -125.50 (negativ = Schulden)
  geburtsjahr: number;   // z.B. 1998 (für Namensgleichheit)
}

Nennung

interface Nennung {
  id: number;
  pferdId: number;
  reiterId: number;
  bewerbNr: string;      // z.B. "1", "2a"
  bewerbName: string;    // z.B. "Dressur Kl. L"
  tag: string;           // z.B. "SA", "SO"
  platz: string;         // z.B. "A1", "C2"
  startwunsch?: string;  // z.B. "Vorne", "Hinten"
}

Bewerb

interface Bewerb {
  nr: string;            // z.B. "1", "2a"
  name: string;          // z.B. "Dressur Kl. L"
  tag: string;           // z.B. "SA"
  platz: string;         // z.B. "A1"
  beginn: string;        // z.B. "08:00"
  nenn: number;          // Anzahl Nennungen
}

Turnie-Nennung (IMS)

interface TurnieNennung {
  reiterId: number;
  pferdId: number;
  bewerbNr: number;
}

---

🚀 Installation & Setup

Schritt 1: Projekt initialisieren

# React + TypeScript Projekt erstellen
npx create-react-app turnierverwaltung --template typescript

cd turnierverwaltung

Schritt 2: Dependencies installieren

# MUI und Dependencies
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

# TypeScript Types (falls benötigt)
npm install --save-dev @types/react @types/react-dom

Schritt 3: Projektstruktur erstellen

src/
├── app/
│   ├── App.tsx
│   ├── theme.tsx
│   └── components/
│       ├── NennungsMaske.tsx
│       ├── PferdReiterEingabe.tsx
│       ├── VerkaufBuchungen.tsx
│       ├── NennungenTabelle.tsx
│       └── Bewerbsliste.tsx
├── styles/
│   └── theme.css
└── index.tsx

Schritt 4: Dateien manuell übertragen

WICHTIG: Da kein Download verfügbar ist, müssen Sie die Dateien manuell aus Figma Make kopieren:

1. Öffnen Sie jede Komponente in Figma Make
2. Kopieren Sie den Code (Strg+A, Strg+C)
3. Erstellen Sie die Datei in Ihrer IDE
4. Fügen Sie den Code ein (Strg+V)

Reihenfolge:

1. theme.tsx (Theme zuerst!)
2. App.tsx
3. NennungsMaske.tsx
4. PferdReiterEingabe.tsx
5. VerkaufBuchungen.tsx
6. NennungenTabelle.tsx
7. Bewerbsliste.tsx

Schritt 5: Starten

npm start

---

🔄 Nächste Schritte / TODO

Phase 1: Backend-Integration

• REST API Endpoints definieren
• Pferde aus Datenbank laden
• Reiter aus Datenbank laden
• Nennungen persistieren
• Echtzeit-Updates (WebSocket?)

Phase 2: Erweiterte Features

• Neu-Button: Dialog für neue Pferde/Reiter
• Bearbeiten-Button: Inline-Editing von Details
• Stornieren: Nennung mit Bestätigung löschen
• Positionieren: Drag & Drop für Startreihenfolge
• Filter: Erweiterte Filteroptionen
• Drucken: Startlisten, Nennungslisten
• Export: PDF, Excel

Phase 3: Validierung & Business Logic

• Lizenz-Prüfung (abgelaufene Lizenzen warnen)
• Konto-Saldo Warnung (negative Salden)
• Doppel-Nennungen verhindern
• Zeitkonflikte erkennen
• Kapazitätsgrenzen (max. Nennungen pro Bewerb)

Phase 4: Weitere Masken

• Startliste: Reihenfolge, Startzeiten
• Ergebnisse: Platzierungen erfassen
• Abrechnung: Kosten, Zahlungen, Quittungen

Phase 5: UX-Verbesserungen

• Keyboard Shortcuts: Strg+N, Strg+S, etc.
• Undo/Redo: Historie für Änderungen
• Suche optimieren: Fuzzy Search, Synonyme
• Loading States: Spinner, Skeleton Screens
• Error Handling: Benutzerfreundliche Fehlermeldungen

Phase 6: Performance

• Virtualisierung: Große Listen (1000+ Einträge)
• Lazy Loading: Komponenten on-demand laden
• Caching: Häufig verwendete Daten

---

💡 Design-Entscheidungen

Warum Material Design 3?

• Konsistentes Design-System: Bewährte Patterns
• Accessibility: WCAG-konform out-of-the-box
• Rich Component Library: Weniger Custom-Code
• Professional Look: Moderne, cleane Optik

Warum Indigo als Primärfarbe?

• Professionell: Vertrauenswürdig, seriös
• Kontrast: Gute Lesbarkeit auf hellem Hintergrund
• Differenzierung: Nicht das "Standard-Blau"

Warum 2-Spalten Layout?

• Workflow-orientiert: Eingabe links, Übersicht rechts
• Platzsparend: Maximale Information auf einem Screen
• Desktop-optimiert: Nutzt breite Bildschirme effizient

Warum IMS-System?

• Performance: Reduziert Suchzeit drastisch
• UX: Häufige Kombinationen sofort verfügbar
• Fehlerminimierung: Bereits validierte Kombinationen

---

🤝 Team-Übergabe Checkliste

Für Frontend-Entwickler

• README durchlesen (diese Datei!)
• Komponenten-Struktur verstehen
• Mock-Daten analysieren
• Workflow nachvollziehen (IMS, Cross-Reference)
• UI/UX Konzept verinnerlichen

Für Backend-Entwickler

• Datenmodell definieren (siehe "Datenmodell")
• API Endpoints spezifizieren
• Validierungs-Regeln implementieren
• Performance-Anforderungen klären

Für Product Owner

• Feature-Priorisierung (siehe "Nächste Schritte")
• User Stories schreiben
• Acceptance Criteria definieren

Für Designer

• Theme anpassen (Farben, Schriften)
• Icons konsistent gestalten
• Print-Layouts definieren

---

📞 Support & Fragen

Häufige Fragen

Q: Warum verschwindet das Suchfeld nicht nach der Auswahl?
A: Bewusste Design-Entscheidung! Die Top 4 Ergebnisse bleiben sichtbar, damit man schnell zwischen ähnlichen Pferden/Reitern wechseln kann (z.B. mehrere "Obora's..." Pferde).

Q: Was bedeutet IMS?
A: "Im System" = Pferd-Reiter-Kombination hat bereits eine Nennung für dieses Turnier.

Q: Warum Cross-Reference?
A: Effizienz! Wenn ich einen Reiter suche, sehe ich sofort seine Pferde. Spart Zeit bei Verkäufen oder weiteren Nennungen.

Q: Kann ein Pferd mehrere Reiter haben?
A: Ja! Ein Pferd kann von verschiedenen Reitern in verschiedenen Bewerben geritten werden.

Q: Warum ist die Schrift so klein?
A: Desktop-Anwendung für Profis. Kompakte Darstellung = mehr Information auf einem Blick = weniger Scrollen.

---

📄 Lizenz

(Bitte durch Ihr Team festlegen)

---

✍️ Autoren & Mitwirkende

• Projekt-Owner: [Ihr Name]
• Prototyp: Erstellt mit Figma Make
• Datum: März 2026

---

📝 Änderungshistorie

Version	Datum	Änderung
0.1.0	2026-03-21	Initialer Prototyp mit Nennungs-Maske
		- IMS-System implementiert
		- Cross-Reference-Suche
		- 2-Spalten 3-Zeilen Layout (50%-5%-45%)
		- Material Design 3 (Indigo)

---

Ende der Dokumentation

Bei Fragen oder Unklarheiten: Bitte diese README erweitern und im Team diskutieren!