Eigener Rueckfrage-Dialog statt Browsermeldung, Zeitstempel im Export, Notizen an Gruppen-Codes

Rueckfragen liefen bisher ueber window.confirm. Das reisst aus der Oberflaeche,
zeigt den Hostnamen, laesst sich nicht gestalten und die Knoepfe heissen immer
"OK/Abbrechen". Neu ist ein eigener Dialog (src/confirm.jsx) als Provider mit
dem Hook useConfirm. Der Aufruf bleibt so einfach wie vorher, weil er eine
Zusage zurueckgibt:

    if (!(await confirm({ title: "…?", message: "…" }))) return;

Damit sind alle neun Stellen umgestellt: Gruppen, Kategorien, Lagerorte,
Einheiten, Benutzer, API-Tokens, Produkt und Charge loeschen sowie das Ersetzen
beim Import. Jede Rueckfrage hat jetzt einen sprechenden Titel, einen Satz zu
den Folgen und einen benannten Knopf ("Loeschen", "Widerrufen", "Ersetzen")
statt eines nichtssagenden OK. Unwiderrufliche Schritte sind rot.
Kuenftig gilt: keine Browserdialoge mehr.

Export: Dateinamen tragen jetzt Datum und Uhrzeit
(bestand_2026-07-22_2130.csv, project-good-backup_2026-07-22_2130.json). Ohne
Zeitstempel hiessen mehrere Ausleitungen alle gleich und der Browser haengte
(1), (2) an - dann war nicht mehr erkennbar, welche die aktuelle ist. Der
Zeitstempel entsteht an beiden Enden gleich: im Content-Disposition-Kopf des
Backends und im Dateinamen, den der Browser setzt. Im JSON steht zusaetzlich
die Ortszeit neben dem bereits vorhandenen UTC-Zeitpunkt. Die CSV bleibt
inhaltlich unveraendert - eine zusaetzliche Spalte oder Kopfzeile wuerde die
Datei in Excel nur stoeren.

Notizen an Gruppen-Codes: Codes, die beim Zuordnen eines Artikels automatisch
entstehen, hatten bisher keine Moeglichkeit, eine Notiz zu bekommen - die liess
sich nur beim Anlegen von Hand mitgeben. Neu PATCH /groups/{id}/barcodes/{code}
und ein Notizfeld in der Liste, das beim Verlassen speichert. Leeren entfernt
die Notiz.

Getestet: 57 pytest-Tests unveraendert gruen, Web-Build laeuft durch. Gegen die
laufende API geprueft: Zeitstempel in beiden Content-Disposition-Koepfen und im
JSON-Inhalt; Notiz an einem automatisch angelegten Code setzen, aendern und
leeren, unbekannter Code antwortet mit 404. Die Dialoge selbst habe ich nicht
im Browser angeklickt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/pages/Categories.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import { asTree } from "../categoryTree";
@@ -11,6 +12,7 @@ import { asTree } from "../categoryTree";
  * Gruppen. Genau dieser Unterschied soll auf den ersten Blick sichtbar sein.
  */
 export default function Categories() {
+  const confirm = useConfirm();
   const { isAdmin } = useAuth();
   const [categories, setCategories] = useState([]);
   const [form, setForm] = useState({ name: "", parent_id: "" });
@@ -55,7 +57,13 @@ export default function Categories() {
     const hinweis = category.product_count
       ? ` ${category.product_count} Artikel verlieren die Zuordnung, bleiben aber erhalten.`
       : "";
-    if (!confirm(`Kategorie "${category.name}" löschen?${hinweis}`)) return;
+    const ok = await confirm({
+      title: `Kategorie „${category.name}“ löschen?`,
+      message: `Unterkategorien rücken eine Ebene nach oben.${hinweis}`,
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteCategory(category.id);
       load();

web/src/pages/Groups.jsx

@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import { useAuth } from "../auth";
 import BarcodeList from "../components/BarcodeList";
 import Icon from "../components/Icon";
 import { fmt } from "../units";
 
 export default function Groups() {
+  const confirm = useConfirm();
   const { isAdmin } = useAuth();
   const [groups, setGroups] = useState([]);
   const [units, setUnits] = useState([]);
@@ -52,7 +54,13 @@ export default function Groups() {
   }
 
   async function remove(group) {
-    if (!confirm(`Gruppe "${group.name}" löschen? Produkte bleiben erhalten, verlieren aber die Zuordnung.`)) return;
+    const ok = await confirm({
+      title: `Gruppe „${group.name}“ löschen?`,
+      message: "Die Produkte bleiben erhalten, verlieren aber ihre Zuordnung zu dieser Gruppe.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteGroup(group.id);
       if (selectedId === group.id) setSelectedId(null);
@@ -174,6 +182,12 @@ export default function Groups() {
                     await load();
                   } catch (err) { setError(err.message); }
                 }}
+                onEditNote={async (code, note) => {
+                  try {
+                    await api.updateGroupBarcodeNote(selected.id, code, { note });
+                    await load();
+                  } catch (err) { setError(err.message); }
+                }}
                 onDelete={async (code) => {
                   try {
                     await api.deleteGroupBarcode(selected.id, code);

web/src/pages/Locations.jsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
 
 export default function Locations() {
+  const confirm = useConfirm();
   const [locations, setLocations] = useState([]);
   const [name, setName] = useState("");
   const [parentId, setParentId] = useState("");
@@ -32,7 +34,13 @@ export default function Locations() {
   }
 
   async function remove(id) {
-    if (!confirm("Lagerort löschen? Untergeordnete Orte werden dann übergeordnet.")) return;
+    const ok = await confirm({
+      title: "Lagerort löschen?",
+      message: "Untergeordnete Orte rücken eine Ebene nach oben.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteLocation(id);
       load();

web/src/pages/ProductForm.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import { useAuth } from "../auth";
 import BarcodeList from "../components/BarcodeList";
 import Icon from "../components/Icon";
@@ -28,6 +29,7 @@ const KIND_LABEL = { count: "Anzahl", weight: "Gewicht", volume: "Volumen" };
 const KIND_ORDER = ["count", "weight", "volume"];
 
 export default function ProductForm() {
+  const confirm = useConfirm();
   const { id } = useParams();
   const isNew = !id;
   const { isAdmin } = useAuth();
@@ -220,7 +222,13 @@ export default function ProductForm() {
   }
 
   async function remove() {
-    if (!confirm("Produkt wirklich löschen? Alle Chargen gehen verloren.")) return;
+    const ok = await confirm({
+      title: "Produkt löschen?",
+      message: "Alle Chargen dieses Produkts gehen dabei verloren.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteProduct(id);
       navigate("/products");
@@ -423,6 +431,7 @@ export default function ProductForm() {
 
 /** Chargen-Karte mit Bearbeiten/Löschen. Bearbeitet wird in der Produkteinheit. */
 function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onChanged, onError }) {
+  const confirm = useConfirm();
   const { formatBestBefore } = useSettings();
   const [editId, setEditId] = useState(null);
   const [draft, setDraft] = useState({ quantity: "", best_before: "", precision: "day" });
@@ -491,7 +500,13 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, imageUrl, onCha
   }
 
   async function removeLot(l) {
-    if (!confirm("Charge wirklich löschen?")) return;
+    const ok = await confirm({
+      title: "Charge löschen?",
+      message: "Die Menge wird als Korrektur im Verlauf protokolliert.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteLot(l.id);
       await onChanged();

web/src/pages/Settings.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
 import BrandingUpload from "../components/BrandingUpload";
 import DangerAction from "../components/DangerAction";
@@ -109,6 +110,7 @@ export default function Settings() {
 
 /** Langlebige Tokens für externe Zugriffe (Home Assistant, Skripte). */
 function ApiTokensCard() {
+  const confirm = useConfirm();
   const [tokens, setTokens] = useState([]);
   const [name, setName] = useState("");
   const [fresh, setFresh] = useState(null);
@@ -138,7 +140,13 @@ function ApiTokensCard() {
   }
 
   async function remove(token) {
-    if (!confirm(`Token "${token.name}" widerrufen? Zugriffe damit funktionieren sofort nicht mehr.`)) return;
+    const ok = await confirm({
+      title: `Token „${token.name}“ widerrufen?`,
+      message: "Zugriffe mit diesem Token funktionieren sofort nicht mehr.",
+      confirmLabel: "Widerrufen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteApiToken(token.id);
       load();

web/src/pages/Transfer.jsx

@@ -1,8 +1,10 @@
 import { useRef, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
 
 export default function Transfer() {
+  const confirm = useConfirm();
   const fileRef = useRef(null);
   const [file, setFile] = useState(null);
   const [mode, setMode] = useState("add");
@@ -36,7 +38,12 @@ export default function Transfer() {
         mode === "replace_all"
           ? "ALLE Bestände werden vorher gelöscht und aus der Datei neu aufgebaut. Fortfahren?"
           : "Für alle Produkte in der Datei werden die vorhandenen Chargen gelöscht und ersetzt. Fortfahren?";
-      if (!confirm(warning)) return;
+      if (!(await confirm({
+        title: "Vorhandene Bestände ersetzen?",
+        message: warning,
+        confirmLabel: "Ersetzen",
+        danger: true,
+      }))) return;
     }
     setError(null);
     setResult(null);

web/src/pages/Units.jsx

@@ -1,11 +1,13 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import Icon from "../components/Icon";
 import { fmt } from "../units";
 
 const KIND_LABEL = { count: "Anzahl (Stück)", weight: "Gewicht (Basis: Gramm)", volume: "Volumen (Basis: Milliliter)" };
 
 export default function Units() {
+  const confirm = useConfirm();
   const [units, setUnits] = useState([]);
   const [form, setForm] = useState({ name: "", kind: "weight", factor: "" });
   const [error, setError] = useState(null);
@@ -33,7 +35,13 @@ export default function Units() {
   }
 
   async function remove(u) {
-    if (!confirm(`Einheit "${u.name}" löschen?`)) return;
+    const ok = await confirm({
+      title: `Einheit „${u.name}“ löschen?`,
+      message: "Produkte, die diese Einheit nutzen, fallen auf ihre Basiseinheit zurück.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteUnit(u.id);
       load();

web/src/pages/Users.jsx

@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
+import { useConfirm } from "../confirm";
 import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 
 export default function Users() {
+  const confirm = useConfirm();
   const { user: me } = useAuth();
   const [users, setUsers] = useState([]);
   const [form, setForm] = useState({ username: "", password: "", role: "user" });
@@ -43,7 +45,13 @@ export default function Users() {
   }
 
   async function remove(u) {
-    if (!confirm(`Benutzer "${u.username}" löschen?`)) return;
+    const ok = await confirm({
+      title: `Benutzer „${u.username}“ löschen?`,
+      message: "Die Anmeldung mit diesem Konto ist danach nicht mehr möglich.",
+      confirmLabel: "Löschen",
+      danger: true,
+    });
+    if (!ok) return;
     try {
       await api.deleteUser(u.id);
       load();