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,134 @@
|
||||
"use client";
|
||||
/*
|
||||
* Documentation:
|
||||
* Dropdown Menu select — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu+select_99951515-459b-4286-919e-a89e7549b43b
|
||||
* Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
|
||||
* Sticky Note — https://app.subframe.com/f023064a5ca0/library?component=Sticky+Note_bf633727-22a3-4c3a-9db4-a53efd508fc5
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { FeatherCopy } from "@subframe/core";
|
||||
import { FeatherEdit2 } from "@subframe/core";
|
||||
import { FeatherMoreVertical } from "@subframe/core";
|
||||
import { FeatherTrash2 } from "@subframe/core";
|
||||
import * as SubframeCore from "@subframe/core";
|
||||
import * as SubframeUtils from "../../utils";
|
||||
import { DropdownMenuSelect } from "../DropdownMenuSelect";
|
||||
import { IconButton } from "../IconButton";
|
||||
|
||||
export interface StickyNoteRootProps
|
||||
extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
|
||||
text?: React.ReactNode;
|
||||
color?: "yellow" | "pink" | "blue" | "green" | "purple" | "orange";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const StickyNoteRoot = React.forwardRef<HTMLDivElement, StickyNoteRootProps>(
|
||||
function StickyNoteRoot(
|
||||
{ text, color = "yellow", className, ...otherProps }: StickyNoteRootProps,
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"group/bf633727 flex flex-col items-start rounded-md bg-[#fff9c4] shadow-md relative group/stickyNote w-[200px] cursor-grab transition-all hover:shadow-lg active:rotate-[3deg] active:scale-105 active:cursor-grabbing",
|
||||
{
|
||||
"bg-[#fff3e0]": color === "orange",
|
||||
"bg-[#f3e5f5]": color === "purple",
|
||||
"bg-[#e8f5e9]": color === "green",
|
||||
"bg-[#e3f2fd]": color === "blue",
|
||||
"bg-[#fce4ec]": color === "pink",
|
||||
},
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...otherProps}
|
||||
>
|
||||
<div
|
||||
className={SubframeUtils.twClassNames(
|
||||
"flex h-8 w-full flex-none items-center justify-between rounded-t-md bg-[#ffe082] pl-3 pr-1",
|
||||
{
|
||||
"bg-[#ffb74d]": color === "orange",
|
||||
"bg-[#ce93d8]": color === "purple",
|
||||
"bg-[#a5d6a7]": color === "green",
|
||||
"bg-[#90caf9]": color === "blue",
|
||||
"bg-[#f48fb1]": color === "pink",
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div className="flex grow shrink-0 basis-0 items-start" />
|
||||
<SubframeCore.DropdownMenu.Root>
|
||||
<SubframeCore.DropdownMenu.Trigger asChild={true}>
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
size="extra-small"
|
||||
square={true}
|
||||
icon={<FeatherMoreVertical />}
|
||||
/>
|
||||
</SubframeCore.DropdownMenu.Trigger>
|
||||
<SubframeCore.DropdownMenu.Portal>
|
||||
<SubframeCore.DropdownMenu.Content
|
||||
side="bottom"
|
||||
align="start"
|
||||
sideOffset={4}
|
||||
asChild={true}
|
||||
>
|
||||
<DropdownMenuSelect>
|
||||
<div className="flex w-full flex-col items-start gap-2 rounded-md px-3 py-2">
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#ffe082] cursor-pointer ring-2 ring-offset-1 ring-[#424242]" />
|
||||
<div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#f48fb1] cursor-pointer" />
|
||||
<div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#90caf9] cursor-pointer" />
|
||||
<div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#a5d6a7] cursor-pointer" />
|
||||
<div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#ce93d8] cursor-pointer" />
|
||||
<div className="flex h-5 w-5 flex-none items-start rounded-round bg-[#ffb74d] cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full items-start gap-2 px-1 py-1">
|
||||
<div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary">
|
||||
<FeatherCopy className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
|
||||
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary">
|
||||
Kopieren
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary">
|
||||
<FeatherCopy className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
|
||||
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary">
|
||||
Duplizieren
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary">
|
||||
<FeatherEdit2 className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
|
||||
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary">
|
||||
Text bearbeiten
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex w-full items-start gap-2 px-1 py-1">
|
||||
<div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-2 rounded-md px-2 py-2 cursor-pointer hover:bg-surface-feedback-subtle-negative">
|
||||
<FeatherTrash2 className="text-body-small-regular-150 font-body-small-regular-150 text-icon-feedback-negative" />
|
||||
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-feedback-negative">
|
||||
Löschen
|
||||
</span>
|
||||
</div>
|
||||
</DropdownMenuSelect>
|
||||
</SubframeCore.DropdownMenu.Content>
|
||||
</SubframeCore.DropdownMenu.Portal>
|
||||
</SubframeCore.DropdownMenu.Root>
|
||||
</div>
|
||||
<div className="flex w-full grow shrink-0 basis-0 flex-col items-start px-3 pt-2 pb-3 min-h-[168px]">
|
||||
{text ? (
|
||||
<span className="w-full text-body-small-regular-150 font-body-small-regular-150 text-[#424242]">
|
||||
{text}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const StickyNote = StickyNoteRoot;
|
||||
@@ -0,0 +1,10 @@
|
||||
"use client";
|
||||
import { StickyNote as StickyNoteComponent } from "./StickyNote";
|
||||
|
||||
/**
|
||||
* 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 StickyNote = StickyNoteComponent;
|
||||
Reference in new issue
Block a user