Org assignment history, mobile support, and a correctness pass

Data model
- employee_assignments records org placement over time (valid_from/valid_to),
  written by a trigger on `employees` rather than inside each RPC: ~70
  `update employees` statements spread over fifteen migrations mean per-call
  bookkeeping would miss paths today and again with every future RPC. A
  partial unique index enforces the one-open-interval invariant the trigger
  relies on when closing the current row.
- The Organigramm gains a Stichtag (default today). Membership comes from
  entry/exit/karenz, past placement from the new history, future placement
  projected from pending_org_changes. Placements predating the migration are
  backfilled with today's values and flagged as such in the UI, since
  employee_history only ever stored free text and cannot be reconstructed.

Correctness
- Reports and exports silently truncated at PostgREST's 1000-row cap
  (db.max_rows); employee_history is already past it at ~800 staff. Every
  whole-table read now pages explicitly.
- XLSX date cells were a day early: ExcelJS converts a Date to an Excel
  serial straight off getTime(), so a Date built at local midnight lands on
  the previous day's serial in any positive-offset zone.
- Date handling is pinned to Europe/Vienna throughout, and date-only strings
  are formatted without a Date round-trip. The dashboard's YTD window was
  built by round-tripping a local Date through toISOString(), which shifted
  it a day early and dropped 31 December entirely.
- Export routes parsed measure/group/split/eventType with unchecked `as`
  casts, so an unknown value reached column headers as `undefined` and the
  Content-Disposition filename. Parsed against the label maps now, with the
  filename slugged as a backstop.
- toXlsx keyed columns by header text, silently dropping the second of any
  two columns sharing a name — split columns take their header from data.
- The org chart tree walks had no cycle guard; nothing in the schema forbids
  a manager_id cycle, and one would hang the tab rather than misreport.
- The login page reflected ?error= verbatim, letting anyone put arbitrary
  text on the real sign-in screen; messages are looked up by code now.
- React Flow needs elementsSelectable on, or it sets pointer-events:none on
  the whole node and the expand control stops responding.

UI
- Mobile: the shell was unusable below lg — a fixed 236px margin pushed
  content off-screen with no mobile navigation at all. The sidebar is now a
  drawer, dvh replaces vh, safe-area insets are honoured, inputs are 16px so
  iOS stops zooming on focus, and form grids stack.
- Org chart nodes redesigned: per-kind accent stripes and icons, vacant
  roles called out, expand control moved to the bottom edge carrying the
  child count.
- Pagination is windowed; it previously rendered one link per page (54 for
  the employee list, unbounded for the audit log).
- Positions page reduced to open positions with a single "Besetzen" action.
- The employee Organisation tab links into the org chart focused on that
  person, reusing the chart's existing search-match highlighting.

Also included, uncommitted until now
- Dependants, HR notes, academic titles, split address fields, position
  validity and role/employment fields, with their migrations and UI.
- Docker/compose deployment setup, data-model and security-review docs.

components/employees/AddDependentModal.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { addEmployeeDependent } from "@/actions/employees";
+import { Modal } from "@/components/ui/Modal";
+import { useToast } from "@/components/ui/Toast";
+import { todayIso } from "@/lib/format";
+import type { RelationshipType } from "@/lib/supabase/types";
+
+const RELATIONSHIPS: RelationshipType[] = ["Ehepartner:in", "Lebenspartner:in", "Kind", "Sonstige"];
+
+export function AddDependentModal({
+  open,
+  onClose,
+  employeeId,
+  defaultEffectiveDate,
+}: {
+  open: boolean;
+  onClose: () => void;
+  employeeId: string;
+  defaultEffectiveDate?: string;
+}) {
+  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 [effectiveDate, setEffectiveDate] = useState(defaultEffectiveDate ?? todayIso());
+  const [prevDefaultEffectiveDate, setPrevDefaultEffectiveDate] = useState(defaultEffectiveDate);
+  const [pending, setPending] = useState(false);
+
+  // This modal stays mounted while closed, so a mount-time initializer would
+  // pin the date forever: DatenAendernPanel drives `defaultEffectiveDate` off
+  // its own "Wirksam ab" field, and changing it there has to reach the field
+  // below. Same adjust-during-render pattern as CountryPicker.
+  if (defaultEffectiveDate !== prevDefaultEffectiveDate) {
+    setPrevDefaultEffectiveDate(defaultEffectiveDate);
+    if (defaultEffectiveDate) setEffectiveDate(defaultEffectiveDate);
+  }
+
+  function reset() {
+    setFirstName("");
+    setLastName("");
+    setSvNummer("");
+    setBirthDate("");
+    setRelationship("Kind");
+    setEffectiveDate(defaultEffectiveDate ?? todayIso());
+  }
+
+  async function handleSubmit() {
+    if (!firstName || !lastName || !birthDate || !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,
+    });
+    setPending(false);
+    if (result.success) {
+      showToast("Angehörige:r hinzugefügt.");
+      router.refresh();
+      onClose();
+      reset();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Angehörige:n hinzufügen"
+      footer={
+        <>
+          <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={pending}
+            className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
+          >
+            Hinzufügen
+          </button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-4">
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">Wirksam ab*</label>
+          <input
+            type="date"
+            value={effectiveDate}
+            onChange={(e) => setEffectiveDate(e.target.value)}
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div>
+            <label className="mb-1 block text-sm font-semibold text-ink">Vorname*</label>
+            <input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-semibold text-ink">Nachname*</label>
+            <input value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+          </div>
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">SVNR</label>
+          <input value={svNummer} onChange={(e) => setSvNummer(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">Geburtsdatum*</label>
+          <input type="date" value={birthDate} onChange={(e) => setBirthDate(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+        </div>
+        <div>
+          <label className="mb-1 block text-sm font-semibold text-ink">Verwandtschaftsverhältnis*</label>
+          <select
+            value={relationship}
+            onChange={(e) => setRelationship(e.target.value as RelationshipType)}
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          >
+            {RELATIONSHIPS.map((r) => (
+              <option key={r} value={r}>
+                {r}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </Modal>
+  );
+}

components/employees/AngehoerigeSection.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { Plus, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { deleteEmployeeDependent } from "@/actions/employees";
+import { useToast } from "@/components/ui/Toast";
+import { fmtDate, todayIso } from "@/lib/format";
+import type { Database } from "@/lib/supabase/types";
+import { AddDependentModal } from "./AddDependentModal";
+
+type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];
+
+// `effectiveDate` lets DatenAendernPanel embed this section and drive
+// add/remove off its own "Wirksam ab" field; standalone usage (Stammdaten
+// tab) omits it and defaults to today, i.e. immediate.
+export function AngehoerigeSection({ employeeId, dependents, effectiveDate }: { employeeId: string; dependents: Dependent[]; effectiveDate?: string }) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [modalOpen, setModalOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const resolvedEffectiveDate = effectiveDate || todayIso();
+
+  async function handleDelete(dependentId: string) {
+    setDeletingId(dependentId);
+    const result = await deleteEmployeeDependent({ dependent_id: dependentId, employee_id: employeeId, effective_date: resolvedEffectiveDate });
+    setDeletingId(null);
+    if (result.success) {
+      showToast("Angehörige:r entfernt.");
+      router.refresh();
+    } else {
+      showToast(result.error ?? "Fehler beim Entfernen.", "error");
+    }
+  }
+
+  return (
+    <div className="border-t border-border pt-6">
+      <div className="mb-3 flex items-center justify-between">
+        <h3 className="text-xs font-bold uppercase tracking-wide text-brand-700">Angehörige</h3>
+        <div className="flex items-center gap-4">
+          <button
+            type="button"
+            onClick={() => setModalOpen(true)}
+            className="flex items-center gap-1 text-xs font-semibold text-brand-700 hover:text-brand-600"
+          >
+            <Plus className="h-3.5 w-3.5" /> Hinzufügen
+          </button>
+          <span className="text-xs text-ink-muted">{dependents.length} Personen</span>
+        </div>
+      </div>
+
+      {dependents.length === 0 ? (
+        <p className="text-sm text-ink-muted">Keine Angehörigen hinterlegt.</p>
+      ) : (
+        <div className="overflow-x-auto rounded border border-border">
+          <table className="w-full min-w-[600px] text-sm">
+            <thead>
+              <tr className="border-b border-border bg-brand-50 text-left text-xs font-semibold uppercase tracking-wide text-ink-muted">
+                <th className="px-4 py-2.5">Name</th>
+                <th className="px-4 py-2.5">Verhältnis</th>
+                <th className="px-4 py-2.5">SVNR</th>
+                <th className="px-4 py-2.5">Geburtsdatum</th>
+                <th className="px-4 py-2.5" />
+              </tr>
+            </thead>
+            <tbody>
+              {dependents.map((d) => (
+                <tr key={d.id} className="border-b border-border last:border-0">
+                  <td className="px-4 py-2.5 font-semibold text-ink">
+                    {d.first_name} {d.last_name}
+                  </td>
+                  <td className="px-4 py-2.5 text-ink-body">{d.relationship}</td>
+                  <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">
+                    <button
+                      type="button"
+                      onClick={() => handleDelete(d.id)}
+                      disabled={deletingId === d.id}
+                      aria-label="Angehörige:n entfernen"
+                      className="text-ink-muted hover:text-danger-solid disabled:opacity-50"
+                    >
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <AddDependentModal open={modalOpen} onClose={() => setModalOpen(false)} employeeId={employeeId} defaultEffectiveDate={resolvedEffectiveDate} />
+    </div>
+  );
+}

components/employees/EmployeeDetail.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { Avatar } from "@/components/ui/Avatar";
 import { StatusChip } from "@/components/ui/StatusChip";
-import { tenure } from "@/lib/format";
+import { fmtFullName, tenure } from "@/lib/format";
 import type { Database } from "@/lib/supabase/types";
 import { DatenAendernPanel } from "./panels/DatenAendernPanel";
 import { KarenzPanel } from "./panels/KarenzPanel";
@@ -14,6 +14,7 @@ import { RehirePanel } from "./panels/RehirePanel";
 import { TerminatePanel } from "./panels/TerminatePanel";
 import { TransferPanel } from "./panels/TransferPanel";
 import { HistorieTab } from "./tabs/HistorieTab";
+import { NotizenTab } from "./tabs/NotizenTab";
 import { OrganisationTab } from "./tabs/OrganisationTab";
 import { StammdatenTab } from "./tabs/StammdatenTab";
 import { VertragTab } from "./tabs/VertragTab";
@@ -24,6 +25,8 @@ type Department = Database["public"]["Tables"]["departments"]["Row"];
 type Team = Database["public"]["Tables"]["teams"]["Row"];
 type Location = Database["public"]["Tables"]["locations"]["Row"];
 type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];
+type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];
+type NoteRow = Database["public"]["Tables"]["employee_notes"]["Row"];
 type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
 type OpenPosition = { id: string; position_number: string; title: string; team_id: string; is_lead: boolean };
 
@@ -32,6 +35,8 @@ type EmployeeDetailProps = {
   manager: MiniEmployee | null;
   directReports: MiniEmployee[];
   history: HistoryRow[];
+  dependents: Dependent[];
+  notes: NoteRow[];
   divisions: Division[];
   departments: Department[];
   teams: Team[];
@@ -40,10 +45,10 @@ type EmployeeDetailProps = {
 };
 
 type PanelType = "transfer" | "promote" | "karenz" | "daten" | "terminate" | "rehire" | null;
-const TABS = ["Stammdaten", "Vertrag", "Organisation", "Historie"] as const;
+const TABS = ["Stammdaten", "Vertrag", "Organisation", "Historie", "HR-Notizen"] as const;
 
 export function EmployeeDetail(props: EmployeeDetailProps) {
-  const { employee, manager, directReports, history, divisions, departments, teams, locations } = props;
+  const { employee, manager, directReports, history, dependents, notes, divisions, departments, teams, locations } = props;
   const [tab, setTab] = useState<(typeof TABS)[number]>("Stammdaten");
   const [panel, setPanel] = useState<PanelType>(null);
 
@@ -54,6 +59,7 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
   const location = locations.find((l) => l.id === employee.location_id);
 
   const isActive = employee.status === "Aktiv" || employee.status === "Karenz";
+  const canEditData = employee.status !== "Ausgetreten";
 
   return (
     <div className="flex flex-col gap-6">
@@ -68,7 +74,7 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
             <div>
               <div className="flex items-center gap-2">
                 <h2 className="text-xl font-extrabold text-ink">
-                  {employee.first_name} {employee.last_name}
+                  {fmtFullName(employee.first_name, employee.last_name, employee.title_prefix, employee.title_suffix)}
                 </h2>
                 <StatusChip status={employee.status} entryDate={employee.entry_date} />
               </div>
@@ -87,15 +93,17 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
                 <ActionButton icon={ArrowRightLeft} label="Versetzen" onClick={() => setPanel("transfer")} />
                 <ActionButton icon={TrendingUp} label="Befördern" onClick={() => setPanel("promote")} />
                 <ActionButton icon={Clock} label={employee.status === "Karenz" ? "Karenz verwalten" : "Karenz"} onClick={() => setPanel("karenz")} />
-                <ActionButton icon={Pencil} label="Daten ändern" onClick={() => setPanel("daten")} />
-                <button
-                  onClick={() => setPanel("terminate")}
-                  className="flex items-center gap-1.5 rounded border border-danger-solid px-3 py-1.5 text-sm font-semibold text-danger-solid hover:bg-danger-bg"
-                >
-                  <XCircle className="h-4 w-4" /> Austritt
-                </button>
               </>
             )}
+            {canEditData && <ActionButton icon={Pencil} label="Daten ändern" onClick={() => setPanel("daten")} />}
+            {isActive && (
+              <button
+                onClick={() => setPanel("terminate")}
+                className="flex items-center gap-1.5 rounded border border-danger-solid px-3 py-1.5 text-sm font-semibold text-danger-solid hover:bg-danger-bg"
+              >
+                <XCircle className="h-4 w-4" /> Austritt
+              </button>
+            )}
             {employee.status === "Ausgetreten" && (
               <button
                 onClick={() => setPanel("rehire")}
@@ -117,16 +125,19 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
               tab === t ? "border-brand-500 text-brand-700" : "border-transparent text-ink-muted hover:text-ink"
             }`}
           >
-            {t}
+            {t === "HR-Notizen" ? `HR-Notizen ${notes.length}` : t}
           </button>
         ))}
       </div>
 
       <div className="rounded border border-border bg-white p-6">
-        {tab === "Stammdaten" && <StammdatenTab employee={employee} location={location} />}
+        {tab === "Stammdaten" && <StammdatenTab employee={employee} location={location} dependents={dependents} />}
         {tab === "Vertrag" && <VertragTab employee={employee} />}
-        {tab === "Organisation" && <OrganisationTab manager={manager} directReports={directReports} breadcrumb={breadcrumb} />}
+        {tab === "Organisation" && (
+          <OrganisationTab employeeId={employee.id} manager={manager} directReports={directReports} breadcrumb={breadcrumb} />
+        )}
         {tab === "Historie" && <HistorieTab history={history} />}
+        {tab === "HR-Notizen" && <NotizenTab employeeId={employee.id} notes={notes} />}
       </div>
 
       <TransferPanel
@@ -140,7 +151,7 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
       />
       <PromotePanel open={panel === "promote"} onClose={() => setPanel(null)} employee={employee} />
       <KarenzPanel open={panel === "karenz"} onClose={() => setPanel(null)} employee={employee} />
-      <DatenAendernPanel open={panel === "daten"} onClose={() => setPanel(null)} employee={employee} />
+      <DatenAendernPanel open={panel === "daten"} onClose={() => setPanel(null)} employee={employee} dependents={dependents} />
       <TerminatePanel open={panel === "terminate"} onClose={() => setPanel(null)} employee={employee} directReportCount={directReports.length} />
       <RehirePanel open={panel === "rehire"} onClose={() => setPanel(null)} employee={employee} />
     </div>

components/employees/RoleEmploymentFields.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type { CollectiveAgreement, Weekday, WorkerType } from "@/lib/supabase/types";
+
+const WEEKDAYS: Weekday[] = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
+
+export type RoleEmploymentValue = {
+  workerType: WorkerType;
+  collectiveAgreement: CollectiveAgreement;
+  workDays: Weekday[];
+  isBetriebsrat: boolean;
+  hasDienstwagen: boolean;
+  isLateraleFuehrung: boolean;
+  isCLevel: boolean;
+};
+
+// Shared by the hire wizard (StepVertrag) and DatenAendernPanel — both edit
+// the same set of employees columns, just against different local state.
+export function RoleEmploymentFields({ value, onChange }: { value: RoleEmploymentValue; onChange: (patch: Partial<RoleEmploymentValue>) => void }) {
+  function toggleWorkDay(day: Weekday) {
+    onChange({ workDays: value.workDays.includes(day) ? value.workDays.filter((d) => d !== day) : [...value.workDays, day] });
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-ink-muted">Angestellte:r / Arbeiter:in</label>
+          <select
+            value={value.workerType}
+            onChange={(e) => onChange({ workerType: e.target.value as WorkerType })}
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          >
+            <option value="Angestellte:r">Angestellte:r</option>
+            <option value="Arbeiter:in">Arbeiter:in</option>
+          </select>
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-ink-muted">Kollektivvertrag</label>
+          <select
+            value={value.collectiveAgreement}
+            onChange={(e) => onChange({ collectiveAgreement: e.target.value as CollectiveAgreement })}
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          >
+            <option value="Handel">Handel</option>
+            <option value="Süßwaren">Süßwaren</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="mb-1 block text-xs font-semibold text-ink-muted">Arbeitstage</label>
+        <div className="flex flex-wrap gap-1.5">
+          {WEEKDAYS.map((day) => (
+            <button
+              key={day}
+              type="button"
+              onClick={() => toggleWorkDay(day)}
+              className={`rounded-full px-3 py-1.5 text-xs font-semibold ${
+                value.workDays.includes(day) ? "bg-brand-500 text-white" : "border border-border text-ink-muted hover:bg-surface"
+              }`}
+            >
+              {day}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <label className="flex items-center gap-2 text-sm text-ink-body">
+          <input type="checkbox" checked={value.isBetriebsrat} onChange={(e) => onChange({ isBetriebsrat: e.target.checked })} />
+          Betriebsrat
+        </label>
+        <label className="flex items-center gap-2 text-sm text-ink-body">
+          <input type="checkbox" checked={value.hasDienstwagen} onChange={(e) => onChange({ hasDienstwagen: e.target.checked })} />
+          Dienstwagen
+        </label>
+        <label className="flex items-center gap-2 text-sm text-ink-body">
+          <input type="checkbox" checked={value.isLateraleFuehrung} onChange={(e) => onChange({ isLateraleFuehrung: e.target.checked })} />
+          Laterale Führung
+        </label>
+        <label className="flex items-center gap-2 text-sm text-ink-body">
+          <input type="checkbox" checked={value.isCLevel} onChange={(e) => onChange({ isCLevel: e.target.checked })} />
+          C-Level
+        </label>
+      </div>
+    </div>
+  );
+}

components/employees/TitleFields.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Picklist } from "@/components/ui/Picklist";
+import { TITLE_PREFIXES, TITLE_SUFFIXES } from "@/lib/titles";
+
+export type TitleValue = { titlePrefix: string[]; titleSuffix: string[] };
+
+// Shared by the hire wizard (StepPerson) and DatenAendernPanel — both edit
+// the same title_prefix/title_suffix columns, just against different local
+// state, same pattern as RoleEmploymentFields.
+export function TitleFields({ value, onChange }: { value: TitleValue; onChange: (patch: Partial<TitleValue>) => void }) {
+  return (
+    <div className="flex flex-col gap-3">
+      <div>
+        <label className="mb-1 block text-xs font-semibold text-ink-muted">Titel (vorangestellt)</label>
+        <Picklist options={TITLE_PREFIXES} value={value.titlePrefix} onChange={(titlePrefix) => onChange({ titlePrefix })} />
+      </div>
+      <div>
+        <label className="mb-1 block text-xs font-semibold text-ink-muted">Titel (nachgestellt)</label>
+        <Picklist options={TITLE_SUFFIXES} value={value.titleSuffix} onChange={(titleSuffix) => onChange({ titleSuffix })} />
+      </div>
+    </div>
+  );
+}

components/employees/panels/DatenAendernPanel.tsx

@@ -3,27 +3,48 @@
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { changeEmployeeData } from "@/actions/employees";
+import { AngehoerigeSection } from "@/components/employees/AngehoerigeSection";
+import { RoleEmploymentFields, type RoleEmploymentValue } from "@/components/employees/RoleEmploymentFields";
+import { TitleFields, type TitleValue } from "@/components/employees/TitleFields";
 import { CountryPicker } from "@/components/ui/CountryPicker";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
 import { UN_COUNTRIES } from "@/lib/countries";
+import { fmtFullName, todayIso } from "@/lib/format";
 import type { ContractType, Database, EmploymentType, GenderType } from "@/lib/supabase/types";
 
 type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
+type Dependent = Database["public"]["Tables"]["employee_dependents"]["Row"];
 
-export function DatenAendernPanel({ open, onClose, employee }: { open: boolean; onClose: () => void; employee: EmployeeRow }) {
+export function DatenAendernPanel({
+  open,
+  onClose,
+  employee,
+  dependents,
+}: {
+  open: boolean;
+  onClose: () => void;
+  employee: EmployeeRow;
+  dependents: Dependent[];
+}) {
   const { showToast } = useToast();
   const router = useRouter();
   const [pending, setPending] = useState(false);
-  const [effectiveDate, setEffectiveDate] = useState(new Date().toISOString().slice(0, 10));
+  const [effectiveDate, setEffectiveDate] = useState(todayIso);
 
   const [firstName, setFirstName] = useState(employee.first_name);
   const [lastName, setLastName] = useState(employee.last_name);
+  const [titles, setTitles] = useState<TitleValue>({ titlePrefix: employee.title_prefix ?? [], titleSuffix: employee.title_suffix ?? [] });
+  function updateTitles(patch: Partial<TitleValue>) {
+    setTitles((prev) => ({ ...prev, ...patch }));
+  }
   const [gender, setGender] = useState<GenderType>(employee.gender);
   const [birthDate, setBirthDate] = useState(employee.birth_date);
   const [svNummer, setSvNummer] = useState(employee.sv_nummer ?? "");
   const [nationality, setNationality] = useState(employee.nationality);
   const [address, setAddress] = useState(employee.address ?? "");
+  const [postalCode, setPostalCode] = useState(employee.postal_code ?? "");
+  const [city, setCity] = useState(employee.city ?? "");
   const [addressCountry, setAddressCountry] = useState(employee.address_country ?? "Österreich");
   const [email, setEmail] = useState(employee.email);
   const [phone, setPhone] = useState(employee.phone ?? "");
@@ -33,6 +54,19 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
   const [contractType, setContractType] = useState<ContractType>(employee.contract_type);
   const [contractEndDate, setContractEndDate] = useState(employee.contract_end_date ?? "");
 
+  const [role, setRole] = useState<RoleEmploymentValue>({
+    workerType: employee.worker_type ?? "Angestellte:r",
+    collectiveAgreement: employee.collective_agreement ?? "Handel",
+    workDays: employee.work_days ?? ["Mo", "Di", "Mi", "Do", "Fr"],
+    isBetriebsrat: employee.is_betriebsrat ?? false,
+    hasDienstwagen: employee.has_dienstwagen ?? false,
+    isLateraleFuehrung: employee.is_laterale_fuehrung ?? false,
+    isCLevel: employee.is_c_level ?? false,
+  });
+  function updateRole(patch: Partial<RoleEmploymentValue>) {
+    setRole((prev) => ({ ...prev, ...patch }));
+  }
+
   function handleEmploymentTypeChange(value: EmploymentType) {
     setEmploymentType(value);
     if (value === "Vollzeit") setWeeklyHours("38.5");
@@ -47,6 +81,10 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
       showToast("Bei befristetem Vertrag ist ein Enddatum erforderlich.", "error");
       return;
     }
+    if (role.workDays.length === 0) {
+      showToast("Mindestens ein Arbeitstag muss ausgewählt sein.", "error");
+      return;
+    }
     if (!effectiveDate) {
       showToast("Bitte ein Wirksam-ab-Datum angeben.", "error");
       return;
@@ -58,11 +96,15 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
       person: {
         first_name: firstName,
         last_name: lastName,
+        title_prefix: titles.titlePrefix,
+        title_suffix: titles.titleSuffix,
         gender,
         birth_date: birthDate,
         sv_nummer: svNummer,
         nationality,
         address,
+        postal_code: postalCode,
+        city,
         address_country: addressCountry,
         email,
         phone,
@@ -73,6 +115,15 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
         contract_type: contractType,
         contract_end_date: contractType === "befristet" ? contractEndDate : "",
       },
+      role: {
+        worker_type: role.workerType,
+        collective_agreement: role.collectiveAgreement,
+        work_days: role.workDays,
+        is_betriebsrat: role.isBetriebsrat,
+        has_dienstwagen: role.hasDienstwagen,
+        is_laterale_fuehrung: role.isLateraleFuehrung,
+        is_c_level: role.isCLevel,
+      },
     });
     setPending(false);
     if (result.success) {
@@ -89,7 +140,7 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
       open={open}
       onClose={onClose}
       title="Daten ändern"
-      subtitle={`${employee.first_name} ${employee.last_name} · ${employee.job_title}`}
+      subtitle={`${fmtFullName(employee.first_name, employee.last_name, employee.title_prefix, employee.title_suffix)} · ${employee.job_title}`}
       footer={
         <>
           <button onClick={onClose} className="rounded px-4 py-2 text-sm font-semibold text-ink-body hover:bg-surface">
@@ -119,7 +170,7 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
         <div>
           <h3 className="mb-3 text-sm font-bold text-ink">Person</h3>
           <div className="flex flex-col gap-3">
-            <div className="grid grid-cols-2 gap-3">
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
               <div>
                 <label className="mb-1 block text-xs font-semibold text-ink-muted">Vorname</label>
                 <input value={firstName} onChange={(e) => setFirstName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
@@ -129,7 +180,8 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
                 <input value={lastName} onChange={(e) => setLastName(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-3">
+            <TitleFields value={titles} onChange={updateTitles} />
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
               <div>
                 <label className="mb-1 block text-xs font-semibold text-ink-muted">Geschlecht</label>
                 <select value={gender} onChange={(e) => setGender(e.target.value as GenderType)} className="w-full rounded border border-border px-3 py-2 text-sm">
@@ -155,16 +207,24 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
               <label className="mb-1 block text-xs font-semibold text-ink-muted">Staatsbürgerschaft</label>
               <CountryPicker value={nationality} onChange={setNationality} countries={UN_COUNTRIES} placeholder="Staatsbürgerschaft suchen…" />
             </div>
-            <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="mb-1 block text-xs font-semibold text-ink-muted">Adresse (Straße und Hausnummer)</label>
+              <input value={address} onChange={(e) => setAddress(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+            </div>
+            <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)] gap-3">
               <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Adresse</label>
-                <input value={address} onChange={(e) => setAddress(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+                <label className="mb-1 block text-xs font-semibold text-ink-muted">Postleitzahl</label>
+                <input value={postalCode} onChange={(e) => setPostalCode(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
               </div>
               <div>
-                <label className="mb-1 block text-xs font-semibold text-ink-muted">Land</label>
-                <CountryPicker value={addressCountry} onChange={setAddressCountry} countries={UN_COUNTRIES} placeholder="Land suchen…" />
+                <label className="mb-1 block text-xs font-semibold text-ink-muted">Ort</label>
+                <input value={city} onChange={(e) => setCity(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
               </div>
             </div>
+            <div>
+              <label className="mb-1 block text-xs font-semibold text-ink-muted">Land</label>
+              <CountryPicker value={addressCountry} onChange={setAddressCountry} countries={UN_COUNTRIES} placeholder="Land suchen…" />
+            </div>
             <div>
               <label className="mb-1 block text-xs font-semibold text-ink-muted">E-Mail</label>
               <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
@@ -225,6 +285,13 @@ export function DatenAendernPanel({ open, onClose, employee }: { open: boolean;
             )}
           </div>
         </div>
+
+        <div>
+          <h3 className="mb-3 text-sm font-bold text-ink">Rolle & Anstellung</h3>
+          <RoleEmploymentFields value={role} onChange={updateRole} />
+        </div>
+
+        <AngehoerigeSection employeeId={employee.id} dependents={dependents} effectiveDate={effectiveDate} />
       </div>
     </SlideOver>
   );

components/employees/tabs/HistorieTab.tsx

@@ -1,11 +1,11 @@
 import { actionBadgeStyle } from "@/lib/colors";
-import { fmtDate } from "@/lib/format";
+import { fmtDate, todayIso } from "@/lib/format";
 import type { Database } from "@/lib/supabase/types";
 
 type HistoryRow = Database["public"]["Tables"]["employee_history"]["Row"];
 
 export function HistorieTab({ history }: { history: HistoryRow[] }) {
-  const today = new Date().toISOString().slice(0, 10);
+  const today = todayIso();
 
   if (history.length === 0) {
     return <p className="text-sm text-ink-muted">Keine Historieneinträge vorhanden.</p>;

components/employees/tabs/NotizenTab.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { addEmployeeNote, completeEmployeeNote } from "@/actions/employees";
+import { useToast } from "@/components/ui/Toast";
+import { NOTE_CATEGORY_STYLES } from "@/lib/colors";
+import { fmtDate } from "@/lib/format";
+import type { Database, NoteCategory } from "@/lib/supabase/types";
+
+type Note = Database["public"]["Tables"]["employee_notes"]["Row"];
+
+const CATEGORIES: NoteCategory[] = ["Allgemein", "Vertraulich", "Personalgespräch", "Wiedervorlage", "Lob / Anerkennung"];
+
+export function NotizenTab({ employeeId, notes }: { employeeId: string; notes: Note[] }) {
+  const { showToast } = useToast();
+  const router = useRouter();
+  const [category, setCategory] = useState<NoteCategory>("Allgemein");
+  const [noteText, setNoteText] = useState("");
+  const [dueDate, setDueDate] = useState("");
+  const [pending, setPending] = useState(false);
+  const [completingId, setCompletingId] = useState<string | null>(null);
+
+  async function handleSubmit() {
+    if (!noteText.trim()) {
+      showToast("Bitte einen Notiztext eingeben.", "error");
+      return;
+    }
+    setPending(true);
+    const result = await addEmployeeNote({
+      employee_id: employeeId,
+      category,
+      note_text: noteText.trim(),
+      due_date: dueDate || undefined,
+    });
+    setPending(false);
+    if (result.success) {
+      showToast("Notiz hinzugefügt.");
+      setNoteText("");
+      setDueDate("");
+      setCategory("Allgemein");
+      router.refresh();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  async function handleComplete(noteId: string) {
+    setCompletingId(noteId);
+    const result = await completeEmployeeNote({ note_id: noteId, employee_id: employeeId });
+    setCompletingId(null);
+    if (result.success) {
+      showToast("Notiz erledigt.");
+      router.refresh();
+    } else {
+      showToast(result.error ?? "Fehler beim Speichern.", "error");
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-start gap-2 rounded bg-info-bg px-4 py-3 text-sm text-info-text">
+        🔒 Interne HR-Notizen – nur für die Personalabteilung sichtbar. Jede Notiz wird mit Verfasser:in und Datum protokolliert.
+      </div>
+
+      <div className="flex flex-col gap-3 rounded border border-border p-4">
+        <h3 className="text-sm font-bold text-ink">Neue Notiz erfassen</h3>
+        <div>
+          <textarea
+            value={noteText}
+            onChange={(e) => setNoteText(e.target.value)}
+            rows={3}
+            placeholder="Notiz zum/zur Mitarbeiter:in … (z. B. Gesprächsinhalt, Vereinbarung, Beobachtung)"
+            className="w-full rounded border border-border px-3 py-2 text-sm"
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <div>
+            <label className="mb-1 block text-sm font-semibold text-ink">Kategorie</label>
+            <select value={category} onChange={(e) => setCategory(e.target.value as NoteCategory)} className="w-full rounded border border-border px-3 py-2 text-sm">
+              {CATEGORIES.map((c) => (
+                <option key={c} value={c}>
+                  {c}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-semibold text-ink">Wiedervorlage am (optional)</label>
+            <input type="date" value={dueDate} onChange={(e) => setDueDate(e.target.value)} className="w-full rounded border border-border px-3 py-2 text-sm" />
+          </div>
+        </div>
+        <div className="flex justify-end">
+          <button onClick={handleSubmit} disabled={pending} className="rounded bg-brand-500 px-4 py-2 text-sm font-semibold text-white disabled:opacity-50">
+            Notiz speichern
+          </button>
+        </div>
+      </div>
+
+      {notes.length === 0 ? (
+        <p className="text-sm text-ink-muted">Keine Notizen vorhanden.</p>
+      ) : (
+        <ul className="flex flex-col divide-y divide-border">
+          {notes.map((n) => (
+            <li key={n.id} className="py-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className={`rounded-full px-2 py-0.5 text-xs font-semibold ${NOTE_CATEGORY_STYLES[n.category]}`}>{n.category}</span>
+                <span className="text-sm font-semibold text-ink">{n.author_name}</span>
+                <span className="text-xs text-ink-muted">{fmtDate(n.created_at)}</span>
+                {n.done ? (
+                  <span className="rounded-full bg-success-bg px-2 py-0.5 text-xs font-semibold text-success-text">Erledigt</span>
+                ) : (
+                  <span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700">Offen</span>
+                )}
+              </div>
+              <p className="mt-1 text-sm text-ink">{n.note_text}</p>
+              {n.due_date && !n.done && <p className="mt-1 text-xs text-warning-text">🔔 fällig {fmtDate(n.due_date)}</p>}
+              {!n.done && (
+                <button
+                  type="button"
+                  onClick={() => handleComplete(n.id)}
+                  disabled={completingId === n.id}
+                  className="mt-2 text-xs font-semibold text-success-text hover:underline disabled:opacity-50"
+                >
+                  ✓ Erledigt
+                </button>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

components/employees/tabs/OrganisationTab.tsx

@@ -1,20 +1,34 @@
+import { Network } from "lucide-react";
 import Link from "next/link";
 import { Avatar } from "@/components/ui/Avatar";
 
 type MiniEmployee = { id: string; first_name: string; last_name: string; job_title: string; status?: string };
 
 type OrganisationTabProps = {
+  employeeId: string;
   manager: MiniEmployee | null;
   directReports: MiniEmployee[];
   breadcrumb: string;
 };
 
-export function OrganisationTab({ manager, directReports, breadcrumb }: OrganisationTabProps) {
+export function OrganisationTab({ employeeId, manager, directReports, breadcrumb }: OrganisationTabProps) {
   return (
     <div className="flex flex-col gap-6">
-      <div>
-        <h3 className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Organisationseinheit</h3>
-        <p className="mt-1 text-sm text-ink">{breadcrumb}</p>
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-ink-muted">Organisationseinheit</h3>
+          <p className="mt-1 text-sm text-ink">{breadcrumb}</p>
+        </div>
+        {/* ?focus= drives the same highlight/auto-expand path the org chart
+            search already uses, so the person is unfolded and centred on
+            arrival instead of the user hunting for them. */}
+        <Link
+          href={`/orgchart?focus=${employeeId}`}
+          className="flex items-center gap-1.5 rounded border border-border px-3 py-2 text-sm font-semibold text-ink-body hover:bg-surface"
+        >
+          <Network className="h-4 w-4" />
+          Im Organigramm anzeigen
+        </Link>
       </div>
 
       <div>

components/employees/tabs/StammdatenTab.tsx

@@ -1,28 +1,44 @@
+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 }: { employee: EmployeeRow; location?: Location }) {
+function formatAddress(employee: EmployeeRow): string {
+  const cityLine = [employee.postal_code, employee.city].filter(Boolean).join(" ");
+  return [employee.address, cityLine].filter(Boolean).join(", ") || "–";
+}
+
+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 titles = [...(employee.title_prefix ?? []), ...(employee.title_suffix ?? [])];
   const rows: [string, string][] = [
+    ["Titel", titles.length > 0 ? titles.join(", ") : "–"],
     ["Geburtsdatum", `${fmtDate(employee.birth_date)} (${fmtAge(employee.birth_date)} Jahre)`],
     ["SV-Nummer", employee.sv_nummer ?? "–"],
     ["Staatsbürgerschaft", employee.nationality],
     ["E-Mail", employee.email],
     ["Telefon", employee.phone ?? "–"],
     ["Standort", location ? `${location.name} (${location.country})` : "–"],
-    ["Adresse", employee.address ?? "–"],
+    ["Adresse", formatAddress(employee)],
+    ["Land", employee.address_country ?? "–"],
     ["Geschlecht", employee.gender === "m" ? "männlich" : "weiblich"],
   ];
   return (
-    <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>
+    <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} />
+    </div>
   );
 }

components/employees/tabs/VertragTab.tsx

@@ -13,14 +13,23 @@ const PAYGRADE_LABELS: Record<string, string> = {
 };
 
 export function VertragTab({ employee }: { employee: EmployeeRow }) {
+  const flags = [
+    employee.is_betriebsrat && "Betriebsrat",
+    employee.has_dienstwagen && "Dienstwagen",
+    employee.is_laterale_fuehrung && "Laterale Führung",
+    employee.is_c_level && "C-Level",
+  ].filter(Boolean);
   const rows: [string, string][] = [
     ["Eintrittsdatum", fmtDate(employee.entry_date)],
     ["Vertragsart", employee.contract_type === "befristet" ? `befristet bis ${fmtDate(employee.contract_end_date)}` : "unbefristet"],
-    ["Kollektivvertrag", "Metalltechnische Industrie"],
+    ["Kollektivvertrag", employee.collective_agreement ?? "–"],
     ["Beschäftigungsausmaß", employee.employment_type],
     ["Wochenstunden", `${employee.weekly_hours} h`],
     ["Urlaubsanspruch", "25 Tage"],
     ["Paygrade", PAYGRADE_LABELS[employee.paygrade] ?? employee.paygrade],
+    ["Angestellte:r / Arbeiter:in", employee.worker_type ?? "–"],
+    ["Arbeitstage", employee.work_days?.join(", ") || "–"],
+    ["Merkmale", flags.length > 0 ? flags.join(", ") : "–"],
   ];
   if (employee.exit_date) rows.push(["Austrittsdatum", fmtDate(employee.exit_date)]);