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

@@ -0,0 +1,87 @@
+"use client";
+/*
+ * Documentation:
+ * Help Circle — https://app.subframe.com/f023064a5ca0/library?component=Help+Circle_bdf8292f-ad00-49d7-9ca6-98c24f58f842
+ */
+
+import React from "react";
+import { FeatherHelpCircle } from "@subframe/core";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+
+export interface HelpCircleRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  size?: "small" | "medium" | "large";
+  shape?: "default" | "background";
+  tooltipText?: React.ReactNode;
+  className?: string;
+}
+
+const HelpCircleRoot = React.forwardRef<HTMLDivElement, HelpCircleRootProps>(
+  function HelpCircleRoot(
+    {
+      icon = <FeatherHelpCircle />,
+      size = "medium",
+      shape = "default",
+      tooltipText,
+      className,
+      ...otherProps
+    }: HelpCircleRootProps,
+    ref
+  ) {
+    return (
+      <SubframeCore.Tooltip.Provider>
+        <SubframeCore.Tooltip.Root>
+          <SubframeCore.Tooltip.Trigger asChild={true}>
+            <div
+              className={SubframeUtils.twClassNames(
+                "group/bdf8292f flex cursor-pointer items-center justify-center rounded-md px-1 py-1",
+                {
+                  "bg-surface-feedback-subtle-neutral hover:bg-surface-feedback-subtle-neutral-hover":
+                    shape === "background",
+                },
+                className
+              )}
+              ref={ref}
+              {...otherProps}
+            >
+              {icon ? (
+                <SubframeCore.IconWrapper
+                  className={SubframeUtils.twClassNames(
+                    "text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary group-hover/bdf8292f:text-icon-neutral-secondary",
+                    {
+                      "text-body-large-0 font-body-large-0": size === "large",
+                      "text-body-small-regular-0 font-body-small-regular-0":
+                        size === "small",
+                    }
+                  )}
+                >
+                  {icon}
+                </SubframeCore.IconWrapper>
+              ) : null}
+            </div>
+          </SubframeCore.Tooltip.Trigger>
+          <SubframeCore.Tooltip.Portal>
+            <SubframeCore.Tooltip.Content
+              side="top"
+              align="center"
+              sideOffset={4}
+              asChild={true}
+            >
+              <div className="flex max-w-[384px] flex-col items-start gap-2 rounded-sm bg-surface-feedback-solid-neutral-active px-1.5 py-0.5 shadow-lg">
+                {tooltipText ? (
+                  <span className="text-body-extra-small-medium-150 font-body-extra-small-medium-150 text-text-neutral-on-solid">
+                    {tooltipText}
+                  </span>
+                ) : null}
+              </div>
+            </SubframeCore.Tooltip.Content>
+          </SubframeCore.Tooltip.Portal>
+        </SubframeCore.Tooltip.Root>
+      </SubframeCore.Tooltip.Provider>
+    );
+  }
+);
+
+export const HelpCircle = HelpCircleRoot;

ui/components/HelpCircle/index.tsx

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