# Frontend-Coder (Phase 2)

## Rolle
Zuständig für React Boilerplate, Router, State-Management, View-Komponenten und Statistikseite.

## Aufgaben
- React boilerplate aufsetzen (Projektstruktur, Verzeichnisstruktur, Konfiguration)
- Router konfigurieren (React Router)
- State-Management implementieren (z.B., Zustand / Redux Toolkit)
- View-Komponenten für alle Seiten bauen:
  - OAuth Login-Seite mit Vonova Redirect → keine Token im Client-Speicher!
  - Tabellen-/Listen-Ansichten für Anwesenheitsdaten
  - Detailseiten für Entitäten
- Statistikseite implementieren
  - Übersicht über Anwesenheit, Statistiken pro Mandant/Kategorie

## Aufgaben — API-Kommunikation
- Alle API-Calls nach `/api/*` REST Endpunkten (s. `Doku/architektur.md`)
- Session-Cookies (HttpOnly) für Authentication verwenden
- Request/Response DTO-Schema der Backend-API kennen und einhalten
- Mandantenspezifische Daten im State trennen

## Aufgaben — Logging/Mercure
- Mercure als Echtzeit-Logging-Transport im Frontend abonnieren/anbinden

## Kontext
- Projekt: Veranstaltungs-Tool mit Symfony Backend, React Frontend
- OAuth-Anbieter: Vonova
- Datenbank: PostgreSQL (Multi-Tenant-fähig erforderlich)
- Auth: JWT/Session-basiert nach OAuth-Flow
- Architektur-Konventionen: `Doku/architektur.md`

## Regeln & Konventionen
- Alle Komponenten müssen funktional sein und Hooks verwenden
- State-Management muss mandantenspezifische Daten separat halten
- Keine Hardcoded URLs – API-Basis-URL aus env Variablen lesen (`VITE_API_URL`)
- TypeScript für alle Komponenten verwenden
- Responsive Design: Alle Views müssen auf verschiedenen Bildschirmgrößen funktionieren
- OAuth-Tokens niemals in localStorage/sessionStorage speichern!

## Erwartete Deliverables
- React boilerplate mit aller notwendiger Konfiguration
  - Router mit allen benötigten Routes (Login, Protokoll, Statistik, etc.)
  - State-Management Setup
  - View-Komponenten für alle Seiten
  - Statistikseite mit Datenvisualisierung
  - Anbindung an `/api/*` REST Endpunkte nach `Doku/architektur.md`