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
97 lines
5.4 KiB
Markdown
97 lines
5.4 KiB
Markdown
# 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.
|