alpenwerk-hr/components/employees/panels/TerminatePanel.tsx

"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { terminateEmployee } from "@/actions/employees";
import { Button } from "@/components/ui/Button";
import { SelectField, TextField, TextareaField } from "@/components/ui/Field";
import { SlideOver } from "@/components/ui/SlideOver";
import { useToast } from "@/components/ui/Toast";
import type { Database } from "@/lib/supabase/types";
import { fmtName } from "@/lib/format";

type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];

// „No Show" steht am Ende und getrennt: es ist kein Austritt im gewohnten
// Sinn, sondern der Fall, dass jemand nie angetreten ist.
const NO_SHOW = "No Show";
const EXIT_REASONS = [
  "Einvernehmliche Auflösung",
  "Kündigung AN",
  "Kündigung AG",
  "Befristungsablauf",
  "Pensionierung",
  "Entlassung",
  NO_SHOW,
];
const CHECKLIST_ITEMS = ["IT-Zugänge deaktivieren", "Hardware retournieren", "ÖGK-Abmeldung", "Endabrechnung & Dienstzeugnis"];

type TerminatePanelProps = {
  open: boolean;
  onClose: () => void;
  employee: EmployeeRow;
  directReportCount: number;
};

export function TerminatePanel({ open, onClose, employee, directReportCount }: TerminatePanelProps) {
  const { showToast } = useToast();
  const router = useRouter();
  const [exitDate, setExitDate] = useState("");
  const [reason, setReason] = useState(EXIT_REASONS[0]);
  const [note, setNote] = useState("");
  const [checked, setChecked] = useState<boolean[]>(CHECKLIST_ITEMS.map(() => false));
  const [pending, setPending] = useState(false);

  // Bei einem Nichtantritt ist das Datum nicht frei wählbar: es ist der Tag,
  // an dem die Person hätte anfangen sollen. Die Datenbank setzt es ohnehin
  // so; hier steht es sichtbar, damit niemand ein Datum eintippt, das dann
  // stillschweigend übergangen wird.
  const istNoShow = reason === NO_SHOW;
  const wirksamesDatum = istNoShow ? employee.entry_date : exitDate;

  async function handleSubmit() {
    if (!wirksamesDatum) {
      showToast("Bitte ein Austrittsdatum angeben.", "error");
      return;
    }
    setPending(true);
    const result = await terminateEmployee({
      employee_id: employee.id,
      exit_date: wirksamesDatum,
      exit_reason: reason,
      note,
    });
    setPending(false);
    if (result.success) {
      showToast(
        istNoShow
          ? `${employee.first_name} ${employee.last_name} ist nicht angetreten.`
          : `Austritt für ${employee.first_name} ${employee.last_name} erfasst.`
      );
      router.refresh();
      onClose();
    } else {
      showToast(result.error ?? "Fehler beim Speichern.", "error");
    }
  }

  return (
    <SlideOver
      open={open}
      onClose={onClose}
      title="Austritt"
      subtitle={`${fmtName(employee.first_name, employee.last_name)} · ${employee.job_title}`}
      footer={
        <>
          <Button variant="ghost" onClick={onClose}>
            Abbrechen
          </Button>
          <Button variant="danger" onClick={handleSubmit} pending={pending}>
            Austritt bestätigen
          </Button>
        </>
      }
    >
      <div className="flex flex-col gap-4">
        {directReportCount > 0 && (
          <div className="rounded bg-warning-bg px-3 py-2 text-sm text-warning-text">
            {directReportCount} direkte Berichte werden automatisch der nächsthöheren Führungskraft zugeordnet.
          </div>
        )}
        <SelectField
          label="Beendigungsart"
          value={reason}
          onChange={setReason}
          options={EXIT_REASONS.map((r) => ({ value: r, label: r === NO_SHOW ? "No Show (nicht angetreten)" : r }))}
        />
        <TextField
          label={istNoShow ? "Wirksam am (Eintrittstag)" : "Austrittsdatum"}
          required
          type="date"
          value={wirksamesDatum}
          disabled={istNoShow}
          onChange={setExitDate}
          hint={
            istNoShow
              ? "Wer nie angetreten ist, scheidet am Tag seines Eintritts aus. Damit gibt es keinen Tag, an dem die Person als beschäftigt zählt."
              : undefined
          }
        />
        <TextareaField label="Anmerkung" rows={3} value={note} onChange={setNote} />
        {istNoShow && (
          <p className="rounded bg-surface px-3 py-2 text-sm text-ink-body">
            Die Planstelle wird wieder frei und gilt als nie besetzt. In allen Auswertungen zählt die Person an keinem
            Stichtag als beschäftigt.
          </p>
        )}
        {/* Bei einem Nichtantritt wurde nichts ausgegeben, was zurückkäme. */}
        <fieldset hidden={istNoShow}>
          <legend className="mb-2 text-sm font-semibold text-ink">Offboarding-Checkliste</legend>
          <div className="flex flex-col gap-2">
            {CHECKLIST_ITEMS.map((item, i) => (
              <label key={item} className="flex items-center gap-2 text-sm text-ink-body">
                <input
                  type="checkbox"
                  checked={checked[i]}
                  onChange={(e) => setChecked((prev) => prev.map((c, idx) => (idx === i ? e.target.checked : c)))}
                />
                {item}
              </label>
            ))}
          </div>
        </fieldset>
      </div>
    </SlideOver>
  );
}