feat(personal): Personal/Qualifikationen-Modul (Roadmap Phase 1)

Neues Modul für die BOS-Ressourcenplattform-Erweiterung: Einheit (Zug/Gruppe,
self-referenzierend), Qualifikationstyp (Führerschein/Lehrgang/Berechtigung),
BenutzerQualifikation (mit Gültigkeit) und ObjekttypQualifikationsanforderung
(M:N) - beantwortet "wer darf dieses Fahrzeug fahren?" über
GET /objekte/{id}/berechtigung/{benutzer_id}.

Benutzer und Objekt bekommen optionale einheit_id (additiv, analog
fahrzeug_id-Muster). Nebenbei Bugfix: PATCH /benutzer konnte einheit_id nicht
auf null setzen (Feld-vorhanden-Check via model_fields_set statt is not None).

Frontend: neuer Admin-Tab "Personal" (Einheiten, Qualifikationstypen,
Benutzer-Qualifikationszuordnung), Einheit-Auswahl im Benutzer-Formular.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KC8HYvv6UkCVYheYiTw9DD

frontend/src/pages/admin/BenutzerSection.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
 
 import { apiRequest } from "../../api/client";
-import type { Benutzer, Rolle } from "../../api/types";
+import type { Benutzer, Einheit, Rolle } from "../../api/types";
 
 interface Props {
   benutzer: Benutzer[];
+  einheiten: Einheit[];
   onGeaendert: () => Promise<void>;
   onFehler: (text: string) => void;
 }
@@ -16,18 +17,26 @@ const ALLE_ROLLEN: Rolle[] = [
   "administration",
 ];
 
-export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
+export function BenutzerSection({ benutzer, einheiten, onGeaendert, onFehler }: Props) {
   const [name, setName] = useState("");
   const [login, setLogin] = useState("");
   const [passwort, setPasswort] = useState("");
   const [email, setEmail] = useState("");
+  const [einheitId, setEinheitId] = useState<number | "">("");
   const [rollen, setRollen] = useState<Rolle[]>(["mitarbeiter"]);
   const [wirdAngelegt, setWirdAngelegt] = useState(false);
   const [bearbeiteteId, setBearbeiteteId] = useState<number | null>(null);
   const [bearbeitungsName, setBearbeitungsName] = useState("");
   const [bearbeitungsEmail, setBearbeitungsEmail] = useState("");
+  const [bearbeitungsEinheitId, setBearbeitungsEinheitId] = useState<number | "">("");
   const [bearbeitungsRollen, setBearbeitungsRollen] = useState<Rolle[]>([]);
 
+  function einheitName(id: number | null): string {
+    if (id === null) return "";
+    const e = einheiten.find((x) => x.id === id);
+    return e ? e.name : `#${id}`;
+  }
+
   function rolleUmschalten(rolle: Rolle) {
     setRollen((bisherige) =>
       bisherige.includes(rolle) ? bisherige.filter((r) => r !== rolle) : [...bisherige, rolle]
@@ -39,12 +48,13 @@ export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
     try {
       await apiRequest("/benutzer", {
         method: "POST",
-        body: { name, login, passwort, email: email || null, rollen },
+        body: { name, login, passwort, email: email || null, einheit_id: einheitId === "" ? null : einheitId, rollen },
       });
       setName("");
       setLogin("");
       setPasswort("");
       setEmail("");
+      setEinheitId("");
       setRollen(["mitarbeiter"]);
       await onGeaendert();
     } catch {
@@ -67,6 +77,7 @@ export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
     setBearbeiteteId(b.id);
     setBearbeitungsName(b.name);
     setBearbeitungsEmail(b.email ?? "");
+    setBearbeitungsEinheitId(b.einheit_id ?? "");
     setBearbeitungsRollen(b.rollen as Rolle[]);
   }
 
@@ -80,7 +91,12 @@ export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
     try {
       await apiRequest(`/benutzer/${id}`, {
         method: "PATCH",
-        body: { name: bearbeitungsName, email: bearbeitungsEmail || null, rollen: bearbeitungsRollen },
+        body: {
+          name: bearbeitungsName,
+          email: bearbeitungsEmail || null,
+          einheit_id: bearbeitungsEinheitId === "" ? null : bearbeitungsEinheitId,
+          rollen: bearbeitungsRollen,
+        },
       });
       setBearbeiteteId(null);
       await onGeaendert();
@@ -109,6 +125,14 @@ export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
             onChange={(e) => setEmail(e.target.value)}
             placeholder="E-Mail (optional)"
           />
+          <select className="input" value={einheitId} onChange={(e) => setEinheitId(Number(e.target.value) || "")}>
+            <option value="">Keine Einheit</option>
+            {einheiten.map((e) => (
+              <option key={e.id} value={e.id}>
+                {e.name}
+              </option>
+            ))}
+          </select>
         </div>
         <div className="row" style={{ flexWrap: "wrap", gap: "0.5rem", marginBottom: "0.75rem" }}>
           {ALLE_ROLLEN.map((r) => (
@@ -145,6 +169,18 @@ export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
                         onChange={(e) => setBearbeitungsEmail(e.target.value)}
                         placeholder="E-Mail"
                       />
+                      <select
+                        className="input"
+                        value={bearbeitungsEinheitId}
+                        onChange={(e) => setBearbeitungsEinheitId(Number(e.target.value) || "")}
+                      >
+                        <option value="">Keine Einheit</option>
+                        {einheiten.map((e) => (
+                          <option key={e.id} value={e.id}>
+                            {e.name}
+                          </option>
+                        ))}
+                      </select>
                     </div>
                     <div className="row" style={{ flexWrap: "wrap", gap: "0.5rem" }}>
                       {ALLE_ROLLEN.map((r) => (
@@ -171,6 +207,7 @@ export function BenutzerSection({ benutzer, onGeaendert, onFehler }: Props) {
                   <div className="row-between">
                     <span>
                       <strong>{b.name}</strong> ({b.login}) – {b.rollen.join(", ")}
+                      {b.einheit_id !== null && ` – ${einheitName(b.einheit_id)}`}
                       {!b.aktiv && " – deaktiviert"}
                     </span>
                     <div className="row">

frontend/src/pages/admin/EinheitSection.tsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Einheit, Standort } from "../../api/types";
+
+interface Props {
+  einheiten: Einheit[];
+  standorte: Standort[];
+  onGeaendert: () => Promise<void>;
+  onFehler: (text: string) => void;
+}
+
+// Personal-Modul (Karte-Nachtrag): Organisationseinheit (Zug/Gruppe),
+// self-referenzierend für Hierarchie (analog Kategorie/Objekttyp-Muster).
+export function EinheitSection({ einheiten, standorte, onGeaendert, onFehler }: Props) {
+  const [name, setName] = useState("");
+  const [uebergeordneteId, setUebergeordneteId] = useState<number | "">("");
+  const [standortId, setStandortId] = useState<number | "">("");
+  const [wirdAngelegt, setWirdAngelegt] = useState(false);
+  const [bearbeiteteId, setBearbeiteteId] = useState<number | null>(null);
+  const [bearbeitungsName, setBearbeitungsName] = useState("");
+
+  function einheitName(id: number | null): string {
+    if (id === null) return "–";
+    const e = einheiten.find((x) => x.id === id);
+    return e ? e.name : `#${id}`;
+  }
+
+  async function anlegen() {
+    setWirdAngelegt(true);
+    try {
+      await apiRequest("/einheiten", {
+        method: "POST",
+        body: {
+          name,
+          uebergeordnete_einheit_id: uebergeordneteId === "" ? null : uebergeordneteId,
+          standort_id: standortId === "" ? null : standortId,
+        },
+      });
+      setName("");
+      setUebergeordneteId("");
+      setStandortId("");
+      await onGeaendert();
+    } catch {
+      onFehler("Einheit konnte nicht angelegt werden.");
+    } finally {
+      setWirdAngelegt(false);
+    }
+  }
+
+  function bearbeiten(e: Einheit) {
+    setBearbeiteteId(e.id);
+    setBearbeitungsName(e.name);
+  }
+
+  async function speichern(id: number) {
+    try {
+      await apiRequest(`/einheiten/${id}`, { method: "PATCH", body: { name: bearbeitungsName } });
+      setBearbeiteteId(null);
+      await onGeaendert();
+    } catch {
+      onFehler("Einheit konnte nicht geändert werden.");
+    }
+  }
+
+  return (
+    <section className="section">
+      <h2>Einheit anlegen</h2>
+      <div className="card">
+        <div className="stack" style={{ marginBottom: einheiten.length ? "1rem" : 0 }}>
+          <div className="row">
+            <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name (z.B. Sanitätszug 1)" />
+            <select
+              className="input"
+              value={uebergeordneteId}
+              onChange={(e) => setUebergeordneteId(Number(e.target.value) || "")}
+            >
+              <option value="">Keine übergeordnete Einheit</option>
+              {einheiten.map((e) => (
+                <option key={e.id} value={e.id}>
+                  {e.name}
+                </option>
+              ))}
+            </select>
+            <select className="input" value={standortId} onChange={(e) => setStandortId(Number(e.target.value) || "")}>
+              <option value="">Kein Standort</option>
+              {standorte.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name}
+                </option>
+              ))}
+            </select>
+            <button className="btn btn-primary" onClick={anlegen} disabled={!name || wirdAngelegt}>
+              Anlegen
+            </button>
+          </div>
+        </div>
+        {einheiten.length > 0 && (
+          <ul className="card-list">
+            {einheiten.map((e) => (
+              <li key={e.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                {bearbeiteteId === e.id ? (
+                  <div className="row" style={{ flex: 1 }}>
+                    <input
+                      className="input"
+                      value={bearbeitungsName}
+                      onChange={(ev) => setBearbeitungsName(ev.target.value)}
+                    />
+                    <button className="btn btn-primary" onClick={() => speichern(e.id)}>
+                      Speichern
+                    </button>
+                    <button className="btn btn-secondary" onClick={() => setBearbeiteteId(null)}>
+                      Abbrechen
+                    </button>
+                  </div>
+                ) : (
+                  <>
+                    <span>
+                      {e.name}
+                      {e.uebergeordnete_einheit_id !== null && (
+                        <span className="text-muted"> – Teil von {einheitName(e.uebergeordnete_einheit_id)}</span>
+                      )}
+                    </span>
+                    <button className="btn btn-secondary" onClick={() => bearbeiten(e)}>
+                      Bearbeiten
+                    </button>
+                  </>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}

frontend/src/pages/admin/QualifikationSection.tsx

@@ -0,0 +1,204 @@
+import { useEffect, useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Benutzer, BenutzerQualifikation, Qualifikationskategorie, Qualifikationstyp } from "../../api/types";
+
+interface Props {
+  qualifikationstypen: Qualifikationstyp[];
+  benutzer: Benutzer[];
+  onGeaendert: () => Promise<void>;
+  onFehler: (text: string) => void;
+}
+
+const KATEGORIE_LABEL: Record<Qualifikationskategorie, string> = {
+  fuehrerschein: "Führerschein",
+  lehrgang: "Lehrgang",
+  berechtigung: "Berechtigung",
+};
+
+// Personal-Modul (Karte-Nachtrag): Qualifikationstypen (Stammdaten) + Zuordnung
+// zu einzelnen Benutzern mit Gültigkeit ("wer darf was fahren/bedienen").
+export function QualifikationSection({ qualifikationstypen, benutzer, onGeaendert, onFehler }: Props) {
+  const [name, setName] = useState("");
+  const [kategorie, setKategorie] = useState<Qualifikationskategorie>("lehrgang");
+  const [gueltigkeitMonate, setGueltigkeitMonate] = useState("");
+  const [wirdAngelegt, setWirdAngelegt] = useState(false);
+
+  const [ausgewaehlterBenutzer, setAusgewaehlterBenutzer] = useState<number | "">("");
+  const [qualifikationen, setQualifikationen] = useState<BenutzerQualifikation[]>([]);
+  const [neueQualifikationstypId, setNeueQualifikationstypId] = useState<number | "">("");
+  const [erworbenAm, setErworbenAm] = useState("");
+  const [gueltigBis, setGueltigBis] = useState("");
+
+  async function anlegen() {
+    setWirdAngelegt(true);
+    try {
+      await apiRequest("/qualifikationstypen", {
+        method: "POST",
+        body: { name, kategorie, gueltigkeit_monate: gueltigkeitMonate ? Number(gueltigkeitMonate) : null },
+      });
+      setName("");
+      setGueltigkeitMonate("");
+      await onGeaendert();
+    } catch {
+      onFehler("Qualifikationstyp konnte nicht angelegt werden.");
+    } finally {
+      setWirdAngelegt(false);
+    }
+  }
+
+  async function ladeQualifikationen(benutzerId: number) {
+    try {
+      const daten = await apiRequest<BenutzerQualifikation[]>(`/benutzer/${benutzerId}/qualifikationen`);
+      setQualifikationen(daten);
+    } catch {
+      onFehler("Qualifikationen konnten nicht geladen werden.");
+    }
+  }
+
+  useEffect(() => {
+    if (ausgewaehlterBenutzer !== "") {
+      ladeQualifikationen(ausgewaehlterBenutzer);
+    } else {
+      setQualifikationen([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ausgewaehlterBenutzer]);
+
+  function qualifikationstypName(id: number): string {
+    const q = qualifikationstypen.find((x) => x.id === id);
+    return q ? `${q.name} (${KATEGORIE_LABEL[q.kategorie]})` : `#${id}`;
+  }
+
+  function istGueltig(q: BenutzerQualifikation): boolean {
+    return q.gueltig_bis === null || q.gueltig_bis >= new Date().toISOString().slice(0, 10);
+  }
+
+  async function qualifikationErfassen() {
+    if (ausgewaehlterBenutzer === "" || neueQualifikationstypId === "" || !erworbenAm) {
+      onFehler("Benutzer, Qualifikationstyp und Erwerbsdatum angeben.");
+      return;
+    }
+    try {
+      await apiRequest(`/benutzer/${ausgewaehlterBenutzer}/qualifikationen`, {
+        method: "POST",
+        body: {
+          benutzer_id: ausgewaehlterBenutzer,
+          qualifikationstyp_id: neueQualifikationstypId,
+          erworben_am: erworbenAm,
+          gueltig_bis: gueltigBis || null,
+        },
+      });
+      setNeueQualifikationstypId("");
+      setErworbenAm("");
+      setGueltigBis("");
+      await ladeQualifikationen(ausgewaehlterBenutzer);
+    } catch {
+      onFehler("Qualifikation konnte nicht erfasst werden.");
+    }
+  }
+
+  return (
+    <>
+      <section className="section">
+        <h2>Qualifikationstyp anlegen</h2>
+        <div className="card">
+          <div className="row" style={{ marginBottom: qualifikationstypen.length ? "1rem" : 0, flexWrap: "wrap" }}>
+            <input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name (z.B. Führerschein C1)" />
+            <select
+              className="input"
+              value={kategorie}
+              onChange={(e) => setKategorie(e.target.value as Qualifikationskategorie)}
+            >
+              <option value="fuehrerschein">Führerschein</option>
+              <option value="lehrgang">Lehrgang</option>
+              <option value="berechtigung">Berechtigung</option>
+            </select>
+            <input
+              className="input"
+              style={{ maxWidth: "10rem" }}
+              value={gueltigkeitMonate}
+              onChange={(e) => setGueltigkeitMonate(e.target.value)}
+              placeholder="Gültig (Monate, optional)"
+            />
+            <button className="btn btn-primary" onClick={anlegen} disabled={!name || wirdAngelegt}>
+              Anlegen
+            </button>
+          </div>
+          {qualifikationstypen.length > 0 && (
+            <ul className="card-list">
+              {qualifikationstypen.map((q) => (
+                <li key={q.id} style={{ padding: "0.3rem 0" }}>
+                  {q.name} <span className="text-muted">({KATEGORIE_LABEL[q.kategorie]})</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section className="section">
+        <h2>Qualifikationen je Benutzer</h2>
+        <div className="card">
+          <select
+            className="input"
+            style={{ marginBottom: "1rem" }}
+            value={ausgewaehlterBenutzer}
+            onChange={(e) => setAusgewaehlterBenutzer(Number(e.target.value) || "")}
+          >
+            <option value="">Benutzer wählen…</option>
+            {benutzer.map((b) => (
+              <option key={b.id} value={b.id}>
+                {b.name} ({b.login})
+              </option>
+            ))}
+          </select>
+
+          {ausgewaehlterBenutzer !== "" && (
+            <>
+              <ul className="card-list" style={{ marginBottom: "1rem" }}>
+                {qualifikationen.length === 0 && <li className="text-muted">Keine Qualifikationen erfasst.</li>}
+                {qualifikationen.map((q) => (
+                  <li key={q.id} className="row-between" style={{ padding: "0.3rem 0" }}>
+                    <span>{qualifikationstypName(q.qualifikationstyp_id)}</span>
+                    <span className={istGueltig(q) ? "text-muted" : "text-muted"} style={{ color: istGueltig(q) ? undefined : "#b00020" }}>
+                      seit {q.erworben_am}
+                      {q.gueltig_bis ? `, gültig bis ${q.gueltig_bis}` : ", unbefristet"}
+                      {!istGueltig(q) && " (abgelaufen)"}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+
+              <div className="row" style={{ flexWrap: "wrap" }}>
+                <select
+                  className="input"
+                  value={neueQualifikationstypId}
+                  onChange={(e) => setNeueQualifikationstypId(Number(e.target.value) || "")}
+                >
+                  <option value="">Qualifikationstyp wählen…</option>
+                  {qualifikationstypen.map((q) => (
+                    <option key={q.id} value={q.id}>
+                      {q.name}
+                    </option>
+                  ))}
+                </select>
+                <input className="input" type="date" value={erworbenAm} onChange={(e) => setErworbenAm(e.target.value)} />
+                <input
+                  className="input"
+                  type="date"
+                  value={gueltigBis}
+                  onChange={(e) => setGueltigBis(e.target.value)}
+                  placeholder="Gültig bis (optional)"
+                />
+                <button className="btn btn-primary" onClick={qualifikationErfassen}>
+                  Erfassen
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}