dejanandClaude Opus 5
e85ceb6f9d
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
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { Tabs } from "@/ui/components/Tabs";
|
|
import { PageHeader } from "./PageHeader";
|
|
import { AnalyticsToolbar } from "../filters/AnalyticsToolbar";
|
|
import { ANALYSE_SEITEN } from "./navigation";
|
|
import type { SeitenId } from "../../data/filtering";
|
|
import type { FilterOptionen } from "../../view-models/filter-optionen";
|
|
|
|
/**
|
|
* Rahmen des Analytics-Bereichs.
|
|
*
|
|
* „Analytics" ist in der Seitenleiste **ein** Menüpunkt. Die fünf Analyse-Seiten
|
|
* sind darin über Reiter erreichbar und tauchen nicht als Unterpunkte in der
|
|
* Navigation auf — sonst konkurrieren zwei Navigationsebenen um dieselbe Sache.
|
|
*
|
|
* Die Reiter folgen dem Hausmuster aus `SettingsHubShell.tsx` im Zielsystem:
|
|
* ein `Link` um ein `Tabs.Item`. Damit ist jeder Reiter eine echte Navigation —
|
|
* mittelklickbar, kopierbar, mit eigener Adresse — und kein Klick-Handler, der
|
|
* so tut als ob.
|
|
*
|
|
* Kopfzeile und Filterleiste liegen hier und nicht in den Seiten: Sie sind für
|
|
* alle fünf gleich, und der Filterzustand gilt bereichsweit.
|
|
*/
|
|
export function AnalyticsShell({
|
|
aktiv,
|
|
optionen,
|
|
children,
|
|
}: {
|
|
aktiv: SeitenId;
|
|
optionen: FilterOptionen;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const seite = ANALYSE_SEITEN.find((s) => s.id === aktiv) ?? ANALYSE_SEITEN[0];
|
|
|
|
return (
|
|
<>
|
|
<PageHeader titel={seite.label} beschreibung={seite.beschreibung} />
|
|
|
|
{/* Die Subframe-Tabs strecken ihre Einträge über die volle Breite. Auf
|
|
einem breiten Analyse-Bildschirm reißt das die Beschriftungen weit
|
|
auseinander, deshalb eine Maximalbreite — dasselbe Mittel nutzt das
|
|
Zielsystem in LeadSettingsPage mit `min-w-[720px]`. */}
|
|
<div className="flex w-full flex-col px-6 pb-1">
|
|
<Tabs className="max-w-[760px]">
|
|
{ANALYSE_SEITEN.map((s) => (
|
|
<Link key={s.id} href={s.href} className="contents no-underline">
|
|
<Tabs.Item active={s.id === aktiv}>{s.label}</Tabs.Item>
|
|
</Link>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
|
|
<AnalyticsToolbar seite={aktiv} optionen={optionen} />
|
|
{children}
|
|
</>
|
|
);
|
|
}
|