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,318 @@
|
||||
"use client";
|
||||
/*
|
||||
* Documentation:
|
||||
* Text Input — https://app.subframe.com/f023064a5ca0/library?component=Text+Input_be48ca43-f8e7-4c0e-8870-d219ea11abfe
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { FeatherCircleDashed } from "@subframe/core";
|
||||
import { FeatherEye } from "@subframe/core";
|
||||
import { FeatherEyeOff } from "@subframe/core";
|
||||
import { FeatherLock } from "@subframe/core";
|
||||
import { FeatherPlus } from "@subframe/core";
|
||||
import { FeatherSearch } from "@subframe/core";
|
||||
import * as SubframeCore from "@subframe/core";
|
||||
import * as SubframeUtils from "../../utils";
|
||||
|
||||
export interface InputProps
|
||||
extends Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
"type" | "placeholder" | "value"
|
||||
> {
|
||||
type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
|
||||
placeholder?: React.ReactNode;
|
||||
value?: React.ReactNode;
|
||||
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
{ type = "text", placeholder, value, className, ...otherProps }: InputProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<input
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/b0d608f7 h-full w-full border-none bg-transparent px-0 py-0 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
|
||||
className
|
||||
)}
|
||||
placeholder={placeholder as string}
|
||||
value={value as string}
|
||||
ref={ref}
|
||||
type={
|
||||
type === "search"
|
||||
? "search"
|
||||
: type === "url"
|
||||
? "url"
|
||||
: type === "tel"
|
||||
? "tel"
|
||||
: type === "number"
|
||||
? "number"
|
||||
: type === "email"
|
||||
? "email"
|
||||
: type === "password"
|
||||
? "password"
|
||||
: "text"
|
||||
}
|
||||
{...otherProps}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export interface PasswordEyeButtonProps
|
||||
extends React.HTMLAttributes<HTMLDivElement> {
|
||||
showPassword?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PasswordEyeButton = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
PasswordEyeButtonProps
|
||||
>(function PasswordEyeButton(
|
||||
{ showPassword = false, className, ...otherProps }: PasswordEyeButtonProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/39db4fac flex h-5 w-5 cursor-pointer flex-col items-center justify-center gap-4",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
{showPassword ? (
|
||||
<FeatherEye className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
|
||||
) : (
|
||||
<FeatherEyeOff className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export interface TextInputRootProps
|
||||
extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
||||
disabled?: boolean;
|
||||
error?: boolean;
|
||||
variant?: "outline" | "filled";
|
||||
size?: "small" | "medium" | "large";
|
||||
fillContainer?: boolean;
|
||||
borderless?: boolean;
|
||||
noPadding?: boolean;
|
||||
showLabel?: boolean;
|
||||
label?: React.ReactNode;
|
||||
helpText?: React.ReactNode;
|
||||
message?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
iconRight?: React.ReactNode;
|
||||
type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
|
||||
children?: React.ReactNode;
|
||||
showIconLeft?: boolean;
|
||||
showIconRight?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const TextInputRoot = React.forwardRef<HTMLLabelElement, TextInputRootProps>(
|
||||
function TextInputRoot(
|
||||
{
|
||||
disabled = false,
|
||||
error = false,
|
||||
variant = "outline",
|
||||
size = "medium",
|
||||
fillContainer = false,
|
||||
borderless = false,
|
||||
noPadding = false,
|
||||
showLabel = false,
|
||||
label,
|
||||
helpText,
|
||||
message,
|
||||
icon = <FeatherCircleDashed />,
|
||||
iconRight = <FeatherCircleDashed />,
|
||||
type = "text",
|
||||
children,
|
||||
showIconLeft = false,
|
||||
showIconRight = false,
|
||||
className,
|
||||
...otherProps
|
||||
}: TextInputRootProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<label
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/be48ca43 flex cursor-pointer flex-col items-start gap-2",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex w-full grow shrink-0 basis-0 flex-col items-start justify-center gap-4",
|
||||
{ "gap-1.5": showLabel, "min-w-[192px] flex-none": fillContainer }
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden flex-col items-start gap-2",
|
||||
{ flex: showLabel }
|
||||
)}
|
||||
>
|
||||
{label ? (
|
||||
<span
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
|
||||
{
|
||||
"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 w-full min-w-[192px] max-w-[320px] flex-col items-start justify-center gap-4",
|
||||
{
|
||||
"gap-1": showLabel,
|
||||
"min-w-0 max-w-none flex-none": fillContainer,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex h-9 w-full min-w-[112px] flex-none items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-brand-brand-border-solid-hover group-hover/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:shadow-focus",
|
||||
{
|
||||
"h-auto min-w-[80px] px-0 py-0": noPadding,
|
||||
"border-none bg-transparent group-hover/be48ca43:border-none group-hover/be48ca43:bg-surface-neutral-modal":
|
||||
borderless,
|
||||
"h-12 min-w-[96px]": size === "large",
|
||||
"h-8 min-w-[80px]": size === "small",
|
||||
"bg-surface-neutral-secondary": variant === "filled",
|
||||
"border border-solid border-border-negative-solid group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-negative-solid group-focus-within/be48ca43:border-2 group-focus-within/be48ca43:border-solid group-focus-within/be48ca43:border-border-negative-solid group-focus-within/be48ca43:shadow-none":
|
||||
error,
|
||||
"border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-disabled group-hover/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:shadow-none":
|
||||
disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="flex grow shrink-0 basis-0 items-center self-stretch">
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden items-center gap-2 pr-2",
|
||||
{
|
||||
flex:
|
||||
showIconLeft ||
|
||||
type === "search" ||
|
||||
type === "password",
|
||||
}
|
||||
)}
|
||||
>
|
||||
{type === "search" ? (
|
||||
<FeatherSearch
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
||||
{ hidden: showIconLeft }
|
||||
)}
|
||||
/>
|
||||
) : type === "password" ? (
|
||||
<FeatherLock
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
||||
{ hidden: showIconLeft }
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<FeatherPlus
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
||||
{ hidden: showIconLeft }
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{icon ? (
|
||||
<SubframeCore.IconWrapper
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
||||
{
|
||||
hidden: type === "search" || type === "password",
|
||||
"text-icon-neutral-disabled": disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
</SubframeCore.IconWrapper>
|
||||
) : null}
|
||||
</div>
|
||||
{children ? (
|
||||
<div className="flex grow shrink-0 basis-0 flex-col items-start self-stretch">
|
||||
{children}
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden items-center gap-1 pl-2",
|
||||
{
|
||||
flex: showIconRight,
|
||||
"px-0 py-0": noPadding,
|
||||
"pl-0 pr-2.5": size === "small",
|
||||
}
|
||||
)}
|
||||
>
|
||||
{iconRight ? (
|
||||
<SubframeCore.IconWrapper
|
||||
className={SubframeUtils.twClassNames(
|
||||
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
||||
{
|
||||
"text-icon-feedback-negative": error,
|
||||
"text-icon-neutral-disabled": disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{iconRight}
|
||||
</SubframeCore.IconWrapper>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<PasswordEyeButton
|
||||
className={SubframeUtils.twClassNames("hidden", {
|
||||
flex: type === "password",
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
{message ? (
|
||||
<span
|
||||
className={SubframeUtils.twClassNames(
|
||||
"hidden text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary",
|
||||
{ inline: showLabel, "text-text-feedback-negative": error }
|
||||
)}
|
||||
>
|
||||
{message}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const TextInput = Object.assign(TextInputRoot, {
|
||||
Input,
|
||||
PasswordEyeButton,
|
||||
});
|
||||
Reference in new issue
Block a user