feat(dashboard): Analytics-Dashboard als Gestaltungsvorlage zur Übergabe

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

ui/components/HeaderNavigation/HeaderNavigation.tsx

@@ -0,0 +1,134 @@
+"use client";
+/*
+ * Documentation:
+ * Breadcrumbs — https://app.subframe.com/f023064a5ca0/library?component=Breadcrumbs_8898334b-a66f-4ee8-8bd1-afcfa8e37cc0
+ * Header Navigation — https://app.subframe.com/f023064a5ca0/library?component=Header+Navigation_9abee202-1896-4bb8-b899-63d76af2825e
+ * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
+ * Search Input — https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723
+ */
+
+import React from "react";
+import { FeatherBell } from "@subframe/core";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+import { Breadcrumbs } from "../Breadcrumbs";
+import { IconButton } from "../IconButton";
+import { SearchInput } from "../SearchInput";
+
+export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  selected?: boolean;
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const NavItem = React.forwardRef<HTMLDivElement, NavItemProps>(function NavItem(
+  {
+    selected = false,
+    children,
+    icon = null,
+    className,
+    ...otherProps
+  }: NavItemProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "group/448f9541 flex cursor-pointer items-center justify-center gap-2 rounded-sm px-3 py-1.5 hover:bg-surface-neutral-tertiary",
+        { "bg-surface-neutral-tertiary py-2": selected },
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      {icon ? (
+        <SubframeCore.IconWrapper
+          className={SubframeUtils.twClassNames(
+            "text-body-small-medium-0 font-body-small-medium-0 text-icon-neutral-secondary",
+            { "text-icon-neutral-primary": selected }
+          )}
+        >
+          {icon}
+        </SubframeCore.IconWrapper>
+      ) : null}
+      {children ? (
+        <span
+          className={SubframeUtils.twClassNames(
+            "whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-secondary",
+            { "text-text-neutral-primary": selected }
+          )}
+        >
+          {children}
+        </span>
+      ) : null}
+    </div>
+  );
+});
+
+export interface HeaderNavigationRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  leftSlot?: React.ReactNode;
+  breadcrumbs?: React.ReactNode[];
+  className?: string;
+}
+
+const HeaderNavigationRoot = React.forwardRef<
+  HTMLDivElement,
+  HeaderNavigationRootProps
+>(function HeaderNavigationRoot(
+  {
+    leftSlot,
+    breadcrumbs = ["Übersicht"],
+    className,
+    ...otherProps
+  }: HeaderNavigationRootProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "flex h-14 w-full items-center justify-between border-b border-solid border-border-default bg-surface-neutral-secondary pl-6 pr-3 py-3 mobile:px-4",
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      <div className="flex grow shrink-0 basis-0 items-center justify-between">
+        <div className="flex items-center gap-6 pr-1">
+          <Breadcrumbs>
+            {breadcrumbs.map((breadcrumb, index) => (
+              <React.Fragment key={`${index}-${String(breadcrumb)}`}>
+                {index > 0 ? <Breadcrumbs.Divider /> : null}
+                <Breadcrumbs.Item active={index === breadcrumbs.length - 1}>
+                  {breadcrumb}
+                </Breadcrumbs.Item>
+              </React.Fragment>
+            ))}
+          </Breadcrumbs>
+        </div>
+        {leftSlot ? (
+          <div className="flex grow shrink-0 basis-0 items-center gap-6 mobile:gap-2">
+            {leftSlot}
+          </div>
+        ) : null}
+        <div className="flex items-center gap-2 self-stretch pl-1">
+          <SearchInput
+            className="h-auto grow shrink-0 basis-0"
+            size="small"
+            label="Label"
+            helpText="Help text"
+            message="Hilfetext"
+          >
+            <SearchInput.Input placeholder="Suche" />
+          </SearchInput>
+          <IconButton variant="ghost" size="small" icon={<FeatherBell />} />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const HeaderNavigation = Object.assign(HeaderNavigationRoot, {
+  NavItem,
+});

ui/components/HeaderNavigation/index.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { HeaderNavigation as HeaderNavigationComponent } from "./HeaderNavigation";
+
+/**
+ * Add wrapper components and business logic here.
+ * If you modify this file, disable Subframe sync for it to prevent overwrites.
+ * Learn more: https://docs.subframe.com/concepts/syncing-components#wrapping-components
+ */
+
+export const HeaderNavigation = HeaderNavigationComponent;