Put the whole application on the OM model, and delete what it replaced

Die Datenbank stand seit dem Cut-over auf org_units/om_positions/
position_assignments, die Anwendung fragte weiter nach employees.division_id,
team_id und manager_id — Spalten, die es nicht mehr gab. Die Oberfläche war
deshalb leer, obwohl die Daten vollständig da waren. Das ist jetzt behoben,
und zwar nicht durch Nachbau der alten Begriffe, sondern indem sie verschwinden.

Neu ist eine dünne Schicht, die die Verkettung Person → Besetzung →
Planstelle → Einheit einmal auflöst (lib/placement.ts) und der Baum als reine
Funktionen darauf (lib/org.ts): Vorfahrenkette, Teilbaum, Brotkrume. Alles
Weitere hängt daran.

Was sich dadurch von selbst erledigt hat:

  - Das Organigramm musste drei Quellen versöhnen, weil keine den ganzen
    Zeitstrahl abdeckte. position_assignments ist zeitabhängig, also
    beantwortet eine Abfrage "wer besetzte am Stichtag welche Planstelle" —
    für Vergangenheit und Zukunft gleichermassen. Wer keine Planstelle hatte,
    war nicht da; eine zweite Zugehörigkeitsregel braucht es nicht mehr.
  - Die Struktursicht war auf genau vier Ebenen verdrahtet und rendert jetzt
    rekursiv über parent_id. Liste und Grafik entstehen aus *einem* Baum;
    vorher lag dieselbe Hierarchie zweimal vor und konnte auseinanderlaufen.
  - Eine offene Stelle ist keine eigene Tabelle mehr, sondern eine Planstelle
    ohne laufende Besetzung — das Komplement kann nicht aus dem Tritt geraten.
  - Eine Versetzung ist der Wechsel auf eine Zielplanstelle statt Zielteam
    plus frei getipptem Titel. Sie kann damit nicht mehr dort landen, wo es
    keine Stelle gibt, und die Tätigkeit kommt aus dem Job-Katalog.
  - Beim Anlegen einer Planstelle entfällt die Suche nach der vorgesetzten
    Person: sie ergibt sich aus der Einheit, die Frage kann nicht mehr falsch
    beantwortet werden.

Zwei Auswertungen werden dabei richtiger, nicht nur anders. Ein
Stichtagsbericht gruppierte bisher nach der *heutigen* Zuordnung, weil es
keine Historie gab; er löst sie jetzt zum Stichtag auf. Und ein Ereignis
trägt die Einheit, in der die Person am Tag des Ereignisses sass — vorher
stand ein Austritt von vor zwei Jahren unter einem Team, in das sie nie
versetzt worden war. Der Bereichsfilter greift überall auf den ganzen
Teilbaum; auf den Bereich allein angewandt lieferte er nur die
Bereichsleitung.

Gelöscht: die Reorganisations-Werkbank samt Szenarien und Zügen (sie
verschob Teams und Abteilungen zwischen Bereichen — Objekte, die es nicht
mehr gibt; im OM-Modell ist das ein Umhängen von parent_id), die
Mitarbeiter- und Vorgesetztensuche, die nur sie und die Ausschreibung
brauchten, und aus lib/supabase/types.ts die Tabellen divisions,
departments, teams, positions und employee_assignments.

Die beiliegende Migration räumt die Datenbank entsprechend auf. Sie entfernt
auch Funktionen, die der Cut-over verfehlt hat: create_position,
delete_position und undo_reorg existierten zusätzlich in einer
jsonb-Variante und tauchen deshalb weiter in der PostgREST-Schnittstelle auf,
obwohl ihre Tabellen weg sind — ein Aufruf wäre erst zur Laufzeit
gescheitert. An ihre Stelle treten create_position und delete_position im
OM-Sinn; letzteres schliesst eine früher besetzte Planstelle, statt sie zu
löschen, sonst verschwände mit ihr die Besetzungshistorie.

Typecheck, Lint, Build und 182 Tests sind grün. Die Integrationstests sind
mitgezogen, aber weiterhin ungelaufen — dafür braucht es eine laufende
lokale Datenbank.

components/employees/EmployeeDetail.tsx

@@ -7,6 +7,7 @@ import { Avatar } from "@/components/ui/Avatar";
 import { Button } from "@/components/ui/Button";
 import { StatusChip } from "@/components/ui/StatusChip";
 import { fmtFullName, tenure } from "@/lib/format";
+import type { OpenPositionResolved } from "@/lib/positions";
 import type { Database } from "@/lib/supabase/types";
 import { DatenAendernPanel } from "./panels/DatenAendernPanel";
 import { KarenzPanel } from "./panels/KarenzPanel";
@@ -21,42 +22,37 @@ import { StammdatenTab } from "./tabs/StammdatenTab";
 import { VertragTab } from "./tabs/VertragTab";
 
 type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
-type Division = Database["public"]["Tables"]["divisions"]["Row"];
-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 };
+/** Die Planstelle, die die Person heute innehat. */
+type PlacementInfo = { positionNumber: string; jobTitle: string; isChief: boolean; current: boolean };
 
 type EmployeeDetailProps = {
   employee: EmployeeRow;
+  placement: PlacementInfo | null;
+  breadcrumb: string;
   manager: MiniEmployee | null;
+  /** Nur gesetzt, wenn die zuständige Leitung abwesend ist und vertreten wird. */
+  formalManager: MiniEmployee | null;
   directReports: MiniEmployee[];
   history: HistoryRow[];
   dependents: Dependent[];
   notes: NoteRow[];
-  divisions: Division[];
-  departments: Department[];
-  teams: Team[];
   locations: Location[];
-  openPositions: OpenPosition[];
+  openPositions: OpenPositionResolved[];
 };
 
 type PanelType = "transfer" | "promote" | "karenz" | "daten" | "terminate" | "rehire" | null;
 const TABS = ["Stammdaten", "Vertrag", "Organisation", "Historie", "HR-Notizen"] as const;
 
 export function EmployeeDetail(props: EmployeeDetailProps) {
-  const { employee, manager, directReports, history, dependents, notes, divisions, departments, teams, locations } = props;
+  const { employee, placement, breadcrumb, manager, formalManager, directReports, history, dependents, notes, locations, openPositions } = props;
   const [tab, setTab] = useState<(typeof TABS)[number]>("Stammdaten");
   const [panel, setPanel] = useState<PanelType>(null);
 
-  const division = divisions.find((d) => d.id === employee.division_id);
-  const team = employee.team_id ? teams.find((t) => t.id === employee.team_id) : undefined;
-  const department = team ? departments.find((d) => d.id === team.department_id) : undefined;
-  const breadcrumb = [division?.name, department?.name, team?.name].filter(Boolean).join(" › ") || "–";
   const location = locations.find((l) => l.id === employee.location_id);
 
   const isActive = employee.status === "Aktiv" || employee.status === "Karenz";
@@ -79,8 +75,17 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
                 </h2>
                 <StatusChip status={employee.status} entryDate={employee.entry_date} absenceType={employee.absence_type} />
               </div>
-              <p className="text-sm text-ink-body">{employee.job_title}</p>
-              <p className="text-xs text-ink-muted">{breadcrumb}</p>
+              <p className="text-sm text-ink-body">{placement?.jobTitle ?? employee.job_title}</p>
+              <p className="text-xs text-ink-muted">
+                {breadcrumb}
+                {placement && (
+                  <>
+                    {" · Planstelle "}
+                    {placement.positionNumber}
+                    {placement.isChief && " (Leitung)"}
+                  </>
+                )}
+              </p>
               <p className="mt-1 text-xs text-ink-muted">
                 Pers.-Nr. {employee.personnel_number}
                 {employee.status !== "Geplant" && <> · Zugehörigkeit: {tenure(employee.entry_date, employee.exit_date)}</>}
@@ -142,7 +147,13 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
         {tab === "Stammdaten" && <StammdatenTab employee={employee} location={location} dependents={dependents} />}
         {tab === "Vertrag" && <VertragTab employee={employee} />}
         {tab === "Organisation" && (
-          <OrganisationTab employeeId={employee.id} manager={manager} directReports={directReports} breadcrumb={breadcrumb} />
+          <OrganisationTab
+            employeeId={employee.id}
+            manager={manager}
+            formalManager={formalManager}
+            directReports={directReports}
+            breadcrumb={breadcrumb}
+          />
         )}
         {tab === "Historie" && <HistorieTab history={history} />}
         {tab === "HR-Notizen" && <NotizenTab employeeId={employee.id} notes={notes} />}
@@ -152,10 +163,7 @@ export function EmployeeDetail(props: EmployeeDetailProps) {
         open={panel === "transfer"}
         onClose={() => setPanel(null)}
         employee={employee}
-        divisions={divisions}
-        departments={departments}
-        teams={teams}
-        currentTeamId={employee.team_id}
+        openPositions={openPositions}
       />
       <PromotePanel open={panel === "promote"} onClose={() => setPanel(null)} employee={employee} />
       <KarenzPanel open={panel === "karenz"} onClose={() => setPanel(null)} employee={employee} />

components/employees/EmployeeFilters.tsx

@@ -6,7 +6,9 @@ import { FILTER_SELECT_CLASS } from "@/components/ui/Field";
 import { SearchInput } from "@/components/ui/SearchInput";
 
 type EmployeeFiltersProps = {
-  divisions: { id: string; name: string }[];
+  /** Der ganze Baum, in Tiefensuche-Reihenfolge. */
+  units: { id: string; name: string; unit_type: string }[];
+  depthOf: Map<string, number>;
   locations: { id: string; name: string }[];
 };
 
@@ -22,7 +24,7 @@ const STATUS_OPTIONS = [
   { value: "Ausgetreten", label: "Ausgetreten" },
 ] as const;
 
-export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps) {
+export function EmployeeFilters({ units, depthOf, locations }: EmployeeFiltersProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -55,18 +57,26 @@ export function EmployeeFilters({ divisions, locations }: EmployeeFiltersProps)
       {/* aria-label rather than a visible label: the filter bar is a single
           horizontal row, and each select's first option already names it on
           screen. */}
+      {/* Der ganze Baum, nicht nur die oberste Ebene: die Auswahl greift
+          jeweils auf die Einheit *und alles darunter*, weshalb sich damit
+          auch nach einer einzelnen Abteilung oder einem Team filtern lässt.
+          Eingerückt statt gruppiert, weil optgroup keine Verschachtelung
+          kennt und die Tiefe hier beliebig ist. */}
       <select
-        aria-label="Nach Bereich filtern"
+        aria-label="Nach Organisationseinheit filtern"
         defaultValue={searchParams.get("division") ?? ""}
         onChange={(e) => updateParam("division", e.target.value)}
         className={FILTER_SELECT_CLASS}
       >
-        <option value="">Alle Bereiche</option>
-        {divisions.map((d) => (
-          <option key={d.id} value={d.id}>
-            {d.name}
-          </option>
-        ))}
+        <option value="">Alle Einheiten</option>
+        {units
+          .filter((u) => u.unit_type !== "Gesellschaft")
+          .map((u) => (
+            <option key={u.id} value={u.id}>
+              {" ".repeat(Math.max(0, (depthOf.get(u.id) ?? 1) - 1) * 3)}
+              {u.name}
+            </option>
+          ))}
       </select>
       <select
         aria-label="Nach Status filtern"

components/employees/panels/TransferPanel.tsx

@@ -7,48 +7,51 @@ import { Button } from "@/components/ui/Button";
 import { SelectField, TextField } from "@/components/ui/Field";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { useToast } from "@/components/ui/Toast";
+import type { OpenPositionResolved } from "@/lib/positions";
 import type { Database } from "@/lib/supabase/types";
 
 type EmployeeRow = Database["public"]["Tables"]["employees"]["Row"];
-type Division = Database["public"]["Tables"]["divisions"]["Row"];
-type Department = Database["public"]["Tables"]["departments"]["Row"];
-type Team = Database["public"]["Tables"]["teams"]["Row"];
 
 type TransferPanelProps = {
   open: boolean;
   onClose: () => void;
   employee: EmployeeRow;
-  divisions: Division[];
-  departments: Department[];
-  teams: Team[];
-  currentTeamId: string | null;
+  openPositions: OpenPositionResolved[];
 };
 
-export function TransferPanel({ open, onClose, employee, divisions, departments, teams, currentTeamId }: TransferPanelProps) {
+// Eine Versetzung ist der Wechsel auf eine andere Planstelle — nicht mehr die
+// Angabe eines Zielteams samt frei getipptem Titel. Bereich, Abteilung und
+// Team ergeben sich aus der Einheit der Zielplanstelle, die neue Tätigkeit aus
+// ihrem Job. Damit kann eine Versetzung gar nicht erst irgendwo landen, wo es
+// keine Stelle gibt.
+export function TransferPanel({ open, onClose, employee, openPositions }: TransferPanelProps) {
   const { showToast } = useToast();
   const router = useRouter();
   const [effectiveDate, setEffectiveDate] = useState("");
-  const [divisionId, setDivisionId] = useState(employee.division_id);
-  const [teamId, setTeamId] = useState(currentTeamId ?? "");
-  const [newTitle, setNewTitle] = useState("");
+  const [positionId, setPositionId] = useState("");
   const [pending, setPending] = useState(false);
 
-  const teamsInDivision = useMemo(() => {
-    const deptIds = new Set(departments.filter((d) => d.division_id === divisionId).map((d) => d.id));
-    return teams.filter((t) => deptIds.has(t.department_id));
-  }, [departments, teams, divisionId]);
+  const options = useMemo(
+    () =>
+      openPositions
+        .slice()
+        .sort((a, b) => a.orgLabel.localeCompare(b.orgLabel, "de") || a.title.localeCompare(b.title, "de"))
+        .map((p) => ({ value: p.id, label: `${p.orgLabel} · ${p.title} (${p.position_number})` })),
+    [openPositions]
+  );
+
+  const selected = openPositions.find((p) => p.id === positionId);
 
   async function handleSubmit() {
-    if (!effectiveDate || !teamId) {
-      showToast("Bitte Datum und Zielteam angeben.", "error");
+    if (!effectiveDate || !positionId) {
+      showToast("Bitte Datum und Zielplanstelle angeben.", "error");
       return;
     }
     setPending(true);
     const result = await transferEmployee({
       employee_id: employee.id,
       effective_date: effectiveDate,
-      new_team_id: teamId,
-      new_title: newTitle || undefined,
+      target_position_id: positionId,
     });
     setPending(false);
     if (result.success) {
@@ -71,7 +74,7 @@ export function TransferPanel({ open, onClose, employee, divisions, departments,
           <Button variant="ghost" onClick={onClose}>
             Abbrechen
           </Button>
-          <Button onClick={handleSubmit} pending={pending}>
+          <Button onClick={handleSubmit} pending={pending} disabled={options.length === 0}>
             Versetzen
           </Button>
         </>
@@ -79,31 +82,33 @@ export function TransferPanel({ open, onClose, employee, divisions, departments,
     >
       <div className="flex flex-col gap-4">
         <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
-        <SelectField
-          label="Neuer Bereich"
-          required
-          value={divisionId}
-          onChange={(v) => {
-            setDivisionId(v);
-            setTeamId("");
-          }}
-          options={divisions.map((d) => ({ value: d.id, label: d.name }))}
-        />
-        <SelectField
-          label="Neues Team"
-          required
-          value={teamId}
-          onChange={setTeamId}
-          placeholder="Bitte wählen…"
-          options={teamsInDivision.map((t) => ({ value: t.id, label: t.name }))}
-        />
-        <TextField
-          label="Neuer Titel (optional)"
-          value={newTitle}
-          onChange={setNewTitle}
-          placeholder={employee.job_title}
-          hint="Die neue Führungskraft wird automatisch anhand des Zielteams bestimmt."
-        />
+        {options.length === 0 ? (
+          <p className="rounded border border-border bg-surface p-3 text-sm text-ink-body">
+            Es gibt derzeit keine unbesetzte Planstelle. Eine Versetzung setzt eine freie Zielplanstelle voraus — legen Sie
+            zuerst unter „Positionen“ eine an.
+          </p>
+        ) : (
+          <>
+            <SelectField
+              label="Zielplanstelle"
+              required
+              value={positionId}
+              onChange={setPositionId}
+              placeholder="Bitte wählen…"
+              options={options}
+            />
+            {selected && (
+              <div className="rounded border border-border bg-surface p-3 text-sm text-ink-body">
+                <div className="font-semibold text-ink">{selected.title}</div>
+                <div className="text-xs text-ink-muted">{selected.orgLabel}</div>
+                <div className="mt-1 text-xs text-ink-muted">
+                  {selected.is_chief ? "Leitungsplanstelle" : "Mitarbeiterplanstelle"}
+                  {selected.managerName ? ` · berichtet an ${selected.managerName}` : ""}
+                </div>
+              </div>
+            )}
+          </>
+        )}
       </div>
     </SlideOver>
   );

components/employees/tabs/OrganisationTab.tsx

@@ -8,11 +8,13 @@ type MiniEmployee = { id: string; first_name: string; last_name: string; job_tit
 type OrganisationTabProps = {
   employeeId: string;
   manager: MiniEmployee | null;
+  /** Nur gesetzt, wenn die zuständige Leitung abwesend ist und vertreten wird. */
+  formalManager: MiniEmployee | null;
   directReports: MiniEmployee[];
   breadcrumb: string;
 };
 
-export function OrganisationTab({ employeeId, manager, directReports, breadcrumb }: OrganisationTabProps) {
+export function OrganisationTab({ employeeId, manager, formalManager, directReports, breadcrumb }: OrganisationTabProps) {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -30,7 +32,15 @@ export function OrganisationTab({ employeeId, manager, directReports, breadcrumb
       </div>
 
       <div>
-        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Führungskraft</h3>
+        <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">
+          {formalManager ? "Führungskraft (Vertretung)" : "Führungskraft"}
+        </h3>
+        {formalManager && (
+          <p className="mb-2 text-xs text-ink-muted">
+            Zuständig ist {formalManager.first_name} {formalManager.last_name}; während der Abwesenheit übernimmt die nächste
+            besetzte Ebene.
+          </p>
+        )}
         {manager ? (
           <Link href={`/employees/${manager.id}`} className="flex w-fit items-center gap-3 rounded border border-border p-3 hover:bg-surface">
             <Avatar firstName={manager.first_name} lastName={manager.last_name} />

components/orgchart/OrgChartClient.tsx

@@ -2,22 +2,17 @@
 
 import { useState } from "react";
 import { SegmentedControl } from "@/components/ui/SegmentedControl";
-import type { OpenPositionResolved } from "@/lib/positions";
 import { AsOfPicker } from "./AsOfPicker";
 import { EmployeeTree } from "./EmployeeTree";
 import { PositionTree } from "./PositionTree";
-import { ReorgWorkbench } from "./ReorgWorkbench";
-import type { OrgDepartment, OrgDivision, OrgEmployee, OrgTeam, ReorgScenarioSummary } from "./types";
+import type { OrgEmployee, OrgUnitNode, OrgVacancy } from "./types";
 
-type View = "ma" | "pos" | "reo";
+type View = "ma" | "pos";
 
 type OrgChartClientProps = {
   employees: OrgEmployee[];
-  divisions: OrgDivision[];
-  departments: OrgDepartment[];
-  teams: OrgTeam[];
-  openPositions: OpenPositionResolved[];
-  reorgScenarios: ReorgScenarioSummary[];
+  units: OrgUnitNode[];
+  vacancies: OrgVacancy[];
   asOf: string;
   today: string;
   projectedCount: number;
@@ -28,11 +23,8 @@ type OrgChartClientProps = {
 
 export function OrgChartClient({
   employees,
-  divisions,
-  departments,
-  teams,
-  openPositions,
-  reorgScenarios,
+  units,
+  vacancies,
   asOf,
   today,
   projectedCount,
@@ -40,7 +32,6 @@ export function OrgChartClient({
   focusId,
 }: OrgChartClientProps) {
   const [view, setView] = useState<View>("ma");
-  const isToday = asOf === today;
 
   return (
     <div className="flex flex-col gap-4">
@@ -49,35 +40,14 @@ export function OrgChartClient({
         onChange={setView}
         options={[
           { value: "ma", label: "Mitarbeiter" },
-          { value: "pos", label: "Positionen" },
-          { value: "reo", label: "Reorganisation" },
+          { value: "pos", label: "Organisation" },
         ]}
       />
 
-      {view !== "reo" && (
-        <AsOfPicker asOf={asOf} today={today} projectedCount={projectedCount} historyStartsAt={historyStartsAt} />
-      )}
+      <AsOfPicker asOf={asOf} today={today} projectedCount={projectedCount} historyStartsAt={historyStartsAt} />
 
       {view === "ma" && <EmployeeTree employees={employees} focusId={focusId} />}
-      {view === "pos" && (
-        <PositionTree employees={employees} divisions={divisions} departments={departments} teams={teams} openPositions={openPositions} />
-      )}
-      {view === "reo" &&
-        (isToday ? (
-          <ReorgWorkbench employees={employees} divisions={divisions} departments={departments} teams={teams} reorgScenarios={reorgScenarios} />
-        ) : (
-          // A reorg planned against a past or projected roster would be
-          // applied to the *live* org anyway — better to send the user back
-          // to today than to let them assemble moves from a roster that is
-          // not the one the change would hit.
-          <div className="rounded border border-border bg-white p-6 text-sm text-ink-body">
-            <p className="font-semibold text-ink">Reorganisation nur zum heutigen Stand</p>
-            <p className="mt-1 text-ink-muted">
-              Es ist ein abweichender Stichtag gewählt. Reorganisationen wirken immer auf die aktuelle Struktur — wechseln
-              Sie zurück auf „Heute“, um eine zu planen.
-            </p>
-          </div>
-        ))}
+      {view === "pos" && <PositionTree employees={employees} units={units} vacancies={vacancies} />}
     </div>
   );
 }

components/orgchart/PositionTree.tsx

@@ -2,56 +2,34 @@
 
 import { ChevronDown, ChevronRight } from "lucide-react";
 import Link from "next/link";
-import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { SegmentedControl } from "@/components/ui/SegmentedControl";
-import type { OpenPositionResolved } from "@/lib/positions";
 import { LazyGraphOrgChart } from "./LazyGraphOrgChart";
-import type { ChartNode, OrgDepartment, OrgDivision, OrgEmployee, OrgTeam } from "./types";
+import type { ChartNode, OrgEmployee, OrgUnitNode, OrgVacancy } from "./types";
+
+// Die Struktursicht. Sie folgt jetzt org_units.parent_id statt einer fest
+// verdrahteten Abfolge Bereich → Abteilung → Team: eine fünfte Ebene ist
+// damit eine Datenfrage und keine Änderung an dieser Datei.
+//
+// Liste und Grafik werden aus *einem* Baum gerendert. Vorher gab es dieselbe
+// Hierarchie zweimal — einmal als JSX-Schachtelung, einmal als ChartNode —
+// und die beiden konnten auseinanderlaufen, ohne dass es auffiel.
 
 type ViewMode = "list" | "graph";
 
-function TreeRow({
-  depth,
-  expandable,
-  expandedNow,
-  onToggle,
-  children,
-}: {
-  depth: number;
-  expandable: boolean;
-  expandedNow: boolean;
-  onToggle: () => void;
-  children: ReactNode;
-}) {
-  return (
-    <div className="flex items-center gap-2 rounded px-2 py-1.5 hover:bg-surface" style={{ paddingLeft: depth * 24 + 8 }}>
-      {expandable ? (
-        <button type="button" onClick={onToggle} className="shrink-0 text-ink-muted">
-          {expandedNow ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-        </button>
-      ) : (
-        <span className="w-4 shrink-0" />
-      )}
-      {children}
-    </div>
-  );
-}
-
 type PositionTreeProps = {
   employees: OrgEmployee[];
-  divisions: OrgDivision[];
-  departments: OrgDepartment[];
-  teams: OrgTeam[];
-  openPositions: OpenPositionResolved[];
+  units: OrgUnitNode[];
+  vacancies: OrgVacancy[];
 };
 
-export function PositionTree({ employees, divisions, departments, teams, openPositions }: PositionTreeProps) {
-  const [expanded, setExpanded] = useState<Set<string>>(new Set(["root"]));
+export function PositionTree({ employees, units, vacancies }: PositionTreeProps) {
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(units.filter((u) => u.parent_id === null).map((u) => `unit-${u.id}`)));
   const [mode, setMode] = useState<ViewMode>("list");
 
-  // useCallback-stable: GraphOrgChart's layout memo depends on these
-  // references, so unstable functions would force a Dagre re-layout on
-  // every unrelated re-render.
+  // useCallback-stabil: das Layout-Memo von GraphOrgChart hängt an diesen
+  // Referenzen, instabile Funktionen erzwängen sonst bei jedem Re-Render ein
+  // neues Dagre-Layout.
   const toggle = useCallback((id: string) => {
     setExpanded((prev) => {
       const next = new Set(prev);
@@ -60,216 +38,178 @@ export function PositionTree({ employees, divisions, departments, teams, openPos
       return next;
     });
   }, []);
-
   const isExpanded = useCallback((id: string) => expanded.has(id), [expanded]);
 
-  const ceo = employees.find((e) => e.org_level === 0) ?? null;
-  const { divisionHeadByDivision, teamLeadByTeam, icsByTeamAndTitle } = useMemo(() => {
-    const divisionHeadByDivision = new Map<string, OrgEmployee>();
-    const teamLeadByTeam = new Map<string, OrgEmployee>();
-    const icsByTeamAndTitle = new Map<string, Map<string, OrgEmployee[]>>();
-    for (const e of employees) {
-      if (e.org_level === 1 && e.division_id) divisionHeadByDivision.set(e.division_id, e);
-      if (e.is_lead && e.team_id) teamLeadByTeam.set(e.team_id, e);
-      if (!e.is_lead && e.org_level === 3 && e.team_id) {
-        if (!icsByTeamAndTitle.has(e.team_id)) icsByTeamAndTitle.set(e.team_id, new Map());
-        const byTitle = icsByTeamAndTitle.get(e.team_id)!;
-        if (!byTitle.has(e.job_title)) byTitle.set(e.job_title, []);
-        byTitle.get(e.job_title)!.push(e);
-      }
-    }
-    return { divisionHeadByDivision, teamLeadByTeam, icsByTeamAndTitle };
-  }, [employees]);
-  const openByTeam = useMemo(() => {
-    const map = new Map<string, OpenPositionResolved[]>();
-    for (const p of openPositions) {
-      if (!map.has(p.team_id)) map.set(p.team_id, []);
-      map.get(p.team_id)!.push(p);
-    }
-    return map;
-  }, [openPositions]);
-
-  // Mirrors the JSX walk below into the generic ChartNode shape for graph
-  // mode — same synthetic ids ("root", div-*, dept-*, team-*, teamKey-title)
-  // the list already uses as `expanded` keys, so one Set drives both.
-  const chartTree = useMemo<ChartNode[]>(() => {
-    if (!ceo) return [];
-
-    function buildTeam(team: OrgTeam): ChartNode {
-      const teamKey = `team-${team.id}`;
-      const lead = teamLeadByTeam.get(team.id);
-      const icsByTitle = icsByTeamAndTitle.get(team.id) ?? new Map<string, OrgEmployee[]>();
-      const openForTeam = openByTeam.get(team.id) ?? [];
-
-      const titleGroups: ChartNode[] = Array.from(icsByTitle.entries()).map(([title, people]) => ({
-        id: `${teamKey}-${title}`,
-        kind: "group",
-        label: title,
-        sublabel: `${people.length}x besetzt`,
-        children: people.map((p) => ({
-          id: p.id,
-          kind: "person",
-          label: `${p.first_name} ${p.last_name}`,
-          href: `/employees/${p.id}`,
-          avatar: { firstName: p.first_name, lastName: p.last_name },
-          children: [],
-        })),
-      }));
-
-      const vacancyNodes: ChartNode[] = openForTeam.map((p) => ({
-        id: `vac-${p.id}`,
-        kind: "vacancy",
-        label: `${p.position_number} · ${p.title}`,
-        href: "/positions",
-        children: [],
-      }));
-
-      return {
-        id: teamKey,
-        kind: "role",
-        label: `Teamleitung ${team.name}`,
-        sublabel: lead ? `besetzt: ${lead.first_name} ${lead.last_name}` : "vakant",
-        vacant: !lead,
-        children: [...titleGroups, ...vacancyNodes],
-      };
-    }
-
-    function buildDept(dept: OrgDepartment): ChartNode {
-      return {
-        id: `dept-${dept.id}`,
-        kind: "group",
-        label: `${dept.org_number} · ${dept.name}`,
-        children: teams.filter((t) => t.department_id === dept.id).map(buildTeam),
-      };
-    }
-
-    function buildDivision(div: OrgDivision): ChartNode {
-      const head = divisionHeadByDivision.get(div.id);
-      return {
-        id: `div-${div.id}`,
-        kind: "role",
-        label: `Bereichsleitung ${div.name}`,
-        sublabel: head ? `besetzt: ${head.first_name} ${head.last_name}` : "vakant",
-        vacant: !head,
-        children: departments.filter((d) => d.division_id === div.id).map(buildDept),
-      };
-    }
-
-    return [
-      {
-        id: "root",
-        kind: "role",
-        label: "Geschäftsführung",
-        sublabel: `besetzt: ${ceo.first_name} ${ceo.last_name}`,
-        children: divisions.map(buildDivision),
-      },
-    ];
-  }, [ceo, divisionHeadByDivision, teamLeadByTeam, icsByTeamAndTitle, openByTeam, divisions, departments, teams]);
+  const tree = useMemo(() => buildUnitTree(units, employees, vacancies), [units, employees, vacancies]);
 
   return (
     <div className="flex flex-col gap-4">
       <div className="flex justify-end">
-        <SegmentedControl<ViewMode> value={mode} onChange={setMode} options={[{ value: "list", label: "Liste" }, { value: "graph", label: "Grafisch" }]} />
+        <SegmentedControl<ViewMode>
+          value={mode}
+          onChange={setMode}
+          options={[
+            { value: "list", label: "Liste" },
+            { value: "graph", label: "Grafisch" },
+          ]}
+        />
       </div>
       {mode === "graph" ? (
-        <LazyGraphOrgChart tree={chartTree} isExpanded={isExpanded} onToggle={toggle} />
+        <LazyGraphOrgChart tree={tree} isExpanded={isExpanded} onToggle={toggle} />
       ) : (
         <div className="rounded border border-border bg-white p-4">
-      {ceo && (
-        <TreeRow depth={0} expandable expandedNow={expanded.has("root")} onToggle={() => toggle("root")}>
-          <span className="text-sm font-semibold text-ink">Geschäftsführung</span>
-          <span className="text-xs text-ink-muted">
-            besetzt: {ceo.first_name} {ceo.last_name}
-          </span>
-        </TreeRow>
-      )}
-      {expanded.has("root") &&
-        divisions.map((div) => {
-          const head = divisionHeadByDivision.get(div.id);
-          const divKey = `div-${div.id}`;
-          return (
-            <div key={div.id}>
-              <TreeRow depth={1} expandable expandedNow={expanded.has(divKey)} onToggle={() => toggle(divKey)}>
-                <span className="text-sm font-semibold text-ink">Bereichsleitung {div.name}</span>
-                <span className="text-xs text-ink-muted">{head ? `besetzt: ${head.first_name} ${head.last_name}` : "vakant"}</span>
-              </TreeRow>
-              {expanded.has(divKey) &&
-                departments
-                  .filter((d) => d.division_id === div.id)
-                  .map((dept) => {
-                    const deptKey = `dept-${dept.id}`;
-                    return (
-                      <div key={dept.id}>
-                        <TreeRow depth={2} expandable expandedNow={expanded.has(deptKey)} onToggle={() => toggle(deptKey)}>
-                          <span className="text-sm text-ink">
-                            {dept.org_number} · {dept.name}
-                          </span>
-                        </TreeRow>
-                        {expanded.has(deptKey) &&
-                          teams
-                            .filter((t) => t.department_id === dept.id)
-                            .map((team) => {
-                              const teamKey = `team-${team.id}`;
-                              const lead = teamLeadByTeam.get(team.id);
-                              const icsByTitle = icsByTeamAndTitle.get(team.id) ?? new Map<string, OrgEmployee[]>();
-                              const openForTeam = openByTeam.get(team.id) ?? [];
-                              return (
-                                <div key={team.id}>
-                                  <TreeRow depth={3} expandable expandedNow={expanded.has(teamKey)} onToggle={() => toggle(teamKey)}>
-                                    <span className="text-sm text-ink">Teamleitung {team.name}</span>
-                                    <span className="text-xs text-ink-muted">
-                                      {lead ? `besetzt: ${lead.first_name} ${lead.last_name}` : "vakant"}
-                                    </span>
-                                  </TreeRow>
-                                  {expanded.has(teamKey) && (
-                                    <>
-                                      {Array.from(icsByTitle.entries()).map(([title, people]) => {
-                                        const groupKey = `${teamKey}-${title}`;
-                                        return (
-                                          <div key={title}>
-                                            <TreeRow
-                                              depth={4}
-                                              expandable={people.length > 0}
-                                              expandedNow={expanded.has(groupKey)}
-                                              onToggle={() => toggle(groupKey)}
-                                            >
-                                              <span className="text-sm text-ink">{title}</span>
-                                              <span className="text-xs text-ink-muted">{people.length}x besetzt</span>
-                                            </TreeRow>
-                                            {expanded.has(groupKey) &&
-                                              people.map((p) => (
-                                                <div key={p.id} className="py-1" style={{ paddingLeft: 5 * 24 + 8 }}>
-                                                  <Link href={`/employees/${p.id}`} className="text-sm text-ink-body hover:text-brand-700 hover:underline">
-                                                    {p.first_name} {p.last_name}
-                                                  </Link>
-                                                </div>
-                                              ))}
-                                          </div>
-                                        );
-                                      })}
-                                      {openForTeam.map((p) => (
-                                        <Link
-                                          key={p.id}
-                                          href="/positions"
-                                          className="block border-l-2 border-dashed border-brand-200 py-1 text-sm text-brand-700 hover:underline"
-                                          style={{ paddingLeft: 4 * 24 + 8 }}
-                                        >
-                                          + {p.position_number} · {p.title}
-                                        </Link>
-                                      ))}
-                                    </>
-                                  )}
-                                </div>
-                              );
-                            })}
-                      </div>
-                    );
-                  })}
-            </div>
-          );
-        })}
+          {tree.map((node) => (
+            <ListNode key={node.id} node={node} depth={0} expanded={expanded} onToggle={toggle} />
+          ))}
         </div>
       )}
     </div>
   );
 }
+
+function ListNode({
+  node,
+  depth,
+  expanded,
+  onToggle,
+}: {
+  node: ChartNode;
+  depth: number;
+  expanded: Set<string>;
+  onToggle: (id: string) => void;
+}) {
+  const expandable = node.children.length > 0;
+  const open = expanded.has(node.id);
+
+  return (
+    <div>
+      <div
+        className="flex items-center gap-2 rounded px-2 py-1.5 hover:bg-surface"
+        style={{ paddingLeft: depth * 24 + 8 }}
+      >
+        {expandable ? (
+          <button
+            type="button"
+            onClick={() => onToggle(node.id)}
+            className="shrink-0 text-ink-muted"
+            aria-expanded={open}
+            aria-label={open ? `${node.label} zuklappen` : `${node.label} aufklappen`}
+          >
+            {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+          </button>
+        ) : (
+          <span className="w-4 shrink-0" />
+        )}
+        {node.href ? (
+          <Link
+            href={node.href}
+            className={node.kind === "vacancy" ? "text-sm text-brand-700 hover:underline" : "text-sm text-ink-body hover:text-brand-700 hover:underline"}
+          >
+            {node.label}
+          </Link>
+        ) : (
+          <span className={node.kind === "group" ? "text-sm text-ink" : "text-sm font-semibold text-ink"}>{node.label}</span>
+        )}
+        {node.sublabel && (
+          <span className={node.vacant ? "text-xs font-semibold text-warning-text" : "text-xs text-ink-muted"}>{node.sublabel}</span>
+        )}
+      </div>
+      {open && node.children.map((child) => <ListNode key={child.id} node={child} depth={depth + 1} expanded={expanded} onToggle={onToggle} />)}
+    </div>
+  );
+}
+
+/**
+ * Je Einheit: die Leitung als Kopfzeile, darunter die untergeordneten
+ * Einheiten, dann die eigenen Mitarbeitenden nach Tätigkeit gruppiert und
+ * zuletzt die unbesetzten Planstellen.
+ */
+export function buildUnitTree(units: OrgUnitNode[], employees: OrgEmployee[], vacancies: OrgVacancy[]): ChartNode[] {
+  const childUnits = new Map<string | null, OrgUnitNode[]>();
+  for (const u of units) {
+    const list = childUnits.get(u.parent_id) ?? [];
+    list.push(u);
+    childUnits.set(u.parent_id, list);
+  }
+  for (const list of childUnits.values()) list.sort((a, b) => a.org_number.localeCompare(b.org_number));
+
+  const chiefOf = new Map<string, OrgEmployee>();
+  const staffOf = new Map<string, OrgEmployee[]>();
+  for (const e of employees) {
+    if (e.is_chief) chiefOf.set(e.org_unit_id, e);
+    else {
+      const list = staffOf.get(e.org_unit_id) ?? [];
+      list.push(e);
+      staffOf.set(e.org_unit_id, list);
+    }
+  }
+
+  const vacantOf = new Map<string, OrgVacancy[]>();
+  for (const v of vacancies) {
+    const list = vacantOf.get(v.org_unit_id) ?? [];
+    list.push(v);
+    vacantOf.set(v.org_unit_id, list);
+  }
+
+  function build(unit: OrgUnitNode): ChartNode {
+    const key = `unit-${unit.id}`;
+    const chief = chiefOf.get(unit.id);
+
+    const subUnits = (childUnits.get(unit.id) ?? []).map(build);
+
+    // Nach Tätigkeit gruppiert: dreissig Zeilen „Maschinenbediener:in" sagen
+    // weniger als eine Zeile „Maschinenbediener:in — 30x besetzt".
+    const byTitle = new Map<string, OrgEmployee[]>();
+    for (const e of staffOf.get(unit.id) ?? []) {
+      const list = byTitle.get(e.job_title) ?? [];
+      list.push(e);
+      byTitle.set(e.job_title, list);
+    }
+    const titleGroups: ChartNode[] = Array.from(byTitle.entries())
+      .sort(([a], [b]) => a.localeCompare(b, "de"))
+      .map(([title, people]) => ({
+        id: `${key}-job-${title}`,
+        kind: "group" as const,
+        label: title,
+        sublabel: `${people.length}x besetzt`,
+        children: people
+          .slice()
+          .sort((a, b) => a.last_name.localeCompare(b.last_name, "de"))
+          .map((p) => ({
+            id: p.id,
+            kind: "person" as const,
+            label: `${p.first_name} ${p.last_name}`,
+            href: `/employees/${p.id}`,
+            avatar: { firstName: p.first_name, lastName: p.last_name },
+            absent: p.absent,
+            badge: p.absent ? (p.absence_type ?? "Abwesend") : undefined,
+            children: [],
+          })),
+      }));
+
+    const vacancyNodes: ChartNode[] = (vacantOf.get(unit.id) ?? [])
+      .filter((v) => !v.is_chief) // die Leitungsvakanz steht schon in der Kopfzeile
+      .sort((a, b) => a.position_number.localeCompare(b.position_number))
+      .map((v) => ({
+        id: `vac-${v.position_id}`,
+        kind: "vacancy" as const,
+        label: `+ ${v.position_number} · ${v.job_title}`,
+        href: "/positions",
+        vacant: true,
+        children: [],
+      }));
+
+    return {
+      id: key,
+      kind: "role",
+      label: `${unit.org_number} · ${unit.name}`,
+      sublabel: chief
+        ? `Leitung: ${chief.first_name} ${chief.last_name}${chief.absent ? " (abwesend)" : ""}`
+        : "Leitung vakant",
+      vacant: !chief,
+      children: [...subUnits, ...titleGroups, ...vacancyNodes],
+    };
+  }
+
+  return (childUnits.get(null) ?? []).map(build);
+}

components/orgchart/ReorgWorkbench.tsx

@@ -1,404 +0,0 @@
-"use client";
-
-import { RotateCcw, X } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import { applyReorg, undoReorg, type ReorgMovePayload } from "@/actions/reorg";
-import { Button } from "@/components/ui/Button";
-import { Field, SelectField, TextField } from "@/components/ui/Field";
-import { Lookup } from "@/components/ui/Lookup";
-import { useToast } from "@/components/ui/Toast";
-import { fmtDate } from "@/lib/format";
-import type { OrgDepartment, OrgDivision, OrgEmployee, OrgTeam, ReorgScenarioSummary } from "./types";
-
-type ChangeKind = "emp" | "team" | "abt" | "dept";
-
-type PendingMove = {
-  id: string;
-  kind: ChangeKind;
-  label: string;
-  employeeIds: string[];
-  targetTeamId: string;
-  targetTeamLabel: string;
-};
-
-const KIND_LABELS: Record<ChangeKind, string> = {
-  emp: "Mitarbeiter:in(nen)",
-  team: "Ganzes Team",
-  abt: "Ganze Abteilung",
-  dept: "Ganzer Bereich",
-};
-
-type ReorgWorkbenchProps = {
-  employees: OrgEmployee[];
-  divisions: OrgDivision[];
-  departments: OrgDepartment[];
-  teams: OrgTeam[];
-  reorgScenarios: ReorgScenarioSummary[];
-};
-
-export function ReorgWorkbench({ employees, divisions, departments, teams, reorgScenarios }: ReorgWorkbenchProps) {
-  const { showToast } = useToast();
-  const router = useRouter();
-
-  const [name, setName] = useState("");
-  const [effectiveDate, setEffectiveDate] = useState("");
-  const [changeType, setChangeType] = useState<ChangeKind>("emp");
-  const [selectedEmployees, setSelectedEmployees] = useState<OrgEmployee[]>([]);
-  const [sourceTeamId, setSourceTeamId] = useState("");
-  const [sourceDeptId, setSourceDeptId] = useState("");
-  const [sourceDivisionId, setSourceDivisionId] = useState("");
-  const [targetDivisionId, setTargetDivisionId] = useState("");
-  const [targetTeamId, setTargetTeamId] = useState("");
-  const [pendingMoves, setPendingMoves] = useState<PendingMove[]>([]);
-  const [applying, setApplying] = useState(false);
-  const [undoingId, setUndoingId] = useState<string | null>(null);
-
-  const divisionById = useMemo(() => new Map(divisions.map((d) => [d.id, d])), [divisions]);
-  const departmentById = useMemo(() => new Map(departments.map((d) => [d.id, d])), [departments]);
-  const teamById = useMemo(() => new Map(teams.map((t) => [t.id, t])), [teams]);
-  const teamDivisionId = useMemo(() => {
-    const deptDivision = new Map(departments.map((d) => [d.id, d.division_id]));
-    const m = new Map<string, string>();
-    for (const t of teams) m.set(t.id, deptDivision.get(t.department_id) ?? "");
-    return m;
-  }, [teams, departments]);
-  const teamsInTargetDivision = useMemo(
-    () => teams.filter((t) => teamDivisionId.get(t.id) === targetDivisionId),
-    [teams, teamDivisionId, targetDivisionId]
-  );
-
-  async function searchLocalEmployees(query: string): Promise<OrgEmployee[]> {
-    const q = query.trim().toLowerCase();
-    if (q.length < 2) return [];
-    return employees
-      .filter(
-        (e) =>
-          !selectedEmployees.some((s) => s.id === e.id) &&
-          (`${e.first_name} ${e.last_name}`.toLowerCase().includes(q) || e.job_title.toLowerCase().includes(q))
-      )
-      .slice(0, 20);
-  }
-
-  function resolveEmployeeIds(): string[] {
-    if (changeType === "emp") return selectedEmployees.map((e) => e.id);
-    if (changeType === "team") return employees.filter((e) => e.team_id === sourceTeamId).map((e) => e.id);
-    if (changeType === "abt") {
-      const teamIds = new Set(teams.filter((t) => t.department_id === sourceDeptId).map((t) => t.id));
-      return employees.filter((e) => e.team_id && teamIds.has(e.team_id)).map((e) => e.id);
-    }
-    return employees.filter((e) => e.division_id === sourceDivisionId).map((e) => e.id);
-  }
-
-  function sourceLabel(): string {
-    if (changeType === "emp") return `${selectedEmployees.length} Mitarbeiter:in(nen)`;
-    if (changeType === "team") return `Team ${teamById.get(sourceTeamId)?.name ?? ""}`;
-    if (changeType === "abt") return `Abteilung ${departmentById.get(sourceDeptId)?.name ?? ""}`;
-    return `Bereich ${divisionById.get(sourceDivisionId)?.name ?? ""}`;
-  }
-
-  function handleAddMove() {
-    const employeeIds = resolveEmployeeIds();
-    if (employeeIds.length === 0) {
-      showToast("Keine Mitarbeiter:innen in der Auswahl gefunden.", "error");
-      return;
-    }
-    if (!targetTeamId) {
-      showToast("Bitte ein Ziel-Team wählen.", "error");
-      return;
-    }
-    const targetTeam = teamById.get(targetTeamId);
-    setPendingMoves((prev) => [
-      ...prev,
-      {
-        id: crypto.randomUUID(),
-        kind: changeType,
-        label: sourceLabel(),
-        employeeIds,
-        targetTeamId,
-        targetTeamLabel: targetTeam?.name ?? "",
-      },
-    ]);
-    setSelectedEmployees([]);
-    setSourceTeamId("");
-    setSourceDeptId("");
-    setSourceDivisionId("");
-  }
-
-  function removeMove(id: string) {
-    setPendingMoves((prev) => prev.filter((m) => m.id !== id));
-  }
-
-  const divisionBefore = useMemo(() => {
-    const m = new Map<string, number>();
-    for (const e of employees) m.set(e.division_id, (m.get(e.division_id) ?? 0) + 1);
-    return m;
-  }, [employees]);
-
-  const divisionDelta = useMemo(() => {
-    const m = new Map<string, number>();
-    const employeeById = new Map(employees.map((e) => [e.id, e]));
-    for (const move of pendingMoves) {
-      const targetDivId = teamDivisionId.get(move.targetTeamId);
-      for (const empId of move.employeeIds) {
-        const emp = employeeById.get(empId);
-        if (!emp || !targetDivId || emp.division_id === targetDivId) continue;
-        m.set(emp.division_id, (m.get(emp.division_id) ?? 0) - 1);
-        m.set(targetDivId, (m.get(targetDivId) ?? 0) + 1);
-      }
-    }
-    return m;
-  }, [pendingMoves, employees, teamDivisionId]);
-
-  async function handleApply() {
-    if (!name || !effectiveDate || pendingMoves.length === 0) {
-      showToast("Bitte Name, Datum und mindestens eine Änderung angeben.", "error");
-      return;
-    }
-    setApplying(true);
-    const moves: ReorgMovePayload[] = pendingMoves.map((m) => ({
-      kind: m.kind,
-      label: m.label,
-      employee_ids: m.employeeIds,
-      target_team_id: m.targetTeamId,
-    }));
-    const result = await applyReorg({ name, effective_date: effectiveDate, moves });
-    setApplying(false);
-    if (result.success) {
-      showToast("Reorganisation durchgeführt.");
-      setPendingMoves([]);
-      setName("");
-      setEffectiveDate("");
-      router.refresh();
-    } else {
-      showToast(result.error ?? "Fehler bei der Reorganisation.", "error");
-    }
-  }
-
-  async function handleUndo(scenarioId: string) {
-    setUndoingId(scenarioId);
-    const result = await undoReorg({ scenario_id: scenarioId });
-    setUndoingId(null);
-    if (result.success) {
-      showToast("Reorganisation rückgängig gemacht.");
-      router.refresh();
-    } else {
-      showToast(result.error ?? "Fehler beim Rückgängigmachen.", "error");
-    }
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="rounded border border-border bg-white p-4">
-        <h2 className="mb-3 text-sm font-bold text-ink">Neue Reorganisation</h2>
-        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-          <TextField label="Name der Reorganisation" required value={name} onChange={setName} />
-          <TextField label="Wirksam ab" required type="date" value={effectiveDate} onChange={setEffectiveDate} />
-        </div>
-
-        <fieldset className="mt-4">
-          <legend className="sr-only">Art der Änderung</legend>
-          <div className="flex flex-wrap gap-2">
-            {(Object.keys(KIND_LABELS) as ChangeKind[]).map((kind) => (
-              <button
-                key={kind}
-                type="button"
-                aria-pressed={changeType === kind}
-                onClick={() => setChangeType(kind)}
-                className={`rounded px-3 py-1.5 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
-                  changeType === kind ? "bg-brand-500 text-white" : "border border-border text-ink-body hover:bg-surface"
-                }`}
-              >
-                {KIND_LABELS[kind]}
-              </button>
-            ))}
-          </div>
-        </fieldset>
-
-        <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-          <div>
-            {changeType === "emp" && (
-              <div className="flex flex-col gap-2">
-                <Field label="Quelle: Mitarbeiter:innen">
-                  {(p) => (
-                    <Lookup<OrgEmployee>
-                      {...p}
-                      placeholder="Mitarbeiter:in suchen…"
-                      onSearch={searchLocalEmployees}
-                      onSelect={(e) => setSelectedEmployees((prev) => [...prev, e])}
-                      renderResult={(e) => (
-                        <div>
-                          <div className="font-semibold text-ink">
-                            {e.first_name} {e.last_name}
-                          </div>
-                          <div className="text-xs text-ink-muted">{e.job_title}</div>
-                        </div>
-                      )}
-                    />
-                  )}
-                </Field>
-                {selectedEmployees.length > 0 && (
-                  <div className="flex flex-wrap gap-1.5">
-                    {selectedEmployees.map((e) => (
-                      <span key={e.id} className="flex items-center gap-1 rounded-full bg-brand-100 px-2.5 py-1 text-xs font-semibold text-brand-700">
-                        {e.first_name} {e.last_name}
-                        <button
-                          type="button"
-                          aria-label={`${e.first_name} ${e.last_name} aus der Auswahl entfernen`}
-                          onClick={() => setSelectedEmployees((prev) => prev.filter((s) => s.id !== e.id))}
-                          className="rounded focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500"
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-            {changeType === "team" && (
-              <SelectField
-                label="Quelle: Team"
-                value={sourceTeamId}
-                onChange={setSourceTeamId}
-                placeholder="Team wählen…"
-                options={teams.map((t) => ({ value: t.id, label: t.name }))}
-              />
-            )}
-            {changeType === "abt" && (
-              <SelectField
-                label="Quelle: Abteilung"
-                value={sourceDeptId}
-                onChange={setSourceDeptId}
-                placeholder="Abteilung wählen…"
-                options={departments.map((d) => ({ value: d.id, label: d.name }))}
-              />
-            )}
-            {changeType === "dept" && (
-              <SelectField
-                label="Quelle: Bereich"
-                value={sourceDivisionId}
-                onChange={setSourceDivisionId}
-                placeholder="Bereich wählen…"
-                options={divisions.map((d) => ({ value: d.id, label: d.name }))}
-              />
-            )}
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <SelectField
-              label="Ziel-Bereich"
-              required
-              value={targetDivisionId}
-              onChange={(v) => {
-                setTargetDivisionId(v);
-                setTargetTeamId("");
-              }}
-              placeholder="Ziel-Bereich wählen…"
-              options={divisions.map((d) => ({ value: d.id, label: d.name }))}
-            />
-            <SelectField
-              label="Ziel-Team"
-              required
-              value={targetTeamId}
-              onChange={setTargetTeamId}
-              placeholder="Ziel-Team wählen…"
-              options={teamsInTargetDivision.map((t) => ({ value: t.id, label: t.name }))}
-            />
-          </div>
-        </div>
-
-        <Button variant="secondary" onClick={handleAddMove} className="mt-4">
-          + Zur Reorganisation hinzufügen
-        </Button>
-      </div>
-
-      {pendingMoves.length > 0 && (
-        <div className="rounded border border-border bg-white p-4">
-          <h2 className="mb-3 text-sm font-bold text-ink">Geplante Änderungen ({pendingMoves.length})</h2>
-          <ul className="mb-4 flex flex-col divide-y divide-border">
-            {pendingMoves.map((m) => (
-              <li key={m.id} className="flex items-center justify-between py-2 text-sm">
-                <div>
-                  <span className="mr-2 rounded-full bg-purple-bg px-2 py-0.5 text-xs font-semibold text-purple-text">{KIND_LABELS[m.kind]}</span>
-                  <span className="text-ink">
-                    {m.label} → {m.targetTeamLabel}
-                  </span>
-                  <span className="ml-2 text-xs text-ink-muted">({m.employeeIds.length} Mitarbeiter:innen)</span>
-                </div>
-                <Button
-                  variant="icon"
-                  onClick={() => removeMove(m.id)}
-                  aria-label={`${m.label} aus der Reorganisation entfernen`}
-                  className="hover:!text-danger-solid"
-                >
-                  <X className="h-4 w-4" />
-                </Button>
-              </li>
-            ))}
-          </ul>
-
-          <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-ink-muted">Auswirkung auf Headcount</h3>
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="text-left text-xs text-ink-muted">
-                <th className="py-1 pr-3">Bereich</th>
-                <th className="py-1 pr-3">Vorher</th>
-                <th className="py-1 pr-3">Nachher</th>
-                <th className="py-1 pr-3">Δ</th>
-              </tr>
-            </thead>
-            <tbody>
-              {Array.from(divisionDelta.entries())
-                .filter(([, delta]) => delta !== 0)
-                .map(([divId, delta]) => {
-                  const before = divisionBefore.get(divId) ?? 0;
-                  return (
-                    <tr key={divId} className="border-t border-border">
-                      <td className="py-1.5 pr-3 text-ink">{divisionById.get(divId)?.name}</td>
-                      <td className="py-1.5 pr-3 text-ink-body">{before}</td>
-                      <td className="py-1.5 pr-3 text-ink-body">{before + delta}</td>
-                      <td className={`py-1.5 pr-3 font-semibold ${delta > 0 ? "text-success-text" : "text-danger-text"}`}>
-                        {delta > 0 ? `+${delta}` : delta}
-                      </td>
-                    </tr>
-                  );
-                })}
-            </tbody>
-          </table>
-
-          <div className="mt-4 flex flex-wrap gap-2">
-            <Button variant="secondary" onClick={() => setPendingMoves([])}>
-              Verwerfen
-            </Button>
-            <Button onClick={handleApply} pending={applying}>
-              Reorganisation durchführen
-            </Button>
-          </div>
-        </div>
-      )}
-
-      {reorgScenarios.length > 0 && (
-        <div className="rounded border border-border bg-white p-4">
-          <h2 className="mb-3 text-sm font-bold text-ink">↩ Durchgeführte Reorganisationen – rückgängig machbar</h2>
-          <ul className="flex flex-col divide-y divide-border">
-            {reorgScenarios.map((s) => (
-              <li key={s.id} className="flex items-center justify-between py-2 text-sm">
-                <div>
-                  <span className="font-semibold text-ink">{s.name}</span>
-                  <span className="ml-2 text-xs text-ink-muted">
-                    wirksam ab {fmtDate(s.effective_date)} · durchgeführt am {fmtDate(s.applied_at)}
-                  </span>
-                </div>
-                <Button variant="secondary" size="sm" onClick={() => handleUndo(s.id)} pending={undoingId === s.id}>
-                  <RotateCcw className="h-3.5 w-3.5" />
-                  Rückgängig machen
-                </Button>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}

components/orgchart/types.ts

@@ -15,16 +15,30 @@ export type OrgEmployee = {
   /** This person is on a long-term absence as of the chart's date. */
   absent: boolean;
   absence_type: string | null;
-  team_id: string | null;
-  division_id: string;
-  is_lead: boolean;
-  org_level: number;
+  /** Die Einheit der Planstelle — die einzige Verortung, die es noch gibt. */
+  org_unit_id: string;
+  /** Diese Planstelle führt ihre Einheit (SAP-OM: A012). */
+  is_chief: boolean;
+  position_id: string;
+  position_number: string;
 };
 
-export type OrgDivision = { id: string; org_number: string; name: string };
-export type OrgDepartment = { id: string; org_number: string; name: string; division_id: string };
-export type OrgTeam = { id: string; org_number: string; name: string; department_id: string };
-export type ReorgScenarioSummary = { id: string; name: string; effective_date: string; applied: boolean; applied_at: string | null };
+/** Eine Planstelle, die am Stichtag niemand innehat. */
+export type OrgVacancy = {
+  position_id: string;
+  position_number: string;
+  job_title: string;
+  org_unit_id: string;
+  is_chief: boolean;
+};
+
+export type OrgUnitNode = {
+  id: string;
+  org_number: string;
+  name: string;
+  parent_id: string | null;
+  unit_type: "Gesellschaft" | "Bereich" | "Abteilung" | "Team";
+};
 
 // Generic tree shape both EmployeeTree and PositionTree map their own data
 // into for the graphical (React Flow + Dagre) view — see GraphOrgChart.

components/positions/CreatePositionModal.tsx

@@ -2,51 +2,64 @@
 
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { createPosition, searchSuperiors, type SuperiorSearchResult } from "@/actions/positions";
+import { createPosition } from "@/actions/positions";
 import { Button } from "@/components/ui/Button";
-import { Field, SelectField, TextField } from "@/components/ui/Field";
-import { Lookup } from "@/components/ui/Lookup";
+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 { Database } from "@/lib/supabase/types";
 
-type Team = Database["public"]["Tables"]["teams"]["Row"];
+export type UnitOption = { id: string; name: string; unit_type: string; depth: number; hasChief: boolean };
 
-export function CreatePositionModal({ open, onClose, teams }: { open: boolean; onClose: () => void; teams: Team[] }) {
+// Eine Planstelle gehört zu genau einer Organisationseinheit — mehr braucht
+// es nicht. Vorher musste hier eine vorgesetzte Person gesucht werden; die
+// ergibt sich jetzt aus der Einheit, und die Frage kann gar nicht mehr falsch
+// beantwortet werden.
+export function CreatePositionModal({
+  open,
+  onClose,
+  units,
+}: {
+  open: boolean;
+  onClose: () => void;
+  units: UnitOption[];
+}) {
   const { showToast } = useToast();
   const router = useRouter();
-  const [title, setTitle] = useState("");
-  const [isLead, setIsLead] = useState(false);
-  const [superior, setSuperior] = useState<SuperiorSearchResult | null>(null);
-  const [teamId, setTeamId] = useState("");
+  const [jobTitle, setJobTitle] = useState("");
+  const [orgUnitId, setOrgUnitId] = useState("");
+  const [isChief, setIsChief] = useState(false);
   const [validFrom, setValidFrom] = useState(todayIso);
   const [pending, setPending] = useState(false);
 
+  const unit = units.find((u) => u.id === orgUnitId);
+  // Der Unique-Index lässt nur eine gültige Leitung je Einheit zu. Das hier
+  // vorwegzunehmen erspart eine Fehlermeldung, die in der Oberfläche nichts
+  // erklärt.
+  const chiefTaken = Boolean(unit?.hasChief);
+
   function reset() {
-    setTitle("");
-    setIsLead(false);
-    setSuperior(null);
-    setTeamId("");
+    setJobTitle("");
+    setOrgUnitId("");
+    setIsChief(false);
     setValidFrom(todayIso());
   }
 
   async function handleSubmit() {
-    if (!title || !superior || !validFrom || (isLead && !teamId)) {
+    if (!jobTitle || !orgUnitId || !validFrom) {
       showToast("Bitte alle Pflichtfelder ausfüllen.", "error");
       return;
     }
     setPending(true);
     const result = await createPosition({
-      title,
-      superior_employee_id: superior.id,
-      is_lead: isLead,
-      team_id: isLead ? teamId : undefined,
+      org_unit_id: orgUnitId,
+      job_title: jobTitle,
+      is_chief: isChief && !chiefTaken,
       valid_from: validFrom,
     });
     setPending(false);
     if (result.success) {
-      showToast("Position ausgeschrieben.");
+      showToast("Planstelle angelegt.");
       router.refresh();
       onClose();
       reset();
@@ -59,77 +72,46 @@ export function CreatePositionModal({ open, onClose, teams }: { open: boolean; o
     <Modal
       open={open}
       onClose={onClose}
-      title="Position ausschreiben"
+      title="Planstelle anlegen"
       footer={
         <>
           <Button variant="ghost" onClick={onClose}>
             Abbrechen
           </Button>
           <Button onClick={handleSubmit} pending={pending}>
-            Ausschreiben
+            Anlegen
           </Button>
         </>
       }
     >
       <div className="flex flex-col gap-4">
-        <TextField label="Titel" required value={title} onChange={setTitle} />
+        <SelectField
+          label="Organisationseinheit"
+          required
+          value={orgUnitId}
+          onChange={(v) => {
+            setOrgUnitId(v);
+            setIsChief(false);
+          }}
+          placeholder="Bitte wählen…"
+          options={units.map((u) => ({
+            value: u.id,
+            label: `${" ".repeat(u.depth * 3)}${u.name} (${u.unit_type})`,
+          }))}
+        />
+        <TextField
+          label="Tätigkeit"
+          required
+          value={jobTitle}
+          onChange={setJobTitle}
+          hint="Bestehende Tätigkeiten werden wiederverwendet; ein neuer Name legt einen Katalogeintrag an."
+        />
         <label className="flex items-center gap-2 text-sm text-ink-body">
-          <input
-            type="checkbox"
-            checked={isLead}
-            onChange={(e) => {
-              setIsLead(e.target.checked);
-              setSuperior(null);
-            }}
-          />
-          Führungsposition (Teamleitung)
+          <input type="checkbox" checked={isChief} disabled={!unit || chiefTaken} onChange={(e) => setIsChief(e.target.checked)} />
+          Leitungsplanstelle für diese Einheit
         </label>
-        {!superior ? (
-          <Field label={isLead ? "Übergeordnete Bereichsleitung" : "Übergeordnete Teamleitung"} required>
-            {(p) => (
-              <Lookup<SuperiorSearchResult>
-                {...p}
-                placeholder="Name oder Titel…"
-                onSearch={(q) => searchSuperiors(q, isLead)}
-                onSelect={setSuperior}
-                renderResult={(r) => (
-                  <div>
-                    <div className="font-semibold text-ink">
-                      {r.first_name} {r.last_name}
-                    </div>
-                    <div className="text-xs text-ink-muted">{r.job_title}</div>
-                  </div>
-                )}
-              />
-            )}
-          </Field>
-        ) : (
-          <div>
-            <p className="mb-1 block text-sm font-semibold text-ink">
-              {isLead ? "Übergeordnete Bereichsleitung" : "Übergeordnete Teamleitung"}
-            </p>
-            <div className="flex items-center justify-between rounded border border-border bg-surface p-3">
-              <div>
-                <div className="text-sm font-semibold text-ink">
-                  {superior.first_name} {superior.last_name}
-                </div>
-                <div className="text-xs text-ink-muted">{superior.job_title}</div>
-              </div>
-              <Button variant="ghost" size="sm" onClick={() => setSuperior(null)}>
-                Ändern
-              </Button>
-            </div>
-          </div>
-        )}
-        {isLead && (
-          <SelectField
-            label="Zu leitendes Team"
-            required
-            value={teamId}
-            onChange={setTeamId}
-            placeholder="Bitte wählen…"
-            options={teams.map((t) => ({ value: t.id, label: t.name }))}
-          />
+        {chiefTaken && (
+          <p className="-mt-2 text-xs text-ink-muted">Für {unit?.name} besteht bereits eine Leitungsplanstelle.</p>
         )}
         <TextField label="Gültig ab" required type="date" value={validFrom} onChange={setValidFrom} />
       </div>

components/positions/PositionsPageClient.tsx

@@ -8,16 +8,16 @@ import { Button } from "@/components/ui/Button";
 import { useToast } from "@/components/ui/Toast";
 import { fmtDate, todayIso } from "@/lib/format";
 import type { OpenPositionResolved } from "@/lib/positions";
-import { CreatePositionModal } from "./CreatePositionModal";
+import { CreatePositionModal, type UnitOption } from "./CreatePositionModal";
 
 type OpenPositionWithDays = OpenPositionResolved & { daysOpen: number };
 
 type PositionsPageClientProps = {
   openPositions: OpenPositionWithDays[];
-  teams: { id: string; org_number: string; name: string; department_id: string }[];
+  units: UnitOption[];
 };
 
-export function PositionsPageClient({ openPositions, teams }: PositionsPageClientProps) {
+export function PositionsPageClient({ openPositions, units }: PositionsPageClientProps) {
   const { showToast } = useToast();
   const router = useRouter();
   const [createOpen, setCreateOpen] = useState(false);
@@ -29,7 +29,7 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
     const result = await deletePosition(id);
     setDeletingId(null);
     if (result.success) {
-      showToast("Position gelöscht.");
+      showToast("Planstelle entfernt.");
       router.refresh();
     } else {
       showToast(result.error ?? "Fehler beim Löschen.", "error");
@@ -40,14 +40,14 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
     <div className="flex flex-col gap-6">
       <div className="rounded border border-border bg-white p-4">
         <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-          <h2 className="text-sm font-bold text-ink">Offene Positionen ({openPositions.length})</h2>
+          <h2 className="text-sm font-bold text-ink">Unbesetzte Planstellen ({openPositions.length})</h2>
           <Button onClick={() => setCreateOpen(true)}>
             <Plus className="h-4 w-4" />
-            Position ausschreiben
+            Planstelle anlegen
           </Button>
         </div>
         {openPositions.length === 0 ? (
-          <p className="text-sm text-ink-muted">Derzeit keine offenen Positionen.</p>
+          <p className="text-sm text-ink-muted">Derzeit ist jede Planstelle besetzt.</p>
         ) : (
           <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {openPositions.map((p) => {
@@ -60,7 +60,7 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
                       variant="icon"
                       onClick={() => handleDelete(p.id)}
                       pending={deletingId === p.id}
-                      aria-label={`Position ${p.title} löschen`}
+                      aria-label={`Planstelle ${p.position_number} (${p.title}) entfernen`}
                       className="-mr-1 -mt-1 hover:!text-danger-solid"
                     >
                       <Trash2 className="h-3.5 w-3.5" />
@@ -69,7 +69,11 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
                   <div className="text-xs text-ink-muted">
                     {p.position_number} · {p.orgLabel}
                   </div>
-                  <div className="mt-1 text-xs text-ink-muted">seit {p.daysOpen} Tagen offen</div>
+                  <div className="mt-1 text-xs text-ink-muted">
+                    {p.is_chief ? "Leitungsplanstelle · " : ""}
+                    seit {p.daysOpen} Tagen unbesetzt
+                  </div>
+                  {p.managerName && <div className="text-xs text-ink-muted">berichtet an {p.managerName}</div>}
                   {notYetValid && <div className="mt-1 text-xs font-semibold text-warning-text">Gültig ab {fmtDate(p.valid_from)}</div>}
                 </div>
               );
@@ -78,7 +82,7 @@ export function PositionsPageClient({ openPositions, teams }: PositionsPageClien
         )}
       </div>
 
-      <CreatePositionModal open={createOpen} onClose={() => setCreateOpen(false)} teams={teams} />
+      <CreatePositionModal open={createOpen} onClose={() => setCreateOpen(false)} units={units} />
     </div>
   );
 }