Reservierte Kacheln vom Dashboard in die Galerie verlegen
Der Begruessungsbildschirm hatte einen Abschnitt "Kommt noch" mit drei leeren
Kacheln. Das ist der falsche Ort: Wer sich morgens anmeldet, will seine Lage
sehen und nicht lesen, was spaeter einmal kommt. Ein Dashboard ist kein Ort
fuer Ankuendigungen.
Die Verabredung bleibt vollstaendig erhalten, nur an Stellen, wo sie hingehoert
— alle drei fuer den Einbau gedacht:
1. RESERVIERTE_BEREICHE in view-models/dashboard.vm.ts, jetzt exportiert: die
Kacheln als Datensatz mit Titel, Widget-Domaene und Quell-Feature.
2. Ein markierter Kommentarblock in pages/DashboardSeite.tsx an genau der
Stelle im Raster, an die sie gehoeren — mit den konkreten Werten
(<Widget breite={4}> mit start 0, 4 und 8) und dem Hinweis, dass das Raster
dafuer nicht angefasst werden muss.
3. Die Bausteingalerie unter /komponenten, neuer Abschnitt "Reservierte
Kacheln" — dort sind alle drei gestaltet zu sehen, aus derselben Konstante
gerendert statt abgeschrieben.
docs/SCOPE-ANALYTICS-DASHBOARD.md nennt die drei Stellen jetzt ausdruecklich
unter "Wo die spaeteren Bereiche stehen", damit beim Port niemand sucht.
tsc, lint, build, verify:carbon und verify:layout laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
This commit is contained in:
1 parent
885c7b9609
commit
b8d44f7f7d
5 files changed
+81
-45
No files matched your search
@@ -107,7 +107,9 @@ mit anderem Titel.
|
||||
| Kennzahlen | Umsatz · Offene Forderungen · Aktive Aufträge · Ø Auslastung | Analytics, je ein Link in die Analyse |
|
||||
| Handlungsbedarf | die Liste über volle Breite | Analytics-Übersicht |
|
||||
| Diagramme | Zahlungseingang · Umsatz nach Gewerk · Vertriebstrichter · Auslastung | Analytics |
|
||||
| Kommt noch | Meine Aufgaben · Termine heute · HR-Anträge | reservierte Plätze, **keine Daten** |
|
||||
|
||||
Was **nicht** auf der Seite steht: die Bereiche, die später dazukommen. Siehe
|
||||
„Wo die späteren Bereiche stehen" weiter unten.
|
||||
|
||||
### Drei Entscheidungen, die dabei getroffen wurden
|
||||
|
||||
@@ -130,11 +132,30 @@ stellt. Unsere Kennzahlenreihe tut das. Ohne die Zeile fließt die vierte
|
||||
Kachel dank `grid-flow-row-dense` trotzdem an die richtige Stelle — nur ohne
|
||||
festen Anfang. Vermerkt in `components/dashboard/WidgetRaster.tsx`.
|
||||
|
||||
**Die reservierten Plätze zeigen keine erfundenen Zahlen.** „2 neue Anträge"
|
||||
**Die späteren Bereiche stehen nicht auf dem Dashboard.** Ein
|
||||
Begrüßungsbildschirm ist kein Ort für Ankündigungen — wer sich morgens
|
||||
anmeldet, will seine Lage sehen und nicht lesen, was später einmal kommt.
|
||||
|
||||
### Wo die späteren Bereiche stehen
|
||||
|
||||
Meine Aufgaben, Termine heute und HR-Anträge sind an drei Stellen festgehalten,
|
||||
alle drei für den Einbau gedacht und keine davon auf dem Begrüßungsbildschirm:
|
||||
|
||||
1. **`RESERVIERTE_BEREICHE`** in `view-models/dashboard.vm.ts` — die Kacheln als
|
||||
Datensatz, mit Titel, Beschreibung, Widget-Domäne und Quell-Feature.
|
||||
2. **Ein markierter Kommentarblock in `pages/DashboardSeite.tsx`** an genau der
|
||||
Stelle im Raster, an die sie gehören — mit den konkreten Werten
|
||||
(`<Widget breite={4}>` mit `start={0}`, `{4}`, `{8}`).
|
||||
3. **Die Bausteingalerie unter `/komponenten`**, Abschnitt „Reservierte
|
||||
Kacheln" — dort sind sie gestaltet zu sehen.
|
||||
|
||||
Alle drei sind im Designer-Brief P11 benannt und haben in HiveGrid bereits ihre
|
||||
Widget-Domäne (`tasks`, `schedule`, `hr`). Sie brauchen kein neues Raster, nur
|
||||
Daten.
|
||||
|
||||
Gestaltet sind die Kacheln bewusst **ohne erfundene Zahlen**. „2 neue Anträge"
|
||||
aus dem Nichts liest sich in einer Abnahme wie eine fertige Funktion, und
|
||||
irgendwann fragt jemand, warum die Zahl nie hochzählt. Die drei Kacheln stehen
|
||||
gestrichelt und leer da und nennen, aus welchem Feature sie ihre Daten
|
||||
bekommen werden.
|
||||
irgendwann fragt jemand, warum die Zahl nie hochzählt.
|
||||
|
||||
### Die Doppelung, die jetzt im Repo steht
|
||||
|
||||
|
||||
@@ -8,7 +8,13 @@ import type { ReservierterBereich } from "../../view-models/dashboard.vm";
|
||||
* Das Dashboard zeigt heute nur Analytics, wird aber mehr: eigene Aufgaben,
|
||||
* Termine des Tages, offene HR-Anträge — alle drei stehen im Designer-Brief
|
||||
* P11 und haben in der Software bereits ihre Widget-Domäne (`tasks`,
|
||||
* `schedule`, `hr`). Diese Kacheln halten ihnen den Platz frei.
|
||||
* `schedule`, `hr`).
|
||||
*
|
||||
* **Diese Kacheln stehen nicht auf dem Dashboard**, sondern in der
|
||||
* Bausteingalerie unter `/komponenten`. Ein Begrüßungsbildschirm ist kein Ort
|
||||
* für Ankündigungen: Wer sich morgens anmeldet, will seine Lage sehen und
|
||||
* nicht lesen, was später einmal kommt. Für den Einbau ist die Stelle im
|
||||
* Raster als Kommentarblock in `pages/DashboardSeite.tsx` markiert.
|
||||
*
|
||||
* Sie zeigen ausdrücklich **keine erfundenen Zahlen**. Eine Kachel mit
|
||||
* „2 neue Anträge" aus dem Nichts liest sich in einer Abnahme wie eine
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { Begruessung } from "../components/dashboard/Begruessung";
|
||||
import { ReservierteKachel } from "../components/dashboard/ReservierteKachel";
|
||||
import { Widget, WidgetRaster } from "../components/dashboard/WidgetRaster";
|
||||
import { WidgetKachel } from "../components/dashboard/WidgetKachel";
|
||||
import { KPICard } from "../components/cards/KPICard";
|
||||
@@ -181,27 +180,30 @@ export function DashboardSeite({ vm }: { vm: VMState<DashboardDaten> }) {
|
||||
</WidgetKachel>
|
||||
</Widget>
|
||||
|
||||
{/* Trennung vor den leeren Plätzen: Ohne sie stehen drei Kacheln
|
||||
ohne Inhalt neben sechs mit Inhalt, und der Leser sucht den
|
||||
Ladefehler. Die Überschrift beantwortet die Frage vorher. */}
|
||||
<Widget breite={12} start={0}>
|
||||
<div className="flex flex-col gap-1 pt-2">
|
||||
<h2 className="text-[14px] font-semibold leading-tight text-text-neutral-primary">
|
||||
Kommt noch
|
||||
</h2>
|
||||
<p className="text-[12px] leading-snug text-text-neutral-tertiary">
|
||||
Das Dashboard zeigt heute nur Auswertungen. Diese drei Bereiche sind dafür
|
||||
vorgesehen und haben in HiveGrid bereits ihre Widget-Domäne — sie brauchen kein
|
||||
neues Raster, nur Daten.
|
||||
</p>
|
||||
</div>
|
||||
</Widget>
|
||||
{/* ────────────────────────────────────────────────────────────────
|
||||
HIER GEHT ES WEITER — an dieser Stelle, nicht woanders.
|
||||
|
||||
{d.reserviert.map((bereich, index) => (
|
||||
<Widget key={bereich.key} breite={4} start={([0, 4, 8] as const)[index]}>
|
||||
<ReservierteKachel bereich={bereich} />
|
||||
</Widget>
|
||||
))}
|
||||
Das Dashboard zeigt heute nur Auswertungen. Es wird mehr: eigene
|
||||
Aufgaben, Termine des Tages, offene HR-Anträge. Alle drei stehen
|
||||
im Designer-Brief P11 und haben in HiveGrid bereits ihre
|
||||
Widget-Domäne (`tasks`, `schedule`, `hr`) — sie brauchen kein
|
||||
neues Raster, nur Daten.
|
||||
|
||||
Konkret kommen sie als drei weitere `<Widget breite={4}>` mit
|
||||
`start={0}`, `{4}` und `{8}` unter diese Zeile. Das Raster darüber
|
||||
bleibt dabei unangetastet; genau dafür ist es aus
|
||||
`DashboardPage.tsx` übernommen.
|
||||
|
||||
Die Kacheln sind beschrieben in `RESERVIERTE_BEREICHE`
|
||||
(view-models/dashboard.vm.ts) und zu sehen unter „/komponenten",
|
||||
Abschnitt „Dashboard-Kacheln". Der Zuschnitt steht in
|
||||
docs/SCOPE-ANALYTICS-DASHBOARD.md, Abschnitt 3a.
|
||||
|
||||
Warum sie hier nicht als Platzhalter stehen: Der
|
||||
Begrüßungsbildschirm ist kein Ort für Ankündigungen. Wer sich
|
||||
morgens anmeldet, will seine Lage sehen und nicht lesen, was
|
||||
später einmal kommt.
|
||||
──────────────────────────────────────────────────────────────── */}
|
||||
</WidgetRaster>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -19,6 +19,7 @@ import { AuftragBadge, RechnungBadge } from "../components/tables/StatusBadge";
|
||||
import { SeitenZustand } from "../components/layout/SeitenZustand";
|
||||
import { WidgetKachel } from "../components/dashboard/WidgetKachel";
|
||||
import { ReservierteKachel } from "../components/dashboard/ReservierteKachel";
|
||||
import { RESERVIERTE_BEREICHE } from "../view-models/dashboard.vm";
|
||||
import { Begruessung } from "../components/dashboard/Begruessung";
|
||||
import type { VMState } from "../view-models";
|
||||
import {
|
||||
@@ -346,18 +347,20 @@ export function KomponentenSeite() {
|
||||
/>
|
||||
</WidgetKachel>
|
||||
|
||||
<ReservierteKachel
|
||||
bereich={{
|
||||
key: "hr",
|
||||
domaene: "hr",
|
||||
titel: "HR-Anträge",
|
||||
beschreibung: "Offene Urlaubs- und Zeitkorrekturanträge.",
|
||||
icon: "UserCheck",
|
||||
quelle: "HR-Hub",
|
||||
}}
|
||||
/>
|
||||
<ReservierteKachel bereich={RESERVIERTE_BEREICHE[2]} />
|
||||
</div>
|
||||
<Hinweis text="Die reservierte Kachel zeigt bewusst keine Zahl. „2 neue Anträge“ aus erfundenen Daten liest sich in einer Abnahme wie eine fertige Funktion — und irgendwann fragt jemand, warum die Zahl nie hochzählt. Die gestrichelte Kante sagt dasselbe ehrlicher: Hier kommt etwas hin, die Fläche ist dafür da." />
|
||||
|
||||
<Abschnitt
|
||||
titel="Reservierte Kacheln — was noch ins Dashboard kommt"
|
||||
text="features/dashboard/components/dashboard/ReservierteKachel.tsx — das Dashboard zeigt heute nur Auswertungen. Diese drei Bereiche kommen dazu; alle drei stehen im Designer-Brief P11 und haben in HiveGrid bereits ihre Widget-Domäne (tasks, schedule, hr). Sie brauchen kein neues Raster, nur Daten."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
{RESERVIERTE_BEREICHE.map((bereich) => (
|
||||
<ReservierteKachel key={bereich.key} bereich={bereich} />
|
||||
))}
|
||||
</div>
|
||||
<Hinweis text="Diese Kacheln stehen hier und nicht auf dem Dashboard. Ein Begrüßungsbildschirm ist kein Ort für Ankündigungen — wer sich morgens anmeldet, will seine Lage sehen und nicht lesen, was später einmal kommt. Für den Einbau ist die Stelle im Raster als Kommentar in DashboardSeite.tsx markiert; der Zuschnitt steht in docs/SCOPE-ANALYTICS-DASHBOARD.md, Abschnitt 3a." />
|
||||
<Hinweis text="Sie zeigen bewusst keine Zahl. „2 neue Anträge“ aus erfundenen Daten liest sich in einer Abnahme wie eine fertige Funktion — und irgendwann fragt jemand, warum die Zahl nie hochzählt. Die gestrichelte Kante sagt dasselbe ehrlicher: Hier kommt etwas hin, die Fläche ist dafür da."/>
|
||||
|
||||
<ChartCard
|
||||
id="komp-badges"
|
||||
|
||||
@@ -77,6 +77,11 @@ export interface KennzahlKachel {
|
||||
* Bewusst als Datensatz und nicht als hartkodiertes Stück Oberfläche: Sobald
|
||||
* das jeweilige Feature Daten liefert, wird aus dem Eintrag eine echte Kachel,
|
||||
* ohne dass das Raster angefasst werden muss.
|
||||
*
|
||||
* Diese Bereiche werden auf dem Dashboard **nicht angezeigt**. Ein
|
||||
* Begrüßungsbildschirm ist kein Ort für Ankündigungen. Sie sind eine
|
||||
* Verabredung für den Einbau und stehen deshalb in der Bausteingalerie
|
||||
* (`/komponenten`), nicht auf der Seite selbst.
|
||||
*/
|
||||
export interface ReservierterBereich {
|
||||
readonly key: string;
|
||||
@@ -107,7 +112,6 @@ export interface DashboardDaten {
|
||||
/** Sparkline unter der Umsatzkachel — dieselbe Reihe wie in Analytics. */
|
||||
readonly sparkline: number[];
|
||||
readonly auslastung: { name: string; wert: number; zusatz: string }[];
|
||||
readonly reserviert: ReservierterBereich[];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -227,7 +231,6 @@ export function baueDashboardVM(
|
||||
wert: t.auslastungProzent,
|
||||
zusatz: t.mitarbeiter.gewerk,
|
||||
})),
|
||||
reserviert: RESERVIERTE_BEREICHE,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -235,12 +238,13 @@ export function baueDashboardVM(
|
||||
* Bereiche, die das Dashboard später trägt.
|
||||
*
|
||||
* Alle drei sind im Designer-Brief P11 für die Rollen-Dashboards benannt
|
||||
* („Büro: … meine Tasks, Anrufe heute, HR-Anträge"). Sie stehen hier als
|
||||
* reservierte Plätze, damit sichtbar ist, dass das Dashboard mehr wird als
|
||||
* eine Analytics-Zusammenfassung — und damit niemand das Raster dafür
|
||||
* umbauen muss.
|
||||
* („Büro: … meine Tasks, Anrufe heute, HR-Anträge") und haben in HiveGrid
|
||||
* bereits ihre Widget-Domäne. Sie stehen hier, damit beim Einbau feststeht,
|
||||
* was noch dazukommt und wo — und damit niemand das Raster dafür umbaut.
|
||||
*
|
||||
* Gezeigt werden sie in der Bausteingalerie unter `/komponenten`.
|
||||
*/
|
||||
const RESERVIERTE_BEREICHE: ReservierterBereich[] = [
|
||||
export const RESERVIERTE_BEREICHE: ReservierterBereich[] = [
|
||||
{
|
||||
key: "tasks",
|
||||
domaene: "tasks",
|
||||
|
||||
Reference in new issue
Block a user