PWA: Passt-Button, Fortschrittsanzeige, Ablaufdatum-Farbcodierung in Kontrolle

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

DEVLOG.md

@@ -1707,3 +1707,282 @@ Keine Commits in dieser Session.
 - frontend/src/pages/AdminPage.tsx | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----
 
 ---
+## 2026-09-04 00:41 – 00:45 (4m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- f6084e2 Refactor: große Dateien in kleinere Module/Komponenten aufgeteilt
+
+### Geänderte Dateien
+- DEVLOG.md                                                     | 263 +++++++++++++++++++++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/__init__.py                    |  30 ++++++
+- backend/app/services/kontrolle/erfassung.py                   | 153 ++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/exceptions.py                  |  17 ++++
+- backend/app/services/{kontrolle.py => kontrolle/lifecycle.py} | 162 +----------------------------
+- frontend/src/pages/AdminPage.tsx                              | 309 +++-----------------------------------------------------
+- frontend/src/pages/KontrollPage.tsx                           | 240 ++++++-------------------------------------
+- frontend/src/pages/admin/MaterialSection.tsx                  | 146 ++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjektSection.tsx                    | 112 ++++++++++++++++++++
+- frontend/src/pages/admin/StandortSection.tsx                  |  56 ++++++++++
+- frontend/src/pages/kontrolle/PositionCard.tsx                 |  52 ++++++++++
+- frontend/src/pages/kontrolle/StatusBadge.tsx                  |  14 +++
+- frontend/src/pages/kontrolle/types.ts                         |  17 ++++
+- frontend/src/pages/kontrolle/useKontrolle.ts                  | 171 +++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:45 – 00:45 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                                     | 263 +++++++++++++++++++++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/__init__.py                    |  30 ++++++
+- backend/app/services/kontrolle/erfassung.py                   | 153 ++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/exceptions.py                  |  17 ++++
+- backend/app/services/{kontrolle.py => kontrolle/lifecycle.py} | 162 +----------------------------
+- frontend/src/pages/AdminPage.tsx                              | 309 +++-----------------------------------------------------
+- frontend/src/pages/KontrollPage.tsx                           | 240 ++++++-------------------------------------
+- frontend/src/pages/admin/MaterialSection.tsx                  | 146 ++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjektSection.tsx                    | 112 ++++++++++++++++++++
+- frontend/src/pages/admin/StandortSection.tsx                  |  56 ++++++++++
+- frontend/src/pages/kontrolle/PositionCard.tsx                 |  52 ++++++++++
+- frontend/src/pages/kontrolle/StatusBadge.tsx                  |  14 +++
+- frontend/src/pages/kontrolle/types.ts                         |  17 ++++
+- frontend/src/pages/kontrolle/useKontrolle.ts                  | 171 +++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:47 – 00:47 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                                     | 263 +++++++++++++++++++++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/__init__.py                    |  30 ++++++
+- backend/app/services/kontrolle/erfassung.py                   | 153 ++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/exceptions.py                  |  17 ++++
+- backend/app/services/{kontrolle.py => kontrolle/lifecycle.py} | 162 +----------------------------
+- frontend/src/pages/AdminPage.tsx                              | 309 +++-----------------------------------------------------
+- frontend/src/pages/KontrollPage.tsx                           | 240 ++++++-------------------------------------
+- frontend/src/pages/admin/MaterialSection.tsx                  | 146 ++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjektSection.tsx                    | 112 ++++++++++++++++++++
+- frontend/src/pages/admin/StandortSection.tsx                  |  56 ++++++++++
+- frontend/src/pages/kontrolle/PositionCard.tsx                 |  52 ++++++++++
+- frontend/src/pages/kontrolle/StatusBadge.tsx                  |  14 +++
+- frontend/src/pages/kontrolle/types.ts                         |  17 ++++
+- frontend/src/pages/kontrolle/useKontrolle.ts                  | 171 +++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:47 – 00:48 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                                     | 263 +++++++++++++++++++++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/__init__.py                    |  30 ++++++
+- backend/app/services/kontrolle/erfassung.py                   | 153 ++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/exceptions.py                  |  17 ++++
+- backend/app/services/{kontrolle.py => kontrolle/lifecycle.py} | 162 +----------------------------
+- frontend/src/pages/AdminPage.tsx                              | 309 +++-----------------------------------------------------
+- frontend/src/pages/KontrollPage.tsx                           | 240 ++++++-------------------------------------
+- frontend/src/pages/admin/MaterialSection.tsx                  | 146 ++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjektSection.tsx                    | 112 ++++++++++++++++++++
+- frontend/src/pages/admin/StandortSection.tsx                  |  56 ++++++++++
+- frontend/src/pages/kontrolle/PositionCard.tsx                 |  52 ++++++++++
+- frontend/src/pages/kontrolle/StatusBadge.tsx                  |  14 +++
+- frontend/src/pages/kontrolle/types.ts                         |  17 ++++
+- frontend/src/pages/kontrolle/useKontrolle.ts                  | 171 +++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:48 – 00:49 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- DEVLOG.md                                                     | 263 +++++++++++++++++++++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/__init__.py                    |  30 ++++++
+- backend/app/services/kontrolle/erfassung.py                   | 153 ++++++++++++++++++++++++++++
+- backend/app/services/kontrolle/exceptions.py                  |  17 ++++
+- backend/app/services/{kontrolle.py => kontrolle/lifecycle.py} | 162 +----------------------------
+- frontend/src/pages/AdminPage.tsx                              | 309 +++-----------------------------------------------------
+- frontend/src/pages/KontrollPage.tsx                           | 240 ++++++-------------------------------------
+- frontend/src/pages/admin/MaterialSection.tsx                  | 146 ++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjektSection.tsx                    | 112 ++++++++++++++++++++
+- frontend/src/pages/admin/StandortSection.tsx                  |  56 ++++++++++
+- frontend/src/pages/kontrolle/PositionCard.tsx                 |  52 ++++++++++
+- frontend/src/pages/kontrolle/StatusBadge.tsx                  |  14 +++
+- frontend/src/pages/kontrolle/types.ts                         |  17 ++++
+- frontend/src/pages/kontrolle/useKontrolle.ts                  | 171 +++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:49 – 00:50 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- 569f58b Sprint 8: PWA-Icons ergänzt (bisher im Manifest referenziert, aber nicht vorhanden)
+
+### Geänderte Dateien
+- frontend/public/icon-192.png | Bin 0 -> 1997 bytes
+- frontend/public/icon-512.png | Bin 0 -> 5853 bytes
+
+---
+## 2026-09-04 00:51 – 00:53 (1m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- dcc75dd Sprint 8: Bereich/Kategorie/Objekttyp/Vorlage-CRUD im Admin-Portal
+
+### Geänderte Dateien
+- frontend/src/api/types.ts                     |  20 +++++++++++
+- frontend/src/pages/AdminPage.tsx              |  52 ++++++++++++++++++++-------
+- frontend/src/pages/admin/BereichSection.tsx   |  51 +++++++++++++++++++++++++++
+- frontend/src/pages/admin/KategorieSection.tsx |  76 ++++++++++++++++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjekttypSection.tsx |  86 +++++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/pages/admin/VorlageSection.tsx   | 137 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:53 – 00:54 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- frontend/src/api/types.ts                     |  20 +++++++++++
+- frontend/src/pages/AdminPage.tsx              |  52 ++++++++++++++++++++-------
+- frontend/src/pages/admin/BereichSection.tsx   |  51 +++++++++++++++++++++++++++
+- frontend/src/pages/admin/KategorieSection.tsx |  76 ++++++++++++++++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjekttypSection.tsx |  86 +++++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/pages/admin/VorlageSection.tsx   | 137 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+---
+## 2026-09-04 00:55 – 01:00 (4m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- f47cefc fix(import): Spalte D ist Ablaufdatum-Hinweis, keine Artikelnummer
+
+### Geänderte Dateien
+- backend/scripts/import_excel.py | 60 +++++++++++++++++++++++++++++++++++++++++-------------------
+- ergebnisse/testphasen.md        | 14 +++++++-------
+
+---
+## 2026-09-04 01:02 – 01:04 (1m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- a6e68b0 Sprint 8: Ablaufdatum/Chargennummer/Seriennummer im Admin-Portal pflegbar
+
+### Geänderte Dateien
+- frontend/src/pages/AdminPage.tsx                   |   1 +
+- frontend/src/pages/admin/ObjektPositionenPanel.tsx | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+- frontend/src/pages/admin/ObjektSection.tsx         |  27 +++++++++++---
+
+---
+## 2026-09-04 01:08 – 01:11 (3m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+- 0988f8d Ablauf/Charge/SN gehören zur Kontroll-Erfassung, nicht nur zur Admin-Pflege
+
+### Geänderte Dateien
+- backend/app/api/v1/endpoints/kontrollen.py    |  3 +++
+- backend/app/schemas/kontrolle.py              | 10 +++++++++-
+- backend/app/services/kontrolle/erfassung.py   | 20 ++++++++++++++++++--
+- backend/tests/test_kontrolle.py               | 30 ++++++++++++++++++++++++++++++
+- frontend/src/offline/queue.ts                 | 26 +++++++++++++++++++++++---
+- frontend/src/pages/kontrolle/PositionCard.tsx | 45 +++++++++++++++++++++++++++++++++++++++------
+- frontend/src/pages/kontrolle/types.ts         |  3 +++
+- frontend/src/pages/kontrolle/useKontrolle.ts  | 19 +++++++++++++------
+
+---
+## 2026-09-04 01:11 – 01:11 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- backend/app/api/v1/endpoints/kontrollen.py    |  3 +++
+- backend/app/schemas/kontrolle.py              | 10 +++++++++-
+- backend/app/services/kontrolle/erfassung.py   | 20 ++++++++++++++++++--
+- backend/tests/test_kontrolle.py               | 30 ++++++++++++++++++++++++++++++
+- frontend/src/offline/queue.ts                 | 26 +++++++++++++++++++++++---
+- frontend/src/pages/kontrolle/PositionCard.tsx | 45 +++++++++++++++++++++++++++++++++++++++------
+- frontend/src/pages/kontrolle/types.ts         |  3 +++
+- frontend/src/pages/kontrolle/useKontrolle.ts  | 19 +++++++++++++------
+
+---
+## 2026-09-04 01:12 – 01:12 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- backend/app/api/v1/endpoints/kontrollen.py    |  3 +++
+- backend/app/schemas/kontrolle.py              | 10 +++++++++-
+- backend/app/services/kontrolle/erfassung.py   | 20 ++++++++++++++++++--
+- backend/tests/test_kontrolle.py               | 30 ++++++++++++++++++++++++++++++
+- frontend/src/offline/queue.ts                 | 26 +++++++++++++++++++++++---
+- frontend/src/pages/kontrolle/PositionCard.tsx | 45 +++++++++++++++++++++++++++++++++++++++------
+- frontend/src/pages/kontrolle/types.ts         |  3 +++
+- frontend/src/pages/kontrolle/useKontrolle.ts  | 19 +++++++++++++------
+
+---
+## 2026-09-04 01:12 – 01:13 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- backend/app/api/v1/endpoints/kontrollen.py    |  3 +++
+- backend/app/schemas/kontrolle.py              | 10 +++++++++-
+- backend/app/services/kontrolle/erfassung.py   | 20 ++++++++++++++++++--
+- backend/tests/test_kontrolle.py               | 30 ++++++++++++++++++++++++++++++
+- frontend/src/offline/queue.ts                 | 26 +++++++++++++++++++++++---
+- frontend/src/pages/kontrolle/PositionCard.tsx | 45 +++++++++++++++++++++++++++++++++++++++------
+- frontend/src/pages/kontrolle/types.ts         |  3 +++
+- frontend/src/pages/kontrolle/useKontrolle.ts  | 19 +++++++++++++------
+
+---
+## 2026-09-04 08:45 – 08:45 (0m)
+**Beschreibung:** Claude Code Session
+**Projekt:** asb-material
+
+### Commits
+Keine Commits in dieser Session.
+
+### Geänderte Dateien
+- backend/app/api/v1/endpoints/kontrollen.py    |  3 +++
+- backend/app/schemas/kontrolle.py              | 10 +++++++++-
+- backend/app/services/kontrolle/erfassung.py   | 20 ++++++++++++++++++--
+- backend/tests/test_kontrolle.py               | 30 ++++++++++++++++++++++++++++++
+- frontend/src/offline/queue.ts                 | 26 +++++++++++++++++++++++---
+- frontend/src/pages/kontrolle/PositionCard.tsx | 45 +++++++++++++++++++++++++++++++++++++++------
+- frontend/src/pages/kontrolle/types.ts         |  3 +++
+- frontend/src/pages/kontrolle/useKontrolle.ts  | 19 +++++++++++++------
+
+---

frontend/src/pages/KontrollPage.tsx

@@ -65,6 +65,25 @@ export function KontrollPage() {
   return (
     <main className="page">
       <h1>{objekt?.name ?? "Kontrolle"}</h1>
+      {positionen.length > 0 && (
+        <div className="card" style={{ marginBottom: "1rem" }}>
+          <div className="card-subtitle">
+            {positionen.filter((p) => p.status === "gespeichert").length} von {positionen.length} Positionen bestätigt
+          </div>
+          <div style={{ height: "6px", background: "var(--color-border, #e2e8f0)", borderRadius: "3px", marginTop: "0.35rem" }}>
+            <div
+              style={{
+                height: "100%",
+                borderRadius: "3px",
+                background: "var(--color-primary, #2563eb)",
+                width: `${Math.round(
+                  (positionen.filter((p) => p.status === "gespeichert").length / positionen.length) * 100
+                )}%`,
+              }}
+            />
+          </div>
+        </div>
+      )}
       {!online && (
         <div className="alert alert-warning">
           Kein Netz – Eingaben werden lokal gespeichert und automatisch übertragen, sobald wieder Verbindung besteht.

frontend/src/pages/kontrolle/PositionCard.tsx

@@ -13,8 +13,17 @@ interface Props {
  * die Menge - kein separater Admin-Schritt. Felder erscheinen nur, wenn der
  * Materialtyp sie verlangt (ablauf_charge -> Ablauf+Charge, geraet_sn -> SN).
  */
+function ablaufFarbe(ablaufdatum: string): string | undefined {
+  if (!ablaufdatum) return undefined;
+  const tage = (new Date(ablaufdatum).getTime() - Date.now()) / (1000 * 60 * 60 * 24);
+  if (tage < 0) return "var(--color-danger)";
+  if (tage < 30) return "var(--color-warning, #b45309)";
+  return "var(--color-success, #15803d)";
+}
+
 export function PositionCard({ zustand, onEingabeAendern, onSenden, onErneutVersuchen }: Props) {
   const materialtyp = zustand.material?.materialtyp;
+  const passt = zustand.eingabe === zustand.position.sollmenge_effektiv;
 
   return (
     <li className="card">
@@ -34,11 +43,11 @@ export function PositionCard({ zustand, onEingabeAendern, onSenden, onErneutVers
           style={{ width: "6rem" }}
         />
         <button
-          className="btn btn-primary"
+          className={passt ? "btn btn-primary" : "btn btn-secondary"}
           style={{ flex: 1 }}
           onClick={() => onSenden(zustand.position.material_id, zustand)}
         >
-          Bestätigen
+          {passt ? "Passt" : "Bestätigen"}
         </button>
       </div>
       {materialtyp === "ablauf_charge" && (
@@ -48,6 +57,7 @@ export function PositionCard({ zustand, onEingabeAendern, onSenden, onErneutVers
             className="input"
             value={zustand.ablaufdatum}
             onChange={(e) => onEingabeAendern(zustand.position.material_id, "ablaufdatum", e.target.value)}
+            style={{ borderColor: ablaufFarbe(zustand.ablaufdatum), color: ablaufFarbe(zustand.ablaufdatum) }}
           />
           <input
             className="input"