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/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);
+}