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
2026-09-04 08:54:22 +02:00
parent 0988f8d026
commit db245c5e43
3 changed files with 310 additions and 2 deletions
@@ -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.