alpenwerk-hr/components/employees/tabs/StammdatenTab.tsx

import { AngehoerigeSection } from "@/components/employees/AngehoerigeSection";
import { fmtAge, fmtDate } from "@/lib/format";
import type { Database } from "@/lib/supabase/types";

type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
type Location = Database["public"]["Tables"]["locations"]["Row"];
type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];

export function StammdatenTab({ employee, location, dependents }: { employee: EmployeeRow; location?: Location; dependents: Dependent[] }) {
  // Defensive against a DB that hasn't received the title_prefix/title_suffix
  // migration yet — select("*") simply omits unknown columns, so these can
  // be undefined rather than the empty array the column default implies.
  const prefixe = employee.title_prefix ?? [];
  const suffixe = employee.title_suffix ?? [];

  // Feld für Feld dieselbe Liste wie im Abschnitt „Person" von „Daten
  // ändern", in derselben Reihenfolge.
  //
  // Vorher fasste die Anzeige zusammen: Titel in einer Zeile, Adresse mit
  // Postleitzahl und Ort verschmolzen, Vor- und Nachname gar nicht — die
  // standen nur in der Kopfzeile. Wer eine Angabe prüfen wollte, musste den
  // Änderungsdialog öffnen, um sie überhaupt zu sehen, und stand dann schon
  // in einem Formular. Was sich ändern lässt, soll sich auch ansehen lassen.
  const rows: [string, string][] = [
    ["Personalnummer", String(employee.personnel_number)],
    ["Vorname", employee.first_name],
    ["Nachname", employee.last_name],
    ["Titel (vorangestellt)", prefixe.length > 0 ? prefixe.join(", ") : "–"],
    ["Titel (nachgestellt)", suffixe.length > 0 ? suffixe.join(", ") : "–"],
    ["Geschlecht", employee.gender === "m" ? "männlich" : "weiblich"],
    ["Geburtsdatum", `${fmtDate(employee.birth_date)} (${fmtAge(employee.birth_date)} Jahre)`],
    ["SV-Nummer", employee.sv_nummer ?? "–"],
    ["Staatsbürgerschaft", employee.nationality],
    ["Adresse", employee.address ?? "–"],
    ["Postleitzahl", employee.postal_code ?? "–"],
    ["Ort", employee.city ?? "–"],
    ["Land", employee.address_country ?? "–"],
    ["Private E-Mail", employee.email ?? "–"],
    ["Private Telefonnummer", employee.phone ?? "–"],
    // Der Standort ist keine Angabe zur Person, sondern die Betriebsstätte —
    // er steht deshalb am Ende und nicht zwischen Adresse und Land, wo man
    // ihn für den Wohnort halten könnte.
    ["Standort", location ? `${location.name} (${location.country})` : "–"],
  ];
  return (
    <div className="flex flex-col gap-6">
      <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
        {rows.map(([label, value]) => (
          <div key={label}>
            <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">{label}</dt>
            <dd className="mt-1 text-sm text-ink">{value}</dd>
          </div>
        ))}
      </dl>

      <AngehoerigeSection employeeId={employee.id} dependents={dependents} />

      {/* Eigener Abschnitt statt einer Zelle im Raster, und unterhalb der
          Angehörigen: beides sind Personen im Umfeld, und der Notfallkontakt
          ist die Ausnahme davon — deshalb steht er zuletzt, nicht dazwischen.
          Im Ernstfall greift jemand in Eile danach; dann muss die Nummer
          sofort zu finden sein und wählbar. */}
      <div className="border-t border-border pt-6">
        <h3 className="mb-3 text-xs font-bold uppercase tracking-wide text-brand-700">Notfallkontakt</h3>
        {employee.emergency_contact_name ? (
          <dl className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Name</dt>
              <dd className="mt-1 text-sm text-ink">{employee.emergency_contact_name}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Telefon</dt>
              <dd className="mt-1 text-sm font-semibold text-ink">
                {employee.emergency_contact_phone ? (
                  <a
                    href={`tel:${employee.emergency_contact_phone.replace(/\s/g, "")}`}
                    className="rounded hover:text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
                  >
                    {employee.emergency_contact_phone}
                  </a>
                ) : (
                  "–"
                )}
              </dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Verhältnis</dt>
              <dd className="mt-1 text-sm text-ink">{employee.emergency_contact_relation || "–"}</dd>
            </div>
          </dl>
        ) : (
          <p className="text-sm text-ink-muted">Kein Notfallkontakt hinterlegt.</p>
        )}
      </div>
    </div>
  );
}