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/KontrollPage.tsx

@@ -1,170 +1,37 @@
-import { useEffect, useMemo, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
-import { apiRequest, ApiError } from "../api/client";
-import type { Kontrolle, Material, Objekt, Objektposition } from "../api/types";
-import { useOnlineStatus } from "../offline/useOnlineStatus";
-import { enqueue, eintraegeFuerKontrolle, entferneFehlerEintrag, synchronisiereQueue } from "../offline/queue";
-import type { QueueStatus } from "../offline/queue";
+import { PositionCard } from "./kontrolle/PositionCard";
+import { useKontrolle } from "./kontrolle/useKontrolle";
 
-type PositionStatus = "unbestaetigt" | QueueStatus | "gespeichert";
-
-interface PositionZustand {
-  position: Objektposition;
-  material: Material | undefined;
-  status: PositionStatus;
-  eingabe: string;
-  fehlerText: string | null;
-}
-
-interface Sperrmeldung {
-  benutzer: string | null;
-  seit: string;
-}
-
-// Prompt 11 Screens 2-6 (kompakt zusammengefasst) + Prompt 17 Offline-Härtung:
-// Start -> Positionen erfassen (über die lokale Queue, nie direkt blockierend) ->
-// Abschluss erst möglich, wenn nichts mehr in der Queue unbestätigt liegt.
 export function KontrollPage() {
   const { objektId } = useParams<{ objektId: string }>();
   const navigate = useNavigate();
-  const online = useOnlineStatus();
+  const {
+    online,
+    objekt,
+    sperre,
+    positionen,
+    startFehler,
+    wirdAbgeschlossen,
+    abschlussFehler,
+    alleUebertragen,
+    starteKontrolle,
+    eingabeAendern,
+    positionSenden,
+    fehlerErneutVersuchen,
+    abschliessen,
+    abbrechen,
+  } = useKontrolle(objektId);
 
-  const [objekt, setObjekt] = useState<Objekt | null>(null);
-  const [kontrolle, setKontrolle] = useState<Kontrolle | null>(null);
-  const [sperre, setSperre] = useState<Sperrmeldung | null>(null);
-  const [positionen, setPositionen] = useState<PositionZustand[]>([]);
-  const [startFehler, setStartFehler] = useState<string | null>(null);
-  const [wirdAbgeschlossen, setWirdAbgeschlossen] = useState(false);
-  const [abschlussFehler, setAbschlussFehler] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!objektId) return;
-    apiRequest<Objekt>(`/objekte/${objektId}`).then(setObjekt).catch(() => undefined);
-  }, [objektId]);
-
-  async function starteKontrolle(uebernehmen: boolean) {
-    if (!objektId) return;
-    setStartFehler(null);
-    try {
-      const neueKontrolle = await apiRequest<Kontrolle>(`/objekte/${objektId}/kontrollen`, {
-        method: "POST",
-        body: { uebernehmen },
-      });
-      setKontrolle(neueKontrolle);
-      setSperre(null);
-    } catch (error) {
-      if (error instanceof ApiError && error.status === 409) {
-        const detail = error.detail as { benutzer?: string; seit?: string } | null;
-        setSperre({ benutzer: detail?.benutzer ?? null, seit: detail?.seit ?? "" });
-      } else {
-        setStartFehler("Kontrolle konnte nicht gestartet werden (keine Verbindung?).");
-      }
-    }
-  }
-
-  useEffect(() => {
-    void starteKontrolle(false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [objektId]);
-
-  useEffect(() => {
-    if (!kontrolle) return;
-    Promise.all([
-      apiRequest<Objektposition[]>(`/objekte/${kontrolle.objekt_id}/positionen`),
-      apiRequest<Material[]>("/materialien"),
-    ]).then(([positionsListe, materialListe]) => {
-      const materialById = new Map(materialListe.map((m) => [m.id, m]));
-      setPositionen(
-        positionsListe
-          .filter((p) => p.ist_status === "aktiv")
-          .map((p) => ({
-            position: p,
-            material: materialById.get(p.material_id),
-            status: "unbestaetigt",
-            eingabe: p.sollmenge_effektiv,
-            fehlerText: null,
-          }))
-      );
-    });
-  }, [kontrolle]);
-
-  // Reconciliation-Loop: gleicht lokalen Anzeigezustand mit der Offline-Queue ab.
-  // Ein Eintrag, der aus der Queue verschwunden ist, wurde erfolgreich übertragen
-  // (queue.ts entfernt Einträge ausschließlich bei Erfolg, siehe dort).
-  useEffect(() => {
-    if (!kontrolle) return;
-    const interval = window.setInterval(async () => {
-      const eintraege = await eintraegeFuerKontrolle(kontrolle.id);
-      const byMaterial = new Map(eintraege.map((e) => [e.materialId, e]));
-      setPositionen((bisherige) =>
-        bisherige.map((zustand) => {
-          const inQueue = byMaterial.get(zustand.position.material_id);
-          if (inQueue) {
-            return { ...zustand, status: inQueue.status, fehlerText: inQueue.fehlerText };
-          }
-          if (zustand.status === "wartet" || zustand.status === "wird_uebertragen") {
-            return { ...zustand, status: "gespeichert", fehlerText: null };
-          }
-          return zustand;
-        })
-      );
-    }, 2000);
-    return () => window.clearInterval(interval);
-  }, [kontrolle]);
-
-  useEffect(() => {
-    if (online) void synchronisiereQueue();
-  }, [online]);
-
-  function eingabeAendern(materialId: number, wert: string) {
-    setPositionen((bisherige) =>
-      bisherige.map((z) => (z.position.material_id === materialId ? { ...z, eingabe: wert } : z))
-    );
-  }
-
-  async function positionSenden(materialId: number, istmenge: string) {
-    if (!kontrolle) return;
-    await enqueue(kontrolle.id, materialId, istmenge);
-    setPositionen((bisherige) =>
-      bisherige.map((z) => (z.position.material_id === materialId ? { ...z, status: "wartet" } : z))
-    );
-    void synchronisiereQueue();
-  }
-
-  async function fehlerErneutVersuchen(materialId: number, istmenge: string) {
-    if (!kontrolle) return;
-    await entferneFehlerEintrag(kontrolle.id, materialId);
-    await positionSenden(materialId, istmenge);
-  }
-
-  const alleUebertragen = useMemo(
-    () => positionen.length > 0 && positionen.every((p) => p.status === "gespeichert"),
-    [positionen]
-  );
-
-  async function abschliessen() {
-    if (!kontrolle) return;
-    setWirdAbgeschlossen(true);
-    setAbschlussFehler(null);
-    try {
-      await apiRequest(`/kontrollen/${kontrolle.id}/abschliessen`, { method: "POST" });
+  async function handleAbschliessen() {
+    if (await abschliessen()) {
       navigate("/objekte");
-    } catch (error) {
-      if (error instanceof ApiError && error.status === 409) {
-        setAbschlussFehler("Nicht alle Positionen wurden erfasst.");
-      } else {
-        setAbschlussFehler("Abschluss fehlgeschlagen (keine Verbindung?).");
-      }
-    } finally {
-      setWirdAbgeschlossen(false);
     }
   }
 
-  async function abbrechen() {
-    if (!kontrolle) return;
+  async function handleAbbrechen() {
     const grund = window.prompt("Grund für den Abbruch (optional):") ?? undefined;
-    await apiRequest(`/kontrollen/${kontrolle.id}/abbrechen`, { method: "POST", body: { grund } });
+    await abbrechen(grund);
     navigate("/objekte");
   }
 
@@ -205,44 +72,13 @@ export function KontrollPage() {
       )}
       <ul className="card-list" style={{ marginBottom: "1.25rem" }}>
         {positionen.map((zustand) => (
-          <li key={zustand.position.id} className="card">
-            <div className="card-title-row">
-              <strong>{zustand.material?.name ?? `Material ${zustand.position.material_id}`}</strong>
-              <StatusBadge status={zustand.status} />
-            </div>
-            <div className="card-subtitle">
-              Soll: {zustand.position.sollmenge_effektiv} {zustand.material?.einheit ?? ""}
-            </div>
-            <div className="row" style={{ marginTop: "0.6rem" }}>
-              <input
-                type="number"
-                className="input"
-                value={zustand.eingabe}
-                onChange={(e) => eingabeAendern(zustand.position.material_id, e.target.value)}
-                style={{ width: "6rem" }}
-              />
-              <button
-                className="btn btn-primary"
-                style={{ flex: 1 }}
-                onClick={() => positionSenden(zustand.position.material_id, zustand.eingabe)}
-              >
-                Bestätigen
-              </button>
-            </div>
-            {zustand.status === "fehler" && (
-              <div style={{ marginTop: "0.6rem" }}>
-                <p className="text-muted" style={{ color: "var(--color-danger)" }}>
-                  {zustand.fehlerText}
-                </p>
-                <button
-                  className="btn btn-secondary"
-                  onClick={() => fehlerErneutVersuchen(zustand.position.material_id, zustand.eingabe)}
-                >
-                  Erneut versuchen
-                </button>
-              </div>
-            )}
-          </li>
+          <PositionCard
+            key={zustand.position.id}
+            zustand={zustand}
+            onEingabeAendern={eingabeAendern}
+            onSenden={positionSenden}
+            onErneutVersuchen={fehlerErneutVersuchen}
+          />
         ))}
       </ul>
 
@@ -250,27 +86,15 @@ export function KontrollPage() {
       <div className="stack">
         <button
           className="btn btn-primary btn-block"
-          onClick={abschliessen}
+          onClick={handleAbschliessen}
           disabled={!alleUebertragen || wirdAbgeschlossen}
         >
           {alleUebertragen ? "Kontrolle abschließen" : "Noch nicht alle Positionen gespeichert…"}
         </button>
-        <button className="btn btn-danger btn-block" onClick={abbrechen}>
+        <button className="btn btn-danger btn-block" onClick={handleAbbrechen}>
           Kontrolle abbrechen
         </button>
       </div>
     </main>
   );
 }
-
-function StatusBadge({ status }: { status: PositionStatus }) {
-  const konfiguration: Record<PositionStatus, { text: string; klasse: string }> = {
-    unbestaetigt: { text: "offen", klasse: "badge-neutral" },
-    wartet: { text: "nicht gespeichert", klasse: "badge-warning" },
-    wird_uebertragen: { text: "wird übertragen…", klasse: "badge-warning" },
-    gespeichert: { text: "gespeichert", klasse: "badge-success" },
-    fehler: { text: "Fehler", klasse: "badge-danger" },
-  };
-  const { text, klasse } = konfiguration[status];
-  return <span className={`badge ${klasse}`}>{text}</span>;
-}