Refactor: große Dateien in kleinere Module/Komponenten aufgeteilt

Explizite Vorgabe: keine wachsenden Monolith-Dateien. AdminPage.tsx (349
Zeilen) in pages/admin/{Standort,Material,Objekt}Section.tsx aufgeteilt,
KontrollPage.tsx (277 Zeilen) in pages/kontrolle/{useKontrolle,
PositionCard,StatusBadge,types} aufgeteilt, services/kontrolle.py (332
Zeilen) in ein Package (lifecycle/erfassung/exceptions) aufgeteilt -
öffentliche API bleibt über __init__.py unverändert re-exportiert, kein
bestehender Import musste angepasst werden. Reines Refactoring, keine
Verhaltensänderung.

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

frontend/src/pages/AdminPage.tsx

@@ -2,19 +2,9 @@ import { useEffect, useState } from "react";
 
 import { apiRequest } from "../api/client";
 import type { Beladungsvorlage, Material, Objekt, Standort } from "../api/types";
-
-const MATERIALTYPEN = [
-  { value: "standard", label: "Standard" },
-  { value: "ablauf_charge", label: "Ablauf/Charge" },
-  { value: "geraet_sn", label: "Gerät mit Seriennummer" },
-];
-
-const LEERES_MATERIAL_FORMULAR = {
-  name: "",
-  artikelnummer: "",
-  einheit: "Stück",
-  materialtyp: "standard",
-};
+import { MaterialSection } from "./admin/MaterialSection";
+import { ObjektSection } from "./admin/ObjektSection";
+import { StandortSection } from "./admin/StandortSection";
 
 /**
  * Minimale Admin-Seite (Standort/Material/Objekt-Anlage), nachgezogen weil
@@ -22,6 +12,9 @@ const LEERES_MATERIAL_FORMULAR = {
  * und Stammdaten/Objekte nur per API/Skript angelegt werden konnten. Bewusst
  * schlank: keine Bereich-/Kategorie-/Vorlagen-CRUD, nur was für die
  * Pilotphase sofort nötig ist (Vorlagen kommen aus dem Excel-Import).
+ *
+ * Jeder Abschnitt (Standort/Material/Objekt) ist eine eigene Komponente unter
+ * pages/admin/ - hält diese Datei als reinen Orchestrator klein.
  */
 export function AdminPage() {
   const [standorte, setStandorte] = useState<Standort[]>([]);
@@ -31,19 +24,6 @@ export function AdminPage() {
   const [fehler, setFehler] = useState<string | null>(null);
   const [laedt, setLaedt] = useState(true);
 
-  const [standortName, setStandortName] = useState("");
-  const [standortWirdAngelegt, setStandortWirdAngelegt] = useState(false);
-
-  const [objektCode, setObjektCode] = useState("");
-  const [objektName, setObjektName] = useState("");
-  const [vorlageId, setVorlageId] = useState<number | "">("");
-  const [standortId, setStandortId] = useState<number | "">("");
-  const [objektWirdAngelegt, setObjektWirdAngelegt] = useState(false);
-
-  const [materialFormular, setMaterialFormular] = useState(LEERES_MATERIAL_FORMULAR);
-  const [bearbeiteterMaterialId, setBearbeiteterMaterialId] = useState<number | null>(null);
-  const [materialWirdGespeichert, setMaterialWirdGespeichert] = useState(false);
-
   async function ladeAlles() {
     const [s, v, o, m] = await Promise.all([
       apiRequest<Standort[]>("/standorte"),
@@ -57,104 +37,12 @@ export function AdminPage() {
     setMaterialien(m);
   }
 
-  function materialBearbeiten(material: Material) {
-    setBearbeiteterMaterialId(material.id);
-    setMaterialFormular({
-      name: material.name,
-      artikelnummer: material.artikelnummer ?? "",
-      einheit: material.einheit,
-      materialtyp: material.materialtyp,
-    });
-  }
-
-  function materialFormularZuruecksetzen() {
-    setBearbeiteterMaterialId(null);
-    setMaterialFormular(LEERES_MATERIAL_FORMULAR);
-  }
-
-  async function materialSpeichern() {
-    setFehler(null);
-    setMaterialWirdGespeichert(true);
-    try {
-      if (bearbeiteterMaterialId !== null) {
-        await apiRequest(`/materialien/${bearbeiteterMaterialId}`, {
-          method: "PATCH",
-          body: {
-            name: materialFormular.name,
-            artikelnummer: materialFormular.artikelnummer || null,
-            einheit: materialFormular.einheit,
-            materialtyp: materialFormular.materialtyp,
-          },
-        });
-      } else {
-        await apiRequest("/materialien", {
-          method: "POST",
-          body: {
-            name: materialFormular.name,
-            artikelnummer: materialFormular.artikelnummer || null,
-            einheit: materialFormular.einheit,
-            materialtyp: materialFormular.materialtyp,
-          },
-        });
-      }
-      materialFormularZuruecksetzen();
-      await ladeAlles();
-    } catch {
-      setFehler("Material konnte nicht gespeichert werden.");
-    } finally {
-      setMaterialWirdGespeichert(false);
-    }
-  }
-
   useEffect(() => {
     ladeAlles()
       .catch(() => setFehler("Stammdaten konnten nicht geladen werden."))
       .finally(() => setLaedt(false));
   }, []);
 
-  async function standortAnlegen() {
-    setFehler(null);
-    setStandortWirdAngelegt(true);
-    try {
-      await apiRequest("/standorte", { method: "POST", body: { name: standortName } });
-      setStandortName("");
-      await ladeAlles();
-    } catch {
-      setFehler("Standort konnte nicht angelegt werden.");
-    } finally {
-      setStandortWirdAngelegt(false);
-    }
-  }
-
-  async function objektAnlegen() {
-    if (vorlageId === "" || standortId === "") {
-      setFehler("Vorlage und Standort auswählen.");
-      return;
-    }
-    setFehler(null);
-    setObjektWirdAngelegt(true);
-    const vorlage = vorlagen.find((v) => v.id === vorlageId);
-    try {
-      await apiRequest("/objekte", {
-        method: "POST",
-        body: {
-          code: objektCode,
-          name: objektName,
-          objekttyp_id: vorlage?.objekttyp_id,
-          vorlage_id: vorlageId,
-          standort_id: standortId,
-        },
-      });
-      setObjektCode("");
-      setObjektName("");
-      await ladeAlles();
-    } catch {
-      setFehler("Objekt konnte nicht angelegt werden (Code evtl. schon vergeben).");
-    } finally {
-      setObjektWirdAngelegt(false);
-    }
-  }
-
   if (laedt) {
     return (
       <main className="page">
@@ -168,182 +56,15 @@ export function AdminPage() {
       <h1>Administration</h1>
       {fehler && <div className="alert alert-danger">{fehler}</div>}
 
-      <section className="section">
-        <h2>Standort anlegen</h2>
-        <div className="card">
-          <div className="row" style={{ marginBottom: standorte.length ? "1rem" : 0 }}>
-            <input
-              className="input"
-              value={standortName}
-              onChange={(e) => setStandortName(e.target.value)}
-              placeholder="Name des Standorts"
-            />
-            <button
-              className="btn btn-primary"
-              onClick={standortAnlegen}
-              disabled={!standortName || standortWirdAngelegt}
-            >
-              Anlegen
-            </button>
-          </div>
-          {standorte.length > 0 && (
-            <ul className="card-list">
-              {standorte.map((s) => (
-                <li key={s.id} className="row-between" style={{ padding: "0.4rem 0" }}>
-                  <span>{s.name}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </section>
-
-      <section className="section">
-        <h2>Material {bearbeiteterMaterialId !== null ? "bearbeiten" : "anlegen"}</h2>
-        <div className="card">
-          <div className="stack" style={{ marginBottom: "1.25rem" }}>
-            <div className="field">
-              <label>Name</label>
-              <input
-                className="input"
-                value={materialFormular.name}
-                onChange={(e) => setMaterialFormular({ ...materialFormular, name: e.target.value })}
-              />
-            </div>
-            <div className="row">
-              <div className="field" style={{ flex: 1 }}>
-                <label>Artikelnummer</label>
-                <input
-                  className="input"
-                  value={materialFormular.artikelnummer}
-                  onChange={(e) => setMaterialFormular({ ...materialFormular, artikelnummer: e.target.value })}
-                />
-              </div>
-              <div className="field" style={{ width: "7rem" }}>
-                <label>Einheit</label>
-                <input
-                  className="input"
-                  value={materialFormular.einheit}
-                  onChange={(e) => setMaterialFormular({ ...materialFormular, einheit: e.target.value })}
-                />
-              </div>
-            </div>
-            <div className="field">
-              <label>Materialtyp</label>
-              <select
-                className="input"
-                value={materialFormular.materialtyp}
-                onChange={(e) => setMaterialFormular({ ...materialFormular, materialtyp: e.target.value })}
-              >
-                {MATERIALTYPEN.map((t) => (
-                  <option key={t.value} value={t.value}>
-                    {t.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="row">
-              <button
-                className="btn btn-primary"
-                onClick={materialSpeichern}
-                disabled={!materialFormular.name || !materialFormular.einheit || materialWirdGespeichert}
-              >
-                {bearbeiteterMaterialId !== null ? "Speichern" : "Anlegen"}
-              </button>
-              {bearbeiteterMaterialId !== null && (
-                <button className="btn btn-secondary" onClick={materialFormularZuruecksetzen}>
-                  Abbrechen
-                </button>
-              )}
-            </div>
-          </div>
-
-          {materialien.length > 0 && (
-            <ul className="card-list">
-              {materialien.map((m) => (
-                <li key={m.id} className="row-between" style={{ padding: "0.4rem 0" }}>
-                  <span>
-                    {m.name} <span className="text-muted">({m.einheit})</span>
-                  </span>
-                  <button className="btn btn-secondary" onClick={() => materialBearbeiten(m)}>
-                    Bearbeiten
-                  </button>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </section>
-
-      <section className="section">
-        <h2>Objekt aus Vorlage anlegen</h2>
-        <div className="card">
-          {vorlagen.length === 0 ? (
-            <p className="text-muted">
-              Keine aktive Vorlage vorhanden – erst Excel-Import oder Vorlage per API anlegen.
-            </p>
-          ) : (
-            <div className="stack">
-              <div className="field">
-                <label>Vorlage</label>
-                <select
-                  className="input"
-                  value={vorlageId}
-                  onChange={(e) => setVorlageId(Number(e.target.value) || "")}
-                >
-                  <option value="">Vorlage wählen…</option>
-                  {vorlagen.map((v) => (
-                    <option key={v.id} value={v.id}>
-                      {v.name} (v{v.version})
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <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>Code (eindeutig)</label>
-                <input className="input" value={objektCode} onChange={(e) => setObjektCode(e.target.value)} />
-              </div>
-              <div className="field">
-                <label>Name</label>
-                <input className="input" value={objektName} onChange={(e) => setObjektName(e.target.value)} />
-              </div>
-              <button
-                className="btn btn-primary"
-                onClick={objektAnlegen}
-                disabled={!objektCode || !objektName || objektWirdAngelegt}
-              >
-                Anlegen
-              </button>
-            </div>
-          )}
-
-          {objekte.length > 0 && (
-            <ul className="card-list" style={{ marginTop: "1.25rem" }}>
-              {objekte.map((o) => (
-                <li key={o.id} className="row-between" style={{ padding: "0.4rem 0" }}>
-                  <span>{o.name}</span>
-                  <span className="text-muted">{o.code}</span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      </section>
+      <StandortSection standorte={standorte} onGeaendert={ladeAlles} onFehler={setFehler} />
+      <MaterialSection materialien={materialien} onGeaendert={ladeAlles} onFehler={setFehler} />
+      <ObjektSection
+        objekte={objekte}
+        vorlagen={vorlagen}
+        standorte={standorte}
+        onGeaendert={ladeAlles}
+        onFehler={setFehler}
+      />
     </main>
   );
 }