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/hire/HireWizard.tsx

@@ -51,7 +51,7 @@ export function HireWizard({ open, onClose, openPositions, locations, resumeDraf
   const stepValid = [
     Boolean(draft.firstName && draft.lastName && draft.birthDate && draft.locationId),
     Boolean(draft.positionId && draft.besetzung),
-    Boolean(draft.entryDate),
+    Boolean(draft.entryDate && draft.workDays.length > 0),
     true,
   ][step];
 
@@ -72,6 +72,8 @@ export function HireWizard({ open, onClose, openPositions, locations, resumeDraf
     const result = await hireEmployee({
       first_name: draft.firstName,
       last_name: draft.lastName,
+      title_prefix: draft.titlePrefix,
+      title_suffix: draft.titleSuffix,
       gender: draft.gender,
       birth_date: draft.birthDate,
       sv_nummer: draft.svNummer || undefined,
@@ -85,6 +87,13 @@ export function HireWizard({ open, onClose, openPositions, locations, resumeDraf
       weekly_hours: Number(draft.weeklyHours),
       paygrade: draft.paygrade,
       source: draft.besetzung,
+      worker_type: draft.workerType,
+      collective_agreement: draft.collectiveAgreement,
+      work_days: draft.workDays,
+      is_betriebsrat: draft.isBetriebsrat,
+      has_dienstwagen: draft.hasDienstwagen,
+      is_laterale_fuehrung: draft.isLateraleFuehrung,
+      is_c_level: draft.isCLevel,
     });
     setSubmitting(false);
     if (result.success) {

components/hire/StepPerson.tsx

@@ -1,3 +1,4 @@
+import { TitleFields } from "@/components/employees/TitleFields";
 import type { HireDraftData } from "./types";
 
 type StepPersonProps = {
@@ -9,7 +10,7 @@ type StepPersonProps = {
 export function StepPerson({ draft, update, locations }: StepPersonProps) {
   return (
     <div className="flex flex-col gap-4">
-      <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-sm font-semibold text-ink">Vorname*</label>
           <input value={draft.firstName} onChange={(e) => update({ firstName: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
@@ -19,7 +20,8 @@ export function StepPerson({ draft, update, locations }: StepPersonProps) {
           <input value={draft.lastName} onChange={(e) => update({ lastName: 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={draft} onChange={update} />
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
         <div>
           <label className="mb-1 block text-sm font-semibold text-ink">Geschlecht*</label>
           <select
@@ -40,7 +42,7 @@ export function StepPerson({ draft, update, locations }: StepPersonProps) {
         <label className="mb-1 block text-sm font-semibold text-ink">SV-Nummer</label>
         <input value={draft.svNummer} onChange={(e) => update({ svNummer: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
       </div>
-      <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-sm font-semibold text-ink">E-Mail (privat)</label>
           <input type="email" value={draft.email} onChange={(e) => update({ email: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />

components/hire/StepPosition.tsx

@@ -1,5 +1,6 @@
 import { X } from "lucide-react";
 import { Lookup } from "@/components/ui/Lookup";
+import { fmtDate } from "@/lib/format";
 import type { OpenPositionResolved } from "@/lib/positions";
 import type { HireDraftData } from "./types";
 
@@ -42,6 +43,7 @@ export function StepPosition({ draft, update, openPositions }: StepPositionProps
               <div className="text-xs text-ink-muted">
                 {selected.position_number} · {selected.orgLabel}
               </div>
+              <div className="text-xs text-ink-muted">Gültig ab {fmtDate(selected.valid_from)}</div>
             </div>
             <button type="button" onClick={() => update({ positionId: "" })} aria-label="Auswahl aufheben">
               <X className="h-4 w-4 text-ink-muted" />

components/hire/StepSummary.tsx

@@ -1,4 +1,4 @@
-import { fmtDate } from "@/lib/format";
+import { fmtDate, fmtFullName } from "@/lib/format";
 import type { OpenPositionResolved } from "@/lib/positions";
 import type { HireDraftData } from "./types";
 
@@ -19,8 +19,14 @@ type StepSummaryProps = {
 
 export function StepSummary({ draft, selectedPosition, locations }: StepSummaryProps) {
   const location = locations.find((l) => l.id === draft.locationId);
+  const flags = [
+    draft.isBetriebsrat && "Betriebsrat",
+    draft.hasDienstwagen && "Dienstwagen",
+    draft.isLateraleFuehrung && "Laterale Führung",
+    draft.isCLevel && "C-Level",
+  ].filter(Boolean);
   const rows: [string, string][] = [
-    ["Name", `${draft.firstName} ${draft.lastName}`],
+    ["Name", fmtFullName(draft.firstName, draft.lastName, draft.titlePrefix, draft.titleSuffix)],
     ["Geschlecht", draft.gender === "m" ? "männlich" : "weiblich"],
     ["Geburtsdatum", fmtDate(draft.birthDate)],
     ["SV-Nummer", draft.svNummer || "–"],
@@ -35,11 +41,15 @@ export function StepSummary({ draft, selectedPosition, locations }: StepSummaryP
     ["Vertragsart", draft.contractType === "befristet" ? `befristet bis ${fmtDate(draft.contractEndDate)}` : "unbefristet"],
     ["Beschäftigungsausmaß", `${draft.employmentType} (${draft.weeklyHours} h)`],
     ["Paygrade", PAYGRADE_LABELS[draft.paygrade]],
+    ["Angestellte:r / Arbeiter:in", draft.workerType],
+    ["Kollektivvertrag", draft.collectiveAgreement],
+    ["Arbeitstage", draft.workDays.join(", ") || "–"],
+    ["Merkmale", flags.length > 0 ? flags.join(", ") : "–"],
   ];
 
   return (
     <div className="flex flex-col gap-4">
-      <dl className="grid grid-cols-2 gap-x-6 gap-y-3">
+      <dl className="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2">
         {rows.map(([label, value]) => (
           <div key={label}>
             <dt className="text-xs font-semibold uppercase tracking-wide text-ink-muted">{label}</dt>

components/hire/StepVertrag.tsx

@@ -1,3 +1,4 @@
+import { RoleEmploymentFields } from "@/components/employees/RoleEmploymentFields";
 import type { PaygradeType } from "@/lib/supabase/types";
 import type { HireDraftData } from "./types";
 
@@ -20,7 +21,7 @@ export function StepVertrag({ draft, update }: { draft: HireDraftData; update: (
 
   return (
     <div className="flex flex-col gap-4">
-      <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-sm font-semibold text-ink">Eintrittsdatum*</label>
           <input type="date" value={draft.entryDate} onChange={(e) => update({ entryDate: e.target.value })} className="w-full rounded border border-border px-3 py-2 text-sm" />
@@ -48,7 +49,7 @@ export function StepVertrag({ draft, update }: { draft: HireDraftData; update: (
           />
         </div>
       )}
-      <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-sm font-semibold text-ink">Beschäftigungsausmaß</label>
           <select
@@ -88,6 +89,11 @@ export function StepVertrag({ draft, update }: { draft: HireDraftData; update: (
         <p className="mt-1 text-xs text-ink-muted">{PAYGRADES.find((p) => p.value === draft.paygrade)?.description}</p>
       </div>
       <p className="text-xs text-ink-muted">Es gilt eine Probezeit von 1 Monat gemäß Kollektivvertrag.</p>
+
+      <div>
+        <h3 className="mb-3 text-sm font-bold text-ink">Rolle & Anstellung</h3>
+        <RoleEmploymentFields value={draft} onChange={update} />
+      </div>
     </div>
   );
 }

components/hire/types.ts

@@ -1,4 +1,4 @@
-import type { ContractType, EmploymentType, GenderType, PaygradeType } from "@/lib/supabase/types";
+import type { CollectiveAgreement, ContractType, EmploymentType, GenderType, PaygradeType, Weekday, WorkerType } from "@/lib/supabase/types";
 
 // The spec's hire wizard field list (§4.4) omits Geschlecht and Standort even
 // though both are NOT NULL on employees — added here (defaults keep them
@@ -6,6 +6,8 @@ import type { ContractType, EmploymentType, GenderType, PaygradeType } from "@/l
 export type HireDraftData = {
   firstName: string;
   lastName: string;
+  titlePrefix: string[];
+  titleSuffix: string[];
   gender: GenderType;
   birthDate: string;
   svNummer: string;
@@ -20,11 +22,20 @@ export type HireDraftData = {
   employmentType: EmploymentType;
   weeklyHours: string;
   paygrade: PaygradeType;
+  workerType: WorkerType;
+  collectiveAgreement: CollectiveAgreement;
+  workDays: Weekday[];
+  isBetriebsrat: boolean;
+  hasDienstwagen: boolean;
+  isLateraleFuehrung: boolean;
+  isCLevel: boolean;
 };
 
 export const EMPTY_HIRE_DRAFT: HireDraftData = {
   firstName: "",
   lastName: "",
+  titlePrefix: [],
+  titleSuffix: [],
   gender: "m",
   birthDate: "",
   svNummer: "",
@@ -39,4 +50,11 @@ export const EMPTY_HIRE_DRAFT: HireDraftData = {
   employmentType: "Vollzeit",
   weeklyHours: "38.5",
   paygrade: "B",
+  workerType: "Angestellte:r",
+  collectiveAgreement: "Handel",
+  workDays: ["Mo", "Di", "Mi", "Do", "Fr"],
+  isBetriebsrat: false,
+  hasDienstwagen: false,
+  isLateraleFuehrung: false,
+  isCLevel: false,
 };