V3: 3 Farbschemata, Grundprofil auf Plan-Ebene, Erstellungs-Popups, integer-Zahlenfelder mit Beschleunigungs-Spinner, Carry-Forward des Zielwerts, gefuehrter Uebergang

- Theming: semantische CSS-Tokens + 3 waehlbare Schemata (Hell/Dunkel/Warm/Sunset), Umschalter im Profil-Menue, FOUC-frei via Inline-Script, localStorage; Klassen-Sweep aller Komponenten, Recharts aus Tokens - Datenmodell: Household entfaellt; Plan traegt Haushaltsform/Personen/Inflation selbst (Person -> planId, Plan -> userId); destruktive Migration (TRUNCATE); Onboarding/HouseholdSettings entfernt; Plan-Erstellung & -Einstellungen mit Profilfeldern - Popups: Element-Erstellung mit Inline-Feldern (geteilte ElementPhaseFields/ElementTransitionFields), Phase- und Plan-Popups mit Direkteingabe - Zahlenfelder: 1'000er-Runden entfernt (floorToThousand/roundToHundred weg), integer MoneyInput mit beschleunigendem Press-and-Hold-Spinner, 0-Bug-Fix, harte Live-Caps - Quote: Amortisation + Tilgung neu quotenwirksam; Restquote sichtbar (sinkt beim Verteilen); Invest-Deckel = verfuegbares Kapital + fortgeschriebener Zielwert - Carry-Forward: Startwert der Folgephase = Zielwert der Vorphase minus Uebergangs-Bezug (live abgeleitet); optionale Zusatzinvestition aus verfuegbarem Kapital - Matrix: Zelle zeigt Start -> Ziel; Uebergangs-Spaltenkopf mit "n offen"-Badge + gefuehrtem Pruef-Panel Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-13 14:49:42 +02:00
parent b775ab77cb
commit 32adfb4476
32 changed files with 1706 additions and 1290 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+import { NumberField, SelectField } from "@/components/FormField";
+import type { HouseholdType, PersonRole } from "@/lib/types";
+
+export interface ProfileDraft {
+  householdType: HouseholdType;
+  inflationRateDefault: number;
+  persons: { role: PersonRole; age: number; retirementAge: number }[];
+}
+
+export function emptyProfileDraft(): ProfileDraft {
+  return {
+    householdType: "SINGLE",
+    inflationRateDefault: 1.5,
+    persons: [{ role: "PERSON_A", age: 35, retirementAge: 65 }],
+  };
+}
+
+// Gemeinsame Formularfelder fuer das Grundprofil eines Plans (Haushaltsform, Personen,
+// Inflation). Wird beim Plan-Erstellen und in den Plan-Einstellungen verwendet.
+export function PlanProfileFields({
+  draft,
+  onChange,
+}: {
+  draft: ProfileDraft;
+  onChange: (next: ProfileDraft) => void;
+}) {
+  function setType(type: HouseholdType) {
+    if (type === "SINGLE") {
+      onChange({ ...draft, householdType: type, persons: draft.persons.slice(0, 1) });
+    } else {
+      const persons =
+        draft.persons.length < 2
+          ? [...draft.persons, { role: "PERSON_B" as PersonRole, age: 35, retirementAge: 65 }]
+          : draft.persons;
+      onChange({ ...draft, householdType: type, persons });
+    }
+  }
+
+  function updatePerson(index: number, patch: Partial<ProfileDraft["persons"][number]>) {
+    onChange({
+      ...draft,
+      persons: draft.persons.map((p, i) => (i === index ? { ...p, ...patch } : p)),
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <SelectField
+        label="Haushaltsform"
+        help="Waehlen Sie, ob Sie alleine oder gemeinsam mit einer Partnerin / einem Partner planen."
+        value={draft.householdType}
+        onChange={setType}
+        options={[
+          { value: "SINGLE", label: "Einzelperson" },
+          { value: "COUPLE", label: "Paar (zwei Personen)" },
+        ]}
+      />
+
+      {draft.persons.map((person, index) => (
+        <div key={person.role} className="grid grid-cols-2 gap-3 rounded-xl border border-border bg-surface-2 p-3">
+          <div className="col-span-2 text-xs font-semibold uppercase tracking-wide text-faint">
+            {draft.householdType === "COUPLE" ? (person.role === "PERSON_A" ? "Person A" : "Person B") : "Ihre Angaben"}
+          </div>
+          <NumberField
+            label="Aktuelles Alter"
+            value={person.age}
+            min={0}
+            max={120}
+            onChange={(v) => updatePerson(index, { age: Math.round(v) })}
+          />
+          <NumberField
+            label="Pensionierungsalter"
+            help="Steuert die Ableitung des Phasentyps (Erwerb/Pension)."
+            value={person.retirementAge}
+            min={30}
+            max={100}
+            onChange={(v) => updatePerson(index, { retirementAge: Math.round(v) })}
+          />
+        </div>
+      ))}
+
+      <NumberField
+        label="Erwartete Inflationsrate (%)"
+        help="Langfristige Annahme zur jaehrlichen Teuerung. Kann pro Lebensphase individuell ueberschrieben werden."
+        value={draft.inflationRateDefault}
+        step={0.1}
+        onChange={(v) => onChange({ ...draft, inflationRateDefault: v })}
+      />
+    </div>
+  );
+}