Files
Dashboard/docs/NAVIGATION.md
T
dejanandClaude Opus 5 e85ceb6f9d feat(nav): Seitenleiste der Software spiegeln, Analytics als ein Menüpunkt
Der Prototyp hatte eine eigene Seitenleiste mit den fünf Analyse-Seiten als
Menüpunkten. Die Software hat eine andere Navigation, in der Analytics noch gar
nicht vorkommt. Beides zusammen ergab kein Bild davon, wo die Analyse später
sitzt.

Jetzt:
- Die Seitenleiste spiegelt die von HiveGrid Cloud — dieselbe Komponente
  (SidebarWithSections aus der Cloud-Fassung portiert, inkl. der dortigen
  lokalen Fixes: Collapse-Breite, verdrahteter Toggle, Logo-Slot, Hover-Sweep),
  dieselben Gruppen, dieselbe Reihenfolge, dasselbe Logo.
- 'Analytics' ist ein einzelner Menüpunkt, gleichrangig neben 'Dashboard'.
- Die fünf Analyse-Seiten sind darin über Reiter erreichbar, nicht als
  Unterpunkte in der Navigation. Zwei Navigationsebenen für dieselbe Sache
  würden nur konkurrieren. Die Reiter folgen dem Hausmuster aus
  SettingsHubShell (Link um Tabs.Item), damit jeder Reiter eine echte Adresse
  hat und mittelklickbar bleibt.
- Routen: /analytics, /analytics/finanzen, /auftraege, /kunden, /team.
  '/' leitet auf /analytics; das Dashboard liegt in der Software unter '/'.
- Alle übrigen Einträge sind Kontext: Sie zeigen den Ort in der fertigen
  Anwendung und melden beim Klick, dass sie zur Software gehören.

Kopfzeile und Filterleiste sind aus den fünf Seiten in die Analytics-Hülle
gewandert — sie sind für alle gleich, und der Filterzustand gilt bereichsweit.

Nebenbei: @radix-ui/react-slot war eine Phantom-Dependency (nur transitiv über
@subframe/core vorhanden, vom portierten IconButton direkt importiert) und ist
jetzt deklariert. verify-layout prüfte noch die alten Routen und lief damit auf
404-Seiten, die naturgemäß keine Kollisionen haben — Routen korrigiert und eine
Absicherung ergänzt, die bei Statuscode >= 400 abbricht.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
2026-08-29 20:25:04 +02:00

6.2 KiB
Raw Blame History

Navigation und Seitenaufbau

Struktur

Die Seitenleiste spiegelt die von HiveGrid Cloud — dieselbe Komponente (ui/components/SidebarWithSections), dieselben Gruppen, dieselbe Reihenfolge:

HIVEGRID
├── Dashboard          gehört zur Software, hier nicht enthalten
├── Analytics          ◄── der Prototyp lebt hier   /analytics
├── Aufgaben           gehört zur Software
├── Kunden
│   ├── Kontakte · Leads
├── Projekte
│   ├── Pipelines · Plantafel · Dateien
├── Kommunikation
│   ├── Postfach · Formulare · Telefonie
├── Organisation
│   └── Termine
├─────────────────────
├── Komponenten        Bausteingalerie des Prototyps   /komponenten
└── Einstellungen      gehört zur Software

Analytics ist ein einzelner Menüpunkt, kein aufklappbarer Bereich. Die fünf Analyse-Seiten sind darin über Reiter erreichbar:

/analytics            Übersicht
/analytics/finanzen   Finanzen
/analytics/auftraege  Aufträge
/analytics/kunden     Kunden
/analytics/team       Team

Zwei Navigationsebenen für dieselbe Sache — Unterpunkte in der Seitenleiste und Reiter — würden nur konkurrieren. Die Reiter folgen dem Hausmuster aus SettingsHubShell.tsx im Zielsystem: ein Link um ein Tabs.Item, damit jeder Reiter eine echte Adresse hat und mittelklickbar bleibt.

Nur Analytics und Komponenten führen hier irgendwohin. Die übrigen Einträge zeigen, wo die Analyse in der fertigen Anwendung sitzt, und melden beim Klick, dass sie zur Software gehören. Eine tote Schaltfläche ohne Rückmeldung wäre schlechter als gar keine.


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.