Zuständigkeit im Frontend anbinden (Karte 04)

Neuer Admin-Tab "Zuständigkeit": Benutzer materialverantwortlich für Standort
(vererbt sich auf alle Objekte dort) oder einzelnes Objekt zuordnen, Liste,
Entfernen. Backend-Endpunkte (inkl. DELETE) waren bereits vorhanden.

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 Zustaendigkeit {
+  id: string;
+  benutzer_id: number;
+  standort_id: number | null;
+  objekt_id: number | null;
+}
+
 export interface Kontrollverantwortung {
   id: string;
   objekt_id: number;

frontend/src/pages/AdminPage.tsx

@@ -14,6 +14,7 @@ import { ObjektSection } from "./admin/ObjektSection";
 import { ObjekttypSection } from "./admin/ObjekttypSection";
 import { StandortSection } from "./admin/StandortSection";
 import { VorlageSection } from "./admin/VorlageSection";
+import { ZustaendigkeitSection } from "./admin/ZustaendigkeitSection";
 
 type Tab =
   | "objekte"
@@ -24,7 +25,8 @@ type Tab =
   | "benutzer"
   | "historie"
   | "eskalation"
-  | "kontrollverantwortung";
+  | "kontrollverantwortung"
+  | "zustaendigkeit";
 
 const TABS: { key: Tab; label: string }[] = [
   { key: "objekte", label: "Objekte" },
@@ -33,6 +35,7 @@ const TABS: { key: Tab; label: string }[] = [
   { key: "struktur", label: "Struktur" },
   { key: "standorte", label: "Standorte" },
   { key: "benutzer", label: "Benutzer" },
+  { key: "zustaendigkeit", label: "Zuständigkeit" },
   { key: "kontrollverantwortung", label: "Kontrollverantwortung" },
   { key: "historie", label: "Änderungslog" },
   { key: "eskalation", label: "Eskalation" },
@@ -168,6 +171,9 @@ export function AdminPage() {
       {tab === "benutzer" && (
         <BenutzerSection benutzer={benutzer} onGeaendert={ladeAlles} onFehler={setFehler} />
       )}
+      {tab === "zustaendigkeit" && (
+        <ZustaendigkeitSection standorte={standorte} objekte={objekte} benutzer={benutzer} onFehler={setFehler} />
+      )}
       {tab === "kontrollverantwortung" && (
         <KontrollverantwortungSection objekte={objekte} benutzer={benutzer} onFehler={setFehler} />
       )}

frontend/src/pages/admin/ZustaendigkeitSection.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from "react";
+
+import { apiRequest } from "../../api/client";
+import type { Benutzer, Objekt, Standort, Zustaendigkeit } from "../../api/types";
+
+interface Props {
+  standorte: Standort[];
+  objekte: Objekt[];
+  benutzer: Benutzer[];
+  onFehler: (text: string) => void;
+}
+
+/** Karte 04: Standort-Zuordnung vererbt sich auf alle Objekte am Standort,
+ * Objekt-Zuordnung ist feinere Ergänzung obendrauf (Vereinigung, kein Ersatz -
+ * siehe backend/app/services/zustaendigkeit.py). Kein starres zentral/dezentral,
+ * Administrator teilt frei zu. */
+export function ZustaendigkeitSection({ standorte, objekte, benutzer, onFehler }: Props) {
+  const [eintraege, setEintraege] = useState<Zustaendigkeit[]>([]);
+  const [laedt, setLaedt] = useState(true);
+  const [benutzerId, setBenutzerId] = useState<number | "">("");
+  const [zuordnungsart, setZuordnungsart] = useState<"standort" | "objekt">("standort");
+  const [standortId, setStandortId] = useState<number | "">("");
+  const [objektId, setObjektId] = useState<number | "">("");
+  const [wirdAngelegt, setWirdAngelegt] = useState(false);
+
+  async function laden() {
+    setLaedt(true);
+    try {
+      const daten = await apiRequest<Zustaendigkeit[]>("/zustaendigkeiten");
+      setEintraege(daten);
+    } catch {
+      onFehler("Zuständigkeiten konnten nicht geladen werden.");
+    } finally {
+      setLaedt(false);
+    }
+  }
+
+  useEffect(() => {
+    laden();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  async function anlegen() {
+    if (benutzerId === "") {
+      onFehler("Benutzer auswählen.");
+      return;
+    }
+    setWirdAngelegt(true);
+    try {
+      await apiRequest("/zustaendigkeiten", {
+        method: "POST",
+        body: {
+          benutzer_id: benutzerId,
+          standort_id: zuordnungsart === "standort" ? standortId || null : null,
+          objekt_id: zuordnungsart === "objekt" ? objektId || null : null,
+        },
+      });
+      setStandortId("");
+      setObjektId("");
+      await laden();
+    } catch {
+      onFehler("Zuständigkeit konnte nicht angelegt werden.");
+    } finally {
+      setWirdAngelegt(false);
+    }
+  }
+
+  async function loeschen(id: string) {
+    try {
+      await apiRequest(`/zustaendigkeiten/${id}`, { method: "DELETE" });
+      await laden();
+    } catch {
+      onFehler("Zuständigkeit konnte nicht gelöscht werden.");
+    }
+  }
+
+  function benutzerName(id: number): string {
+    return benutzer.find((b) => b.id === id)?.name ?? `Benutzer ${id}`;
+  }
+
+  function zielLabel(e: Zustaendigkeit): string {
+    if (e.standort_id !== null) {
+      const s = standorte.find((x) => x.id === e.standort_id);
+      return `Standort: ${s?.name ?? e.standort_id}`;
+    }
+    const o = objekte.find((x) => x.id === e.objekt_id);
+    return `Objekt: ${o ? `${o.name} (${o.code})` : e.objekt_id}`;
+  }
+
+  const kannAnlegen =
+    benutzerId !== "" && ((zuordnungsart === "standort" && standortId !== "") || (zuordnungsart === "objekt" && objektId !== ""));
+
+  return (
+    <section className="section">
+      <h2>Zuständigkeit</h2>
+      <div className="card">
+        <p className="text-muted" style={{ marginBottom: "1rem" }}>
+          Wer ist materialverantwortlich für welchen Standort/welches Objekt. Standort-Zuordnung
+          gilt für alle Objekte dort, Objekt-Zuordnung ist eine zusätzliche, feinere Ergänzung.
+        </p>
+        <div className="stack">
+          <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="row">
+            <label className="row" style={{ gap: "0.3rem" }}>
+              <input
+                type="radio"
+                checked={zuordnungsart === "standort"}
+                onChange={() => setZuordnungsart("standort")}
+              />
+              Standort
+            </label>
+            <label className="row" style={{ gap: "0.3rem" }}>
+              <input
+                type="radio"
+                checked={zuordnungsart === "objekt"}
+                onChange={() => setZuordnungsart("objekt")}
+              />
+              Objekt
+            </label>
+          </div>
+          {zuordnungsart === "standort" ? (
+            <div className="field">
+              <label>Standort</label>
+              <select
+                className="input"
+                value={standortId}
+                onChange={(e) => setStandortId(Number(e.target.value) || "")}
+              >
+                <option value="">Standort wählen…</option>
+                {standorte.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : (
+            <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>
+          )}
+          <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 Zuständigkeiten.</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>
+                  {benutzerName(e.benutzer_id)} <span className="text-muted">→</span> {zielLabel(e)}
+                </span>
+                <button className="btn btn-secondary" onClick={() => loeschen(e.id)}>
+                  Entfernen
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </section>
+  );
+}