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.
2026-09-23 20:03:43 +02:00
parent 2bba1f40ac
commit e5aa527473
8 changed files with 232 additions and 60 deletions
--- a/components/employees/AddDependentModal.tsx
+++ b/components/employees/AddDependentModal.tsx
@@ -2,34 +2,48 @@

 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { addEmployeeDependent } from "@/actions/employees";
+import { addEmployeeDependent, updateEmployeeDependent } from "@/actions/employees";
 import { Button } from "@/components/ui/Button";
 import { SelectField, TextField } from "@/components/ui/Field";
 import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
 import { todayIso } from "@/lib/format";
-import type { RelationshipType } from "@/lib/types";
+import type { Database, RelationshipType } from "@/lib/types";

 const RELATIONSHIPS: RelationshipType[] = ["Ehepartner:in", "Lebenspartner:in", "Kind", "Sonstige"];

+type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];
+
+// Dasselbe Fenster für Anlegen und Berichtigen.
+//
+// Der Unterschied ist nicht die Maske, sondern der Stichtag: beim Anlegen
+// passiert etwas zu einem Zeitpunkt, beim Berichtigen war die Angabe schon
+// vorher falsch. Deshalb steht „Wirksam ab" nur im ersten Fall — ein Datum
+// bei einer Korrektur hiesse, die Person habe bis dahin anders geheissen.
 export function AddDependentModal({
  open,
  onClose,
  employeeId,
  defaultEffectiveDate,
+  dependent,
 }: {
  open: boolean;
  onClose: () => void;
  employeeId: string;
  defaultEffectiveDate?: string;
+  /** Gesetzt: berichtigen statt anlegen. */
+  dependent?: Dependent;
 }) {
  const { showToast } = useToast();
  const router = useRouter();
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-  const [svNummer, setSvNummer] = useState("");
-  const [birthDate, setBirthDate] = useState("");
-  const [relationship, setRelationship] = useState<RelationshipType>("Kind");
+  const bearbeiten = Boolean(dependent);
+  const [firstName, setFirstName] = useState(dependent?.first_name ?? "");
+  const [lastName, setLastName] = useState(dependent?.last_name ?? "");
+  const [svNummer, setSvNummer] = useState(dependent?.sv_nummer ?? "");
+  const [birthDate, setBirthDate] = useState(dependent?.birth_date ?? "");
+  const [relationship, setRelationship] = useState<RelationshipType>(
+    (dependent?.relationship as RelationshipType) ?? "Kind"
+  );
  const [effectiveDate, setEffectiveDate] = useState(defaultEffectiveDate ?? todayIso());
  const [prevDefaultEffectiveDate, setPrevDefaultEffectiveDate] = useState(defaultEffectiveDate);
  const [pending, setPending] = useState(false);
@@ -53,26 +67,36 @@ export function AddDependentModal({
  }

  async function handleSubmit() {
-    if (!firstName || !lastName || !birthDate || !effectiveDate) {
+    if (!firstName || !lastName || !birthDate || (!bearbeiten && !effectiveDate)) {
      showToast("Bitte alle Pflichtfelder ausfüllen.", "error");
      return;
    }
    setPending(true);
-    const result = await addEmployeeDependent({
-      employee_id: employeeId,
-      first_name: firstName,
-      last_name: lastName,
-      relationship,
-      sv_nummer: svNummer || undefined,
-      birth_date: birthDate,
-      effective_date: effectiveDate,
-    });
+    const result = bearbeiten
+      ? await updateEmployeeDependent({
+          dependent_id: dependent!.id,
+          employee_id: employeeId,
+          first_name: firstName,
+          last_name: lastName,
+          relationship,
+          sv_nummer: svNummer,
+          birth_date: birthDate,
+        })
+      : await addEmployeeDependent({
+          employee_id: employeeId,
+          first_name: firstName,
+          last_name: lastName,
+          relationship,
+          sv_nummer: svNummer || undefined,
+          birth_date: birthDate,
+          effective_date: effectiveDate,
+        });
    setPending(false);
    if (result.success) {
-      showToast("Angehörige:r hinzugefügt.");
+      showToast(bearbeiten ? "Angaben berichtigt." : "Angehörige:r hinzugefügt.");
      router.refresh();
      onClose();
-      reset();
+      if (!bearbeiten) reset();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
@@ -82,20 +106,22 @@ export function AddDependentModal({
    <Modal
      open={open}
      onClose={onClose}
-      title="Angehörige:n hinzufügen"
+      title={bearbeiten ? "Angehörige:n berichtigen" : "Angehörige:n hinzufügen"}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button onClick={handleSubmit} pending={pending}>
-            Hinzufügen
+            {bearbeiten ? "Speichern" : "Hinzufügen"}
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
-        <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
+        {!bearbeiten && (
+          <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
+        )}
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          <TextField label="Vorname" required value={firstName} onChange={setFirstName} />
          <TextField label="Nachname" required value={lastName} onChange={setLastName} />
--- a/components/employees/AngehoerigeSection.tsx
+++ b/components/employees/AngehoerigeSection.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { Plus, Trash2 } from "lucide-react";
+import { Pencil, Plus, Trash2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { deleteEmployeeDependent } from "@/actions/employees";
@@ -19,6 +19,7 @@ export function AngehoerigeSection({ employeeId, dependents, effectiveDate }: {
  const { showToast } = useToast();
  const router = useRouter();
  const [modalOpen, setModalOpen] = useState(false);
+  const [bearbeitet, setBearbeitet] = useState<Dependent | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);
  const resolvedEffectiveDate = effectiveDate || todayIso();

@@ -70,6 +71,18 @@ export function AngehoerigeSection({ employeeId, dependents, effectiveDate }: {
                  <td className="px-4 py-2.5 text-ink-body">{d.sv_nummer ?? "–"}</td>
                  <td className="px-4 py-2.5 text-ink-body">{fmtDate(d.birth_date)}</td>
                  <td className="px-4 py-2.5 text-right">
+                    {/* Berichtigen statt löschen-und-neu-anlegen: ein
+                        Tippfehler hinterliess sonst zwei Einträge in der
+                        Akte, und der erste sagte „entfernt", was nicht
+                        stimmte. */}
+                    <Button
+                      variant="icon"
+                      onClick={() => setBearbeitet(d)}
+                      aria-label={`${d.first_name} ${d.last_name} berichtigen`}
+                      className="hover:!text-brand-700"
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
                    <Button
                      variant="icon"
                      onClick={() => handleDelete(d.id)}
@@ -88,6 +101,19 @@ export function AngehoerigeSection({ employeeId, dependents, effectiveDate }: {
      )}

      <AddDependentModal open={modalOpen} onClose={() => setModalOpen(false)} employeeId={employeeId} defaultEffectiveDate={resolvedEffectiveDate} />
+
+      {/* Eigene Einbindung mit `key`: das Fenster bleibt sonst montiert und
+          zeigte beim zweiten Öffnen die Felder der zuvor bearbeiteten
+          Person. */}
+      {bearbeitet && (
+        <AddDependentModal
+          key={bearbeitet.id}
+          open
+          onClose={() => setBearbeitet(null)}
+          employeeId={employeeId}
+          dependent={bearbeitet}
+        />
+      )}
    </div>
  );
 }
--- a/components/employees/NotfallkontaktModal.tsx
+++ b/components/employees/NotfallkontaktModal.tsx
@@ -31,11 +31,14 @@ export function NotfallkontaktModal({
  onClose,
  employeeId,
  kontakt,
+  effectiveDate,
 }: {
  open: boolean;
  onClose: () => void;
  employeeId: string;
  kontakt: Notfallkontakt;
+  /** Aus „Daten ändern"; ohne Angabe gilt heute. */
+  effectiveDate?: string;
 }) {
  const { showToast } = useToast();
  const router = useRouter();
@@ -57,7 +60,7 @@ export function NotfallkontaktModal({
    setPending(true);
    const result = await changeEmployeeData({
      employee_id: employeeId,
-      effective_date: todayIso(),
+      effective_date: effectiveDate || todayIso(),
      person: {
        emergency_contact_name: name.trim(),
        emergency_contact_phone: telefon.trim(),
--- a/components/employees/NotfallkontaktSection.tsx
+++ b/components/employees/NotfallkontaktSection.tsx
@@ -19,11 +19,25 @@ import { NotfallkontaktModal, type Notfallkontakt } from "./NotfallkontaktModal"
 // ihn führte der einzige Weg über „Daten ändern" — ein Formular über alle
 // Stammdaten, um eine Telefonnummer einzutragen.

-export function NotfallkontaktSection({ employeeId, kontakt }: { employeeId: string; kontakt: Notfallkontakt }) {
+export function NotfallkontaktSection({
+  employeeId,
+  kontakt,
+  effectiveDate,
+}: {
+  employeeId: string;
+  kontakt: Notfallkontakt;
+  /**
+   * Nur, wenn der Abschnitt in „Daten ändern" steht: dann treibt dessen
+   * „Wirksam ab" auch diesen Vorgang — wie bei den Angehörigen darüber.
+   * Ohne Angabe gilt heute.
+   */
+  effectiveDate?: string;
+}) {
  const { showToast } = useToast();
  const router = useRouter();
  const [modalOpen, setModalOpen] = useState(false);
  const [entfernt, setEntfernt] = useState(false);
+  const stichtag = effectiveDate || todayIso();

  const vorhanden = Boolean(kontakt.name);

@@ -33,7 +47,7 @@ export function NotfallkontaktSection({ employeeId, kontakt }: { employeeId: str
    // daraus null. Würden die Schlüssel fehlen, bliebe der Kontakt stehen.
    const result = await changeEmployeeData({
      employee_id: employeeId,
-      effective_date: todayIso(),
+      effective_date: stichtag,
      person: { emergency_contact_name: "", emergency_contact_phone: "", emergency_contact_relation: "" },
      contract: {},
      role: {},
@@ -135,6 +149,7 @@ export function NotfallkontaktSection({ employeeId, kontakt }: { employeeId: str
        onClose={() => setModalOpen(false)}
        employeeId={employeeId}
        kontakt={kontakt}
+        effectiveDate={stichtag}
      />
    </div>
  );
--- a/components/employees/panels/DatenAendernPanel.tsx
+++ b/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>
  );