# Modul: KPI-Dashboard (Admin-Statistik)

> Server-seitig gerendertes Admin-Statistik-Dashboard: 4 KPI-Cards (Anfragen, bestätigte Mieten, Miettage, Umsatz), Umsatz-Balkendiagramm (letzte 6 Monate, CSS-basiert), Maschinenauslastungs-Tabelle (Top-Ressourcen), integrierter Gantt-Kalender (±3 Monate). Vollständig ohne externe Chart-Bibliothek.

---

## Enthaltene Dateien

| Ziel im neuen Projekt | Inhalt |
|---|---|
| `app/admin/statistik/page.tsx` | Server Component: KPI-Cards + Umsatzdiagramm + Gantt |
| `app/admin/statistik/GanttKalender.tsx` | Wiederverwendbare Gantt-Komponente (auch in Modul 04) |
| `app/api/admin/statistik/route.ts` | GET: Aggregierte KPI-Daten (requireAdmin) |

---

## Voraussetzungen

Keine zusätzlichen npm-Pakete. Benötigt:
- `lib/supabase.ts` (Service Client)
- `lib/admin-auth.ts` (Modul 02: `requireAdmin`)
- Modul 04 (Reservation System) – Tabellen `anfragen`, `anfragen_positionen`

---

## Umgebungsvariablen

Keine zusätzlichen.

---

## Datenbank

Liest aus bestehenden Tabellen (kein Schema-Change nötig):
- `anfragen` – Anzahl, Status-Verteilung, Zeiträume
- `anfragen_positionen` – Tagessätze, Miettage, Umsatz
- `anfrage_status_audit` – optional für Audit-Timeline

---

## Einbindung Schritt für Schritt

### 1. Dateien kopieren

### 2. Admin-Navigation ergänzen
```tsx
<Link href="/admin/statistik">Statistik</Link>
```

### 3. Statistik-API anpassen (`app/api/admin/statistik/route.ts`)
Die API aggregiert aktuell folgende Felder:
```ts
{
  kpis: {
    anfragen_gesamt: number,
    bestaetigt: number,
    umsatz_gesamt: number,
    miettage_gesamt: number
  },
  monatsUmsatz: Array<{ monat: string, umsatz: number, anzahl: number }>,  // 6 Monate
  maschinenAuslastung: Array<{ name: string, tage: number, umsatz: number }>,
  planDaten: PlanPosition[]  // für GanttKalender
}
```

Abfrage anpassen wenn Tabellen-/Feldnamen abweichen.

### 4. Seite an eigenes Design anpassen (`app/admin/statistik/page.tsx`)
- KPI-Cards: Farben, Icons, Bezeichnungen
- Diagramm: Anzahl Monate, Skala
- Auslastungs-Tabelle: Spalten

### 5. GanttKalender-Props
```tsx
<GanttKalender
  planDaten={planDaten}       // PlanPosition[] aus API
  heuteISO="2026-04-25"
  startISO="2026-03-01"       // 3 Monate Vorlauf
  tageGesamt={180}            // ±3 Monate
/>
```

`PlanPosition` Interface:
```ts
interface PlanPosition {
  id: string;
  anfrage_id: string;
  maschine_name: string;
  maschine_kategorie: string;
  mietbeginn: string;       // "YYYY-MM-DD"
  mietende: string;         // "YYYY-MM-DD"
  gesamt_tage: number;
  tagessatz: number | null;
  anfrage_status: string;   // "offen"|"bestaetigt"|"abgelehnt"|"abgeschlossen"
  firma: string | null;
}
```

---

## Anpassungspunkte

| Was | Wo |
|---|---|
| KPI-Bezeichnungen | `app/admin/statistik/page.tsx` → KPI-Card Labels |
| Umsatz-Formel (Tagessatz × Tage) | `app/api/admin/statistik/route.ts` → `umsatz_calc` |
| Nur bestätigte Anfragen zählen | `app/api/admin/statistik/route.ts` → `status = 'bestaetigt'` Filter |
| Diagramm Zeitraum (6 Monate) | `app/api/admin/statistik/route.ts` → `INTERVAL '6 months'` |
| Gantt Zeitraum | `app/admin/statistik/page.tsx` → `startISO` + `tageGesamt` |
| Status-Farben im Gantt | `app/admin/statistik/GanttKalender.tsx` → `STATUS_COLORS` |

---

## Integrations-Prompt

Kopiere diesen Prompt in eine neue KI-Konversation, nachdem du die `files/` in dein Projekt kopiert hast. Ersetze alle `[PLATZHALTER]`.

```
Ich integriere das KPI-Dashboard (Statistik-Übersicht mit Gantt) in mein Next.js/Supabase-Projekt.

PROJEKT-KONTEXT:
- Modul 02 (Admin-Auth) ist bereits integriert (requireAdmin verfügbar)
- Modul 04 (Reservierungssystem) ist bereits integriert (Tabellen: anfragen, anfragen_positionen, anfrage_status_audit)
- Ressourcen-Bezeichnung: [MASCHINEN/ARTIKEL/...]
- Währung: [EUR / CHF / ...]

BEREITS KOPIERTE DATEIEN (aus modules/07-kpi-dashboard/files/):
- app/admin/statistik/page.tsx
- app/admin/statistik/GanttKalender.tsx
- app/api/admin/statistik/route.ts

AUFGABEN – führe sie der Reihe nach aus:

1. API ANPASSEN: Lies app/api/admin/statistik/route.ts vollständig.
   Prüfe ob alle referenzierten Tabellen-/Feldnamen mit den tatsächlichen übereinstimmen:
   - Tabelle "anfragen" → Status-Felder, Datum-Felder
   - Tabelle "anfragen_positionen" → Preis-Felder (tagessatz, gesamt_preis)
   Passe ggf. Feldnamen in den SQL-Abfragen an.

2. KPI-TEXTE ANPASSEN: Lies app/admin/statistik/page.tsx.
   Passe folgende Labels an die eigene Domäne an:
   - "Mietanfragen" → "[ANFRAGEN_BEZEICHNUNG]"
   - "Bestätigte Mieten" → "[BESTÄTIGTE_BEZEICHNUNG]"
   - "Miettage" → "[ZEITEINHEIT_BEZEICHNUNG]"
   - "Umsatz" → "Umsatz ([WÄHRUNG])"
   Ersetze alle Vorkommen von "Mietpark Hahn" und "Maschine/Gerät" durch die eigenen Begriffe.

3. GANTT ANPASSEN: Lies app/admin/statistik/GanttKalender.tsx.
   Falls Modul 04 bereits mit angepassten Ressourcen-Bezeichnungen eingebunden wurde,
   prüfe ob die PlanPosition-Felder noch stimmen (maschine_name, maschine_kategorie).
   Passe den Tooltip-Text an (aktuell: "Firma – Maschine – X Tage").

4. ADMIN-NAV ergänzen: Füge einen Link zu /admin/statistik hinzu.

5. GANTT ZEITRAUM konfigurieren: Lies app/admin/statistik/page.tsx.
   Passe startISO und tageGesamt an die gewünschte Standardansicht an:
   - Kurzfristiger Betrieb (< 1 Monat): tageGesamt=60
   - Mittelfristiger Betrieb: tageGesamt=180 (Standard)
   - Langzeitplanung: tageGesamt=365

6. TEST:
   a) Dev-Server starten, /admin/statistik aufrufen
   b) KPI-Cards zeigen Zahlen aus anfragen-Tabelle
   c) Umsatzdiagramm zeigt letzte 6 Monate
   d) Gantt-Kalender zeigt bestätigte Anfragen als Balken
   e) Balken anklicken → Weiterleitung zu /admin/anfragen/[id]

Lies jede Datei vor dem Bearbeiten. Melde wenn alle Schritte abgeschlossen sind.
```