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

@@ -0,0 +1,373 @@
+"use client";
+/*
+ * Documentation:
+ * Accordion — https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
+ * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
+ * Checkbox — https://app.subframe.com/f023064a5ca0/library?component=Checkbox_3816e3b5-c48c-499b-b45e-0777c6972523
+ * Dropdown Menu select — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu+select_99951515-459b-4286-919e-a89e7549b43b
+ */
+
+import React from "react";
+import { FeatherLayers } from "@subframe/core";
+import { FeatherSearch } from "@subframe/core";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+import { Accordion } from "../Accordion";
+import { Avatar } from "../Avatar";
+import { Checkbox } from "../Checkbox";
+
+export interface DropdownDividerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
+  function DropdownDivider(
+    { className, ...otherProps }: DropdownDividerProps,
+    ref
+  ) {
+    return (
+      <div
+        className={SubframeUtils.twClassNames(
+          "flex w-full items-start gap-2 px-1 py-1",
+          className
+        )}
+        ref={ref}
+        {...otherProps}
+      >
+        <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
+      </div>
+    );
+  }
+);
+
+export interface DropdownItemProps
+  extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  image?: string;
+  selected?: boolean;
+  showCheckbox?: boolean;
+  className?: string;
+}
+
+const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
+  function DropdownItem(
+    {
+      children,
+      icon = null,
+      iconRight = null,
+      image,
+      selected = false,
+      showCheckbox = false,
+      className,
+      ...otherProps
+    }: DropdownItemProps,
+    ref
+  ) {
+    return (
+      <SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
+        <div
+          className={SubframeUtils.twClassNames(
+            "group/adcae8d6 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
+            {
+              "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
+                selected,
+            },
+            className
+          )}
+          ref={ref}
+        >
+          <div
+            className={SubframeUtils.twClassNames("hidden items-start", {
+              flex: showCheckbox,
+            })}
+          >
+            <Checkbox
+              className="h-auto w-auto flex-none self-stretch"
+              label="label"
+              description="Description"
+              helpText=""
+              hideLabel={true}
+            />
+          </div>
+          {image ? (
+            <img
+              className="h-6 w-6 flex-none rounded-round object-cover"
+              src={image}
+            />
+          ) : null}
+          {icon ? (
+            <SubframeCore.IconWrapper
+              className={SubframeUtils.twClassNames(
+                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
+                { "text-icon-neutral-primary": selected }
+              )}
+            >
+              {icon}
+            </SubframeCore.IconWrapper>
+          ) : null}
+          {children ? (
+            <span
+              className={SubframeUtils.twClassNames(
+                "line-clamp-1 grow shrink-0 basis-0 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
+                { "text-text-neutral-primary": selected }
+              )}
+            >
+              {children}
+            </span>
+          ) : null}
+          {iconRight ? (
+            <SubframeCore.IconWrapper
+              className={SubframeUtils.twClassNames(
+                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
+                { "text-icon-neutral-primary": selected }
+              )}
+            >
+              {iconRight}
+            </SubframeCore.IconWrapper>
+          ) : null}
+        </div>
+      </SubframeCore.DropdownMenu.Item>
+    );
+  }
+);
+
+export interface DropdownUserItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  image?: string;
+  selected?: boolean;
+  showCheckbox?: boolean;
+  className?: string;
+}
+
+const DropdownUserItem = React.forwardRef<
+  HTMLDivElement,
+  DropdownUserItemProps
+>(function DropdownUserItem(
+  {
+    title,
+    subtitle,
+    image,
+    selected = false,
+    showCheckbox = false,
+    className,
+    ...otherProps
+  }: DropdownUserItemProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "group/0d3c57ad flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
+        {
+          "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
+            selected,
+        },
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      <div
+        className={SubframeUtils.twClassNames("hidden items-start", {
+          flex: showCheckbox,
+        })}
+      >
+        <Checkbox
+          label="label"
+          description="Description"
+          helpText=""
+          hideLabel={true}
+        />
+      </div>
+      <Avatar size="small" image={image}>
+        OR
+      </Avatar>
+      <div className="flex grow shrink-0 basis-0 flex-col items-start">
+        {title ? (
+          <span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
+            {title}
+          </span>
+        ) : null}
+        {subtitle ? (
+          <span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
+            {subtitle}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
+export interface DropdownCustomItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  selected?: boolean;
+  showCheckbox?: boolean;
+  size?: "medium" | "small" | "large";
+  className?: string;
+}
+
+const DropdownCustomItem = React.forwardRef<
+  HTMLDivElement,
+  DropdownCustomItemProps
+>(function DropdownCustomItem(
+  {
+    children,
+    selected = false,
+    showCheckbox = false,
+    size = "medium",
+    className,
+    ...otherProps
+  }: DropdownCustomItemProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "group/4abe03f9 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
+        {
+          "px-2.5 py-3": size === "large",
+          "px-1 py-1": size === "small",
+          "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
+            selected,
+        },
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      <Checkbox
+        className={SubframeUtils.twClassNames("hidden", { flex: showCheckbox })}
+        label="label"
+        description="Description"
+        helpText=""
+        hideLabel={true}
+      />
+      {children ? (
+        <div className="flex grow shrink-0 basis-0 flex-col items-start">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+export interface DropdownNestedItemProps
+  extends React.ComponentProps<typeof Accordion> {
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const DropdownNestedItem = React.forwardRef<
+  React.ElementRef<typeof Accordion>,
+  DropdownNestedItemProps
+>(function DropdownNestedItem(
+  {
+    children,
+    label,
+    icon = <FeatherLayers />,
+    className,
+    ...otherProps
+  }: DropdownNestedItemProps,
+  ref
+) {
+  return (
+    <Accordion
+      className={SubframeUtils.twClassNames(
+        "group/ca3b20a3 cursor-pointer group/nested-item",
+        className
+      )}
+      variant="ghost"
+      trigger={
+        <div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/ca3b20a3:bg-surface-neutral-tertiary">
+          {icon ? (
+            <SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
+              {icon}
+            </SubframeCore.IconWrapper>
+          ) : null}
+          {label ? (
+            <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
+              {label}
+            </span>
+          ) : null}
+          <Accordion.Chevron />
+        </div>
+      }
+      ref={ref}
+      {...otherProps}
+    >
+      {children ? (
+        <div className="flex w-full flex-col items-start gap-1">{children}</div>
+      ) : null}
+    </Accordion>
+  );
+});
+
+export interface DropdownMenuSelectRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  showSearch?: boolean;
+  className?: string;
+}
+
+const DropdownMenuSelectRoot = React.forwardRef<
+  HTMLDivElement,
+  DropdownMenuSelectRootProps
+>(function DropdownMenuSelectRoot(
+  {
+    children,
+    showSearch = false,
+    className,
+    ...otherProps
+  }: DropdownMenuSelectRootProps,
+  ref
+) {
+  return (
+    <div
+      className={SubframeUtils.twClassNames(
+        "group/99951515 flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
+        className
+      )}
+      ref={ref}
+      {...otherProps}
+    >
+      <div
+        className={SubframeUtils.twClassNames(
+          "hidden w-full flex-col items-start gap-1 pb-1",
+          { flex: showSearch }
+        )}
+      >
+        <div className="flex w-full items-center gap-2 rounded-sm bg-surface-neutral-tertiary px-2 py-1.5">
+          <FeatherSearch className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
+          <input
+            className="min-w-[0px] grow shrink-0 basis-0 self-stretch text-body-small-regular-150 font-body-small-regular-150 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle"
+            placeholder="Suchen…"
+            value=""
+            type="search"
+          />
+        </div>
+        <div className="flex h-px w-full flex-none flex-col items-center gap-2 bg-border-default" />
+      </div>
+      {children ? (
+        <div className="flex w-full flex-col items-start gap-0.5">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+});
+
+export const DropdownMenuSelect = Object.assign(DropdownMenuSelectRoot, {
+  DropdownDivider,
+  DropdownItem,
+  DropdownUserItem,
+  DropdownCustomItem,
+  DropdownNestedItem,
+});