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/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,128 @@
+"use client";
+/*
+ * Documentation:
+ * Toggle Group — https://app.subframe.com/f023064a5ca0/library?component=Toggle+Group_2026f10a-e3cc-4c89-80da-a7259acae3b7
+ */
+
+import React from "react";
+import { FeatherStar } from "@subframe/core";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+
+export interface ItemProps
+  extends React.ComponentProps<typeof SubframeCore.ToggleGroup.Item> {
+  disabled?: boolean;
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  size?: "default" | "large" | "small";
+  className?: string;
+}
+
+const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
+  {
+    disabled = false,
+    children,
+    icon = <FeatherStar />,
+    size = "default",
+    className,
+    ...otherProps
+  }: ItemProps,
+  ref
+) {
+  return (
+    <SubframeCore.ToggleGroup.Item
+      asChild={true}
+      disabled={disabled}
+      {...otherProps}
+    >
+      <div
+        className={SubframeUtils.twClassNames(
+          "group/56dea6ed flex h-full w-full cursor-pointer items-center justify-center gap-2 rounded-md px-3.5 py-2.5 group-[.is-small]/2026f10a:px-3 group-[.is-small]/2026f10a:py-2 group-[.is-large]/2026f10a:gap-2.5 group-[.is-large]/2026f10a:px-5 group-[.is-large]/2026f10a:py-3.5 hover:bg-surface-neutral-primary aria-[checked=true]:bg-brand-brand-surface-solid-default hover:aria-[checked=true]:bg-brand-brand-surface-solid-hover active:aria-[checked=true]:bg-brand-brand-surface-solid-active",
+          {
+            "h-7 px-2.5 py-2": size === "small",
+            "h-11 gap-2.5 px-5 py-3.5": size === "large",
+            "cursor-not-allowed pointer-events-none": disabled,
+          },
+          className
+        )}
+        ref={ref}
+      >
+        {icon ? (
+          <SubframeCore.IconWrapper
+            className={SubframeUtils.twClassNames(
+              "text-body-small-medium-0 font-body-small-medium-0 text-icon-neutral-primary group-disabled/56dea6ed:text-icon-neutral-disabled group-[.is-disabled]/2026f10a:text-icon-neutral-disabled group-[.is-large]/2026f10a:text-body-large-0 group-[.is-large]/2026f10a:font-body-large-0 group-aria-[checked=true]/56dea6ed:text-icon-neutral-on-solid",
+              { "text-body-large-0 font-body-large-0": size === "large" }
+            )}
+          >
+            {icon}
+          </SubframeCore.IconWrapper>
+        ) : null}
+        {children ? (
+          <span
+            className={SubframeUtils.twClassNames(
+              "whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-primary group-disabled/56dea6ed:text-text-neutral-disabled group-[.is-disabled]/2026f10a:text-text-neutral-disabled group-[.is-large]/2026f10a:text-body-large-0 group-[.is-large]/2026f10a:font-body-large-0 group-aria-[checked=true]/56dea6ed:text-text-neutral-on-solid",
+              { "text-body-large-0 font-body-large-0": size === "large" }
+            )}
+          >
+            {children}
+          </span>
+        ) : null}
+      </div>
+    </SubframeCore.ToggleGroup.Item>
+  );
+});
+
+export interface ToggleGroupRootProps
+  extends React.ComponentProps<typeof SubframeCore.ToggleGroup.Root> {
+  disabled?: boolean;
+  size?: "medium" | "large" | "small";
+  orientation?: "horizontal" | "vertical";
+  children?: React.ReactNode;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+const ToggleGroupRoot = React.forwardRef<HTMLDivElement, ToggleGroupRootProps>(
+  function ToggleGroupRoot(
+    {
+      disabled = false,
+      size = "medium",
+      orientation = "horizontal",
+      children,
+      className,
+      ...otherProps
+    }: ToggleGroupRootProps,
+    ref
+  ) {
+    return children ? (
+      <SubframeCore.ToggleGroup.Root
+        asChild={true}
+        disabled={disabled}
+        orientation={orientation}
+        {...otherProps}
+      >
+        <div
+          className={SubframeUtils.twClassNames(
+            "group/2026f10a flex h-9 items-center gap-0.5 overflow-hidden rounded-md border border-solid border-border-default bg-surface-neutral-tertiary px-0.5 py-0.5",
+            {
+              "h-auto w-full min-w-[0px] flex-col": orientation === "vertical",
+              "h-8 is-small": size === "small",
+              "h-12 is-large": size === "large",
+              "border border-solid border-border-disabled bg-surface-neutral-disabled is-disabled pointer-events-none":
+                disabled,
+            },
+            className
+          )}
+          ref={ref}
+        >
+          {children}
+        </div>
+      </SubframeCore.ToggleGroup.Root>
+    ) : null;
+  }
+);
+
+export const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  Item,
+});

ui/components/ToggleGroup/index.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { ToggleGroup as ToggleGroupComponent } from "./ToggleGroup";
+
+/**
+ * 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 ToggleGroup = ToggleGroupComponent;