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/DEVLOG.md

@@ -224,3 +224,63 @@ Keine Commits in dieser Session.
 - frontend/src/pages/LoginPage.tsx | 11 ++++++++++-
 
 ---
+## 2026-09-05 10:51 – 11:01 (9m)
+**Beschreibung:** Claude Code Session
+**Projekt:** frontend
+
+### Commits
+- c3f141f feat(objekt): letzte abgeschlossene Kontrolle je Objekt anzeigen
+
+### Geänderte Dateien
+- DEVLOG.md                                  |  202 +++
+- backend/app/api/v1/endpoints/objekte.py    |   46 +-
+- backend/app/schemas/objekt.py              |    3 +-
+- backend/app/services/objekte.py            |   20 +-
+- backend/tests/test_objekte.py              |   32 +
+- frontend/DEVLOG.md                         |   33 +
+- frontend/package-lock.json                 | 6264 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/api/types.ts                  |    1 +
+- frontend/src/pages/ObjektListPage.tsx      |    5 +
+- frontend/src/pages/admin/ObjektSection.tsx |    7 +
+
+---
+## 2026-09-05 11:04 – 11:04 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** frontend
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                  |  202 +++
+- backend/app/api/v1/endpoints/objekte.py    |   46 +-
+- backend/app/schemas/objekt.py              |    3 +-
+- backend/app/services/objekte.py            |   20 +-
+- backend/tests/test_objekte.py              |   32 +
+- frontend/DEVLOG.md                         |   33 +
+- frontend/package-lock.json                 | 6264 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/api/types.ts                  |    1 +
+- frontend/src/pages/ObjektListPage.tsx      |    5 +
+- frontend/src/pages/admin/ObjektSection.tsx |    7 +
+
+---
+## 2026-09-05 11:07 – 11:07 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** frontend
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                  |  202 +++
+- backend/app/api/v1/endpoints/objekte.py    |   46 +-
+- backend/app/schemas/objekt.py              |    3 +-
+- backend/app/services/objekte.py            |   20 +-
+- backend/tests/test_objekte.py              |   32 +
+- frontend/DEVLOG.md                         |   33 +
+- frontend/package-lock.json                 | 6264 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/api/types.ts                  |    1 +
+- frontend/src/pages/ObjektListPage.tsx      |    5 +
+- frontend/src/pages/admin/ObjektSection.tsx |    7 +
+
+---

frontend/src/api/types.ts

@@ -185,4 +185,30 @@ export interface Benutzer {
   email: string | null;
   aktiv: boolean;
   rollen: string[];
+  einheit_id: number | null;
+}
+
+export interface Einheit {
+  id: number;
+  name: string;
+  uebergeordnete_einheit_id: number | null;
+  standort_id: number | null;
+}
+
+export type Qualifikationskategorie = "fuehrerschein" | "lehrgang" | "berechtigung";
+
+export interface Qualifikationstyp {
+  id: number;
+  name: string;
+  kategorie: Qualifikationskategorie;
+  gueltigkeit_monate: number | null;
+}
+
+export interface BenutzerQualifikation {
+  id: string;
+  benutzer_id: number;
+  qualifikationstyp_id: number;
+  erworben_am: string;
+  gueltig_bis: string | null;
+  nachweis_nummer: string | null;
 }

frontend/src/pages/AdminPage.tsx

@@ -2,9 +2,10 @@ import { useEffect, useState } from "react";
 
 import { apiRequest } from "../api/client";
 import { useAuth } from "../auth/AuthContext";
-import type { Benutzer, Bereich, Beladungsvorlage, Fach, Kategorie, Material, Objekt, Objekttyp, Standort } from "../api/types";
+import type { Benutzer, Bereich, Beladungsvorlage, Einheit, Fach, Kategorie, Material, Objekt, Objekttyp, Qualifikationstyp, Standort } from "../api/types";
 import { BenutzerSection } from "./admin/BenutzerSection";
 import { BereichSection } from "./admin/BereichSection";
+import { EinheitSection } from "./admin/EinheitSection";
 import { EskalationSection } from "./admin/EskalationSection";
 import { FachSection } from "./admin/FachSection";
 import { HistorieSection } from "./admin/HistorieSection";
@@ -13,6 +14,7 @@ import { KontrollverantwortungSection } from "./admin/KontrollverantwortungSecti
 import { MaterialSection } from "./admin/MaterialSection";
 import { ObjektSection } from "./admin/ObjektSection";
 import { ObjekttypSection } from "./admin/ObjekttypSection";
+import { QualifikationSection } from "./admin/QualifikationSection";
 import { StandortSection } from "./admin/StandortSection";
 import { VorlageSection } from "./admin/VorlageSection";
 import { ZustaendigkeitSection } from "./admin/ZustaendigkeitSection";
@@ -27,7 +29,8 @@ type Tab =
   | "historie"
   | "eskalation"
   | "kontrollverantwortung"
-  | "zustaendigkeit";
+  | "zustaendigkeit"
+  | "personal";
 
 // Deckt sich mit den require_roles()-Gates der jeweiligen Backend-Endpunkte
 // (Rollen-Vorgabe: Material-/Leitungsverantwortliche sahen bisher exakt
@@ -52,6 +55,7 @@ const TABS: { key: Tab; label: string; rollen: ("administration" | "materialvera
     rollen: ["administration", "materialverantwortlicher", "leitungsverantwortlicher"],
   },
   { key: "eskalation", label: "Eskalation", rollen: ["administration"] },
+  { key: "personal", label: "Personal", rollen: ["administration"] },
 ];
 
 /**
@@ -75,6 +79,8 @@ export function AdminPage() {
   const [materialien, setMaterialien] = useState<Material[]>([]);
   const [benutzer, setBenutzer] = useState<Benutzer[]>([]);
   const [faecher, setFaecher] = useState<Fach[]>([]);
+  const [einheiten, setEinheiten] = useState<Einheit[]>([]);
+  const [qualifikationstypen, setQualifikationstypen] = useState<Qualifikationstyp[]>([]);
   const [fehler, setFehler] = useState<string | null>(null);
   const [laedt, setLaedt] = useState(true);
   const [tab, setTab] = useState<Tab | null>(null);
@@ -86,7 +92,7 @@ export function AdminPage() {
     // Seite als "nicht geladen" zeigen, obwohl deren Tabs (z.B. Kontroll-
     // verantwortung) trotzdem funktionieren sollen. allSettled + leerer
     // Fallback statt hartem Fehler.
-    const [be, ka, ot, s, v, o, m, b, f] = await Promise.allSettled([
+    const [be, ka, ot, s, v, o, m, b, f, ei, qt] = await Promise.allSettled([
       apiRequest<Bereich[]>("/bereiche"),
       apiRequest<Kategorie[]>("/kategorien"),
       apiRequest<Objekttyp[]>("/objekttypen"),
@@ -96,6 +102,8 @@ export function AdminPage() {
       apiRequest<Material[]>("/materialien"),
       apiRequest<Benutzer[]>("/benutzer"),
       apiRequest<Fach[]>("/faecher"),
+      apiRequest<Einheit[]>("/einheiten"),
+      apiRequest<Qualifikationstyp[]>("/qualifikationstypen"),
     ]);
     const wert = <T,>(r: PromiseSettledResult<T[]>): T[] => (r.status === "fulfilled" ? r.value : []);
     setBereiche(wert(be));
@@ -107,6 +115,8 @@ export function AdminPage() {
     setMaterialien(wert(m));
     setBenutzer(wert(b));
     setFaecher(wert(f));
+    setEinheiten(wert(ei));
+    setQualifikationstypen(wert(qt));
   }
 
   useEffect(() => {
@@ -193,7 +203,7 @@ export function AdminPage() {
         <StandortSection standorte={standorte} onGeaendert={ladeAlles} onFehler={setFehler} />
       )}
       {aktiverTab === "benutzer" && (
-        <BenutzerSection benutzer={benutzer} onGeaendert={ladeAlles} onFehler={setFehler} />
+        <BenutzerSection benutzer={benutzer} einheiten={einheiten} onGeaendert={ladeAlles} onFehler={setFehler} />
       )}
       {aktiverTab === "zustaendigkeit" && (
         <ZustaendigkeitSection standorte={standorte} objekte={objekte} benutzer={benutzer} onFehler={setFehler} />
@@ -203,6 +213,17 @@ export function AdminPage() {
       )}
       {aktiverTab === "historie" && <HistorieSection onFehler={setFehler} />}
       {aktiverTab === "eskalation" && <EskalationSection onFehler={setFehler} />}
+      {aktiverTab === "personal" && (
+        <>
+          <EinheitSection einheiten={einheiten} standorte={standorte} onGeaendert={ladeAlles} onFehler={setFehler} />
+          <QualifikationSection
+            qualifikationstypen={qualifikationstypen}
+            benutzer={benutzer}
+            onGeaendert={ladeAlles}
+            onFehler={setFehler}
+          />
+        </>
+      )}
       {aktiverTab === null && <p className="text-muted">Keine Bereiche für deine Rolle verfügbar.</p>}
     </main>
   );

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