Kontrollverantwortung im Frontend anbinden (Karte 01)

Backend: DELETE /kontrollverantwortung/{id} ergänzt (fehlte bisher). Frontend:
neuer Admin-Tab "Kontrollverantwortung" - Objekt + Benutzer/Gruppe zuordnen,
Liste, Entfernen. Reine Sichtbarkeit/Priorisierung, keine Pflichtkontrolle.

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

frontend/src/api/types.ts

@@ -105,6 +105,13 @@ export interface Fach {
   sortierung: number;
 }
 
+export interface Kontrollverantwortung {
+  id: string;
+  objekt_id: number;
+  benutzer_id: number | null;
+  gruppe: string | null;
+}
+
 export interface EskalationKonfiguration {
   erinnerung_tage: number;
   leitung_tage: number;

frontend/src/pages/AdminPage.tsx

@@ -8,6 +8,7 @@ import { EskalationSection } from "./admin/EskalationSection";
 import { FachSection } from "./admin/FachSection";
 import { HistorieSection } from "./admin/HistorieSection";
 import { KategorieSection } from "./admin/KategorieSection";
+import { KontrollverantwortungSection } from "./admin/KontrollverantwortungSection";
 import { MaterialSection } from "./admin/MaterialSection";
 import { ObjektSection } from "./admin/ObjektSection";
 import { ObjekttypSection } from "./admin/ObjekttypSection";
@@ -22,7 +23,8 @@ type Tab =
   | "standorte"
   | "benutzer"
   | "historie"
-  | "eskalation";
+  | "eskalation"
+  | "kontrollverantwortung";
 
 const TABS: { key: Tab; label: string }[] = [
   { key: "objekte", label: "Objekte" },
@@ -31,6 +33,7 @@ const TABS: { key: Tab; label: string }[] = [
   { key: "struktur", label: "Struktur" },
   { key: "standorte", label: "Standorte" },
   { key: "benutzer", label: "Benutzer" },
+  { key: "kontrollverantwortung", label: "Kontrollverantwortung" },
   { key: "historie", label: "Änderungslog" },
   { key: "eskalation", label: "Eskalation" },
 ];
@@ -165,6 +168,9 @@ export function AdminPage() {
       {tab === "benutzer" && (
         <BenutzerSection benutzer={benutzer} onGeaendert={ladeAlles} onFehler={setFehler} />
       )}
+      {tab === "kontrollverantwortung" && (
+        <KontrollverantwortungSection objekte={objekte} benutzer={benutzer} onFehler={setFehler} />
+      )}
       {tab === "historie" && <HistorieSection onFehler={setFehler} />}
       {tab === "eskalation" && <EskalationSection onFehler={setFehler} />}
     </main>

frontend/src/pages/admin/KontrollverantwortungSection.tsx

@@ -0,0 +1,185 @@
+import { useEffect, useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Benutzer, Kontrollverantwortung, Objekt } from "../../api/types";
+
+interface Props {
+  objekte: Objekt[];
+  benutzer: Benutzer[];
+  onFehler: (text: string) => void;
+}
+
+/** Karte 01 / Sprintplan E3: reine Sichtbarkeit/Priorisierung ("wer soll dieses
+ * Objekt kontrollieren"), erzwingt keine Pflichtkontrolle - entweder ein
+ * konkreter Benutzer oder eine Gruppe (Freitext, z.B. "Frühschicht"). */
+export function KontrollverantwortungSection({ objekte, benutzer, onFehler }: Props) {
+  const [eintraege, setEintraege] = useState<Kontrollverantwortung[]>([]);
+  const [laedt, setLaedt] = useState(true);
+  const [objektId, setObjektId] = useState<number | "">("");
+  const [zuordnungsart, setZuordnungsart] = useState<"benutzer" | "gruppe">("benutzer");
+  const [benutzerId, setBenutzerId] = useState<number | "">("");
+  const [gruppe, setGruppe] = useState("");
+  const [wirdAngelegt, setWirdAngelegt] = useState(false);
+
+  async function laden() {
+    setLaedt(true);
+    try {
+      const daten = await apiRequest<Kontrollverantwortung[]>("/kontrollverantwortung");
+      setEintraege(daten);
+    } catch {
+      onFehler("Kontrollverantwortung konnte nicht geladen werden.");
+    } finally {
+      setLaedt(false);
+    }
+  }
+
+  useEffect(() => {
+    laden();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function anlegen() {
+    if (objektId === "") {
+      onFehler("Objekt auswählen.");
+      return;
+    }
+    setWirdAngelegt(true);
+    try {
+      await apiRequest("/kontrollverantwortung", {
+        method: "POST",
+        body: {
+          objekt_id: objektId,
+          benutzer_id: zuordnungsart === "benutzer" ? benutzerId || null : null,
+          gruppe: zuordnungsart === "gruppe" ? gruppe : null,
+        },
+      });
+      setObjektId("");
+      setBenutzerId("");
+      setGruppe("");
+      await laden();
+    } catch {
+      onFehler("Kontrollverantwortung konnte nicht angelegt werden.");
+    } finally {
+      setWirdAngelegt(false);
+    }
+  }
+
+  async function loeschen(id: string) {
+    try {
+      await apiRequest(`/kontrollverantwortung/${id}`, { method: "DELETE" });
+      await laden();
+    } catch {
+      onFehler("Kontrollverantwortung konnte nicht gelöscht werden.");
+    }
+  }
+
+  function objektLabel(id: number): string {
+    const o = objekte.find((x) => x.id === id);
+    return o ? `${o.name} (${o.code})` : `Objekt ${id}`;
+  }
+
+  function benutzerLabel(id: number | null): string | null {
+    if (id === null) return null;
+    return benutzer.find((b) => b.id === id)?.name ?? `Benutzer ${id}`;
+  }
+
+  const kannAnlegen =
+    objektId !== "" && ((zuordnungsart === "benutzer" && benutzerId !== "") || (zuordnungsart === "gruppe" && gruppe));
+
+  return (
+    <section className="section">
+      <h2>Kontrollverantwortung</h2>
+      <div className="card">
+        <p className="text-muted" style={{ marginBottom: "1rem" }}>
+          Wer soll dieses Objekt kontrollieren - reine Sichtbarkeit/Priorisierung, keine
+          Pflichtkontrolle.
+        </p>
+        <div className="stack">
+          <div className="field">
+            <label>Objekt</label>
+            <select
+              className="input"
+              value={objektId}
+              onChange={(e) => setObjektId(Number(e.target.value) || "")}
+            >
+              <option value="">Objekt wählen…</option>
+              {objekte.map((o) => (
+                <option key={o.id} value={o.id}>
+                  {o.name} ({o.code})
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="row">
+            <label className="row" style={{ gap: "0.3rem" }}>
+              <input
+                type="radio"
+                checked={zuordnungsart === "benutzer"}
+                onChange={() => setZuordnungsart("benutzer")}
+              />
+              Benutzer
+            </label>
+            <label className="row" style={{ gap: "0.3rem" }}>
+              <input
+                type="radio"
+                checked={zuordnungsart === "gruppe"}
+                onChange={() => setZuordnungsart("gruppe")}
+              />
+              Gruppe
+            </label>
+          </div>
+          {zuordnungsart === "benutzer" ? (
+            <div className="field">
+              <label>Benutzer</label>
+              <select
+                className="input"
+                value={benutzerId}
+                onChange={(e) => setBenutzerId(Number(e.target.value) || "")}
+              >
+                <option value="">Benutzer wählen…</option>
+                {benutzer.map((b) => (
+                  <option key={b.id} value={b.id}>
+                    {b.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : (
+            <div className="field">
+              <label>Gruppe</label>
+              <input
+                className="input"
+                value={gruppe}
+                onChange={(e) => setGruppe(e.target.value)}
+                placeholder="z. B. Frühschicht"
+              />
+            </div>
+          )}
+          <button className="btn btn-primary" onClick={anlegen} disabled={!kannAnlegen || wirdAngelegt}>
+            Zuordnen
+          </button>
+        </div>
+
+        {laedt && <p className="text-muted" style={{ marginTop: "1rem" }}>Lade…</p>}
+        {!laedt && eintraege.length === 0 && (
+          <p className="text-muted" style={{ marginTop: "1rem" }}>Keine Zuordnungen.</p>
+        )}
+        {!laedt && eintraege.length > 0 && (
+          <ul className="card-list" style={{ marginTop: "1.25rem" }}>
+            {eintraege.map((e) => (
+              <li key={e.id} className="row-between" style={{ padding: "0.4rem 0" }}>
+                <span>
+                  {objektLabel(e.objekt_id)} <span className="text-muted">→</span>{" "}
+                  {benutzerLabel(e.benutzer_id) ?? e.gruppe}
+                </span>
+                <button className="btn btn-secondary" onClick={() => loeschen(e.id)}>
+                  Entfernen
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}