Materialstamm: Blutdruckmanschette ALT geklärt + Zuständigkeitsliste mit Suche

89 "Blutdruckmanschette" <- 91 "Blutdruckmanschette ALT" zusammengelegt
(152 Materialien). Echter Konflikt an 7 Objekten geprüft und dokumentiert -
kein Datenverlust (Konfliktzeilen alle im Default-Zustand, einziger echter
Historie-Treffer korrekt umgehängt statt gelöscht).

ZustaendigkeitSection: gleiches zweispaltiges Layout mit Suche wie Material-/
Objektliste. screenshots/ ins .gitignore (lokale Debug-Bilder, nicht für
den Remote gedacht).

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

frontend/src/pages/admin/ZustaendigkeitSection.tsx

@@ -22,6 +22,7 @@ export function ZustaendigkeitSection({ standorte, objekte, benutzer, onFehler }
   const [standortId, setStandortId] = useState<number | "">("");
   const [objektId, setObjektId] = useState<number | "">("");
   const [wirdAngelegt, setWirdAngelegt] = useState(false);
+  const [suche, setSuche] = useState("");
 
   async function laden() {
     setLaedt(true);
@@ -90,104 +91,122 @@ export function ZustaendigkeitSection({ standorte, objekte, benutzer, onFehler }
   const kannAnlegen =
     benutzerId !== "" && ((zuordnungsart === "standort" && standortId !== "") || (zuordnungsart === "objekt" && objektId !== ""));
 
+  const sucheNormalisiert = suche.trim().toLowerCase();
+  const gefiltert = sucheNormalisiert
+    ? eintraege.filter(
+        (e) =>
+          benutzerName(e.benutzer_id).toLowerCase().includes(sucheNormalisiert) ||
+          zielLabel(e).toLowerCase().includes(sucheNormalisiert)
+      )
+    : eintraege;
+
   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 style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "1.25rem" }}>
+        <div className="card" style={{ flex: "0 0 20rem", width: "20rem", boxSizing: "border-box" }}>
+          <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>Standort</label>
+              <label>Benutzer</label>
               <select
                 className="input"
-                value={standortId}
-                onChange={(e) => setStandortId(Number(e.target.value) || "")}
+                value={benutzerId}
+                onChange={(e) => setBenutzerId(Number(e.target.value) || "")}
               >
-                <option value="">Standort wählen…</option>
-                {standorte.map((s) => (
-                  <option key={s.id} value={s.id}>
-                    {s.name}
+                <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>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 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>
-          )}
-          <button className="btn btn-primary" onClick={anlegen} disabled={!kannAnlegen || wirdAngelegt}>
-            Zuordnen
-          </button>
+            {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>
         </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 style={{ flex: "1 1 0%", minWidth: 0 }}>
+          <input
+            className="input input-search"
+            style={{ marginBottom: "1rem" }}
+            placeholder={`Suche in ${eintraege.length} Zuständigkeiten…`}
+            value={suche}
+            onChange={(e) => setSuche(e.target.value)}
+          />
+          {laedt && <p className="text-muted">Lade…</p>}
+          {!laedt && gefiltert.length === 0 && <p className="text-muted">Keine Treffer.</p>}
+          {!laedt && gefiltert.length > 0 && (
+            <ul className="card-list">
+              {gefiltert.map((e) => (
+                <li key={e.id} className="card row-between" style={{ padding: "0.6rem 1rem" }}>
+                  <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>
       </div>
     </section>
   );