Terminal im Geraetehaus mit Offline-Betrieb ergaenzen

Phase 4: eine eigene Oberflaeche unter /kiosk fuer das Wandtablet in der
Fahrzeughalle — mit Handschuhen bedienbar und arbeitsfaehig, wenn das Netz
weg ist.

Datenmodell: Fahrt, Anwesenheit, Waescheabgabe, Inventurgang,
Inventurposten, KioskVorgang und SyncKonflikt. Die Kennung eines Vorgangs
erzeugt der Browser beim Einreihen und ist damit der Idempotenzschluessel;
kommt derselbe Vorgang nach abgebrochener Uebertragung erneut an, erkennt
ihn der Server wieder. Die Datenbank setzt vier Regeln selbst durch und
verweigert UPDATE und DELETE auf kiosk_vorgang.

Offline: von Hand geschriebener Service Worker, Warteschlange in der
IndexedDB (Dexie), Fotos als Blob daneben, sichtbarer Zustand als Leiste
ueber allem. Was sich beim Nachtragen nicht anwenden laesst, landet als
Konflikt unter /terminal statt verworfen zu werden.

Dazu: Anmeldung per Ausweis, PIN oder signierter QR-Marke vom Handy,
Hallenmonitor mit optionalen DWD-Warnungen, Installation als App.

Behoben: die Warteschlange zog ihren Wiederholungstakt bei jedem Rendern
neu auf und haette einen liegen gebliebenen Vorgang nie ein zweites Mal
geschickt. Gefunden vom Offline-E2E-Test.

31 neue Tests (20 Unit, 11 gegen eine echte Datenbank, 9 E2E je Browser).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app/kiosk/waesche/page.tsx

@@ -0,0 +1,13 @@
+import { redirect } from "next/navigation";
+import { aktuelleSitzung } from "@/lib/auth";
+import { env } from "@/lib/env";
+import { WaescheWizard } from "@/app/kiosk/waesche/wizard";
+
+export const metadata = { title: "Wäsche abgeben" };
+
+export default async function WaescheSeite() {
+  const sitzung = await aktuelleSitzung();
+  if (!sitzung) redirect("/kiosk");
+
+  return <WaescheWizard abmeldenNachSekunden={env.KIOSK_IDLE_TIMEOUT} />;
+}

src/app/kiosk/waesche/wizard.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Erledigt, GrosseAuswahl, KioskRahmen } from "@/components/kiosk/rahmen";
+import { useWarteschlange } from "@/components/kiosk/warteschlange";
+
+/**
+ * Wäsche abgeben.
+ *
+ * Steht am Wäschekorb im Gerätehaus. Wer seine Einsatzjacke einwirft, tippt
+ * hier, was drin ist — sonst weiß später niemand, wem das Teil gehört, das aus
+ * der Reinigung zurückkommt.
+ *
+ * Die Auswahl ist bewusst eine Liste der üblichen Stücke und kein Textfeld:
+ * mit Handschuhen tippt man ungern, und „Einsatzjacke" schreibt jeder anders.
+ */
+
+const STUECKE = [
+  "Einsatzjacke",
+  "Einsatzhose",
+  "Überjacke",
+  "Handschuhe",
+  "Flammschutzhaube",
+  "Sonstiges",
+];
+
+const GRUENDE = [
+  { titel: "Einsatzverschmutzung", hinweis: "nach Brand oder THL" },
+  { titel: "Kontamination", hinweis: "Brandrauch, Gefahrstoff" },
+  { titel: "Routine", hinweis: "turnusmäßig" },
+];
+
+export function WaescheWizard({ abmeldenNachSekunden }: { abmeldenNachSekunden: number }) {
+  const { erfassen } = useWarteschlange();
+
+  const [bezeichnung, setBezeichnung] = React.useState<string | null>(null);
+  const [eigene, setEigene] = React.useState("");
+  const [menge, setMenge] = React.useState(1);
+  const [fertig, setFertig] = React.useState<string | null>(null);
+
+  const stueck = bezeichnung === "Sonstiges" ? eigene.trim() : bezeichnung;
+
+  async function abgeben(grund: string) {
+    if (!stueck) return;
+
+    await erfassen(
+      { art: "WAESCHE_ABGEBEN", daten: { bezeichnung: stueck, menge, grund } },
+      `Wäsche abgegeben (${stueck})`,
+    );
+
+    setFertig(`${menge}× ${stueck} abgegeben. Der Gerätewart sieht es in der Liste.`);
+  }
+
+  return (
+    <KioskRahmen
+      titel="Wäsche abgeben"
+      hinweis="Was kommt in den Korb?"
+      abmeldenNachSekunden={abmeldenNachSekunden}
+    >
+      {fertig ? (
+        <Erledigt text={fertig} />
+      ) : (
+        <div className="space-y-6">
+          <section className="space-y-3">
+            <h2 className="text-xl font-medium">Kleidungsstück</h2>
+            <div className="grid gap-3 sm:grid-cols-2">
+              {STUECKE.map((eintrag) => (
+                <GrosseAuswahl
+                  key={eintrag}
+                  titel={eintrag}
+                  gewaehlt={bezeichnung === eintrag}
+                  onClick={() => setBezeichnung(eintrag)}
+                />
+              ))}
+            </div>
+
+            {bezeichnung === "Sonstiges" && (
+              <div className="space-y-2">
+                <Label htmlFor="eigene" className="text-lg">
+                  Was genau?
+                </Label>
+                <Input
+                  id="eigene"
+                  className="h-16 text-xl"
+                  value={eigene}
+                  onChange={(ereignis) => setEigene(ereignis.target.value)}
+                  placeholder="Einsatzstiefel, Helmfutter …"
+                />
+              </div>
+            )}
+          </section>
+
+          {stueck && (
+            <>
+              <section className="space-y-3">
+                <h2 className="text-xl font-medium">Wie viele?</h2>
+                <div className="flex items-center gap-4">
+                  <Button
+                    variant="outline"
+                    className="h-20 w-20"
+                    onClick={() => setMenge((wert) => Math.max(1, wert - 1))}
+                    aria-label="weniger"
+                  >
+                    <Minus className="size-8" aria-hidden />
+                  </Button>
+                  <span className="tabellenzahlen w-20 text-center text-4xl font-semibold">
+                    {menge}
+                  </span>
+                  <Button
+                    variant="outline"
+                    className="h-20 w-20"
+                    onClick={() => setMenge((wert) => Math.min(50, wert + 1))}
+                    aria-label="mehr"
+                  >
+                    <Plus className="size-8" aria-hidden />
+                  </Button>
+                </div>
+              </section>
+
+              <section className="space-y-3">
+                <h2 className="text-xl font-medium">Warum?</h2>
+                <div className="grid gap-3 sm:grid-cols-3">
+                  {GRUENDE.map((grund) => (
+                    <GrosseAuswahl
+                      key={grund.titel}
+                      titel={grund.titel}
+                      hinweis={grund.hinweis}
+                      onClick={() => void abgeben(grund.titel)}
+                    />
+                  ))}
+                </div>
+              </section>
+            </>
+          )}
+        </div>
+      )}
+    </KioskRahmen>
+  );
+}