dejanandClaude Opus 5
b8bf987d0e
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
54 lines
2.8 KiB
TypeScript
54 lines
2.8 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Calendar — https://app.subframe.com/f023064a5ca0/library?component=Calendar_5a87e517-ace2-49af-adcf-076c97ec3921
|
|
*/
|
|
|
|
import React from "react";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export type CalendarRootProps = React.ComponentProps<
|
|
typeof SubframeCore.Calendar
|
|
> & { className?: string };
|
|
|
|
const CalendarRoot = React.forwardRef<
|
|
React.ElementRef<typeof SubframeCore.Calendar>,
|
|
CalendarRootProps
|
|
>(function CalendarRoot({ className, ...otherProps }: CalendarRootProps, ref) {
|
|
return (
|
|
<SubframeCore.Calendar
|
|
className={className}
|
|
ref={ref}
|
|
classNames={{
|
|
root: "relative border-box",
|
|
month: "flex flex-col gap-4",
|
|
months: "relative flex flex-wrap max-w-fit gap-4",
|
|
nav: "absolute flex items-center justify-between h-8 w-full p-0.5",
|
|
month_caption: "flex items-center justify-center h-8",
|
|
caption_label: "text-body-bold font-body-bold text-default-font",
|
|
button_previous:
|
|
"inline-flex items-center justify-center h-8 w-8 bg-transparent rounded-md border-none bg-transparent hover:bg-neutral-50 active:bg-neutral-100 border-none",
|
|
button_next:
|
|
"inline-flex items-center justify-center h-8 w-8 bg-transparent rounded-md border-none bg-transparent hover:bg-neutral-50 active:bg-neutral-100 border-none",
|
|
chevron: "text-[18px] font-[500] leading-[18px] text-neutral-600",
|
|
weeks: "flex flex-col gap-2",
|
|
weekdays: "flex pb-4",
|
|
weekday: "w-8 text-caption-bold font-caption-bold text-subtext-color",
|
|
week: "flex rounded-lg overflow-hidden",
|
|
day: "group flex p-0 cursor-pointer items-center justify-center text-body font-body text-default-font h-8 w-8",
|
|
day_button:
|
|
"flex h-8 w-8 cursor-pointer items-center justify-center gap-2 rounded-lg border-none hover:bg-neutral-100 group-[.selected]:bg-brand-600 group-[.selected]:text-white group-[.outside]:bg-transparent group-[.outside.selected]:bg-neutral-100 group-[.outside.range-start]:bg-neutral-100 group-[.outside.range-end]:bg-neutral-100 group-[.outside.range-start]:rounded-l-lg group-[.outside.range-start]:rounded-r-none group-[.outside.range-end]:rounded-l-none group-[.outside.range-end]:rounded-r-lg group-[.outside]:!text-neutral-400 group-[.outside]:hover:bg-neutral-100 group-[.range-middle.selected]:bg-neutral-100 group-[.range-middle.selected]:text-default-font group-[.range-middle.selected]:hover:bg-neutral-100 group-[.range-middle.selected]:rounded-none",
|
|
selected: "selected",
|
|
outside: "outside",
|
|
range_start: "range-start bg-neutral-100 rounded-l-lg",
|
|
range_middle: "range-middle",
|
|
range_end: "range-end bg-neutral-100 rounded-r-lg",
|
|
}}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export const Calendar = CalendarRoot;
|