170 lines
5.7 KiB
Markdown
170 lines
5.7 KiB
Markdown
# 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.
|
||
```
|