feat(dashboard): Analytics-Dashboard als Gestaltungsvorlage zur Übergabe

UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen
SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung,
nicht der Produktivbetrieb.

Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten),
26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein
deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026).

Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner
(Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und
IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste
Abweichungen stehen in docs/HERKUNFT.md.

Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM,
KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in
HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX

app/auftraege/page.tsx

@@ -0,0 +1,5 @@
+import { AuftraegeSeite } from "@/features/dashboard/pages/AuftraegeSeite";
+
+export default function Page() {
+  return <AuftraegeSeite />;
+}

app/finanzen/page.tsx

@@ -0,0 +1,5 @@
+import { FinanzenSeite } from "@/features/dashboard/pages/FinanzenSeite";
+
+export default function Page() {
+  return <FinanzenSeite />;
+}

app/globals.css

@@ -0,0 +1,79 @@
+@import "tailwindcss";
+@import "../ui/theme.css";
+
+/*
+ * HiveGrid Analytics Dashboard
+ * ---------------------------------------------------------------
+ * Chrome (Sidebar, Karten, Buttons, Tabellen) nutzt die Subframe-
+ * Design-Tokens aus ui/theme.css.
+ * Die Datenvisualisierung folgt IBM Carbon (siehe docs/DESIGN-SYSTEM.md)
+ * und definiert eigene Tokens, damit Charts unabhaengig vom Brand-Theme
+ * lesbar und barrierearm bleiben.
+ */
+
+:root {
+  /* --- Carbon Data-Viz Tokens (Light Theme) --- */
+  --dv-grid: #e0e0e0;          /* cds-layer-accent-01  - Gridlines */
+  --dv-axis: #8d8d8d;          /* cds-border-strong-01 - Achsenlinie */
+  --dv-text: #161616;          /* cds-text-primary     - Chart-Titel */
+  --dv-text-secondary: #525252;/* cds-text-secondary   - Achsenlabels */
+  --dv-tooltip-bg: #393939;    /* cds-background-inverse */
+  --dv-tooltip-fg: #ffffff;    /* cds-text-inverse */
+
+  /* Vertikaler Rhythmus fuer Dashboard-Raster (8px-System) */
+  --dv-card-padding: 16px;
+  --dv-card-gap: 16px;
+}
+
+body {
+  background: var(--color-neutral-50, #fafafa);
+  color: var(--color-text-neutral-primary);
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+/*
+ * Fokus-Sichtbarkeit.
+ * Eine Regel fuer alles Interaktive statt focus:-Klassen an jedem Element.
+ * :focus-visible zeigt den Ring nur bei Tastaturbedienung, nicht beim Klick.
+ */
+:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 3px rgb(7 145 240 / 0.4));
+  border-radius: var(--radius-sm, 4px);
+}
+
+/* Radix-Portale (Dropdowns, Tooltips) ueber den Sticky-Header heben. */
+[data-radix-popper-content-wrapper] {
+  z-index: 1000 !important;
+}
+
+/* Recharts: Fokus-Outline der SVG-Wrapper unterdruecken, Cursor vereinheitlichen. */
+.recharts-wrapper:focus,
+.recharts-surface:focus {
+  outline: none;
+}
+.recharts-sector,
+.recharts-rectangle,
+.recharts-dot {
+  transition: opacity 140ms ease, filter 140ms ease;
+}
+
+/* Scrollbars in Karten dezent halten. */
+.dv-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.dv-scroll::-webkit-scrollbar-thumb {
+  background: #d4d4d4;
+  border-radius: 999px;
+}
+.dv-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+@media print {
+  .dv-no-print {
+    display: none !important;
+  }
+}

app/komponenten/page.tsx

@@ -0,0 +1,5 @@
+import { KomponentenSeite } from "@/features/dashboard/pages/KomponentenSeite";
+
+export default function Page() {
+  return <KomponentenSeite />;
+}

app/kunden/page.tsx

@@ -0,0 +1,5 @@
+import { KundenSeite } from "@/features/dashboard/pages/KundenSeite";
+
+export default function Page() {
+  return <KundenSeite />;
+}

app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { AppShell } from "@/features/dashboard/components/layout/AppShell";
+import { DashboardProviders } from "@/features/dashboard/context/DashboardProviders";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "HiveGrid · Analytics Dashboard",
+  description:
+    "UI/UX-Prototyp der Analytics-Dashboards für Handwerksbetriebe (SHK) — Übergabe an die Entwicklung",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="de" className={`${inter.variable} h-full antialiased`}>
+      <body className="min-h-full">
+        <DashboardProviders>
+          <AppShell>{children}</AppShell>
+        </DashboardProviders>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,5 @@
+import { UebersichtSeite } from "@/features/dashboard/pages/UebersichtSeite";
+
+export default function Page() {
+  return <UebersichtSeite />;
+}

app/team/page.tsx

@@ -0,0 +1,5 @@
+import { TeamSeite } from "@/features/dashboard/pages/TeamSeite";
+
+export default function Page() {
+  return <TeamSeite />;
+}