5.7 KiB

Raw Blame History

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

<Link href="/admin/statistik">Statistik</Link>

3. Statistik-API anpassen (`app/api/admin/statistik/route.ts`)

Die API aggregiert aktuell folgende Felder:

{
  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

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

PlanPosition Interface:

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.

5.7 KiB Raw Blame History Unescape Escape