Files
Dashboard/features/dashboard/components/layout/navigation.ts
T
dejanandClaude Opus 5 831a6ec9ad Dashboard als Widget-Flaeche bauen, Platzhalter ersetzen
Das Dashboard ist ein eigenes Feature neben Analytics: der
Begruessungsbildschirm, nicht ein zweiter Analysebereich. Es zeigt heute nur
Auswertungen, ist aber so gebaut, dass die spaeteren Bereiche als weitere
Kacheln dazukommen und nicht als Umbau.

Aufbau: Begruessung, vier Kennzahlen (je ein Link in die Analyse),
Handlungsbedarf, vier Diagramme, drei reservierte Plaetze.

Drei Entscheidungen, die dabei getroffen wurden:

- Kein seitenweiter Filter. Jede Kachel traegt ihren eigenen Zeitraum und
  schreibt ihn in den Kopf. Das ist das Bedienmodell der Software (P11) und
  war die unbequemere Variante; eine Filterleiste haette beim Einbau alle
  Kacheln wieder auseinandergenommen.

- Das Raster ist aus DashboardPage.tsx der Software uebernommen, nicht
  erfunden: dieselben Klassen, dieselbe Ableitung aus size.w und position.x.
  Der Software fehlt dafuer eine Zeile (position.x === 9); vermerkt in
  WidgetRaster.tsx.

- Die reservierten Plaetze zeigen keine erfundenen Zahlen. "2 neue Antraege"
  aus dem Nichts liest sich in einer Abnahme wie eine fertige Funktion.

Absichtliche Doppelung: Der Handlungsbedarf steht jetzt auf dem Dashboard und
weiterhin auf der Analytics-Uebersicht. Ihn dort zu entfernen haette die
offene Frage 5.1 mitentschieden. Dokumentiert in Abschnitt 3a des
Scope-Papiers, aufzuloesen vor dem Port.

Nebenbei zwei Fehler behoben, die auch Analytics betrafen:

- Die Beschriftungen der Zeitachse liefen in schmalen Karten ineinander
  (fuenf Kalenderwochen brauchen 200px, eine halbe Kachel bei 768px hat 150).
  Recharts duennt sie jetzt selbst aus und haelt Anfang und Ende.

- Das Zeitraum-Etikett im Kachelkopf schaltete per Viewport-Breakpoint, die
  Kachelbreite haengt aber am Raster. Bei 1024px blieben dem Untertitel 77px,
  und er lief ins Diagramm. Jetzt Container-Query.

Die Wurzel leitet auf /dashboard statt /analytics — wie in der Software, wo
nach der Anmeldung der Begruessungsbildschirm steht.

tsc, lint, build, verify:carbon und verify:layout (7 Seiten x 9 Breiten)
laufen sauber.

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

134 lines
4.2 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 für die
* Entwicklung. Sie ist kein Produktfeature und 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.",
},
];