Angehoerige berichtigen, und beide Abschnitte sehen gleich aus

Angehoerige liessen sich bisher nur anlegen und entfernen. Ein Tippfehler
im Namen war nur zu beheben, indem man die Person loeschte und neu
anlegte -- zwei Eintraege in der Akte fuer eine Korrektur, und der erste
sagte "entfernt", was nicht stimmte. Jetzt steht in jeder Zeile ein Stift,
wie beim Notfallkontakt.

update_employee_dependent kommt bewusst **ohne** Stichtag. Hinzufuegen und
Entfernen tragen einen, dort passiert etwas zu einem Zeitpunkt. Eine
Berichtigung nicht: der Wert war schon vorher falsch, und ein "wirksam ab"
hiesse, die Person habe bis dahin anders geheissen. Der Eintrag in der
Akte nennt deshalb Vorher und Nachher statt eines Datums.

In "Daten aendern" standen fuer den Notfallkontakt drei Eingabefelder,
waehrend die Angehoerigen darueber als Tabelle mit Knoepfen erscheinen --
zwei Bauformen fuer denselben Zweck, direkt untereinander. Dort steht
jetzt derselbe Abschnitt wie im Reiter "Stammdaten"; beide laufen ueber
das "Wirksam ab" des Formulars, wie die Angehoerigen es schon taten.

Damit schreibt auch nur noch eine Stelle diese drei Spalten. Vorher
schickte das Formular sie zusaetzlich im eigenen Aufruf mit.

components/employees/panels/DatenAendernPanel.tsx

@@ -18,7 +18,8 @@ import { GRUND_BEGUENSTIGT_BEHINDERT } from "@/lib/kuendigungsschutz";
 import { MITARBEITERART_STANDARD } from "@/lib/mitarbeiterart";
 import { fmtFullName, todayIso } from "@/lib/format";
 import { isValidSvnr, requiresAustrianSvnr } from "@/lib/svnr";
-import { EMERGENCY_RELATIONS, type ContractType, type Database, type EmploymentType, type GenderType } from "@/lib/types";
+import { NotfallkontaktSection } from "@/components/employees/NotfallkontaktSection";
+import type { ContractType, Database, EmploymentType, GenderType } from "@/lib/types";
 
 type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
 type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];
@@ -66,9 +67,6 @@ export function DatenAendernPanel({
   const [email, setEmail] = useState(employee.email ?? "");
   const [companyEmail, setCompanyEmail] = useState(employee.company_email ?? "");
   const [phone, setPhone] = useState(employee.phone ?? "");
-  const [notfallName, setNotfallName] = useState(employee.emergency_contact_name ?? "");
-  const [notfallTelefon, setNotfallTelefon] = useState(employee.emergency_contact_phone ?? "");
-  const [notfallVerhaeltnis, setNotfallVerhaeltnis] = useState(employee.emergency_contact_relation ?? "");
 
   const [employmentType, setEmploymentType] = useState<EmploymentType>(employee.employment_type);
   const [weeklyHours, setWeeklyHours] = useState(String(employee.weekly_hours));
@@ -136,12 +134,6 @@ export function DatenAendernPanel({
       showToast("Bitte ein Wirksam-ab-Datum angeben.", "error");
       return;
     }
-    // Name und Nummer gehören zusammen — die Datenbank weist eines ohne das
-    // andere ab, und die Meldung dort erklärt es nicht.
-    if (Boolean(notfallName.trim()) !== Boolean(notfallTelefon.trim())) {
-      showToast("Beim Notfallkontakt braucht es Name und Telefonnummer — oder beides leer.", "error");
-      return;
-    }
     setPending(true);
     const result = await changeEmployeeData({
       employee_id: employee.id,
@@ -172,9 +164,10 @@ export function DatenAendernPanel({
         email: email.trim(),
         company_email: companyEmail.trim(),
         phone: phone.trim(),
-        emergency_contact_name: notfallName.trim(),
-        emergency_contact_phone: notfallTelefon.trim(),
-        emergency_contact_relation: notfallVerhaeltnis.trim(),
+        // Der Notfallkontakt läuft über seinen eigenen Abschnitt weiter unten
+        // — wie die Angehörigen. Stünde er zusätzlich hier, schrieben zwei
+        // Stellen dasselbe Feld, und welche gewinnt, hinge an der
+        // Reihenfolge.
       },
       contract: {
         employment_type: employmentType,
@@ -386,27 +379,21 @@ export function DatenAendernPanel({
 
         <AngehoerigeSection employeeId={employee.id} dependents={dependents} effectiveDate={effectiveDate} />
 
-        {/* Unterhalb der Angehörigen und ganz am Schluss — dieselbe Reihenfolge
-            wie im Reiter „Stammdaten". Aufgebaut wie „Person", „Vertrag" und
-            „Rolle & Anstellung" darüber: eine Überschrift, darunter die
-            Felder. Hier stand ein umrahmtes fieldset mit eigener
-            Beschriftung; das hob den Abschnitt gegenüber allen anderen
-            heraus, ohne dass er wichtiger wäre. */}
-        <div>
-          <h3 className="mb-3 text-sm font-bold text-ink">Notfallkontakt</h3>
-          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-            <TextField label="Name" dense value={notfallName} onChange={setNotfallName} />
-            <TextField label="Telefon" dense type="tel" value={notfallTelefon} onChange={setNotfallTelefon} />
-            <SelectField
-              label="Verhältnis"
-              dense
-              value={notfallVerhaeltnis}
-              onChange={setNotfallVerhaeltnis}
-              placeholder="Bitte wählen…"
-              options={EMERGENCY_RELATIONS.map((r) => ({ value: r, label: r }))}
-            />
-          </div>
-        </div>
+        {/* Derselbe Abschnitt wie im Reiter „Stammdaten", unmittelbar unter den
+            Angehörigen — beides Personen im Umfeld, beides dieselbe Tabelle
+            mit denselben Knöpfen. Hier standen drei Eingabefelder: fachlich
+            dasselbe, aber daneben eine zweite Bauform für denselben Zweck.
+            Beide Abschnitte laufen jetzt über das „Wirksam ab" dieses
+            Formulars. */}
+        <NotfallkontaktSection
+          employeeId={employee.id}
+          effectiveDate={effectiveDate}
+          kontakt={{
+            name: employee.emergency_contact_name,
+            telefon: employee.emergency_contact_phone,
+            verhaeltnis: employee.emergency_contact_relation,
+          }}
+        />
       </div>
     </SlideOver>
   );