dejanandClaude Opus 5
99be627dad
Die Seiten holten ihre Zahlen selbst aus einem globalen Store. HiveGrid Cloud
verlangt reine Screens nach dem Muster <XPage vm={} actions={} /> — jede Seite
hätte beim Einbau auseinandergenommen werden müssen.
Neue Schichtung:
view-models/<seite>.vm.ts baue<Seite>VM(daten, filter) → VMState<…>
reine Funktion, kein React, kein Store
pages/<Seite>.tsx ({ vm, optionen }) → JSX wird portiert
routes/<Seite>Route.tsx Store + Builder + Seite wird ersetzt
view-models/index.ts spiegelt VMState wortgleich aus @hivegrid/view-models;
beim Einbau ist es ein Import-Wechsel. Der Loader ruft denselben Builder mit
echten Daten, die Seiten bleiben unberührt.
Dabei abgefallen: die fünf Seitenzustände (idle · loading · ready · empty ·
error) über SeitenZustand — bisher lief der Prototyp nur im Zustand "Daten da",
in der Cloud sind alle fünf DoD-Pflicht. Die Filterleiste bekommt ihre
Auswahllisten jetzt als Prop (in der Software die Facetten aus dem Loader)
statt sie selbst aus dem Datensatz zu ziehen.
Store- und Rohdatenzugriff gibt es damit ausschließlich in routes/. Alle sechs
Seiten rendern pixelgleich; typecheck, lint und build sind grün.
Nicht geändert: Next.js bleibt. Im gesamten Projekt gibt es vier
Next-spezifische Importe, alle in AppShell und app/layout — beide Dateien
entfallen beim Einbau ohnehin, weil die Cloud Shell und Root-Layout mitbringt.
Ein Framework-Wechsel wäre Aufwand ohne Ertrag.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
/**
|
|
* View-Model der Auftragsseite.
|
|
*
|
|
* Reine Funktion über typisierten Eingangsdaten — kein React, kein Store, kein
|
|
* Zugriff auf `DATENSATZ`. Genau diese Grenze macht den Einbau billig: In der
|
|
* Software ruft der Loader denselben Builder mit echten Daten auf, die
|
|
* Screen-Komponente bleibt unverändert.
|
|
*/
|
|
|
|
import {
|
|
abschlussquote,
|
|
aktiveAuftraege,
|
|
auftraegeImZeitraum,
|
|
auftraegeNachGewerk,
|
|
auftraegeNachStatus,
|
|
auftragseingang,
|
|
durchlaufzeit,
|
|
foerderQuote,
|
|
ueberfaelligeAuftraege,
|
|
vertriebsTrichter,
|
|
} from "../data/calculations";
|
|
import type {
|
|
Auftrag,
|
|
ChartPunkt,
|
|
Datensatz,
|
|
FilterState,
|
|
ZeitreihePunkt,
|
|
} from "../data/types";
|
|
import { imFenster, vorperiode } from "../utils/dateUtils";
|
|
import { bereit, leer, type VMState } from "./index";
|
|
|
|
export interface AuftraegeDaten {
|
|
readonly imZeitraum: Auftrag[];
|
|
readonly vorher: Auftrag[];
|
|
readonly aktiv: Auftrag[];
|
|
readonly ueberfaellig: Auftrag[];
|
|
readonly quote: number;
|
|
readonly laufzeit: number;
|
|
readonly eingang: ZeitreihePunkt[];
|
|
readonly sparkline: number[];
|
|
readonly bestand: number;
|
|
readonly durchschnittAuftragswert: number;
|
|
readonly trichter: ChartPunkt[];
|
|
readonly statusVerteilung: ChartPunkt[];
|
|
readonly gewerkAnzahl: ChartPunkt[];
|
|
readonly foerderung: ReturnType<typeof foerderQuote>;
|
|
readonly foerderungJeAuftrag: number;
|
|
/**
|
|
* Namen je Id. Der Auftrag trägt nur die Ids; die Auflösung gehört zu den
|
|
* Daten, nicht in die Zellen-Funktion der Tabelle.
|
|
*/
|
|
readonly mitarbeiterName: ReadonlyMap<string, string>;
|
|
readonly kundeName: ReadonlyMap<string, string>;
|
|
}
|
|
|
|
export function baueAuftraegeVM(daten: Datensatz, filter: FilterState): VMState<AuftraegeDaten> {
|
|
// Kein Auftrag und keine Rechnung heisst: Die Filter schneiden alles weg.
|
|
// Das ist ein Leerzustand, kein Fehler.
|
|
if (!daten.auftraege.length && !daten.rechnungen.length) return leer();
|
|
|
|
const imZeitraum = auftraegeImZeitraum(daten.auftraege, filter.zeitraum);
|
|
const aktiv = aktiveAuftraege(daten.auftraege);
|
|
const eingang = auftragseingang(daten.auftraege, filter.zeitraum);
|
|
const foerderung = foerderQuote(daten.auftraege);
|
|
|
|
return bereit({
|
|
imZeitraum,
|
|
vorher: daten.auftraege.filter((a) => imFenster(a.angelegtAm, vorperiode(filter.zeitraum))),
|
|
aktiv,
|
|
ueberfaellig: ueberfaelligeAuftraege(daten.auftraege),
|
|
quote: abschlussquote(daten.auftraege),
|
|
laufzeit: durchlaufzeit(daten.auftraege),
|
|
eingang,
|
|
sparkline: eingang.slice(-10).map((p) => p.value),
|
|
bestand: aktiv.reduce((s, a) => s + a.wert, 0),
|
|
durchschnittAuftragswert: imZeitraum.length
|
|
? imZeitraum.reduce((s, a) => s + a.wert, 0) / imZeitraum.length
|
|
: 0,
|
|
trichter: vertriebsTrichter(daten.auftraege),
|
|
statusVerteilung: auftraegeNachStatus(daten.auftraege),
|
|
gewerkAnzahl: auftraegeNachGewerk(daten.auftraege),
|
|
foerderung,
|
|
foerderungJeAuftrag: foerderung.bewilligt ? foerderung.summe / foerderung.bewilligt : 0,
|
|
mitarbeiterName: new Map(daten.mitarbeiter.map((m) => [m.id, m.name])),
|
|
kundeName: new Map(daten.kunden.map((k) => [k.id, k.name])),
|
|
});
|
|
}
|