Rework core model: financial elements as plan-wide entities across phases; derived phase types (Erwerb/Pension/Misch) with retirement-capped durations and per-plan retirement age; AHV (gap years + couple ceiling), PK payout/annuity, 3a, real estate, other assets/debts; horizontal timeline with retirement markers; phase x element matrix with detail panel; savings/consumption quota + available-capital key figures with red status

2026-07-13 07:55:58 +02:00
parent b3a3b565ac
commit b775ab77cb
27 changed files with 2407 additions and 2166 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { NumberField, TextField } from "@/components/FormField";
+import { api } from "@/lib/api-client";
+import type { HouseholdInput, PhaseInput } from "@/lib/types";
+
+export function PhaseDetail({
+  phase,
+  maxDurationYears,
+  isLast,
+  household,
+  onSaved,
+  onDeleted,
+}: {
+  phase: PhaseInput;
+  maxDurationYears: number | null;
+  isLast: boolean;
+  household: HouseholdInput;
+  onSaved: () => void;
+  onDeleted: () => void;
+}) {
+  const [name, setName] = useState(phase.name);
+  const [durationYears, setDurationYears] = useState(phase.durationYears);
+  const [inflationRate, setInflationRate] = useState<number | null>(phase.inflationRate);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const cap = maxDurationYears;
+
+  async function save() {
+    setSaving(true);
+    setError(null);
+    try {
+      await api.put(`/api/phases/${phase.id}`, { name, durationYears, inflationRate });
+      onSaved();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Speichern fehlgeschlagen.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function remove() {
+    if (!confirm(`Phase "${phase.name}" wirklich loeschen?`)) return;
+    try {
+      await api.delete(`/api/phases/${phase.id}`);
+      onDeleted();
+    } catch (e) {
+      alert(e instanceof Error ? e.message : "Loeschen fehlgeschlagen.");
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between">
+        <div className="text-xs font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-400">
+          Lebensphase
+        </div>
+        {isLast && (
+          <button
+            type="button"
+            onClick={remove}
+            className="flex items-center gap-1 rounded-lg border border-zinc-300 px-2 py-1 text-xs text-zinc-500 hover:border-red-200 hover:bg-red-50 hover:text-red-600 dark:border-zinc-700 dark:hover:bg-red-950"
+          >
+            <Trash2 className="h-3.5 w-3.5" /> Phase loeschen
+          </button>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <TextField label="Bezeichnung" value={name} onChange={setName} />
+        <NumberField
+          label={`Dauer (Jahre)${cap != null ? ` · max. ${cap}` : ""}`}
+          help={cap != null ? "Die Dauer ist ans naechste Pensionsereignis gekappt." : undefined}
+          value={durationYears}
+          min={1}
+          max={cap ?? undefined}
+          onChange={(v) => setDurationYears(cap != null ? Math.min(v, cap) : v)}
+        />
+        <NumberField
+          label="Inflationsrate (%)"
+          help="Ueberschreibt die Standardannahme aus dem Grundprofil."
+          value={inflationRate ?? household.inflationRateDefault}
+          step={0.1}
+          onChange={setInflationRate}
+        />
+      </div>
+
+      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      <div>
+        <button
+          type="button"
+          disabled={saving}
+          onClick={save}
+          className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 disabled:opacity-50 dark:bg-indigo-500 dark:hover:bg-indigo-400"
+        >
+          {saving ? "Speichern..." : "Speichern"}
+        </button>
+      </div>
+    </div>
+  );
+}