dejanandClaude Opus 5
b8bf987d0e
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung, nicht der Produktivbetrieb. Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten), 26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026). Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner (Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste Abweichungen stehen in docs/HERKUNFT.md. Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM, KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { FeatherDownload, FeatherRefreshCw, FeatherShare2 } from "@subframe/core";
|
|
import { useToast } from "../../context/ToastContext";
|
|
|
|
/**
|
|
* Kopf einer Analyse-Seite: Titel, Einordnung, Seitenaktionen.
|
|
* Die Aktionen sind im Prototyp bewusst folgenlos (Toast statt Export) —
|
|
* siehe HANDOVER.md, Abschnitt "Was noch Logik braucht".
|
|
*/
|
|
export function PageHeader({
|
|
titel,
|
|
beschreibung,
|
|
aktionen,
|
|
}: {
|
|
titel: string;
|
|
beschreibung: string;
|
|
aktionen?: React.ReactNode;
|
|
}) {
|
|
const { zeigeToast } = useToast();
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-start justify-between gap-4 px-6 pb-6 pt-6">
|
|
<div className="flex min-w-0 flex-col gap-0">
|
|
<h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-text-neutral-primary">
|
|
{titel}
|
|
</h1>
|
|
<p className="text-[13px] leading-relaxed text-text-neutral-tertiary">{beschreibung}</p>
|
|
</div>
|
|
|
|
<div className="dv-no-print flex flex-none items-center gap-2">
|
|
{aktionen}
|
|
<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"
|
|
>
|
|
<FeatherRefreshCw className="text-[15px]" />
|
|
Aktualisieren
|
|
</button>
|
|
<button
|
|
onClick={() => zeigeToast("Export vorgemerkt", "PDF/CSV folgt in der Umsetzung")}
|
|
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"
|
|
>
|
|
<FeatherDownload className="text-[15px]" />
|
|
Export
|
|
</button>
|
|
<button
|
|
onClick={() => zeigeToast("Link kopiert", "Teilen wird serverseitig umgesetzt")}
|
|
className="flex h-9 w-9 items-center justify-center rounded-md border border-solid border-border-default bg-white text-text-neutral-tertiary hover:bg-neutral-50"
|
|
aria-label="Ansicht teilen"
|
|
>
|
|
<FeatherShare2 className="text-[15px]" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|