Mehrere EAN-Codes je Produkt und je Gruppe (mit Notiz) + Gruppen umbenennen

Barcodes:
- Neue Tabelle barcodes (code, note, product_id ODER group_id). Damit lassen sich
  einem Produkt mehrere Codes geben und einer Gruppe beliebig viele Marken
  zuordnen (z.B. alle Mehlmarken zu "Mehl"). Je Code eine Notiz wie
  "Mehl bei Aldi".
- Lookup loest jetzt auch Alias-Codes auf; ist ein Code einer Gruppe zugeordnet,
  liefert die API group_id/group_name zurueck. Beim Anlegen aus einem Scan wird
  diese Gruppe automatisch gesetzt (Vorrang vor dem Kategorie-Rateversuch).
- Endpunkte: POST/DELETE /products/{id}/barcodes und /groups/{id}/barcodes.
- Web: wiederverwendbare BarcodeList-Komponente, eingebunden im Produktformular
  und auf der Gruppen-Seite.

Gruppen:
- Namen lassen sich jetzt direkt in der Tabelle aendern (PATCH war vorhanden,
  nur die Oberflaeche fehlte).

UI-Fix: Auswahlfelder in Tabellen richten sich nach ihrem Text statt nach der
Zellenbreite (Gruppen-/Benutzer-Dropdowns waren abgeschnitten).

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

web/src/pages/Groups.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { api } from "../api";
 import { useAuth } from "../auth";
+import BarcodeList from "../components/BarcodeList";
 import Icon from "../components/Icon";
 import { fmt } from "../units";
 
@@ -9,6 +10,7 @@ export default function Groups() {
   const [groups, setGroups] = useState([]);
   const [units, setUnits] = useState([]);
   const [form, setForm] = useState({ name: "", min_stock: "", min_stock_unit_id: "" });
+  const [selectedId, setSelectedId] = useState(null);
   const [error, setError] = useState(null);
 
   async function load() {
@@ -40,6 +42,7 @@ export default function Groups() {
   }
 
   async function patch(group, body) {
+    setError(null);
     try {
       await api.updateGroup(group.id, body);
       load();
@@ -52,18 +55,23 @@ export default function Groups() {
     if (!confirm(`Gruppe "${group.name}" löschen? Produkte bleiben erhalten, verlieren aber die Gruppenzuordnung.`)) return;
     try {
       await api.deleteGroup(group.id);
+      if (selectedId === group.id) setSelectedId(null);
       load();
     } catch (err) {
       setError(err.message);
     }
   }
 
+  const selected = groups.find((g) => g.id === selectedId) || null;
+
   return (
     <div>
       <div className="page-head">
         <div>
           <h1>Gruppen</h1>
-          <div className="sub">Produkte zusammenfassen (z.B. Nudeln) und einen Gruppen-Mindestbestand mit Einheit setzen</div>
+          <div className="sub">
+            Produkte zusammenfassen, Gruppen-Mindestbestand setzen und EAN-Codes hinterlegen
+          </div>
         </div>
       </div>
       {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
@@ -79,6 +87,7 @@ export default function Groups() {
                   <th className="num">Bestand</th>
                   <th>Mindestbestand</th>
                   <th>Einheit</th>
+                  <th className="num">EANs</th>
                   <th></th>
                 </tr>
               </thead>
@@ -87,8 +96,14 @@ export default function Groups() {
                   const low = g.min_stock != null && g.stock < g.min_stock;
                   return (
                     <tr key={g.id}>
-                      <td className="strong">
-                        {g.name}
+                      <td>
+                        {isAdmin ? (
+                          <input defaultValue={g.name} style={{ marginTop: 0, minWidth: 130 }}
+                            onBlur={(e) => {
+                              const v = e.target.value.trim();
+                              if (v && v !== g.name) patch(g, { name: v });
+                            }} />
+                        ) : <span className="strong">{g.name}</span>}
                         {low && <span className="badge warn" style={{ marginLeft: 6 }}>niedrig</span>}
                       </td>
                       <td className="num muted">{g.product_count}</td>
@@ -96,7 +111,7 @@ export default function Groups() {
                       <td>
                         {isAdmin ? (
                           <input type="number" step="any" defaultValue={g.min_stock ?? ""}
-                            style={{ maxWidth: 100, marginTop: 0 }}
+                            style={{ marginTop: 0, minWidth: 90 }}
                             onBlur={(e) => {
                               const v = e.target.value;
                               if (v !== String(g.min_stock ?? "")) {
@@ -107,7 +122,7 @@ export default function Groups() {
                       </td>
                       <td>
                         {isAdmin ? (
-                          <select value={g.min_stock_unit_id ?? ""} style={{ maxWidth: 140, marginTop: 0 }}
+                          <select value={g.min_stock_unit_id ?? ""} style={{ marginTop: 0 }}
                             onChange={(e) => patch(g, {
                               min_stock_unit_id: e.target.value === "" ? null : Number(e.target.value),
                             })}>
@@ -116,6 +131,11 @@ export default function Groups() {
                           </select>
                         ) : (g.min_stock_unit_name || "–")}
                       </td>
+                      <td className="num">
+                        <button className="link-btn" onClick={() => setSelectedId(g.id)}>
+                          {g.barcodes?.length || 0} verwalten
+                        </button>
+                      </td>
                       <td className="num">
                         {isAdmin && (
                           <button className="btn-icon danger" onClick={() => remove(g)} title="Löschen">
@@ -126,41 +146,71 @@ export default function Groups() {
                     </tr>
                   );
                 })}
-                {groups.length === 0 && <tr><td colSpan={6} className="empty">Noch keine Gruppen.</td></tr>}
+                {groups.length === 0 && <tr><td colSpan={7} className="empty">Noch keine Gruppen.</td></tr>}
               </tbody>
             </table>
           </div>
         </div>
 
-        {isAdmin && (
-          <form className="card" onSubmit={add}>
-            <div className="card-head"><Icon name="tag" /><h2>Neue Gruppe</h2></div>
-            <label>
-              Name
-              <input placeholder="z.B. Nudeln" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
-            </label>
-            <div className="row">
-              <label className="grow">
-                Mindestbestand (optional)
-                <input type="number" step="any" value={form.min_stock}
-                  onChange={(e) => setForm({ ...form, min_stock: e.target.value })} placeholder="z.B. 2" />
+        <div>
+          {selected && (
+            <section className="card">
+              <div className="card-head">
+                <Icon name="search" />
+                <h2>EAN-Codes: {selected.name}</h2>
+              </div>
+              <BarcodeList
+                barcodes={selected.barcodes || []}
+                disabled={!isAdmin}
+                hint="Scannst du einen dieser Codes beim Einlagern, wird das neue Produkt automatisch dieser Gruppe zugeordnet."
+                onAdd={async (body) => {
+                  try {
+                    await api.addGroupBarcode(selected.id, body);
+                    await load();
+                  } catch (err) { setError(err.message); }
+                }}
+                onDelete={async (code) => {
+                  try {
+                    await api.deleteGroupBarcode(selected.id, code);
+                    await load();
+                  } catch (err) { setError(err.message); }
+                }}
+              />
+              <button className="btn ghost" onClick={() => setSelectedId(null)}>Schließen</button>
+            </section>
+          )}
+
+          {isAdmin && (
+            <form className="card" onSubmit={add}>
+              <div className="card-head"><Icon name="tag" /><h2>Neue Gruppe</h2></div>
+              <label>
+                Name
+                <input placeholder="z.B. Mehl" value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })} required />
               </label>
-              <label className="grow">
-                Einheit
-                <select value={form.min_stock_unit_id}
-                  onChange={(e) => setForm({ ...form, min_stock_unit_id: e.target.value })}>
-                  <option value="">– Basiseinheit –</option>
-                  {units.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
-                </select>
-              </label>
-            </div>
-            <button className="btn primary"><Icon name="plus" size={16} />Anlegen</button>
-            <p className="muted small">
-              Der Gruppen-Bestand summiert nur Produkte, die zur gewählten Einheit passen
-              (Gewicht/Volumen/Stück). Produkte ordnest du im Produkt-Formular einer Gruppe zu.
-            </p>
-          </form>
-        )}
+              <div className="row">
+                <label className="grow">
+                  Mindestbestand (optional)
+                  <input type="number" step="any" value={form.min_stock}
+                    onChange={(e) => setForm({ ...form, min_stock: e.target.value })} placeholder="z.B. 2" />
+                </label>
+                <label className="grow">
+                  Einheit
+                  <select value={form.min_stock_unit_id}
+                    onChange={(e) => setForm({ ...form, min_stock_unit_id: e.target.value })}>
+                    <option value="">– Basiseinheit –</option>
+                    {units.map((u) => <option key={u.id} value={u.id}>{u.name}</option>)}
+                  </select>
+                </label>
+              </div>
+              <button className="btn primary"><Icon name="plus" size={16} />Anlegen</button>
+              <p className="muted small">
+                Der Gruppen-Bestand summiert nur Produkte, die zur gewählten Einheit passen.
+                Namen lassen sich in der Tabelle direkt ändern.
+              </p>
+            </form>
+          )}
+        </div>
       </div>
     </div>
   );