Files
Dashboard/features/dashboard/components/layout/navigation.ts
T
dejanandClaude Opus 5 885c7b9609 Komponentenseite auf ihren tatsaechlichen Zweck schaerfen
Sie war als "Referenz fuer den Einbau" ausgeschildert. Das trifft es nicht:
Wer den Prototyp einbaut, liest Code und Doku und kann sich keine gerenderte
Seite ansehen — die Datei-Pfade und DESIGN-SYSTEM.md tun diese Arbeit
ohnehin. Nuetzlich ist die Seite fuer die Abstimmung mit Menschen: Auf den
Analyse-Seiten sieht man von jedem Baustein immer nur den Zustand, den die
Daten gerade hergeben.

Neu ausgeschildert, und die fehlenden Zustaende ergaenzt:

- Seitenzustaende (laedt / leer / Fehler). In HiveGrid sind alle fuenf
  VMState-Zustaende Pflicht, im Prototyp ist keiner davon je zu sehen, weil
  die Demo-Daten immer liefern. Gestaltet werden muessen sie trotzdem —
  "laedt", "nichts gefunden" und "kaputt" sind drei verschiedene Aussagen.

- Dashboard-Kacheln: Begruessung, WidgetKachel, reservierte Kachel. Das
  Dashboard benutzt nicht ChartCard, sondern einen eigenen Rahmen; bisher war
  der in der Galerie gar nicht vertreten.

Zwei Fehler dabei gefunden und behoben:

- Die Regelliste nannte noch den dunklen Tooltip (#393939). Seit Carbon v11
  ist er hell (#ffffff auf #161616); im Code war das laengst umgestellt, auf
  dieser Seite nicht. Eine Referenzseite, die eine ueberholte Regel behauptet,
  ist schlimmer als keine.

- Die Abschnittstexte beginnen mit einem Dateipfad, und ein Pfad ist ein Wort
  ohne Trennstelle. Bei 375 px lief
  "features/dashboard/components/layout/SeitenZustand.tsx" neun Pixel ueber
  den Rand — von verify:layout gefunden.

Die Regel zu den Kartenhoehen aus dem letzten Commit steht jetzt auch hier.

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

141 lines
4.5 KiB
TypeScript

import type { SeitenId } from "../../data/filtering";
/**
* Navigationsstruktur des Prototyps.
*
* Hier stehen **nur unsere beiden Features**: Dashboard und Analytics. Alles
* andere — Kontakte, Leads, Pipelines, Postfach, Termine, Einstellungen — ist
* in der Seitenleiste der Software bereits vorhanden und wird hier nicht
* verdoppelt. Der Prototyp zeigt, was dazukommt, nicht was schon da ist.
*
* Gerendert wird mit derselben Komponente wie in der Software
* (`ui/components/SidebarWithSections`, aus der Cloud-Fassung portiert), damit
* Aussehen und Verhalten übereinstimmen.
*
* „Dashboard" und „Analytics" sind zwei Features mit zwei Zuschnitten: Das
* Dashboard ist eine einzelne Seite aus Kacheln, Analytics ein Bereich mit
* fünf Seiten und innerer Leiste (siehe `docs/SCOPE-ANALYTICS-DASHBOARD.md`).
*/
export type NavZiel = { art: "route"; href: string };
export interface NavEintrag {
id: string;
label: string;
/** Icon-Name aus @subframe/core (ohne das Präfix "Feather"). */
icon: string;
ziel: NavZiel;
}
export interface NavGruppe {
id: string;
/** Leerer Titel = Startgruppe ohne Überschrift, wie in der Software. */
titel: string;
eintraege: NavEintrag[];
}
/** Einstieg des Analytics-Bereichs. */
export const ANALYTICS_START = "/analytics";
/** Der Begrüßungsbildschirm — Ziel der Weiterleitung von „/", wie in der Software. */
export const DASHBOARD_START = "/dashboard";
export const NAV_GRUPPEN: NavGruppe[] = [
{
id: "start",
titel: "",
eintraege: [
{
// Der Begrüßungsbildschirm — eine einzelne Seite, deshalb ohne innere
// Leiste. Er ist das Ziel der Weiterleitung von „/".
id: "dashboard",
label: "Dashboard",
icon: "LayoutDashboard",
ziel: { art: "route", href: DASHBOARD_START },
},
{
// Der neue Menüpunkt. Die fünf Analyse-Seiten sind ausschließlich hier
// drin über Reiter navigierbar, nicht als Unterpunkte in der Leiste.
id: "analytics",
label: "Analytics",
icon: "BarChart",
ziel: { art: "route", href: ANALYTICS_START },
},
],
},
];
/**
* Unterer Bereich, durch einen Trenner abgesetzt — wie in der Software.
*
* Hier steht nur, was zum Prototyp gehört: die Bausteingalerie. Sie ist für
* die **Abstimmung** da, nicht für die Umsetzung — sie zeigt jeden Baustein in
* allen Zuständen, auch in denen, die die Demo-Daten nie erzeugen (negativer
* Trend, leer, Fehler, „kleiner ist besser"). Wer den Prototyp einbaut,
* braucht sie nicht: Dafür sind die Datei-Pfade und `docs/DESIGN-SYSTEM.md`
* maßgeblich.
*
* Kein Produktfeature, wandert beim Einbau nicht mit.
*/
export const NAV_SEKUNDAER: NavEintrag[] = [
{
id: "komponenten",
label: "Komponenten",
icon: "Component",
ziel: { art: "route", href: "/komponenten" },
},
];
/**
* Die fünf Analyse-Seiten. Sie erscheinen **nicht** in der Seitenleiste,
* sondern als Reiter innerhalb des Menüpunkts „Analytics" — dem Hausmuster
* für Unter-Navigation in HiveGrid (`SettingsHubShell.tsx`: ein `Link` um ein
* `Tabs.Item`, damit jeder Reiter eine echte Navigation ist).
*/
export interface AnalyseSeite {
id: SeitenId;
label: string;
href: string;
beschreibung: string;
/** Icon-Name aus @subframe/core (ohne das Präfix "Feather"). */
icon: string;
}
export const ANALYSE_SEITEN: AnalyseSeite[] = [
{
id: "uebersicht",
icon: "LayoutDashboard",
label: "Übersicht",
href: "/analytics",
beschreibung: "Die Kennzahlen, nach denen der Betrieb gesteuert wird — Umsatz, Auslastung, offene Posten und Handlungsbedarf.",
},
{
id: "finanzen",
icon: "Euro",
label: "Finanzen",
href: "/analytics/finanzen",
beschreibung: "Umsatz, Zahlungseingang und offene Forderungen — die Sicht der Buchhaltung auf den Betrieb.",
},
{
id: "auftraege",
icon: "ClipboardList",
label: "Aufträge",
href: "/analytics/auftraege",
beschreibung: "Von der Anfrage bis zur Abnahme — wo die Vorgänge stehen, was gebunden ist und was über Termin läuft.",
},
{
id: "kunden",
icon: "Users",
label: "Kunden",
href: "/analytics/kunden",
beschreibung: "Woher Kunden kommen, wie viel sie bringen und wo Nachfassen lohnt.",
},
{
id: "team",
icon: "HardHat",
label: "Team",
href: "/analytics/team",
beschreibung: "Auslastung, produktive Stunden und Abschlüsse der Monteure — die Kennzahl hinter der Terminplanung.",
},
];