Web: Chargen zeigen ihren Lagerort (und lassen ihn aendern)

Die Chargen-Tabelle hatte keine Lagerort-Spalte - dadurch wirkte es, als koenne
man Chargen keinem Ort zuordnen (geht laengst ueber den Lagerort beim Einlagern).
Neue Spalte "Lagerort" zeigt den Ort je Charge; beim Bearbeiten laesst er sich
per Dropdown aendern (z.B. 2 Glaeser Pesto in Schrank A, 2 in Schrank B).

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

web/src/pages/ProductForm.jsx

@@ -15,6 +15,7 @@ import LocationMinStock from "../components/LocationMinStock";
 import { DynamicFields, FIELD_TYPES } from "../fields";
 import ObjektBestand from "../components/ObjektBestand";
 import Einzelstuecke from "../components/Einzelstuecke";
+import { locationOptions, locationPathById } from "../locationPath";
 import {
   daysUntil, expiryRowClass, fmt, fromMonthInput, gebinde, isExpired, relativeExpiry,
   toMonthInput, unitShort,
@@ -996,6 +997,7 @@ export default function ProductForm() {
           <LotsCard
             product={product}
             lots={lots}
+            locations={locations}
             baseShort={baseShort}
             warnDays={warnDays}
             isAdmin={isAdmin}
@@ -1063,12 +1065,12 @@ export default function ProductForm() {
 }
 
 /** Chargen-Karte mit Bearbeiten/Löschen. Bearbeitet wird in der Produkteinheit. */
-function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onError }) {
+function LotsCard({ product, lots, locations = [], baseShort, warnDays, isAdmin, onChanged, onError }) {
   const confirm = useConfirm();
   const toast = useToast();
   const { formatBestBefore } = useSettings();
   const [editId, setEditId] = useState(null);
-  const [draft, setDraft] = useState({ quantity: "", best_before: "", precision: "day" });
+  const [draft, setDraft] = useState({ quantity: "", best_before: "", precision: "day", location_id: "" });
   // In welcher Einheit die Menge bearbeitet wird: "unit" oder "package".
   const [editUnit, setEditUnit] = useState("unit");
 
@@ -1107,6 +1109,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onEr
           ? toMonthInput(l.best_before)
           : l.best_before || "",
       precision: l.best_before_precision === "month" ? "month" : "day",
+      location_id: l.location_id || "",
     });
   }
 
@@ -1127,6 +1130,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onEr
           (draft.precision === "month" ? fromMonthInput(draft.best_before) : draft.best_before) ||
           null,
         best_before_precision: draft.precision || "day",
+        location_id: draft.location_id || null,
       });
       setEditId(null);
       await onChanged();
@@ -1165,6 +1169,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onEr
             <tr>
               <th className="num" style={{ minWidth: 150 }}>Menge</th>
               <th style={{ minWidth: 160 }}>MHD</th>
+              <th style={{ minWidth: 150 }}>Lagerort</th>
               <th>Eingelagert</th>
               <th></th>
             </tr>
@@ -1219,6 +1224,21 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onEr
                       </>
                     )}
                   </td>
+                  <td data-label="Lagerort">
+                    {editing ? (
+                      <select value={draft.location_id} style={{ marginTop: 0, minWidth: 140 }}
+                        onChange={(e) => setDraft({ ...draft, location_id: e.target.value })}>
+                        <option value="">– ohne –</option>
+                        {locationOptions(locations).map((o) => (
+                          <option key={o.id} value={o.id}>{o.label}</option>
+                        ))}
+                      </select>
+                    ) : (
+                      l.location_id
+                        ? (locationPathById(l.location_id, locations) || "?")
+                        : <span className="muted">–</span>
+                    )}
+                  </td>
                   <td data-label="Eingelagert" className="muted">{new Date(l.created_at).toLocaleDateString("de-DE")}</td>
                   <td className="num">
                     {isAdmin && (editing ? (
@@ -1240,7 +1260,7 @@ function LotsCard({ product, lots, baseShort, warnDays, isAdmin, onChanged, onEr
                 </tr>
               );
             })}
-            {lots.length === 0 && <tr><td colSpan={4} className="empty">Keine Chargen im Bestand.</td></tr>}
+            {lots.length === 0 && <tr><td colSpan={5} className="empty">Keine Chargen im Bestand.</td></tr>}
           </tbody>
         </table>
       </div>