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
This commit is contained in:
dejanandClaude Opus 5 committed
commit
b8bf987d0e
250 files changed
+33153
No files matched your search
@@ -0,0 +1,218 @@
|
||||
// @subframe/sync-disable
|
||||
// @ts-nocheck
|
||||
"use client";
|
||||
/*
|
||||
* Documentation:
|
||||
* Badge Shortcut — https://app.subframe.com/f023064a5ca0/library?component=Badge+Shortcut_97bdb082-1124-4dd7-a335-b14b822d0157
|
||||
* Search Input — https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { FeatherLoader } from "@subframe/core";
|
||||
import { FeatherSearch } from "@subframe/core";
|
||||
import { FeatherX } from "@subframe/core";
|
||||
import * as SubframeUtils from "../../utils";
|
||||
import { BadgeShortcut } from "../BadgeShortcut";
|
||||
|
||||
export interface InputProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
|
||||
placeholder?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
{ placeholder, className, ...otherProps }: InputProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<input
|
||||
className={SubframeUtils.twClassNames(
|
||||
"h-full w-full min-w-[0px] text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
|
||||
className
|
||||
)}
|
||||
placeholder={placeholder}
|
||||
value=""
|
||||
ref={ref}
|
||||
type="search"
|
||||
{...otherProps}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export interface SearchInputRootProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
disabled?: boolean;
|
||||
error?: boolean;
|
||||
state?: "default" | "loading" | "filled";
|
||||
variant?: "outline" | "filled";
|
||||
size?: "small" | "medium" | "large";
|
||||
fillContainer?: boolean;
|
||||
borderless?: boolean;
|
||||
noPadding?: boolean;
|
||||
showLabel?: boolean;
|
||||
label?: React.ReactNode;
|
||||
helpText?: React.ReactNode;
|
||||
message?: React.ReactNode;
|
||||
hideShortcut?: boolean;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SearchInputRoot = React.forwardRef<HTMLDivElement, SearchInputRootProps>(
|
||||
function SearchInputRoot(
|
||||
{
|
||||
disabled = false,
|
||||
error = false,
|
||||
state = "default",
|
||||
variant = "outline",
|
||||
size = "medium",
|
||||
fillContainer = false,
|
||||
borderless = false,
|
||||
noPadding = false,
|
||||
showLabel = false,
|
||||
label,
|
||||
helpText,
|
||||
message,
|
||||
hideShortcut = false,
|
||||
children,
|
||||
className,
|
||||
...otherProps
|
||||
}: SearchInputRootProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/75a35ed3 flex cursor-pointer flex-col items-start justify-center gap-1.5",
|
||||
{ "h-9 w-full": fillContainer },
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden flex-col items-start gap-1.5",
|
||||
{ flex: showLabel }
|
||||
)}
|
||||
>
|
||||
{label ? (
|
||||
<span
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary",
|
||||
{
|
||||
"text-text-feedback-negative": error,
|
||||
"text-text-neutral-disabled": disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
) : null}
|
||||
{helpText ? (
|
||||
<span
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
|
||||
{
|
||||
"text-text-feedback-negative": error,
|
||||
"text-text-neutral-disabled": disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{helpText}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex h-9 w-full min-w-[192px] max-w-[320px] flex-none items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/75a35ed3:bg-surface-neutral-secondary group-focus-within/75a35ed3:bg-surface-neutral-secondary group-focus-within/75a35ed3:shadow-focus",
|
||||
{
|
||||
"h-auto px-0 py-0": noPadding,
|
||||
"border-none": borderless,
|
||||
"min-w-[0px] max-w-none": fillContainer,
|
||||
"h-12": size === "large",
|
||||
"h-8": size === "small",
|
||||
"bg-surface-neutral-secondary": variant === "filled",
|
||||
"border border-solid border-border-negative-solid group-focus-within/75a35ed3:border-2 group-focus-within/75a35ed3:border-solid group-focus-within/75a35ed3:border-border-negative-solid group-focus-within/75a35ed3:shadow-none":
|
||||
error,
|
||||
"border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/75a35ed3:bg-surface-neutral-disabled group-focus-within/75a35ed3:bg-surface-neutral-disabled group-focus-within/75a35ed3:shadow-none":
|
||||
disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<FeatherSearch
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
||||
{
|
||||
"text-body-small-regular-0 font-body-small-regular-0":
|
||||
size === "small",
|
||||
"text-icon-feedback-negative": error,
|
||||
"text-icon-neutral-disabled": disabled,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
{children ? (
|
||||
<div className="flex min-w-[0px] flex-col items-start justify-center self-stretch grow shrink basis-0">
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex items-center gap-1 rounded-sm group-focus-within/75a35ed3:hidden",
|
||||
{
|
||||
hidden:
|
||||
hideShortcut || state === "filled" || state === "loading",
|
||||
}
|
||||
)}
|
||||
>
|
||||
<BadgeShortcut
|
||||
className={SubframeUtils.twClassNames({
|
||||
"h-auto min-h-[20px] w-auto flex-none": disabled,
|
||||
})}
|
||||
>
|
||||
K
|
||||
</BadgeShortcut>
|
||||
</div>
|
||||
<FeatherLoader
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary animate-spin",
|
||||
{ "inline-flex": state === "loading" }
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden h-5 w-5 flex-none items-center justify-center rounded-round cursor-pointer hover:bg-surface-neutral-tertiary",
|
||||
{ flex: state === "filled" }
|
||||
)}
|
||||
>
|
||||
<FeatherX className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden flex-col items-start gap-1",
|
||||
{ flex: showLabel }
|
||||
)}
|
||||
>
|
||||
{message ? (
|
||||
<span
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-neutral-tertiary",
|
||||
{
|
||||
"text-text-feedback-negative": error,
|
||||
"text-text-neutral-disabled": disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{message}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const SearchInput = Object.assign(SearchInputRoot, {
|
||||
Input,
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
"use client";
|
||||
import { SearchInput as SearchInputComponent } from "./SearchInput";
|
||||
|
||||
/**
|
||||
* 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 SearchInput = SearchInputComponent;
|
||||
Reference in new issue
Block a user