dejanandClaude Opus 5
aa86dfe44d
Zwei Korrekturen aus dem Review. 1. Die Seitenleiste zeigte die komplette Software-Navigation nach. Falsch: Kontakte, Leads, Pipelines, Postfach, Termine und Einstellungen stehen dort bereits, der Prototyp verdoppelt sie nur. Jetzt stehen in der Leiste ausschließlich unsere beiden Features — Dashboard (eigenes Feature, hier nicht enthalten) und Analytics — plus die Bausteingalerie im sekundären Bereich, die zum Prototyp und nicht zum Produkt gehört. 2. Die Schrift stimmte nicht. Die Software nutzt Instrument Sans, selbst gehostet als variable Schrift. Der Prototyp lud Inter über next/font, während ui/theme.css für sämtliche Subframe-Typo-Token bereits 'Instrument Sans' verlangte — die Schrift war aber nie geladen und fiel auf die Systemschrift zurück. Ergebnis waren zwei verschiedene Schriften auf einer Seite, keine davon die der Software. Jetzt liegen dieselben woff2-Dateien unter public/fonts/, mit denselben @font-face-Regeln und derselben Alias-Zuordnung für Komponenten, die noch direkt auf Inter verweisen. next/font entfällt. Der Layout-Prüfer lief nach dem Schriftwechsel erneut durch: andere Metrik, andere Textbreiten — weiterhin keine Kollisionen über 6 Seiten × 7 Breiten. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
6.1 KiB
Navigation und Seitenaufbau
Struktur
Die Seitenleiste zeigt nur unsere beiden Features. Kontakte, Leads, Pipelines, Postfach, Termine und Einstellungen stehen bereits in der Seitenleiste der Software und werden hier nicht verdoppelt — der Prototyp zeigt, was dazukommt, nicht was schon da ist.
HIVEGRID
├── Dashboard eigenes Feature, nicht Teil dieses Prototyps
└── Analytics ◄── der Prototyp lebt hier /analytics
├─────────────────────
└── Komponenten Bausteingalerie des Prototyps /komponenten
Gerendert wird mit derselben Komponente wie in der Software
(ui/components/SidebarWithSections, aus der Cloud-Fassung portiert) und
derselben Schrift (Instrument Sans, selbst gehostet aus denselben Dateien).
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.
„Dashboard" führt hier nirgendwohin und meldet das beim Klick — es ist ein eigenes Feature, siehe SCOPE-ANALYTICS-DASHBOARD.md.
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.