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

DEVLOG.md

@@ -3028,3 +3028,33 @@ Keine Commits in dieser Session.
 - frontend/src/styles/global.css               | 19 ++++++
 
 ---
+## 2026-09-04 20:03 – 20:04 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** frontend
+
+### Commits
+- 5805366 Admin-Portal: Eskalations-Konfiguration-UI (Karte 12)
+
+### Geänderte Dateien
+- DEVLOG.md                                      |  20 ++++
+- frontend/DEVLOG.md                             |  40 ++++++++
+- frontend/src/api/types.ts                      |   5 +
+- frontend/src/pages/AdminPage.tsx               |  13 ++-
+- frontend/src/pages/admin/EskalationSection.tsx | 127 +++++++++++++++++++++++++
+
+---
+## 2026-09-04 20:09 – 20:10 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                      |  20 ++++
+- frontend/DEVLOG.md                             |  40 ++++++++
+- frontend/src/api/types.ts                      |   5 +
+- frontend/src/pages/AdminPage.tsx               |  13 ++-
+- frontend/src/pages/admin/EskalationSection.tsx | 127 +++++++++++++++++++++++++
+
+---

backend/DEVLOG.md

@@ -116,3 +116,18 @@ Keine Commits in dieser Session.
 - ...07_indizes_und_unique_constraints.py => 0007_indizes_und_locks.py} | 4 ++--
 
 ---
+## 2026-09-04 20:10 – 20:13 (2m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                      |  20 ++++
+- frontend/DEVLOG.md                             |  40 ++++++++
+- frontend/src/api/types.ts                      |   5 +
+- frontend/src/pages/AdminPage.tsx               |  13 ++-
+- frontend/src/pages/admin/EskalationSection.tsx | 127 +++++++++++++++++++++++++
+
+---

frontend/e2e/mockApi.ts

@@ -43,6 +43,15 @@ export const TEST_POSITION = {
   chargennummer: null,
 };
 
+export const TEST_VORLAGE = {
+  id: 1,
+  objekttyp_id: 1,
+  name: "Test-Vorlage",
+  version: 1,
+  status: "aktiv",
+  positionen: [{ id: 1, vorlage_id: 1, material_id: TEST_MATERIAL.id, fach: null, sollmenge: "10" }],
+};
+
 export const TEST_KONTROLLE = {
   id: "kontrolle-1",
   objekt_id: 1,
@@ -88,6 +97,7 @@ export async function mockKontrollGrundgeruest(page: Page): Promise<void> {
     route.fulfill({ json: [TEST_POSITION] })
   );
   await page.route("**/api/v1/materialien", (route) => route.fulfill({ json: [TEST_MATERIAL] }));
+  await page.route(`**/api/v1/vorlagen/${TEST_VORLAGE.id}`, (route) => route.fulfill({ json: TEST_VORLAGE }));
 }
 
 export async function login(page: Page): Promise<void> {

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