meldestelle/docs/06_Frontend/FIGMA/Vision_02

Turnierverwaltungs-Anwendung - Frontend Prototyp

Projektübersicht

Dies ist ein professioneller Prototyp einer Turnierverwaltungs-Anwendung für den österreichischen Pferdesportverband ( ÖPS). Die Anwendung ist als Desktop-First-Anwendung konzipiert und bietet eine kompakte, tastaturoptimierte Benutzeroberfläche zur Verwaltung von Veranstaltungen, Turnieren und Bewerben im Pferdesport.

Hauptmerkmale

• Desktop-optimierte UI: Fokus auf kompakte Layouts und effiziente Datenerfassung
• Hierarchische Datenstruktur: Veranstaltungen → Turniere → Bewerbe
• Material Design 3: Moderne UI mit Primärfarbe Indigo (#3F51B5)
• Tastaturoptimiert: Effiziente Navigation und Dateneingabe
• OETO-Ausschreibungs-Standard: Tab-Struktur folgt österreichischen Richtlinien

---

Technologie-Stack

Core Technologies

• React 18 - UI Framework
• TypeScript - Type-safe JavaScript
• React Router (Data Mode) - Client-side Routing
• Material-UI (MUI) v6 - Component Library
• Vite - Build Tool & Development Server

Styling

• Material-UI System - Sx Props für Styling
• Tailwind CSS v4 - Utility Classes (sekundär)
• Material Design 3 - Design Language

Package Manager

• pnpm - Fast, disk space efficient package manager

---

Projektstruktur

/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── veranstaltung/
│   │   │   │   ├── StammdatenTab.tsx         # A-Satz / Stammdaten
│   │   │   │   ├── OrganisationTab.tsx       # Funktionäre & Plätze
│   │   │   │   ├── PreislisteTab.tsx         # Preisliste
│   │   │   │   └── UebersichtTab.tsx         # Transfer/Übersicht
│   │   │   ├── turnier/
│   │   │   │   └── BewerbeTab.tsx            # Bewerbe-Verwaltung (Hauptseite)
│   │   │   ├── AdminDrawer.tsx               # Haupt-Navigation
│   │   │   ├── VeranstaltungAnsicht.tsx      # Veranstaltungs-View
│   │   │   └── TurnierAnsicht.tsx            # Turnier-View
│   │   ├── routes.tsx                        # React Router Konfiguration
│   │   └── App.tsx                           # Root Component
│   ├── styles/
│   │   ├── theme.css                         # CSS Variables & Theme
│   │   └── fonts.css                         # Font Imports
│   └── main.tsx                              # Entry Point
├── package.json
└── README.md

---

Installation & Setup

Voraussetzungen

• Node.js >= 18.x
• pnpm >= 8.x (empfohlen) oder npm

Installation

# Repository klonen
git clone <repository-url>
cd turnierverwaltung

# Dependencies installieren
pnpm install

# Development Server starten
pnpm dev

# Build für Production
pnpm build

# Preview Production Build
pnpm preview

Verfügbare Scripts

{
  "dev": "vite",           // Development Server auf http://localhost:5173
  "build": "vite build",   // Production Build
  "preview": "vite preview" // Preview Production Build
}

---

Architektur & Konzepte

1. Routing-System (React Router Data Mode)

Die Anwendung verwendet React Router's Data Mode Pattern mit einer klar definierten Route-Hierarchie:

// src/app/routes.tsx
const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      // Neue Veranstaltung
      { 
        path: "veranstaltung/neu", 
        Component: VeranstaltungAnsicht 
      },
      
      // Bestehende Veranstaltung
      { 
        path: "veranstaltung/:id", 
        Component: VeranstaltungAnsicht 
      },
      
      // Neues Turnier in Veranstaltung
      { 
        path: "veranstaltung/:veranstaltungId/turnier/neu", 
        Component: TurnierAnsicht 
      },
      
      // Bestehendes Turnier
      { 
        path: "veranstaltung/:veranstaltungId/turnier/:nr", 
        Component: TurnierAnsicht 
      },
      
      // 404 Fallback
      { 
        path: "*", 
        Component: NotFound 
      }
    ]
  }
]);

Wichtig: Verwenden Sie immer das react-router Package (nicht react-router-dom), da die Anwendung in einer speziellen Umgebung läuft.

---

2. Navigation & Benutzerfluss

Hauptnavigation: AdminDrawer

Die Anwendung verwendet eine Drawer-Navigation (links) mit folgenden Bereichen:

Admin - Verwaltung
├── Veranstaltungen
│   ├── Neue Veranstaltung        → /veranstaltung/neu
│   └── [Liste Veranstaltungen]   → /veranstaltung/:id
│       └── Turniere
│           ├── Neues Turnier     → /veranstaltung/:id/turnier/neu
│           └── [Turnier-Liste]   → /veranstaltung/:id/turnier/:nr
└── ...

Login-System

• Demo Credentials:
  • Username: admin
  • Passwort: Admin#1234
• Login-State wird im localStorage gespeichert
• Keine Backend-Integration im Prototyp

---

3. Tab-Struktur (OETO-Standard)

Veranstaltungs-Tabs (Neue Veranstaltung)

Bei einer neuen Veranstaltung sind alle 5 Tabs sichtbar:

1. Veranstaltung - Übersicht (ehemals "Transfer")
2. Stammdaten (A-Satz) ← Standardtab beim Erstellen
3. Organisation (Funktionäre + Plätze)
4. Bewerbe (wird versteckt, da turnierspezifisch)
5. Preisliste

Veranstaltungs-Tabs (Bestehende Veranstaltung)

Bei einer bestehenden Veranstaltung wird nur der Übersicht-Tab angezeigt:

1. Veranstaltung - Übersicht

Grund: Turnierspezifische Daten (Stammdaten, Organisation, Bewerbe, Preisliste) werden nur auf Turnier-Ebene bearbeitet.

Turnier-Tabs

Wenn ein Turnier geöffnet wird, sind alle 5 Tabs sichtbar:

1. Veranstaltung - Übersicht (Read-only, zeigt Veranstaltungs-Info)
2. Stammdaten (A-Satz)
3. Organisation (Funktionäre + Plätze)
4. Bewerbe ⭐ Wichtigste Seite der Anwendung
5. Preisliste

---

4. Bewerbe-Tab - Die Hauptseite

Der Bewerbe-Tab ist die zentrale Konfigurationsseite des gesamten Systems. Er ist in 3 Bereiche aufgeteilt:

┌─────────────┬───────────────────────┬───────────────────────┐
│   Aktionen  │   Bewerbs-Übersicht   │  Bewerb-Konfiguration │
│   (150px)   │        (50%)          │        (50%)          │
└─────────────┴───────────────────────┴───────────────────────┘

Links: Aktionen (150px Sidebar)

Buttons für Bewerbs-Management:

• Änderungen Speichern / Änderungen Rückgängig
• Bewerb Einfügen / Bewerb Löschen / Bewerb Teilen
• Bewerb nach oben/unten verschieben
• Startliste Bearbeiten / Startliste Drucken
• Ergebnisliste Bearbeiten / Ergebnisliste Drucken

Mitte: Bewerbs-Übersicht (50%)

Toolbar:

• Button: Aktualisieren
• Button: X Bewerbe (zeigt Anzahl)
• Button: Filtern

Tabelle mit folgenden Spalten:

• Tag (Datum)
• Platz (Platz-Nummer)
• Bewerb (Bewerb-Nummer)
• Beginn (Uhrzeit)
• Ende (Uhrzeit)
• Bewerbname (mehrzeilig möglich)
• ZNS (Zusätzliche Nennung Startnummer)
• Nennungen (Anzahl Anmeldungen)

Features:

• Klickbare Zeilen zur Auswahl
• Hervorhebung: Bewerbe 5 & 6 haben gelben Hintergrund (warning.50)
• Selected State: Blau/Gelb-Orange je nach Bewerb

Rechts: Bewerb-Konfiguration (50%)

4 Tabs zur detaillierten Bewerbs-Konfiguration:

Tab 1: Bewerb (Grunddaten)

• Nummer
• Abteilung
• Typ (z.B. "Dressur")
• Name (z.B. "Dressurreiterprüfung")
• Bezeichnung (z.B. "Dressurreiterprüfung Reiterpass")
• Kategorie (Dropdown)
• Klasse (Dropdown)
• Lizenz (Dropdown)
• Maximal (Pferde je Reiter)
• Pferdealter (Dropdown)
• Zeile 1, 2, 3 (Zusatzinformationen wie "Pony Einsteiger Cup OÖ")
• Logo Bewerb (Dateipfad mit "..."-Button)

Tab 2: Bewertung

• Prüfung (z.B. "Dressurreiterprüfung")
• Richtverfahren (z.B. "A")
• Para-Grade
• Richteranzahl
• Aufgabe (z.B. "Aufgabe R")
• Aufgabennummer
• Maximalpunkte (Punkte je Richter)

Richter-Liste:

• Position (z.B. "C")
• Name (z.B. "Schuster Alexandra")
• Aktiv (Checkbox)

Tab 3: Geldpreise

Section: Geldpreis

• Checkbox: Geldpreis
• Startgeld (z.B. "15,00")
• Auszahlung (Dropdown: fortführend, 1/3, 1/4, 1/5)

Section: Geldpreis für Kadererreiter

• Checkbox: Geldpreis für Kadererreiter
• Startgeld für Kadererreiter (z.B. "15,00")

Geldpreisvorlage wählen (Dropdown)

Tabelle: Geldpreise

• Spalten: Nummer, Geldpreis
• Zeigt Anzahl der Geldpreise

Tab 4: Ort/Zeit

• Tag (Dropdown: Datum)
• Beginnzeit (Dropdown: "fix um", "nicht vor", "ca.")
• Zeit (Textfeld mit Format hh:mm)
• Reitdauer (Textfeld mit Format mm:ss)
• Umbau (Textfeld in Minuten)
• Besichtigung (Textfeld in Minuten)
• Stechen (Textfeld in Minuten)
• Platz (Dropdown: "Vorderer Turnierplatz", "Hauptplatz", etc.)

---

Datenstrukturen

Bewerb Interface

interface Bewerb {
  id: number;
  tag: string;                // Tabellen-Datum
  platz: number;              // Platz-Nummer
  bewerb: number;             // Bewerb-Nummer
  beginn: string;             // Beginn-Zeit
  ende: string;               // End-Zeit
  bewerbname: string;         // Mehrzeiliger Name
  zns: number;                // ZNS
  nennungen: number;          // Anzahl Nennungen
  
  // Tab 1: Bewerb
  nummer: string;
  abteilung: string;
  typ: string;
  name: string;
  bezeichnung: string;
  kategorie: string;
  klasse: string;
  lizenz: string;
  maximal: string;
  pferdealter: string;
  zeile1: string;
  zeile2: string;
  zeile3: string;
  logoBewerbPfad: string;
  
  // Tab 2: Bewertung
  prufung: string;
  richtverfahren: string;
  paraGrade: string;
  richteranzahl: number;
  aufgabe: string;
  aufgabennr: string;
  maximalPunkte: string;
  richter: {
    position: string;
    name: string;
    aktiv: boolean;
  }[];
  
  // Tab 3: Geldpreise
  geldpreisAktiv: boolean;
  startgeld: string;
  auszahlung: string;
  geldpreisKadererreiterAktiv: boolean;
  startgeldKadererreiter: string;
  geldpreisvorlage: string;
  geldpreise: {
    nummer: string;
    betrag: string;
  }[];
  
  // Tab 4: Ort/Zeit
  tagDatum: string;
  beginnzeit: string;
  beginnZeit: string;
  reitdauer: string;
  umbau: string;
  besichtigung: string;
  stechen: string;
  platzName: string;
}

Veranstaltung Interface

interface Veranstaltung {
  id: string;
  name: string;
  von: string;         // Datum von
  bis: string;         // Datum bis
  ort: string;
  status: string;
  turniere: Turnier[];
}

Turnier Interface

interface Turnier {
  nr: number;
  name: string;
  datum: string;
  status: string;
  bewerbe: Bewerb[];
}

---

Design-System

Farbschema (Material Design 3)

Primärfarbe: Indigo (#3F51B5)

/* Theme Colors (src/styles/theme.css) */
--primary-color: #3F51B5;
--primary-light: #757DE8;
--primary-dark: #002984;

/* Semantic Colors */
--background-default: #FAFAFA;
--background-paper: #FFFFFF;
--text-primary: rgba(0, 0, 0, 0.87);
--text-secondary: rgba(0, 0, 0, 0.60);
--divider: rgba(0, 0, 0, 0.12);

/* Status Colors */
--success-color: #4CAF50;
--warning-color: #FF9800;
--error-color: #F44336;
--info-color: #2196F3;

Typografie

• Body Text: 10px - 11px (sehr kompakt für Desktop)
• Labels: 10px, 600 Font Weight
• Section Headers: 11px - 13px, 600 Font Weight
• Schriftart: System Fonts (Roboto via MUI)

Spacing & Layout

• Kompakte Abstände: 1-2 (8px - 16px)
• Form-Felder:
  • Höhe: small size
  • Padding: py: 0.5 (4px)
  • Font: 10px
• Sidebar Width: 150px (Aktionen-Sidebar im Bewerbe-Tab)
• Drawer Width: 280px (Haupt-Navigation)

Component-Sizing

// Standardgrößen
size="small"           // Buttons, TextFields, Selects
sx={{ fontSize: '10px' }}   // Text
sx={{ py: 0.5 }}       // Input Padding
sx={{ gap: 1 }}        // 8px Abstand
sx={{ gap: 1.5 }}      // 12px Abstand

---

MUI Theme Konfiguration

Die Anwendung verwendet MUI's Default Theme mit angepasster Primärfarbe:

// src/main.tsx
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#3F51B5',  // Indigo
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',  // Keine Großbuchstaben
        },
      },
    },
  },
});

---

State Management

Aktuelle Implementierung (Prototyp)

Der Prototyp verwendet React Local State mit useState:

// Beispiel: BewerbeTab.tsx
const [bewerbe, setBewerbe] = useState<Bewerb[]>(mockBewerbe);
const [selectedBewerbId, setSelectedBewerbId] = useState<number>(1);
const [detailTab, setDetailTab] = useState(0);

Empfehlung für Production

Für die Production-Version empfehlen wir:

1. React Context API für globalen State (Login, aktuelle Veranstaltung/Turnier)
2. Zustand oder Redux Toolkit für komplexes State Management
3. React Query für Server-State und Caching
4. localStorage/sessionStorage für Persistenz

Beispiel mit React Context:

// context/VeranstaltungContext.tsx
const VeranstaltungContext = createContext<VeranstaltungContextType | null>(null);

export function VeranstaltungProvider({ children }: { children: ReactNode }) {
  const [activeVeranstaltung, setActiveVeranstaltung] = useState<Veranstaltung | null>(null);
  const [activeTurnier, setActiveTurnier] = useState<Turnier | null>(null);
  
  return (
    <VeranstaltungContext.Provider value={{ 
      activeVeranstaltung, 
      setActiveVeranstaltung,
      activeTurnier,
      setActiveTurnier
    }}>
      {children}
    </VeranstaltungContext.Provider>
  );
}

---

Backend-Integration (TODO)

API Endpunkte (geplant)

// Veranstaltungen
GET    /api/veranstaltungen
GET    /api/veranstaltungen/:id
POST   /api/veranstaltungen
PUT    /api/veranstaltungen/:id
DELETE /api/veranstaltungen/:id

// Turniere
GET    /api/veranstaltungen/:veranstaltungId/turniere
GET    /api/veranstaltungen/:veranstaltungId/turniere/:nr
POST   /api/veranstaltungen/:veranstaltungId/turniere
PUT    /api/veranstaltungen/:veranstaltungId/turniere/:nr
DELETE /api/veranstaltungen/:veranstaltungId/turniere/:nr

// Bewerbe
GET    /api/turniere/:turnierId/bewerbe
GET    /api/turniere/:turnierId/bewerbe/:id
POST   /api/turniere/:turnierId/bewerbe
PUT    /api/turniere/:turnierId/bewerbe/:id
DELETE /api/turniere/:turnierId/bewerbe/:id

// ÖPS Datasourcing
POST   /api/ops/import/veranstaltung/:id
POST   /api/ops/import/turnier/:id

Authentifizierung

POST   /api/auth/login
POST   /api/auth/logout
GET    /api/auth/me
POST   /api/auth/refresh

---

Entwicklungsrichtlinien

Code Style

1. TypeScript Strict Mode: Aktiviert
2. Naming Conventions:

• Components: PascalCase (z.B. BewerbeTab.tsx)
• Functions: camelCase (z.B. handleBewerbAendern)
• Interfaces: PascalCase (z.B. Bewerb)
• CSS Classes: kebab-case (falls verwendet)

3. Component Structure:

// 1. Imports
import React from 'react';
import { Box, Button } from '@mui/material';

// 2. Interfaces/Types
interface Props { ... }

// 3. Component
export function ComponentName({ prop1, prop2 }: Props) {
  // 3.1 State
  const [state, setState] = useState();
  
  // 3.2 Handlers
  const handleAction = () => { ... };
  
  // 3.3 Effects
  useEffect(() => { ... }, []);
  
  // 3.4 Render
  return ( ... );
}

MUI Best Practices

1. Sx Props bevorzugen statt styled components:

// ✅ Gut
<Box sx={{ p: 2, bgcolor: 'primary.main' }}>

// ❌ Vermeiden (im Prototyp)
<StyledBox>

2. Theme-basierte Werte verwenden:

// ✅ Gut - Theme Colors
sx={{ color: 'primary.main', bgcolor: 'grey.50' }}

// ❌ Vermeiden - Hardcoded
sx={{ color: '#3F51B5', bgcolor: '#FAFAFA' }}

3. Responsive Werte (für spätere mobile Version):

sx={{ 
  width: { xs: '100%', md: 300 },
  display: { xs: 'none', md: 'block' }
}}

Performance-Optimierung

1. React.memo für große Listen:

export const BewerbRow = React.memo(({ bewerb }: Props) => { ... });

2. useCallback für Event Handlers in Listen:

const handleSelect = useCallback((id: number) => { ... }, []);

3. Lazy Loading für Tabs:

const BewerbeTab = lazy(() => import('./turnier/BewerbeTab'));

---

Testing (geplant)

Unit Tests mit Vitest

// BewerbeTab.test.tsx
import { render, screen } from '@testing-library/react';
import { BewerbeTab } from './BewerbeTab';

describe('BewerbeTab', () => {
  it('renders 12 bewerbe', () => {
    render(<BewerbeTab />);
    expect(screen.getByText('12 Bewerbe')).toBeInTheDocument();
  });
});

E2E Tests mit Playwright

// e2e/bewerbe.spec.ts
test('can create new bewerb', async ({ page }) => {
  await page.goto('/veranstaltung/1/turnier/1');
  await page.click('text=Bewerb Einfügen');
  await page.fill('input[name="nummer"]', '13');
  // ...
});

---

Browser-Unterstützung

Ziel-Browser (Desktop):

• Chrome/Edge >= 90
• Firefox >= 88
• Safari >= 14

NICHT unterstützt:

• Internet Explorer
• Mobile Browser (vorerst)

---

Bekannte Einschränkungen (Prototyp)

1. Keine Backend-Integration: Alle Daten sind Mock-Daten
2. Keine Persistenz: Änderungen gehen bei Page Refresh verloren
3. Eingeschränkte Validierung: Minimale Form-Validierung
4. Keine Fehlerbehandlung: Fehler-States nicht implementiert
5. Mock-Login: Demo-Credentials hart-kodiert
6. Keine Exports: Drucken/Exportieren nur als Placeholder-Buttons
7. Keine Suche/Filter: Filter-Funktionen nicht implementiert
8. Keine Undo/Redo: "Änderungen Rückgängig" nicht funktional

---

Nächste Schritte / Roadmap

Phase 1: Backend-Integration

• REST API Implementation
• Authentifizierungs-System
• Datenbank-Schema (PostgreSQL empfohlen)
• ÖPS Datasourcing API-Integration

Phase 2: Erweiterte Features

• Such- und Filter-Funktionen
• Sortierung in Tabellen
• Drag & Drop für Bewerbs-Reihenfolge
• Bulk-Operations (mehrere Bewerbe gleichzeitig bearbeiten)
• Undo/Redo-Funktionalität
• Auto-Save (mit Debouncing)

Phase 3: Export & Reporting

• PDF-Export (Startlisten, Ergebnislisten)
• Excel-Export
• Druckvorlagen
• Berichts-Templates

Phase 4: Erweiterte Tabs

• Organisation-Tab: Funktionäre-Verwaltung
• Organisation-Tab: Plätze-Verwaltung
• Preisliste-Tab: Vollständige Implementierung
• Übersicht-Tab: Dashboard mit Statistiken

Phase 5: Zusätzliche Module

• Meisterschaften/Cups-Verwaltung
• Nennungs-System
• Starter-Verwaltung
• Pferde-Datenbank
• Reiter-Datenbank

Phase 6: Polish & Optimierung

• Umfassendes Testing
• Performance-Optimierung
• Accessibility (WCAG 2.1 AA)
• Internationalisierung (i18n)
• Keyboard Shortcuts
• Offline-Modus (PWA)

---

Häufige Entwicklungs-Aufgaben

Neue Komponente hinzufügen

// src/app/components/MyComponent.tsx
import { Box, Typography } from '@mui/material';

interface MyComponentProps {
  title: string;
}

export function MyComponent({ title }: MyComponentProps) {
  return (
    <Box sx={{ p: 2 }}>
      <Typography variant="h6" sx={{ fontSize: '13px', fontWeight: 600 }}>
        {title}
      </Typography>
    </Box>
  );
}

Neue Route hinzufügen

// src/app/routes.tsx
{
  path: "my-new-page",
  Component: MyNewPage,
}

Neuen Tab in Veranstaltung/Turnier hinzufügen

// In VeranstaltungAnsicht.tsx oder TurnierAnsicht.tsx
const tabs = [
  // ... bestehende Tabs
  { label: 'Mein neuer Tab', component: <MyNewTabComponent /> }
];

MUI Component anpassen

// Global Theme Override
const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          fontSize: '10px',
        },
      },
    },
  },
});

// Oder mit Sx Props
<Button sx={{ textTransform: 'none', fontSize: '10px' }}>

---

Debugging

React DevTools

Installieren Sie die React DevTools Browser Extension:

• Chrome
• Firefox

Vite Development Server

Der Dev Server unterstützt:

• Hot Module Replacement (HMR): Änderungen werden sofort sichtbar
• Error Overlay: Fehler werden im Browser angezeigt
• Source Maps: Original TypeScript Code im Browser sichtbar

Console Logging

// Beispiel in BewerbeTab.tsx
const handleSpeichern = () => {
  console.log('Bewerbe speichern:', bewerbe);
};

Redux DevTools (für zukünftige Implementierung)

Wenn State Management mit Redux/Zustand implementiert wird:

• Redux DevTools Extension

---

Deployment (geplant)

Production Build

pnpm build

Output: dist/ Ordner

Hosting-Optionen

1. Statisches Hosting (für Frontend-Only):

• Vercel
• Netlify
• AWS S3 + CloudFront
• Azure Static Web Apps

2. Full-Stack Hosting (mit Backend):

• AWS (EC2, ECS, Lambda)
• Azure App Service
• Google Cloud Run
• DigitalOcean App Platform

Environment Variables

# .env.production
VITE_API_URL=https://api.turnierverwaltung.at
VITE_OPS_API_URL=https://ops-api.example.at

Zugriff im Code:

const API_URL = import.meta.env.VITE_API_URL;

---

Support & Kontakt

Dokumentation

• React: https://react.dev
• React Router: https://reactrouter.com
• Material-UI: https://mui.com
• TypeScript: https://www.typescriptlang.org
• Vite: https://vitejs.dev

Code-Review Checkliste

Vor dem Commit prüfen:

• TypeScript-Fehler behoben (pnpm run type-check)
• Code formatiert (Prettier/ESLint)
• Console.log() Statements entfernt
• Keine hardcoded URLs/Credentials
• Responsive Design getestet (falls relevant)
• Browser-Kompatibilität geprüft
• Performance: Keine unnötigen Re-Renders

---

Glossar

Begriffe aus dem Pferdesport / OETO-Standard:

• OETO: Österreichischer Turnierordnung
• ÖPS: Österreichischer Pferdesportverband
• A-Satz: Stammdaten einer Veranstaltung/Turniers
• Bewerb: Einzelne Prüfung innerhalb eines Turniers
• Richtverfahren: Bewertungsmethode (A, C, E)
• Para-Grade: Klassifizierung für Para-Dressur
• ZNS: Zusätzliche Nennung Startnummer
• Kadererreiter: Reiter im Nationalmannschafts-Kader
• Führzügelklasse: Wettbewerb für sehr junge Reiter
• First Ridden: Englische Bezeichnung für Einsteiger-Wettbewerb
• Stechen: Zusätzliche Runde zur Entscheidung bei Gleichstand

---

Lizenz

© 2024 - Internes Projekt für [Organisation]

---

Changelog

Version 0.1.0 (Prototyp) - 2024-03-24

Initiale Features:

• ✅ Login-System (Demo-Credentials)
• ✅ Haupt-Navigation (AdminDrawer)
• ✅ Veranstaltungs-Verwaltung
• ✅ Turnier-Verwaltung
• ✅ Bewerbe-Tab (vollständig)
  • Tabellen-Übersicht (12 Mock-Bewerbe)
  • 4 Konfigurations-Tabs (Bewerb, Bewertung, Geldpreise, Ort/Zeit)
  • Aktions-Buttons
• ✅ Routing-System (React Router Data Mode)
• ✅ Material Design 3 UI (Indigo Theme)
• ✅ Desktop-optimierte Layouts
• ✅ Tab-Struktur nach OETO-Standard

Bekannte Issues:

• Keine Backend-Integration
• Mock-Daten only
• Limitierte Interaktivität

---

Hinweis für Entwickler: Dies ist ein Prototyp zur Demonstration der UI/UX. Die vollständige Implementierung erfordert Backend-Integration, Datenpersistenz, Validierung und erweiterte Features gemäß der Roadmap.

Bei Fragen kontaktieren Sie bitte [Projektleiter/Tech Lead].