feat(dashboard): Platzhalterseite statt Hinweis-Toast

Der Menüpunkt 'Dashboard' löste bisher nur einen Toast aus. Ein
Navigationseintrag, der nirgendwohin führt, lässt den Leser im Unklaren, ob
etwas fehlt oder etwas kaputt ist.

Jetzt führt er auf /dashboard: ein Leerzustand nach dem Hausmuster
(ui/components/EmptyState), der benennt, warum hier nichts steht, was später
hinkommt (drei Rollen-Layouts, Widgets teils aus Analytics, teils nicht — offene
HR-Anträge, Aufgaben, Termine) und wo der Zuschnitt dokumentiert ist. Mit einem
Weg zurück nach Analytics.

Dabei:
- EmptyState aus der Cloud-Fassung nachgezogen; unsere Kopie hatte den
  action-Slot noch nicht.
- PageHeader bekommt 'standardAktionen': Auf einer leeren Seite gibt es nichts
  zu aktualisieren oder zu exportieren, also stehen dort auch keine
  Schaltflächen dafür.
- Die Variante 'software' in NavZiel entfällt — jeder Eintrag führt jetzt auf
  eine echte Seite, der Toast-Zweig in der AppShell war damit toter Code.
- verify-layout deckt /dashboard mit ab (jetzt 7 Seiten x 7 Breiten).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
This commit is contained in:
dejanandClaude Opus 5 committed 2026-08-29 20:56:35 +02:00
1 parent 466c079644
commit 7183fad27a
9 files changed
+182 -140

No files matched your search

@@ -7,7 +7,6 @@ import { FeatherBell, FeatherHelpCircle, FeatherSearch } from "@subframe/core";
import { SidebarWithSections } from "@/ui/components/SidebarWithSections";
import { NAV_GRUPPEN, NAV_SEKUNDAER, ANALYSE_SEITEN, type NavEintrag } from "./navigation";
import { FeatherIcon } from "./FeatherIcon";
import { useToast } from "../../context/ToastContext";
import { DATENSATZ_INFO } from "../../data/seed";
import { formatDatum, formatZahl } from "../../utils/formatters";
import { HEUTE } from "../../utils/dateUtils";
@@ -20,24 +19,27 @@ import { HEUTE } from "../../utils/dateUtils";
* Software öffnet, soll dieselbe Navigation sehen; die Übergabe wird dadurch
* eine Frage des Einsetzens und nicht des Übersetzens.
*
* **Nur „Analytics" führt hier irgendwohin.** Die übrigen Einträge zeigen den
* Ort in der fertigen Anwendung und melden beim Klick, dass sie zur Software
* gehören — eine tote Schaltfläche ohne Rückmeldung wäre schlechter als gar
* keine.
* Jeder Eintrag führt auf eine echte Seite. „Dashboard" landet auf einer
* Platzhalterseite, weil es ein eigenes Feature ist und hier nicht gestaltet
* wird — aber ein Menüpunkt, der nur einen Hinweis auslöst, lässt offen, ob
* etwas fehlt oder etwas kaputt ist.
*/
export function AppShell({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const { zeigeToast } = useToast();
const [eingeklappt, setEingeklappt] = React.useState(false);
const istAktiv = (eintrag: NavEintrag) =>
eintrag.ziel.art === "route" &&
(eintrag.ziel.href === "/analytics"
eintrag.ziel.href === "/analytics"
? pathname.startsWith("/analytics")
: pathname.startsWith(eintrag.ziel.href));
: pathname === eintrag.ziel.href;
const renderEintrag = (eintrag: NavEintrag) => {
const item = (
const renderEintrag = (eintrag: NavEintrag) => (
<Link
key={eintrag.id}
href={eintrag.ziel.href}
title={eingeklappt ? eintrag.label : undefined}
className="w-full no-underline"
>
<SidebarWithSections.NavItem
icon={<FeatherIcon name={eintrag.icon} />}
selected={istAktiv(eintrag)}
@@ -45,40 +47,17 @@ export function AppShell({ children }: { children: React.ReactNode }) {
>
{eintrag.label}
</SidebarWithSections.NavItem>
);
if (eintrag.ziel.art === "route") {
return (
<Link
key={eintrag.id}
href={eintrag.ziel.href}
title={eingeklappt ? eintrag.label : undefined}
className="w-full no-underline"
>
{item}
</Link>
);
}
return (
<button
key={eintrag.id}
type="button"
title={eingeklappt ? eintrag.label : undefined}
onClick={() =>
zeigeToast(eintrag.label, "Gehört zur Software — in diesem Prototyp nicht enthalten")
}
className="w-full cursor-default border-0 bg-transparent p-0 text-left"
>
{item}
</button>
);
};
</Link>
);
const aktiveAnalyse = ANALYSE_SEITEN.find((s) =>
s.href === "/analytics" ? pathname === "/analytics" : pathname.startsWith(s.href)
);
const bereich = pathname.startsWith("/komponenten") ? "Komponenten" : "Analytics";
const bereich = pathname.startsWith("/komponenten")
? "Komponenten"
: pathname.startsWith("/dashboard")
? "Dashboard"
: "Analytics";
return (
<div className="flex min-h-screen w-full bg-neutral-50">
@@ -13,10 +13,17 @@ export function PageHeader({
titel,
beschreibung,
aktionen,
/**
* Aktualisieren, Export und Teilen. Auf Seiten ohne Inhalt gibt es nichts zu
* aktualisieren oder zu exportieren — dort schaltet man sie ab, statt
* Schaltflächen anzubieten, die ins Leere greifen.
*/
standardAktionen = true,
}: {
titel: string;
beschreibung: string;
aktionen?: React.ReactNode;
standardAktionen?: boolean;
}) {
const { zeigeToast } = useToast();
@@ -31,6 +38,8 @@ export function PageHeader({
<div className="dv-no-print flex flex-none items-center gap-2">
{aktionen}
{standardAktionen ? (
<>
<button
onClick={() => zeigeToast("Ansicht aktualisiert", "Demo-Daten, Stichtag 30.07.2026")}
className="flex h-9 items-center gap-2 rounded-md border border-solid border-border-default bg-white px-3 text-[13px] font-medium text-text-neutral-secondary hover:bg-neutral-50"
@@ -52,6 +61,8 @@ export function PageHeader({
>
<FeatherShare2 className="text-[15px]" />
</button>
</>
) : null}
</div>
</div>
);
@@ -12,12 +12,12 @@ import type { SeitenId } from "../../data/filtering";
* (`ui/components/SidebarWithSections`, aus der Cloud-Fassung portiert), damit
* Aussehen und Verhalten übereinstimmen.
*
* „Dashboard" führt hier nirgendwohin: Es ist ein eigenes Feature und nicht
* Teil dieses Prototyps (siehe `docs/SCOPE-ANALYTICS-DASHBOARD.md`). Der
* Eintrag meldet das beim Klick, statt still zu bleiben.
* „Dashboard" führt auf eine Platzhalterseite: Es ist ein eigenes Feature und
* in diesem Prototyp nicht gestaltet (siehe
* `docs/SCOPE-ANALYTICS-DASHBOARD.md`).
*/
export type NavZiel = { art: "route"; href: string } | { art: "software" };
export type NavZiel = { art: "route"; href: string };
export interface NavEintrag {
id: string;
@@ -43,12 +43,13 @@ export const NAV_GRUPPEN: NavGruppe[] = [
titel: "",
eintraege: [
{
// Gehört zu uns, ist aber ein eigenes Feature und nicht Teil dieses
// Prototyps — siehe docs/SCOPE-ANALYTICS-DASHBOARD.md.
// Eigenes Feature, in diesem Prototyp nicht gestaltet. Der Punkt führt
// trotzdem auf eine Seite: Ein Menüeintrag, der nur einen Hinweis
// auslöst, lässt offen, ob etwas fehlt oder etwas kaputt ist.
id: "dashboard",
label: "Dashboard",
icon: "LayoutDashboard",
ziel: { art: "software" },
ziel: { art: "route", href: "/dashboard" },
},
{
// Der neue Menüpunkt. Die fünf Analyse-Seiten sind ausschließlich hier
@@ -0,0 +1,69 @@
"use client";
import Link from "next/link";
import { FeatherArrowRight } from "@subframe/core";
import { Button } from "@/ui/components/Button";
import { EmptyState } from "@/ui/components/EmptyState";
import { PageHeader } from "../components/layout/PageHeader";
import { PageContainer } from "../components/layout/PageContainer";
import { ANALYTICS_START } from "../components/layout/navigation";
/**
* Platzhalter für das Dashboard.
*
* Das Dashboard ist ein eigenes Feature und in diesem Prototyp nicht
* gestaltet — siehe `docs/SCOPE-ANALYTICS-DASHBOARD.md`. Der Menüpunkt führt
* trotzdem auf eine echte Seite statt nur einen Hinweis auszulösen: Ein
* Navigationspunkt, der nirgendwohin führt, lässt den Leser im Unklaren, ob
* etwas fehlt oder etwas kaputt ist. Diese Seite sagt es ihm.
*
* Der Inhalt beschreibt, was hier später steht — nicht als Gestaltung, sondern
* als Verabredung. So bleibt die Seite ehrlich leer und trotzdem nützlich.
*/
export function DashboardPlatzhalterSeite() {
return (
<>
<PageHeader
titel="Dashboard"
beschreibung="Der Begrüßungsbildschirm nach der Anmeldung — eigenes Feature, in diesem Prototyp noch nicht gestaltet."
standardAktionen={false}
/>
<PageContainer>
<EmptyState
outlined
title="Noch nicht gestaltet"
body={
<span className="flex flex-col gap-3">
<span>
Analytics und Dashboard sind zwei Features. Dieser Prototyp
gestaltet <strong>Analytics</strong> — den Analysebereich mit
Zeitraum- und Dimensionsfiltern. Das Dashboard beantwortet eine
andere Frage: {"„Wie ist meine Lage?“ statt „Warum ist das so?“."}
</span>
<span>
Geplant sind drei feste Rollen-Layouts (Geschäftsführung, Büro,
Monteur) aus Widgets. Ein Teil davon kommt aus Analytics —
Kennzahlen-Kacheln, Trend-Diagramme, Listen. Der andere Teil
nicht: offene HR-Anträge, eigene Aufgaben, Termine des Tages.
</span>
<span className="text-text-neutral-tertiary">
Zuschnitt und offene Punkte stehen in{" "}
<code className="rounded-sm bg-neutral-100 px-1 py-0.5 text-[12px]">
docs/SCOPE-ANALYTICS-DASHBOARD.md
</code>
</span>
</span>
}
action={
<Link href={ANALYTICS_START} className="no-underline">
<Button variant="primary" iconRight={<FeatherArrowRight />}>
Zu Analytics
</Button>
</Link>
}
/>
</PageContainer>
</>
);
}