Dashboard/features/dashboard/pages/KundenSeite.tsx

"use client";

import React from "react";
import { PageContainer, Raster } from "../components/layout/PageContainer";
import { KPICard } from "../components/cards/KPICard";
import { ChartCard } from "../components/cards/ChartCard";
import { BalkenVertikal } from "../components/charts/BalkenVertikal";
import { BalkenHorizontal } from "../components/charts/BalkenHorizontal";
import { Donut } from "../components/charts/Donut";
import { DataTable, type Spalte } from "../components/tables/DataTable";
import {
  berechneTrend,
  formatDatum,
  formatEuro,
  formatEuroKompakt,
  formatProzent,
  formatZahl,
  tageLabel,
} from "../utils/formatters";
import { STATUS_TEXT } from "../utils/chartTheme";
import type { Kunde } from "../data/types";
import { SeitenZustand } from "../components/layout/SeitenZustand";
import type { VMState } from "../view-models";
import type { KundenDaten } from "../view-models/kunden.vm";

export function KundenSeite({ vm }: { vm: VMState<KundenDaten> }) {
  if (vm.status !== "ready") {
    return <SeitenZustand vm={vm} />;
  }
  const d = vm.data;

  const spalten: Spalte<Kunde>[] = [
    {
      key: "name",
      titel: "Kunde",
      breite: "26%",
      zelle: (k) => (
        <div className="flex flex-col">
          <span className="font-medium">{k.name}</span>
          <span className="text-[11px] text-text-neutral-tertiary">{k.typ}</span>
        </div>
      ),
      sortWert: (k) => k.name,
    },
    {
      key: "quelle",
      titel: "Quelle",
      zelle: (k) => <span className="text-text-neutral-secondary">{k.quelle}</span>,
      sortWert: (k) => k.quelle,
    },
    {
      key: "auftraege",
      titel: "Aufträge",
      numerisch: true,
      zelle: (k) => formatZahl(k.auftraegeGesamt),
      sortWert: (k) => k.auftraegeGesamt,
    },
    {
      key: "umsatz",
      titel: "Umsatz",
      numerisch: true,
      zelle: (k) => <span className="font-medium">{formatEuro(k.umsatzGesamt)}</span>,
      sortWert: (k) => k.umsatzGesamt,
    },
    {
      key: "zahlung",
      titel: "Ø Zahlung",
      numerisch: true,
      zelle: (k) => (
        <span
          className={k.zahlungsmoralTage > 30 ? "font-medium" : ""}
          style={k.zahlungsmoralTage > 30 ? { color: STATUS_TEXT.warnung } : undefined}
        >
          {tageLabel(k.zahlungsmoralTage)}
        </span>
      ),
      sortWert: (k) => k.zahlungsmoralTage,
    },
    {
      key: "letzter",
      titel: "Letzter Auftrag",
      zelle: (k) =>
        k.letzterAuftragAm ? (
          formatDatum(k.letzterAuftragAm)
        ) : (
          <span className="text-text-neutral-subtle">—</span>
        ),
      sortWert: (k) => k.letzterAuftragAm ?? "",
    },
  ];

  return (
    <>

      <PageContainer>
        <Raster spalten={5}>
          <KPICard
            label="Kunden gesamt"
            wert={formatZahl(d.kundenGesamt)}
            zusatz={`${formatZahl(d.kundenMitAuftrag)} mit mindestens einem Auftrag`}
            icon="Users"
            bezug="stichtag"
          />
          <KPICard
            label="Neue Kunden"
            wert={formatZahl(d.neueKunden)}
            zusatz="Nach Anlagedatum gezählt"
            trend={berechneTrend(d.neueKunden, d.neueKundenVorher)}
            icon="UserPlus"
            verlauf={d.sparkline}
          />
          <KPICard
            label="Wiederkehrende Kunden"
            wert={formatProzent(d.wiederkehrendProzent, 0)}
            zusatz="Mehr als ein Auftrag"
            icon="Repeat"
            bezug="stichtag"
          />
          <KPICard
            label="Ø Kundenwert"
            wert={formatEuro(d.kundenwert)}
            zusatz="Je Kunde mit mindestens einem Auftrag"
            icon="CircleDollarSign"
            bezug="gesamt"
          />
          <KPICard
            label="Reaktivierbar"
            wert={formatZahl(d.inaktive.length)}
            zusatz="Über 12 Monate ohne Auftrag"
            icon="Clock"
            bezug="stichtag"
            akzent={d.inaktive.length > 0 ? "warnung" : "neutral"}
          />
        </Raster>

        <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-3">
          <ChartCard
            id="kunden-entwicklung"
            titel="Neukunden im Zeitverlauf"
            untertitel="Anlagedatum des Kundendatensatzes"
            className="xl:col-span-2"
          >
            <BalkenVertikal daten={d.entwicklung} formatWert={(w) => formatZahl(w)} hoehe={250} nurGanzzahlen />
          </ChartCard>

          <ChartCard
            id="kunden-quelle"
            titel="Kunden nach Quelle"
            untertitel="Wie der Erstkontakt zustande kam"
            hinweis="Empfehlungen und Bestandskunden zusammen zeigen, wie stark der Betrieb ohne Werbebudget wächst."
          >
            <Donut
              daten={d.nachQuelle}
              formatWert={(w) => formatZahl(w)}
              hoehe={220}
              mitteLabel="Kunden"
            />
          </ChartCard>
        </div>

        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2">
          <ChartCard id="kunden-typ" titel="Kundenstruktur" untertitel="Privat, Gewerbe, Verwaltung">
            <Donut
              daten={d.nachTyp}
              formatWert={(w) => formatZahl(w)}
              hoehe={200}
              mitteLabel="Kunden"
            />
          </ChartCard>


          <ChartCard
            id="kunden-top"
            titel="Top-Kunden nach Umsatz"
            untertitel="Bezahlter Gesamtumsatz"
          >
            <BalkenHorizontal daten={d.topKunden} formatWert={formatEuroKompakt} />
          </ChartCard>
        </div>

        <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-2">
          <ChartCard
            id="kunden-inaktiv"
            titel={`Reaktivierungspotenzial (${d.inaktive.length})`}
            untertitel="Kunden mit Historie, aber über 12 Monate ohne Auftrag"
          >
            <DataTable
              zeilen={d.inaktive}
              spalten={spalten.filter((s) => s.key !== "zahlung")}
              proSeite={6}
              suchFelder={(k) => `${k.name} ${k.ort} ${k.quelle}`}
              leerText="Alle Kunden waren zuletzt aktiv"
            />
          </ChartCard>

          <ChartCard
            id="kunden-zahlung"
            titel={`Auffällige Zahlungsmoral (${d.auffaellige.length})`}
            untertitel="Durchschnittlich über 30 Tage bis zum Zahlungseingang"
          >
            <DataTable
              zeilen={d.auffaellige}
              spalten={spalten.filter((s) => s.key !== "letzter")}
              proSeite={6}
              suchFelder={(k) => `${k.name} ${k.ort}`}
              leerText="Keine Auffälligkeiten"
            />
          </ChartCard>
        </div>

      </PageContainer>
    </>
  );
}