dejanandClaude Opus 5
b8bf987d0e
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
5.4 KiB
Navigation und Seitenaufbau
Struktur
Seitenleiste (fest, einklappbar auf Icon-Breite)
├── Analyse
│ ├── Übersicht / Kernkennzahlen, Handlungsbedarf
│ ├── Finanzen /finanzen Umsatz, Forderungen, Zahlungsverhalten
│ ├── Aufträge /auftraege Pipeline, Termine, Förderung
│ ├── Kunden /kunden Akquise, Quellen, Reaktivierung
│ └── Team /team Auslastung, Stunden, Abschlüsse
└── Entwicklung
└── Komponenten /komponenten Bausteine und Regeln (nur für die Umsetzung)
Warum Seitenleiste statt Tab-Leiste: Die bestehende HiveGrid-Oberfläche navigiert links. Der Prototyp lässt sich so ohne Umbau der Informationsarchitektur einsetzen. Einklappen schafft Platz für breite Tabellen und das fünfspaltige KPI-Raster.
Aufbau jeder Analyse-Seite
┌──────────────────────────────────────────────────────────────┐
│ Kopfzeile: Breadcrumb · Suche · Benachrichtigungen · Profil │ fest
├──────────────────────────────────────────────────────────────┤
│ Seitenkopf: Titel · Einordnung Aktualisieren Export ⇗ │
├──────────────────────────────────────────────────────────────┤
│ Filterleiste: Zeitraum │ Dimensionen │ zurücksetzen │ klebt oben
│ Aktive Filter als entfernbare Chips │
│ Ausgeblendete Widgets (nur wenn welche versteckt sind) │
├──────────────────────────────────────────────────────────────┤
│ KPI-Reihe (5 Karten, gleiche Höhe) │
│ [nur Übersicht] Handlungsbedarf über volle Breite │
│ Hauptdiagramm (2/3) │ Nebendiagramm (1/3) │
│ Detaildiagramme (2–3, oben bündig) │
│ Arbeitsliste (Tabelle) │
└──────────────────────────────────────────────────────────────┘
Die Reihenfolge folgt der Lesefrage: Wie steht es? → Was ist zu tun? → Wie hat es sich entwickelt? → Woran liegt es?
Auf der Übersicht steht der Handlungsbedarf direkt unter der KPI-Reihe und über die volle Breite. Sie ist die Seite der Geschäftsführung; dort ist „was ist zu tun" die zweite Frage, nicht die letzte. Jede Zeile trägt Betrag und Handlung („Mahnlauf starten", „Nachfassen") — eine Liste ohne Verb ist ein Bericht.
Auf den vier Detailseiten bleibt die Arbeitsliste unten: Dort ist sie die Konsequenz aus dem, was darüber steht.
Gleiche Kartenhöhe nur bei gleicher Struktur. Die KPI-Reihe wird gestreckt,
damit die fünf Karten als ein Objekt lesbar sind. Gemischte Reihen (Diagramm
mit fester Höhe neben Tabelle) stehen auf items-start — Strecken erzeugt dort
nur Weißraum.
Interaktionen
| Element | Verhalten |
|---|---|
| Zeitraum | Heute · 7 Tage · 30 Tage · Quartal · Jahr · Gesamt. Rechnet alle zeitraumbezogenen Kennzahlen und Charts neu, inklusive Vorperiodenvergleich |
| Dimensionsfilter | Mehrfachauswahl mit Suche; wirkt sofort. Nur Filter, die auf der Seite etwas bewirken, werden angeboten |
| Filter-Chips | Jede Einschränkung erscheint als Chip und lässt sich einzeln entfernen |
| Widget ausblenden | ⋯-Menü an jeder Karte. Ausgeblendete Karten erscheinen in der Filterleiste und lassen sich einzeln oder gesammelt zurückholen |
| Hover | Balken, Ringsegmente und Trichterstufen heben sich hervor, die übrigen treten zurück; Verläufe zeigen einen Tooltip mit allen Reihen des Datenpunkts |
| Handlungsbedarf | Jede Zeile ist ein Absprung in die zugehörige Arbeitsliste (im Prototyp Attrappe mit Hinweis) |
| Tastatur | Fokus ist auf allen interaktiven Elementen sichtbar; Filter-Dropdown und Karten-Menü schließen mit Escape und geben den Fokus zurück |
| Ringlegende | Klick hebt ein Segment dauerhaft hervor, erneuter Klick löst es wieder |
| Tabellen | Spaltenkopf sortiert, Suchfeld filtert, Blättern über Pfeile |
| Seitenleiste | Einklappbar; die Auswahl bleibt beim Seitenwechsel erhalten |
Filterauswahl und ausgeblendete Widgets überleben einen Reload
(localStorage, Schlüssel hivegrid.analytics.*).
Seitenabhängige Filterrelevanz
Definiert in features/dashboard/data/filtering.ts:
| Seite | Zeitraum | Gewerk | Auftragsstatus | Kundenquelle | Region | Mitarbeiter |
|---|---|---|---|---|---|---|
| Übersicht | ✓ | ✓ | ✓ | |||
| Finanzen | ✓ | ✓ | ✓ | ✓ | ||
| Aufträge | ✓ | ✓ | ✓ | ✓ | ✓ | |
| Kunden | ✓ | ✓ | ✓ | ✓ | ||
| Team | ✓ | ✓ | ✓ |
Ein Filter, der sichtbar ist aber nichts bewirkt, kostet Vertrauen in die Zahlen. Deshalb werden irrelevante Filter gar nicht erst angeboten — die Auswahl bleibt aber im Hintergrund erhalten und wirkt beim Seitenwechsel wieder.