Kontroll-Erfassung: Positionen nach Fach gruppieren

useKontrolle lädt zusätzlich die Vorlage und mappt Fach je Material.
KontrollPage gruppiert die Erfassung nach Fach (Vorlagen-Reihenfolge,
"Ohne Fach" zuletzt, keine Überschrift falls alles ohne Fach) statt flacher
Liste - näher am Regal-/Fahrzeug-Layout. E2E-Mocks um Vorlage-Route ergänzt.

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

frontend/src/pages/KontrollPage.tsx

@@ -2,8 +2,36 @@ import { useNavigate, useParams } from "react-router-dom";
 
 import { NachfuellDialog } from "./kontrolle/NachfuellDialog";
 import { PositionCard } from "./kontrolle/PositionCard";
+import type { PositionZustand } from "./kontrolle/types";
 import { useKontrolle } from "./kontrolle/useKontrolle";
 
+const OHNE_FACH = "Ohne Fach";
+
+// Gruppierung nach Fach (Vorlagen-Feature "feste Fächer-Liste je Objekttyp"):
+// Reihenfolge folgt dem ersten Auftreten in der Positionsliste (die wiederum
+// die Vorlagen-Reihenfolge widerspiegelt), "Ohne Fach" immer zuletzt - so
+// bleibt die Erfassung nah am Regal/Fahrzeug-Layout statt alphabetisch zu
+// springen.
+function gruppiereNachFach(positionen: PositionZustand[]): [string, PositionZustand[]][] {
+  const gruppen = new Map<string, PositionZustand[]>();
+  for (const zustand of positionen) {
+    const fach = zustand.fach ?? OHNE_FACH;
+    const liste = gruppen.get(fach);
+    if (liste) {
+      liste.push(zustand);
+    } else {
+      gruppen.set(fach, [zustand]);
+    }
+  }
+  const eintraege = [...gruppen.entries()];
+  eintraege.sort(([a], [b]) => {
+    if (a === OHNE_FACH) return 1;
+    if (b === OHNE_FACH) return -1;
+    return 0;
+  });
+  return eintraege;
+}
+
 export function KontrollPage() {
   const { objektId } = useParams<{ objektId: string }>();
   const navigate = useNavigate();
@@ -27,6 +55,9 @@ export function KontrollPage() {
     nachfuellDialogSchliessen,
   } = useKontrolle(objektId);
 
+  const fachGruppen = gruppiereNachFach(positionen);
+  const nurOhneFach = fachGruppen.length === 1 && fachGruppen[0][0] === OHNE_FACH;
+
   async function handleAbschliessen() {
     if (await abschliessen()) {
       navigate("/objekte");
@@ -93,28 +124,33 @@ export function KontrollPage() {
           Kein Netz – Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.
         </div>
       )}
-      <ul className="card-list" style={{ marginBottom: "1.25rem" }}>
-        {positionen.map((zustand) => (
-          <li key={zustand.position.id} style={{ listStyle: "none" }}>
-            <PositionCard
-              zustand={zustand}
-              onEingabeAendern={eingabeAendern}
-              onSenden={positionSenden}
-              onErneutVersuchen={fehlerErneutVersuchen}
-            />
-            {nachfuellDialog?.materialId === zustand.position.material_id && (
-              <NachfuellDialog
-                materialName={zustand.material?.name ?? "Material"}
-                vorschlagMenge={String(
-                  Number(zustand.position.sollmenge_effektiv) - Number(zustand.eingabe)
+      {fachGruppen.map(([fach, gruppenPositionen]) => (
+        <div key={fach} style={{ marginBottom: "1.25rem" }}>
+          {!nurOhneFach && <h2 style={{ fontSize: "1rem", marginBottom: "0.5rem" }}>{fach}</h2>}
+          <ul className="card-list">
+            {gruppenPositionen.map((zustand) => (
+              <li key={zustand.position.id} style={{ listStyle: "none" }}>
+                <PositionCard
+                  zustand={zustand}
+                  onEingabeAendern={eingabeAendern}
+                  onSenden={positionSenden}
+                  onErneutVersuchen={fehlerErneutVersuchen}
+                />
+                {nachfuellDialog?.materialId === zustand.position.material_id && (
+                  <NachfuellDialog
+                    materialName={zustand.material?.name ?? "Material"}
+                    vorschlagMenge={String(
+                      Number(zustand.position.sollmenge_effektiv) - Number(zustand.eingabe)
+                    )}
+                    onNachfuellen={(menge) => jetztNachfuellen(nachfuellDialog.fehlbestandId, menge)}
+                    onSchliessen={nachfuellDialogSchliessen}
+                  />
                 )}
-                onNachfuellen={(menge) => jetztNachfuellen(nachfuellDialog.fehlbestandId, menge)}
-                onSchliessen={nachfuellDialogSchliessen}
-              />
-            )}
-          </li>
-        ))}
-      </ul>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
 
       {abschlussFehler && <div className="alert alert-danger">{abschlussFehler}</div>}
       <div className="stack">

frontend/src/pages/kontrolle/types.ts

@@ -12,6 +12,10 @@ export interface PositionZustand {
   chargennummer: string;
   seriennummer: string;
   fehlerText: string | null;
+  // Fach kommt aus der Vorlagenposition (nur für Material aus der Vorlage
+  // gesetzt, Karte "feste Fächer-Liste je Objekttyp") - null = ohne Fach
+  // zugeordnet oder Zusatzposition ohne Vorlagenbezug.
+  fach: string | null;
 }
 
 export interface Sperrmeldung {

frontend/src/pages/kontrolle/useKontrolle.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 
 import { apiRequest, ApiError } from "../../api/client";
-import type { Kontrolle, Material, Objekt, Objektposition } from "../../api/types";
+import type { Beladungsvorlage, Kontrolle, Material, Objekt, Objektposition } from "../../api/types";
 import {
   aufErgebnisWarten,
   enqueue,
@@ -63,12 +63,16 @@ export function useKontrolle(objektId: string | undefined) {
   }, [objektId]);
 
   useEffect(() => {
-    if (!kontrolle) return;
+    if (!kontrolle || !objekt) return;
     Promise.all([
       apiRequest<Objektposition[]>(`/objekte/${kontrolle.objekt_id}/positionen`),
       apiRequest<Material[]>("/materialien"),
-    ]).then(([positionsListe, materialListe]) => {
+      objekt.vorlage_id ? apiRequest<Beladungsvorlage>(`/vorlagen/${objekt.vorlage_id}`) : Promise.resolve(null),
+    ]).then(([positionsListe, materialListe, vorlage]) => {
       const materialById = new Map(materialListe.map((m) => [m.id, m]));
+      const fachByMaterialId = new Map(
+        (vorlage?.positionen ?? []).map((vp) => [vp.material_id, vp.fach])
+      );
       setPositionen(
         positionsListe
           .filter((p) => p.ist_status === "aktiv")
@@ -81,10 +85,11 @@ export function useKontrolle(objektId: string | undefined) {
             chargennummer: p.chargennummer ?? "",
             seriennummer: p.seriennummer ?? "",
             fehlerText: null,
+            fach: fachByMaterialId.get(p.material_id) ?? null,
           }))
       );
     });
-  }, [kontrolle]);
+  }, [kontrolle, objekt]);
 
   // Reconciliation-Loop: gleicht lokalen Anzeigezustand mit der Offline-Queue ab.
   // Ein Eintrag, der aus der Queue verschwunden ist, wurde erfolgreich übertragen