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
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
/**
|
|
* View-Model der Übersichtsseite.
|
|
*
|
|
* 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 {
|
|
aktiveAuftraege,
|
|
handlungsbedarf,
|
|
marge,
|
|
neueKunden,
|
|
neueKundenVorperiode,
|
|
offenePosten,
|
|
teamKennzahlen,
|
|
ueberfaelligeAuftraege,
|
|
umsatz,
|
|
umsatzNachGewerk,
|
|
umsatzVerlauf,
|
|
umsatzVorperiode,
|
|
vertriebsTrichter,
|
|
zahlungsdauer,
|
|
type AlertEintrag,
|
|
type OffenePosten,
|
|
type MitarbeiterKennzahl,
|
|
} from "../data/calculations";
|
|
import type { Auftrag, ChartPunkt, FilterState, Datensatz, ZeitreihePunkt } from "../data/types";
|
|
import { bereit, leer, type VMState } from "./index";
|
|
|
|
export interface UebersichtDaten {
|
|
readonly umsatzAktuell: number;
|
|
readonly umsatzVorher: number;
|
|
readonly margeProzent: number;
|
|
readonly zahlungsdauerTage: number;
|
|
readonly verlauf: ZeitreihePunkt[];
|
|
readonly sparkline: number[];
|
|
readonly posten: OffenePosten;
|
|
readonly aktiveAuftraege: Auftrag[];
|
|
readonly auftragsbestand: number;
|
|
readonly ueberfaellige: Auftrag[];
|
|
readonly monteureAktiv: MitarbeiterKennzahl[];
|
|
readonly durchschnittAuslastung: number;
|
|
readonly neueKunden: number;
|
|
readonly neueKundenVorher: number;
|
|
readonly kundenMitAuftrag: number;
|
|
readonly gewerkUmsatz: ChartPunkt[];
|
|
readonly trichter: ChartPunkt[];
|
|
readonly alerts: AlertEintrag[];
|
|
readonly durchschnittAuftragswert: number;
|
|
}
|
|
|
|
export function baueUebersichtVM(daten: Datensatz, filter: FilterState): VMState<UebersichtDaten> {
|
|
// 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 verlauf = umsatzVerlauf(daten.rechnungen, filter.zeitraum);
|
|
const team = teamKennzahlen(daten.mitarbeiter, daten.zeiten, daten.auftraege, filter.zeitraum);
|
|
const monteureAktiv = team.filter((t) => t.mitarbeiter.status === "aktiv");
|
|
const aktiv = aktiveAuftraege(daten.auftraege);
|
|
|
|
return bereit({
|
|
umsatzAktuell: umsatz(daten.rechnungen, filter.zeitraum),
|
|
umsatzVorher: umsatzVorperiode(daten.rechnungen, filter.zeitraum),
|
|
margeProzent: marge(daten.auftraege, filter.zeitraum),
|
|
zahlungsdauerTage: zahlungsdauer(daten.rechnungen, filter.zeitraum),
|
|
verlauf,
|
|
sparkline: verlauf.slice(-10).map((p) => p.value),
|
|
posten: offenePosten(daten.rechnungen),
|
|
aktiveAuftraege: aktiv,
|
|
auftragsbestand: aktiv.reduce((summe, a) => summe + a.wert, 0),
|
|
ueberfaellige: ueberfaelligeAuftraege(daten.auftraege),
|
|
monteureAktiv,
|
|
durchschnittAuslastung: monteureAktiv.length
|
|
? monteureAktiv.reduce((s, t) => s + t.auslastungProzent, 0) / monteureAktiv.length
|
|
: 0,
|
|
neueKunden: neueKunden(daten.kunden, filter.zeitraum),
|
|
neueKundenVorher: neueKundenVorperiode(daten.kunden, filter.zeitraum),
|
|
kundenMitAuftrag: daten.kunden.filter((k) => k.auftraegeGesamt > 0).length,
|
|
gewerkUmsatz: umsatzNachGewerk(daten.auftraege, daten.rechnungen, filter.zeitraum),
|
|
trichter: vertriebsTrichter(daten.auftraege),
|
|
alerts: handlungsbedarf(daten),
|
|
durchschnittAuftragswert: daten.auftraege.length
|
|
? daten.auftraege.reduce((s, a) => s + a.wert, 0) / daten.auftraege.length
|
|
: 0,
|
|
});
|
|
}
|