admGitAICDS
4343d50aa4
Deploy App / deploy (push) Successful in 1m6s
(1) Beim Aendern eines Ratenfelds fragt das Panel nach der Reichweite: nur diese Phase (Vorgabe), diese + folgende, alle Phasen. Gilt fuer expectedReturn, valueGrowth, interestRate und teuerungsausgleich. Inline statt Modal -- das Zahlenfeld loest je Tastendruck aus. Die Zielphasen behalten ihre uebrigen Werte (der Endpunkt ersetzt den ganzen Satz; ein Kopieren des Entwurfs haette dort Betraege geloescht). (2) ElementYearPoint fuehrt neu `rate` mit -- additiv, nur durchgereicht. Verlaufsgrafik zeigt sie auf zweiter Y-Achse als Stufenlinie. Golden Tests unveraendert. Spezifikation 0.20, 17 Tests (164 -> 181). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
674 lines
26 KiB
TypeScript
674 lines
26 KiB
TypeScript
"use client";
|
||
|
||
import { useMemo, useState } from "react";
|
||
import {
|
||
Bar,
|
||
BarChart,
|
||
CartesianGrid,
|
||
Legend,
|
||
Line,
|
||
LineChart,
|
||
ResponsiveContainer,
|
||
Tooltip,
|
||
XAxis,
|
||
YAxis,
|
||
} from "recharts";
|
||
import { BookOpen, X } from "lucide-react";
|
||
import { formatChf } from "@/lib/format";
|
||
import { CATEGORY_LABELS } from "@/lib/elements";
|
||
import type { ElementCategory } from "@/lib/elements";
|
||
import type {
|
||
CashBridge,
|
||
ElementYearPoint,
|
||
PhaseComputed,
|
||
PlanComputed,
|
||
Trace,
|
||
TraceStep,
|
||
WealthBridge,
|
||
} from "@/lib/calculations";
|
||
|
||
// --- Wasserfall ---------------------------------------------------------------------------
|
||
// Bewusst NICHT mit Recharts, sondern als eigene HTML/CSS-Darstellung. Ein Wasserfall lebt
|
||
// von drei Dingen, die Recharts hier nicht hergibt: Verbindungslinien zwischen den Balken
|
||
// (ohne sie sieht man nicht, dass jeder Balken dort ansetzt, wo der vorherige aufhört),
|
||
// Wertbeschriftung an jedem Balken, und eine klare optische Trennung von Zwischenständen
|
||
// und Veränderungen.
|
||
//
|
||
// Liegend statt stehend: Die Beschriftungen sind lang ("Wertsteigerung Immobilie"), stehend
|
||
// müssten sie gedreht werden. Liegend ist es ausserdem konsistent zum Tornado.
|
||
|
||
interface WaterfallItem {
|
||
label: string;
|
||
value: number;
|
||
total?: boolean; // Zwischen-/Endsumme: absoluter Stand statt Veränderung
|
||
section?: string; // optionale Abschnitts-Überschrift VOR diesem Eintrag
|
||
}
|
||
|
||
interface WaterfallRow {
|
||
label: string;
|
||
section?: string;
|
||
from: number;
|
||
to: number;
|
||
value: number;
|
||
running: number; // Stand NACH diesem Schritt
|
||
kind: "total" | "pos" | "neg";
|
||
}
|
||
|
||
function waterfallRows(items: WaterfallItem[]): WaterfallRow[] {
|
||
let running = 0;
|
||
return items.map((it) => {
|
||
if (it.total) {
|
||
running = it.value;
|
||
return { label: it.label, section: it.section, from: 0, to: it.value, value: it.value, running, kind: "total" as const };
|
||
}
|
||
const from = running;
|
||
running += it.value;
|
||
return {
|
||
label: it.label,
|
||
section: it.section,
|
||
from,
|
||
to: running,
|
||
value: it.value,
|
||
running,
|
||
kind: (it.value >= 0 ? "pos" : "neg") as "pos" | "neg",
|
||
};
|
||
});
|
||
}
|
||
|
||
const WF_FILL = { total: "var(--accent)", pos: "#16a34a", neg: "#dc2626" };
|
||
|
||
const ROW_H = 34;
|
||
const BAR_H = 20;
|
||
|
||
function Waterfall({ items }: { items: WaterfallItem[] }) {
|
||
const rows = useMemo(() => waterfallRows(items), [items]);
|
||
if (rows.length === 0) return null;
|
||
|
||
const lo = Math.min(0, ...rows.map((r) => Math.min(r.from, r.to)));
|
||
const hi = Math.max(0, ...rows.map((r) => Math.max(r.from, r.to)));
|
||
const span = hi - lo || 1;
|
||
const pos = (v: number) => ((v - lo) / span) * 100;
|
||
|
||
return (
|
||
<div>
|
||
<div className="overflow-hidden rounded-xl border border-border">
|
||
{rows.map((r, i) => {
|
||
const left = pos(Math.min(r.from, r.to));
|
||
const width = Math.max(0.4, Math.abs(pos(r.to) - pos(r.from)));
|
||
const isLast = i === rows.length - 1;
|
||
return (
|
||
<div key={`${r.label}-${i}`}>
|
||
{r.section && (
|
||
<div className="border-b border-border bg-surface-2 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-faint">
|
||
{r.section}
|
||
</div>
|
||
)}
|
||
<div className={`flex items-stretch ${r.kind === "total" ? "bg-surface-2" : ""}`}>
|
||
<div
|
||
className={`w-44 shrink-0 border-r border-border px-3 py-2 text-[11px] leading-tight ${
|
||
r.kind === "total" ? "font-semibold text-fg" : "text-muted"
|
||
}`}
|
||
>
|
||
{r.label}
|
||
</div>
|
||
<div className="relative min-w-0 flex-1" style={{ height: ROW_H }}>
|
||
{/* Nulllinie */}
|
||
<div
|
||
className="absolute top-0 h-full border-l border-dashed border-border"
|
||
style={{ left: `${pos(0)}%` }}
|
||
/>
|
||
{/* Balken */}
|
||
<div
|
||
className="absolute rounded-sm"
|
||
style={{
|
||
left: `${left}%`,
|
||
width: `${width}%`,
|
||
top: (ROW_H - BAR_H) / 2,
|
||
height: BAR_H,
|
||
backgroundColor: WF_FILL[r.kind],
|
||
opacity: r.kind === "total" ? 0.85 : 1,
|
||
}}
|
||
title={`${r.label}: ${formatChf(r.value)}`}
|
||
/>
|
||
{/* Verbindungslinie zum nächsten Balken: auf dem Stand NACH diesem Schritt */}
|
||
{!isLast && (
|
||
<div
|
||
className="absolute border-l border-dotted border-faint"
|
||
style={{
|
||
left: `${pos(r.to)}%`,
|
||
top: (ROW_H + BAR_H) / 2,
|
||
height: (ROW_H - BAR_H) / 2,
|
||
}}
|
||
/>
|
||
)}
|
||
</div>
|
||
<div
|
||
className={`w-28 shrink-0 border-l border-border px-3 py-2 text-right text-[11px] tabular-nums ${
|
||
r.kind === "total" ? "font-semibold text-fg" : r.kind === "neg" ? "text-danger" : "text-success"
|
||
}`}
|
||
>
|
||
{r.kind === "total" ? formatChf(r.value) : `${r.value >= 0 ? "+" : "−"}${formatChf(Math.abs(r.value))}`}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Zahlen mit laufendem Zwischenstand -- bei stark unterschiedlichen Grössenordnungen
|
||
ist die Tabelle der Grafik überlegen. */}
|
||
<details className="mt-2">
|
||
<summary className="cursor-pointer text-[11px] text-muted hover:text-fg">Zahlen mit Zwischenstand anzeigen</summary>
|
||
<div className="mt-2 overflow-x-auto rounded-lg border border-border">
|
||
<table className="w-full border-collapse text-xs">
|
||
<thead>
|
||
<tr className="bg-surface-2 text-[10px] uppercase tracking-wide text-faint">
|
||
<th className="px-3 py-1.5 text-left font-semibold">Schritt</th>
|
||
<th className="px-3 py-1.5 text-right font-semibold">Betrag</th>
|
||
<th className="px-3 py-1.5 text-right font-semibold">Zwischenstand</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((r, i) => (
|
||
<tr key={i} className={`border-t border-border ${r.kind === "total" ? "bg-surface-2 font-semibold" : ""}`}>
|
||
<td className="px-3 py-1.5 text-fg">{r.label}</td>
|
||
<td
|
||
className={`px-3 py-1.5 text-right tabular-nums ${
|
||
r.kind === "total" ? "text-faint" : r.kind === "neg" ? "text-danger" : "text-success"
|
||
}`}
|
||
>
|
||
{r.kind === "total" ? "—" : `${r.value >= 0 ? "+" : "−"}${formatChf(Math.abs(r.value))}`}
|
||
</td>
|
||
<td className="px-3 py-1.5 text-right tabular-nums text-fg">{formatChf(r.running)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Kontrollgrösse: Ist die Zerlegung vollständig, muss die Differenz zwischen Endwert und
|
||
// der Summe der Schritte 0 sein. Sichtbar machen statt verstecken -- ein Wasserfall, der
|
||
// nicht aufgeht, ist ein Fehler und kein Schönheitsproblem.
|
||
function ResidualNote({ residual }: { residual: number }) {
|
||
if (Math.abs(residual) <= 2) return null;
|
||
return (
|
||
<p className="mt-2 rounded-lg border border-danger bg-danger-soft px-3 py-2 text-[11px] text-danger">
|
||
<strong>Die Zerlegung geht nicht auf.</strong> Nicht zugeordnete Differenz: {formatChf(residual)}. Bitte melden –
|
||
das ist ein Fehler in der Berechnung, nicht in der Darstellung.
|
||
</p>
|
||
);
|
||
}
|
||
|
||
function bridgeItems(w: WealthBridge, isFirst: boolean): WaterfallItem[] {
|
||
const items: WaterfallItem[] = [];
|
||
if (!isFirst) {
|
||
items.push({ label: "Vermögen Ende Vorphase", value: w.openingWealth, total: true, section: "Am Übergang in diese Phase" });
|
||
if (w.oneOffInflow) items.push({ label: "Einmaliger Zufluss", value: w.oneOffInflow });
|
||
if (w.oneOffOutflow) items.push({ label: "Einmalige Kosten", value: -w.oneOffOutflow });
|
||
if (w.transitionTax) items.push({ label: "Steuern am Übergang", value: -w.transitionTax });
|
||
if (w.pensionConversion) items.push({ label: "PK in Rente umgewandelt", value: -w.pensionConversion });
|
||
if (w.saleGainLoss) items.push({ label: "Verkaufsdifferenz", value: w.saleGainLoss });
|
||
}
|
||
items.push({
|
||
label: "Vermögen Phasenbeginn",
|
||
value: w.startWealth,
|
||
total: true,
|
||
section: isFirst ? undefined : "Innerhalb der Phase",
|
||
});
|
||
if (w.quotaTotal) items.push({ label: "Spar-/Verzehrquote", value: w.quotaTotal });
|
||
if (w.investmentReturn) items.push({ label: "Kapitalerträge", value: w.investmentReturn });
|
||
if (w.propertyAppreciation) items.push({ label: "Wertsteigerung Immobilie", value: w.propertyAppreciation });
|
||
if (w.pensionFundContribution) items.push({ label: "PK-Beiträge", value: w.pensionFundContribution });
|
||
items.push({ label: "Vermögen Phasenende", value: w.endWealth, total: true });
|
||
return items;
|
||
}
|
||
|
||
function cashItems(c: CashBridge, isFirst: boolean): WaterfallItem[] {
|
||
const items: WaterfallItem[] = [];
|
||
items.push({
|
||
label: isFirst ? "Cash-Anfangswert" : "Cash Ende Vorphase",
|
||
value: c.openingCash,
|
||
total: true,
|
||
section: isFirst ? undefined : "Am Übergang in diese Phase",
|
||
});
|
||
if (c.capitalInflow) items.push({ label: "Kapitalzufluss", value: c.capitalInflow });
|
||
if (c.oneOffInflow) items.push({ label: "Einmaliger Zufluss", value: c.oneOffInflow });
|
||
if (c.immediateRepay) items.push({ label: "Sofort-Tilgung", value: -c.immediateRepay });
|
||
if (c.oneOffOutflow) items.push({ label: "Einmalige Kosten", value: -c.oneOffOutflow });
|
||
if (c.investments) items.push({ label: "Investitionen", value: -c.investments });
|
||
items.push({ label: "Cash Phasenbeginn", value: c.cashStart, total: true, section: "Innerhalb der Phase" });
|
||
if (c.quotaTotal) items.push({ label: "Spar-/Verzehrquote", value: c.quotaTotal });
|
||
if (c.savingRates) items.push({ label: "Sparraten", value: -c.savingRates });
|
||
if (c.debtRates) items.push({ label: "Amort./Tilgung", value: -c.debtRates });
|
||
if (c.withdrawals) items.push({ label: "Bezugsraten", value: c.withdrawals });
|
||
items.push({ label: "Cash Phasenende", value: c.cashEnd, total: true });
|
||
return items;
|
||
}
|
||
|
||
// --- Rechenweg ----------------------------------------------------------------------------
|
||
|
||
function TraceStepRow({ step }: { step: TraceStep }) {
|
||
const unit = step.unit ?? "CHF";
|
||
const value =
|
||
unit === "" ? step.substituted ?? "" : unit === "%" ? `${step.result} %` : unit === "Jahre" ? `${step.result}` : formatChf(step.result);
|
||
return (
|
||
<tr className="border-t border-border align-top">
|
||
<td className="px-3 py-1.5 text-fg">{step.label}</td>
|
||
<td className="px-3 py-1.5 text-[11px] text-muted">
|
||
{step.formula && <div className="font-mono">{step.formula}</div>}
|
||
{step.substituted && unit !== "" && <div className="font-mono text-faint">{step.substituted}</div>}
|
||
{step.note && <div className="mt-0.5 italic text-faint">{step.note}</div>}
|
||
</td>
|
||
<td className="whitespace-nowrap px-3 py-1.5 text-right font-medium text-fg">{value}</td>
|
||
</tr>
|
||
);
|
||
}
|
||
|
||
export function TraceBlock({ trace, onOpenSpec }: { trace: Trace; onOpenSpec?: (anchor: string) => void }) {
|
||
return (
|
||
<div className="rounded-xl border border-border">
|
||
<div className="flex items-center justify-between gap-2 border-b border-border bg-surface-2 px-3 py-2">
|
||
<span className="text-xs font-semibold text-fg">{trace.title}</span>
|
||
{trace.specAnchor && onOpenSpec && (
|
||
<button
|
||
type="button"
|
||
onClick={() => onOpenSpec(trace.specAnchor!)}
|
||
className="flex shrink-0 items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] text-muted hover:bg-surface"
|
||
>
|
||
<BookOpen className="h-3 w-3" /> in der Spezifikation
|
||
</button>
|
||
)}
|
||
</div>
|
||
<table className="w-full border-collapse text-sm">
|
||
<tbody>
|
||
{trace.steps.map((s, i) => (
|
||
<TraceStepRow key={i} step={s} />
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// --- Gemeinsame Dialog-Huelle mit Reitern --------------------------------------------------
|
||
|
||
function DetailShell({
|
||
title,
|
||
subtitle,
|
||
tabs,
|
||
onClose,
|
||
}: {
|
||
title: string;
|
||
subtitle?: string;
|
||
tabs: { key: string; label: string; content: React.ReactNode }[];
|
||
onClose: () => void;
|
||
}) {
|
||
const [active, setActive] = useState(tabs[0]?.key);
|
||
const current = tabs.find((t) => t.key === active) ?? tabs[0];
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-black/40 px-4 py-8" onClick={onClose}>
|
||
<div
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="flex w-full max-w-4xl flex-col gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl"
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<div className="min-w-0">
|
||
<h2 className="truncate text-base font-semibold text-fg">{title}</h2>
|
||
{subtitle && <p className="text-xs text-muted">{subtitle}</p>}
|
||
</div>
|
||
<button type="button" onClick={onClose} aria-label="Schliessen" className="rounded-md p-1 text-faint hover:bg-surface-2">
|
||
<X className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="inline-flex w-fit rounded-lg border border-border bg-surface p-0.5 text-xs">
|
||
{tabs.map((t) => (
|
||
<button
|
||
key={t.key}
|
||
type="button"
|
||
onClick={() => setActive(t.key)}
|
||
className={`rounded-md px-3 py-1 font-medium ${
|
||
current?.key === t.key ? "bg-accent text-accent-fg" : "text-muted hover:bg-surface-2"
|
||
}`}
|
||
>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-4">{current?.content}</div>
|
||
|
||
<p className="text-[11px] text-faint">Nur-Lese-Ansicht. Werte werden hier nicht verändert.</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// --- Element-Detailansicht ----------------------------------------------------------------
|
||
|
||
const MULTI_SERIES: ElementCategory[] = ["REAL_ESTATE"];
|
||
|
||
export function ElementDetailDialog({
|
||
elementId,
|
||
name,
|
||
category,
|
||
computed,
|
||
onClose,
|
||
onOpenSpec,
|
||
}: {
|
||
elementId: string;
|
||
name: string;
|
||
category: ElementCategory;
|
||
computed: PlanComputed;
|
||
onClose: () => void;
|
||
onOpenSpec?: (anchor: string) => void;
|
||
}) {
|
||
// Verlauf über ALLE Phasen zusammensetzen.
|
||
const points = useMemo(() => {
|
||
const out: ElementYearPoint[] = [];
|
||
for (const ph of computed.phases) {
|
||
const ec = ph.elements.find((e) => e.elementId === elementId);
|
||
if (ec) out.push(...ec.yearly);
|
||
}
|
||
return out;
|
||
}, [computed, elementId]);
|
||
|
||
const perPhase = useMemo(
|
||
() =>
|
||
computed.phases
|
||
.map((ph) => ({ phase: ph, ec: ph.elements.find((e) => e.elementId === elementId) }))
|
||
.filter((x) => x.ec),
|
||
[computed, elementId]
|
||
);
|
||
|
||
const isFlow = category === "INCOME" || category === "EXPENSE";
|
||
const valueLabel = isFlow
|
||
? category === "INCOME"
|
||
? "Einkommen (nominal)"
|
||
: "Ausgaben (nominal)"
|
||
: category === "OTHER_DEBT"
|
||
? "Beitrag zum Vermögen"
|
||
: category === "REAL_ESTATE"
|
||
? "Eigenkapital"
|
||
: "Wert";
|
||
|
||
// Zweite Achse nur, wenn dieses Element überhaupt eine Rate trägt (AHV und Schulden nicht).
|
||
const rateLabel =
|
||
category === "REAL_ESTATE"
|
||
? "Wertsteigerung"
|
||
: isFlow
|
||
? category === "INCOME"
|
||
? "Lohnentwicklung"
|
||
: "Reale Mehrausgaben"
|
||
: "Erwartete Rendite";
|
||
const hasRate = points.some((p) => typeof p.rate === "number");
|
||
|
||
const verlauf = (
|
||
<>
|
||
{points.length === 0 ? (
|
||
<p className="text-sm text-muted">Für dieses Element gibt es in diesem Plan keinen Verlauf.</p>
|
||
) : (
|
||
<div className="h-80 w-full">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<LineChart data={points} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
|
||
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
||
<XAxis dataKey="age" type="number" domain={["dataMin", "dataMax"]} tick={{ fontSize: 11 }} tickFormatter={(v) => `${v} J.`} />
|
||
<YAxis yAxisId="chf" tick={{ fontSize: 11 }} tickFormatter={(v) => Intl.NumberFormat("de-CH", { notation: "compact" }).format(v)} />
|
||
{hasRate && (
|
||
<YAxis
|
||
yAxisId="rate"
|
||
orientation="right"
|
||
tick={{ fontSize: 11 }}
|
||
tickFormatter={(v) => `${v} %`}
|
||
// Etwas Luft nach oben und unten, damit eine konstante Rate nicht als
|
||
// Linie direkt auf der Achse klebt.
|
||
domain={([min, max]: readonly [number, number]) => [Math.min(0, min - 1), max + 1]}
|
||
/>
|
||
)}
|
||
<Tooltip
|
||
formatter={(v, n) =>
|
||
typeof v !== "number" ? [v, n] : n === rateLabel ? [`${v} %`, n] : [formatChf(v), n]
|
||
}
|
||
labelFormatter={(v) => `Alter ${v}`}
|
||
/>
|
||
<Legend wrapperStyle={{ fontSize: 12 }} />
|
||
<Line yAxisId="chf" dataKey="value" name={valueLabel} stroke="var(--accent)" strokeWidth={2} dot={false} isAnimationActive={false} />
|
||
{MULTI_SERIES.includes(category) && (
|
||
<>
|
||
<Line yAxisId="chf" dataKey="propertyValue" name="Verkehrswert" stroke="#0ea5e9" strokeWidth={1.5} dot={false} isAnimationActive={false} />
|
||
<Line yAxisId="chf" dataKey="mortgage" name="Restschuld" stroke="#dc2626" strokeWidth={1.5} strokeDasharray="5 3" dot={false} isAnimationActive={false} />
|
||
</>
|
||
)}
|
||
{hasRate && (
|
||
// Stufenlinie, nicht interpoliert: Die Rate ist innerhalb einer Phase
|
||
// konstant und springt an der Phasengrenze. Eine weiche Kurve würde einen
|
||
// gleitenden Übergang suggerieren, den die Berechnung nicht macht.
|
||
<Line
|
||
yAxisId="rate"
|
||
type="stepAfter"
|
||
dataKey="rate"
|
||
name={rateLabel}
|
||
stroke="#d97706"
|
||
strokeWidth={1.5}
|
||
strokeDasharray="4 2"
|
||
dot={false}
|
||
connectNulls
|
||
isAnimationActive={false}
|
||
/>
|
||
)}
|
||
</LineChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
)}
|
||
|
||
<div className="overflow-x-auto rounded-xl border border-border">
|
||
<table className="w-full border-collapse text-sm">
|
||
<thead>
|
||
<tr className="bg-surface-2 text-xs text-faint">
|
||
<th className="px-3 py-2 text-left font-semibold">Lebensphase</th>
|
||
<th className="px-3 py-2 text-right font-semibold">Beginn</th>
|
||
<th className="px-3 py-2 text-right font-semibold">Ende</th>
|
||
<th className="px-3 py-2 text-left font-semibold">Hinweis</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{perPhase.map(({ phase, ec }) => (
|
||
<tr key={phase.id} className="border-t border-border">
|
||
<td className="px-3 py-2 text-fg">{phase.name}</td>
|
||
<td className="px-3 py-2 text-right text-muted">{formatChf(ec!.startValue)}</td>
|
||
<td className="px-3 py-2 text-right text-muted">{formatChf(ec!.endValue)}</td>
|
||
<td className="px-3 py-2 text-[11px] text-faint">{ec!.note ?? ""}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
);
|
||
|
||
const rechenweg = (
|
||
<>
|
||
{perPhase.every(({ ec }) => !ec!.trace && !ec!.transitionTrace) && (
|
||
<p className="text-sm text-muted">Für dieses Element gibt es keinen eigenen Rechenweg.</p>
|
||
)}
|
||
{perPhase.map(({ phase, ec }) => (
|
||
<div key={phase.id} className="flex flex-col gap-2">
|
||
{(ec!.trace || ec!.transitionTrace) && (
|
||
<div className="text-xs font-semibold uppercase tracking-wide text-faint">{phase.name}</div>
|
||
)}
|
||
{ec!.trace && <TraceBlock trace={ec!.trace} onOpenSpec={onOpenSpec} />}
|
||
{ec!.transitionTrace && <TraceBlock trace={ec!.transitionTrace} onOpenSpec={onOpenSpec} />}
|
||
</div>
|
||
))}
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<DetailShell
|
||
title={name}
|
||
subtitle={CATEGORY_LABELS[category]}
|
||
onClose={onClose}
|
||
tabs={[
|
||
{ key: "verlauf", label: "Verlauf", content: verlauf },
|
||
{ key: "rechenweg", label: "Rechenweg", content: rechenweg },
|
||
]}
|
||
/>
|
||
);
|
||
}
|
||
|
||
// --- Phasen-Detailansicht ------------------------------------------------------------------
|
||
|
||
const ASSET_CATS: ElementCategory[] = ["PENSION_FUND", "PILLAR_3A", "REAL_ESTATE", "OTHER_ASSET"];
|
||
const ALLOC_PALETTE = ["#4f46e5", "#0ea5e9", "#16a34a", "#d97706", "#dc2626", "#7c3äd"];
|
||
|
||
export function PhaseDetailDialog({
|
||
phase,
|
||
isFirst,
|
||
onClose,
|
||
onOpenSpec,
|
||
}: {
|
||
phase: PhaseComputed;
|
||
isFirst: boolean;
|
||
onClose: () => void;
|
||
onOpenSpec?: (anchor: string) => void;
|
||
}) {
|
||
const alloc = useMemo(() => {
|
||
const rows = phase.elements.filter((e) => ASSET_CATS.includes(e.category) && (e.startValue > 0 || e.endValue > 0));
|
||
return [
|
||
{ label: "Beginn", ...Object.fromEntries(rows.map((r) => [r.elementId, Math.max(0, r.startValue)])) },
|
||
{ label: "Ende", ...Object.fromEntries(rows.map((r) => [r.elementId, Math.max(0, r.endValue)])) },
|
||
];
|
||
}, [phase]);
|
||
const allocEls = useMemo(
|
||
() => phase.elements.filter((e) => ASSET_CATS.includes(e.category) && (e.startValue > 0 || e.endValue > 0)),
|
||
[phase]
|
||
);
|
||
|
||
const übersicht = (
|
||
<>
|
||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||
<Kpi label="Typ" text={phase.type === "ERWERB" ? "Erwerb" : phase.type === "PENSION" ? "Pension" : "Misch"} />
|
||
<Kpi label="Dauer" text={`${phase.durationYears} Jahre`} />
|
||
<Kpi label="Vermögen Beginn" text={formatChf(phase.startWealthNominal)} />
|
||
<Kpi label="Vermögen Ende" text={formatChf(phase.endWealthNominal)} />
|
||
</div>
|
||
|
||
<section>
|
||
<h3 className="mb-1 text-xs font-semibold text-fg">Vermögensaufteilung</h3>
|
||
<p className="mb-2 text-[11px] text-muted">Zusammensetzung des Anlagevermögens zu Beginn und am Ende dieser Phase.</p>
|
||
{allocEls.length === 0 ? (
|
||
<p className="text-sm text-muted">In dieser Phase gibt es kein Anlagevermögen.</p>
|
||
) : (
|
||
<div className="h-56 w-full">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<BarChart data={alloc} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
|
||
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
||
<XAxis dataKey="label" tick={{ fontSize: 11 }} />
|
||
<YAxis tick={{ fontSize: 11 }} tickFormatter={(v) => Intl.NumberFormat("de-CH", { notation: "compact" }).format(v)} />
|
||
<Tooltip formatter={(v) => (typeof v === "number" ? formatChf(v) : v)} />
|
||
<Legend wrapperStyle={{ fontSize: 12 }} />
|
||
{allocEls.map((el, i) => (
|
||
<Bar key={el.elementId} dataKey={el.elementId} name={el.name} stackId="a" fill={ALLOC_PALETTE[i % ALLOC_PALETTE.length]} isAnimationActive={false} />
|
||
))}
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
)}
|
||
</section>
|
||
</>
|
||
);
|
||
|
||
const wasserfall = (
|
||
<>
|
||
<section>
|
||
<h3 className="mb-1 text-xs font-semibold text-fg">Woher kommt die Vermögensänderung?</h3>
|
||
<p className="mb-2 text-[11px] text-muted">
|
||
Nur <strong>echte</strong> Zu- und Abgänge. Sparraten, Amortisationen und Zusatzinvestitionen erscheinen hier
|
||
bewusst <strong>nicht</strong>: Sie verschieben Geld vom Cash in einen Vermögenswert, ohne das Vermögen zu
|
||
verändern – als Balken gezeichnet würden sie einen Verlust vortäuschen, den es nicht gibt.
|
||
</p>
|
||
<Waterfall items={bridgeItems(phase.wealthBridge, isFirst)} />
|
||
<ResidualNote residual={phase.wealthBridge.residual} />
|
||
</section>
|
||
|
||
<section>
|
||
<h3 className="mb-1 text-xs font-semibold text-fg">Wohin ist das Cash geflossen?</h3>
|
||
<p className="mb-2 text-[11px] text-muted">
|
||
Hier erscheinen die Umbuchungen: Sparraten, Amortisationen und Investitionen verlassen das Cash-Konto, auch
|
||
wenn sie das Vermögen nicht mindern.
|
||
</p>
|
||
<Waterfall items={cashItems(phase.cashBridge, isFirst)} />
|
||
<ResidualNote residual={phase.cashBridge.residual} />
|
||
</section>
|
||
</>
|
||
);
|
||
|
||
const rechenweg = (
|
||
<>
|
||
{(phase.traces ?? []).length === 0 && <p className="text-sm text-muted">Kein Rechenweg verfügbar.</p>}
|
||
{(phase.traces ?? []).map((t, i) => (
|
||
<TraceBlock key={i} trace={t} onOpenSpec={onOpenSpec} />
|
||
))}
|
||
</>
|
||
);
|
||
|
||
return (
|
||
<DetailShell
|
||
title={phase.name}
|
||
subtitle={`Lebensphase ${phase.sequenceNumber} · ${phase.durationYears} Jahre`}
|
||
onClose={onClose}
|
||
tabs={[
|
||
{ key: "übersicht", label: "Übersicht", content: übersicht },
|
||
{ key: "wasserfall", label: "Wasserfall", content: wasserfall },
|
||
{ key: "rechenweg", label: "Rechenweg", content: rechenweg },
|
||
]}
|
||
/>
|
||
);
|
||
}
|
||
|
||
function Kpi({ label, text }: { label: string; text: string }) {
|
||
return (
|
||
<div className="rounded-lg border border-border bg-surface-2 px-3 py-2">
|
||
<div className="text-[11px] text-muted">{label}</div>
|
||
<div className="text-sm font-semibold text-fg">{text}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// --- Plan-weite Rechenwege (Deflatoren, AHV-Karriere, Ruinalter) ---------------------------
|
||
|
||
export function PlanTraceDialog({
|
||
computed,
|
||
onClose,
|
||
onOpenSpec,
|
||
}: {
|
||
computed: PlanComputed;
|
||
onClose: () => void;
|
||
onOpenSpec?: (anchor: string) => void;
|
||
}) {
|
||
return (
|
||
<DetailShell
|
||
title="Rechenwege dieses Szenarios"
|
||
subtitle="Plan-weite Grössen, die in alle Phasen hineinwirken"
|
||
onClose={onClose}
|
||
tabs={[
|
||
{
|
||
key: "plan",
|
||
label: "Plan-Ebene",
|
||
content: (
|
||
<>
|
||
{(computed.traces ?? []).map((t, i) => (
|
||
<TraceBlock key={i} trace={t} onOpenSpec={onOpenSpec} />
|
||
))}
|
||
</>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
);
|
||
}
|