Kontierung auch bei besetzten Planstellen -- aus dem Organigramm heraus

Die Kostenstelle liess sich an genau einer Stelle aendern: auf der Seite
Positionen, ueber die Karte einer Vakanz. Diese Seite zeigt aber nur unbesetzte
und kuenftige Planstellen. Bei einer besetzten war die Kontierung damit nirgends
zu erreichen -- im Bestand betrifft das 784 von 788, und dasselbe galt fuer ihre
Taetigkeit.

Die Angaben zu einer Einheit fuehren jetzt ihre Planstellen auf, besetzte
eingeschlossen, mit Inhaber:in und Kostenstelle. Ein Klick oeffnet denselben
Dialog wie auf Positionen, kein zweiter daneben. Was sich aendern laesst,
entscheidet weiterhin die Datenbank: bei einer besetzten Stelle bleiben Einheit
und Gueltigkeitsende gesperrt, weil ein Abteilungswechsel ueber eine Versetzung
gehoert und nicht ueber die Stelle.

Geladen wird erst beim Oeffnen und nur fuer diese eine Einheit. Alle 788
Planstellen in jede Zeichnung des Organigramms zu legen hiesse, fuer achtzig
Einheiten zu laden, was man fuer eine braucht.

EditPositionModal verlangt dafuer nicht mehr eine OpenPositionResolved, sondern
nur noch die Felder, die er tatsaechlich liest. Die alte Signatur war der
Grund, warum er nur dort aufzumachen war, wo unbesetzte Stellen entstehen.

components/orgchart/OrgUnitPanel.tsx

@@ -2,6 +2,10 @@
 
 import { Plus, Trash2 } from "lucide-react";
 import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { ladePlanstellenDerEinheit, type PlanstelleDerEinheit } from "@/actions/positions";
+import { EditPositionModal } from "@/components/positions/EditPositionModal";
+import type { UnitOption } from "@/components/positions/CreatePositionModal";
 import { Button } from "@/components/ui/Button";
 import { SlideOver } from "@/components/ui/SlideOver";
 import { fmtDate, fmtName } from "@/lib/format";
@@ -26,6 +30,7 @@ function Zeile({ label, children }: { label: string; children: React.ReactNode }
 export function OrgUnitPanel({
   unit,
   units,
+  unitOptions,
   employees,
   vacancies,
   onAddUnit,
@@ -34,12 +39,44 @@ export function OrgUnitPanel({
 }: {
   unit: OrgUnitNode;
   units: OrgUnitNode[];
+  /** Für den Änderungsdialog: derselbe Baum, nur in seiner Form. */
+  unitOptions: UnitOption[];
   employees: OrgEmployee[];
   vacancies: OrgVacancy[];
   onAddUnit: (unitId: string) => void;
   onDeleteUnit: (unitId: string) => void;
   onClose: () => void;
 }) {
+  // Erst beim Öffnen geladen, und nur für diese eine Einheit — siehe den Grund
+  // bei ladePlanstellenDerEinheit.
+  const [stellen, setStellen] = useState<PlanstelleDerEinheit[] | null>(null);
+  const [kostenstellen, setKostenstellen] = useState<{ id: string; code: string; name: string }[]>([]);
+  const [heute, setHeute] = useState("");
+  const [bearbeitet, setBearbeitet] = useState<PlanstelleDerEinheit | null>(null);
+
+  const laden = useCallback(async () => {
+    const daten = await ladePlanstellenDerEinheit(unit.id);
+    setStellen(daten.planstellen);
+    setKostenstellen(daten.kostenstellen);
+    setHeute(daten.heute);
+  }, [unit.id]);
+
+  useEffect(() => {
+    let verworfen = false;
+    // Der Nachtrag einer Antwort, die zu einer anderen Einheit gehört, wäre
+    // hier besonders tückisch: die Leiste sähe richtig aus und zeigte fremde
+    // Planstellen.
+    void ladePlanstellenDerEinheit(unit.id).then((daten) => {
+      if (verworfen) return;
+      setStellen(daten.planstellen);
+      setKostenstellen(daten.kostenstellen);
+      setHeute(daten.heute);
+    });
+    return () => {
+      verworfen = true;
+    };
+  }, [unit.id]);
+
   const kinder = units.filter((u) => u.parent_id === unit.id);
 
   // Die Kette nach oben, mit Schutz gegen einen Kreis in parent_id. Der ist
@@ -127,24 +164,45 @@ export function OrgUnitPanel({
           </div>
         )}
 
-        {offene.length > 0 && (
-          <div>
-            <h3 className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-ink-muted">Unbesetzt</h3>
-            <ul className="flex flex-col gap-1 text-sm text-ink-body">
-              {offene.map((v) => (
-                <li key={v.position_id}>
-                  <span className="tabular-nums text-ink-muted">{v.position_number}</span> · {v.job_title}
-                  {v.is_chief && <span className="text-xs text-ink-muted"> (Leitung)</span>}
+        <div>
+          <h3 className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-ink-muted">
+            Planstellen{stellen ? ` (${stellen.length})` : ""}
+          </h3>
+          {stellen === null ? (
+            <p className="text-sm text-ink-muted">Lädt…</p>
+          ) : stellen.length === 0 ? (
+            <p className="text-sm text-ink-muted">In dieser Einheit besteht keine Planstelle.</p>
+          ) : (
+            <ul className="flex flex-col divide-y divide-border-subtle">
+              {stellen.map((s) => (
+                <li key={s.id}>
+                  {/* Auch die besetzten sind anklickbar. Was sich daran ändern
+                      lässt, entscheidet die Datenbankfunktion: Einheit und
+                      Gültigkeitsende bleiben bei einer besetzten Stelle
+                      gesperrt, Tätigkeit und Kontierung nicht. */}
+                  <button
+                    type="button"
+                    onClick={() => setBearbeitet(s)}
+                    className="flex w-full flex-col items-start rounded py-1.5 text-left hover:bg-surface
+                               focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-brand-500"
+                  >
+                    <span className="text-sm text-ink-body">
+                      <span className="tabular-nums text-ink-muted">{s.position_number}</span> · {s.title}
+                      {s.is_chief && <span className="text-xs text-ink-muted"> (Leitung)</span>}
+                    </span>
+                    <span className="text-xs text-ink-muted">
+                      {s.besetztVon ?? <span className="font-semibold text-warning-text">unbesetzt</span>}
+                      {s.kostenstelle ? ` · Kostenstelle ${s.kostenstelle.code}` : " · ohne Kostenstelle"}
+                    </span>
+                  </button>
                 </li>
               ))}
             </ul>
-            {/* Kontierung, Tätigkeit und Gültigkeit einer Planstelle stehen auf
-                „Positionen"; von hier führt wenigstens der Weg dorthin. */}
-            <Link href="/positions" className="mt-1.5 inline-block text-xs font-semibold text-brand-700 hover:underline">
-              Auf Positionen bearbeiten
-            </Link>
-          </div>
-        )}
+          )}
+          <Link href="/positions" className="mt-1.5 inline-block text-xs font-semibold text-brand-700 hover:underline">
+            Alle unbesetzten Planstellen
+          </Link>
+        </div>
 
         <div className="flex flex-wrap gap-2 border-t border-border pt-4">
           <Button variant="secondary" size="sm" onClick={() => onAddUnit(unit.id)}>
@@ -159,6 +217,25 @@ export function OrgUnitPanel({
           )}
         </div>
       </div>
+
+      {/* Derselbe Dialog wie auf der Seite Positionen. Ein zweiter, der
+          dasselbe tut, liefe beim ersten Zusatz auseinander. */}
+      {bearbeitet && (
+        <EditPositionModal
+          key={bearbeitet.id}
+          position={bearbeitet}
+          units={unitOptions}
+          kostenstellen={kostenstellen}
+          heute={heute}
+          onClose={() => {
+            setBearbeitet(null);
+            // Die Liste stammt aus dem Zustand dieser Leiste; ohne erneutes
+            // Laden stünde nach dem Umkontieren weiter die alte Kostenstelle
+            // da, und der Dialog daneben zeigte die neue.
+            void laden();
+          }}
+        />
+      )}
     </SlideOver>
   );
 }

components/orgchart/PositionTree.tsx

@@ -83,6 +83,35 @@ export function PositionTree({ employees, units, vacancies }: PositionTreeProps)
 
   const tree = useMemo(() => buildUnitTree(units, employees, vacancies), [units, employees, vacancies]);
 
+  // Der Baum in der Form, die der Änderungsdialog einer Planstelle erwartet.
+  // Aus denselben Daten gerechnet statt zusätzlich geladen: `hasChief` heisst
+  // dort „diese Einheit hat schon eine Leitungsplanstelle", und das ist genau
+  // die Leitung im Baum — besetzt oder als Vakanz.
+  const unitOptions = useMemo(() => {
+    const tiefe = new Map<string, number>();
+    const berechne = (u: OrgUnitNode, gesehen: Set<string>): number => {
+      const bekannt = tiefe.get(u.id);
+      if (bekannt !== undefined) return bekannt;
+      if (!u.parent_id || gesehen.has(u.id)) return 0;
+      gesehen.add(u.id);
+      const eltern = units.find((e) => e.id === u.parent_id);
+      const d = eltern ? berechne(eltern, gesehen) + 1 : 0;
+      tiefe.set(u.id, d);
+      return d;
+    };
+    const mitLeitung = new Set([
+      ...employees.filter((e) => e.is_chief).map((e) => e.org_unit_id),
+      ...vacancies.filter((v) => v.is_chief).map((v) => v.org_unit_id),
+    ]);
+    return units.map((u) => ({
+      id: u.id,
+      name: u.name,
+      unit_type: u.unit_type,
+      depth: berechne(u, new Set()),
+      hasChief: mitLeitung.has(u.id),
+    }));
+  }, [units, employees, vacancies]);
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex justify-end">
@@ -127,6 +156,7 @@ export function PositionTree({ employees, units, vacancies }: PositionTreeProps)
         <OrgUnitPanel
           unit={einheit}
           units={units}
+          unitOptions={unitOptions}
           employees={employees}
           vacancies={vacancies}
           onAddUnit={onAddUnit}

components/positions/EditPositionModal.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/Button";
 import { SelectField, TextField } from "@/components/ui/Field";
 import { Modal } from "@/components/ui/Modal";
 import { useToast } from "@/components/ui/Toast";
-import type { OpenPositionResolved } from "@/lib/positions";
+import type { PlanstelleZumAendern } from "@/lib/positions";
 import type { UnitOption } from "./CreatePositionModal";
 
 // Ändern statt löschen und neu anlegen.
@@ -33,7 +33,7 @@ export function EditPositionModal({
   heute,
   onClose,
 }: {
-  position: OpenPositionResolved;
+  position: PlanstelleZumAendern;
   units: UnitOption[];
   kostenstellen: { id: string; code: string; name: string }[];
   /** Vom Server, nicht aus new Date(): sonst rechnet der Browser mit seiner Zone. */