feat(mui): migrate Warehouse Inventory Form onto MUI kit

Replace legacy admin-* markup (motion.div header, admin-card, admin-table,
WarehouseMovementTable, LocationSelect, admin-form-input) with Box/Typography/
IconButton from @mui/material and Button/Card/TextField/Select/Field from the
kit. Item rows are inlined (grid) matching the receipt/issue form siblings.
All data logic (useQuery, useApiMutation, validate, handleSubmit, navigate,
hasPermission guard, Czech alerts) preserved verbatim.

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

src/admin/pages/WarehouseInventoryForm.tsx

@@ -1,18 +1,20 @@
-import { useState } from "react";
-import { useNavigate, Link } from "react-router-dom";
+import { useState, useId, useRef } from "react";
+import { useNavigate, Link as RouterLink } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { motion } from "framer-motion";
-import FormField from "../components/FormField";
 import ItemPicker from "../components/warehouse/ItemPicker";
-import LocationSelect from "../components/warehouse/LocationSelect";
-import WarehouseMovementTable from "../components/warehouse/WarehouseMovementTable";
-import { warehouseLocationListOptions } from "../lib/queries/warehouse";
-import type { WarehouseLocation } from "../lib/queries/warehouse";
-
+import {
+  warehouseLocationListOptions,
+  type WarehouseLocation,
+} from "../lib/queries/warehouse";
 import { useApiMutation } from "../lib/queries/mutations";
+import { Button, Card, TextField, Select, Field } from "../ui";
 
 interface InventoryItem {
   key: string;
@@ -21,22 +23,63 @@ interface InventoryItem {
   actual_qty: number;
 }
 
-const defaultInventoryItem = () => ({
-  item_id: null,
-  location_id: null,
-  actual_qty: 0,
-});
+const BackIcon = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M19 12H5M12 19l-7-7 7-7" />
+  </svg>
+);
+
+const RemoveIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const PlusIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
 
 export default function WarehouseInventoryForm() {
   const alert = useAlert();
   const { hasPermission } = useAuth();
   const navigate = useNavigate();
 
+  const baseId = useId();
+  const counterRef = useRef(0);
+  const nextKey = () => `${baseId}-item-${counterRef.current++}`;
+
   const [items, setItems] = useState<InventoryItem[]>([]);
   const [notes, setNotes] = useState("");
   const [saving, setSaving] = useState(false);
 
-  const { data: locations = [] } = useQuery(warehouseLocationListOptions());
+  const { data: locations } = useQuery(warehouseLocationListOptions());
 
   if (!hasPermission("warehouse.inventory")) return <Forbidden />;
 
@@ -90,151 +133,171 @@ export default function WarehouseInventoryForm() {
     }
   };
 
+  const addItem = () => {
+    setItems((prev) => [
+      ...prev,
+      { key: nextKey(), item_id: null, location_id: null, actual_qty: 0 },
+    ]);
+  };
+
+  const removeItem = (index: number) => {
+    setItems((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const updateItem = (
+    index: number,
+    field: keyof InventoryItem,
+    value: unknown,
+  ) => {
+    setItems((prev) => {
+      const updated = [...prev];
+      updated[index] = { ...updated[index], [field]: value };
+      return updated;
+    });
+  };
+
+  const locationOptions = [
+    { value: "", label: "-- bez lokace --" },
+    ...(locations ?? []).map((loc: WarehouseLocation) => ({
+      value: String(loc.id),
+      label: `${loc.code} - ${loc.name}`,
+    })),
+  ];
+
   return (
-    <div>
+    <Box>
       {/* Header */}
       <motion.div
-        className="admin-page-header"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25 }}
       >
-        <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
-          <Link
-            to="/warehouse/inventory"
-            className="admin-btn-icon"
-            title="Zpět na seznam"
-            aria-label="Zpět na seznam"
-          >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "flex-start",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            gap: 2,
+            mb: 3,
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1.5 }}>
+            <IconButton
+              component={RouterLink}
+              to="/warehouse/inventory"
+              title="Zpět na seznam"
+              aria-label="Zpět na seznam"
             >
-              <path d="M19 12H5M12 19l-7-7 7-7" />
-            </svg>
-          </Link>
-          <div>
-            <h1 className="admin-page-title">Nová inventura</h1>
-          </div>
-        </div>
-        <div className="admin-page-actions">
-          <button
-            type="button"
-            onClick={handleSubmit}
-            className="admin-btn admin-btn-primary"
-            disabled={saving}
-          >
-            {saving ? "Ukládání..." : "Vytvořit inventuru"}
-          </button>
-        </div>
+              {BackIcon}
+            </IconButton>
+            <Typography variant="h4">Nová inventura</Typography>
+          </Box>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Button onClick={handleSubmit} disabled={saving}>
+              {saving ? "Ukládání..." : "Vytvořit inventuru"}
+            </Button>
+          </Box>
+        </Box>
       </motion.div>
 
       {/* Notes */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Základní údaje</h3>
-          <FormField label="Poznámky">
-            <textarea
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Základní údaje
+          </Typography>
+          <Field label="Poznámky">
+            <TextField
+              multiline
+              minRows={3}
               value={notes}
               onChange={(e) => setNotes(e.target.value)}
-              className="admin-form-input"
-              rows={3}
               placeholder="Volitelné poznámky k inventuře"
             />
-          </FormField>
-        </div>
+          </Field>
+        </Card>
       </motion.div>
 
       {/* Lines */}
       <motion.div
-        className="admin-card"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.08 }}
       >
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Položky</h3>
-          <WarehouseMovementTable<InventoryItem>
-            items={items}
-            onChange={setItems}
-            mode="inventory"
-            defaultItem={defaultInventoryItem}
-            renderHeader={() => (
-              <>
-                <th className="admin-warehouse-col-item">Položka</th>
-                <th className="admin-warehouse-col-location">Lokace</th>
-                <th className="admin-warehouse-col-qty">Skutečné množství</th>
-                <th>Akce</th>
-              </>
-            )}
-            renderRow={(item, _index, updateItem, removeItem) => (
-              <>
-                <td className="admin-warehouse-col-item">
-                  <ItemPicker
-                    value={item.item_id}
-                    onChange={(id) => updateItem("item_id", id)}
-                  />
-                </td>
-                <td className="admin-warehouse-col-location">
-                  <LocationSelect
-                    value={item.location_id}
-                    onChange={(locId) => updateItem("location_id", locId)}
-                  />
-                </td>
-                <td className="admin-warehouse-col-qty">
-                  <input
-                    type="number"
-                    className="admin-form-input"
-                    value={item.actual_qty || ""}
-                    onChange={(e) =>
-                      updateItem("actual_qty", Number(e.target.value))
-                    }
-                    min="0"
-                    step="0.001"
-                    inputMode="decimal"
-                    pattern="[0-9]+([\.,][0-9]+)?"
-                    aria-label={`Skutečné množství, řádek ${_index + 1}`}
-                  />
-                </td>
-                <td>
-                  <div className="admin-table-actions">
-                    <button
-                      type="button"
-                      className="admin-btn-icon danger"
-                      onClick={removeItem}
-                      title="Odebrat řádek"
-                      aria-label="Odebrat řádek"
-                    >
-                      <svg
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      >
-                        <line x1="18" y1="6" x2="6" y2="18" />
-                        <line x1="6" y1="6" x2="18" y2="18" />
-                      </svg>
-                    </button>
-                  </div>
-                </td>
-              </>
-            )}
-          />
-        </div>
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Položky
+          </Typography>
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+            {items.map((item, index) => (
+              <Box
+                key={item.key}
+                sx={{
+                  display: "grid",
+                  gridTemplateColumns: {
+                    xs: "1fr",
+                    md: "minmax(180px, 2fr) minmax(140px, 1.5fr) 120px auto",
+                  },
+                  gap: 1,
+                  alignItems: "start",
+                }}
+              >
+                <ItemPicker
+                  value={item.item_id}
+                  onChange={(id) => updateItem(index, "item_id", id)}
+                />
+                <Select
+                  value={
+                    item.location_id === null ? "" : String(item.location_id)
+                  }
+                  onChange={(val) =>
+                    updateItem(index, "location_id", val ? Number(val) : null)
+                  }
+                  options={locationOptions}
+                />
+                <TextField
+                  type="number"
+                  value={item.actual_qty || ""}
+                  onChange={(e) =>
+                    updateItem(index, "actual_qty", Number(e.target.value))
+                  }
+                  inputProps={{
+                    min: 0,
+                    step: 0.001,
+                    inputMode: "decimal",
+                    pattern: "[0-9]+([\\.,][0-9]+)?",
+                    "aria-label": `Skutečné množství, řádek ${index + 1}`,
+                  }}
+                  placeholder="Skutečné množství"
+                />
+                <IconButton
+                  color="error"
+                  onClick={() => removeItem(index)}
+                  title="Odebrat řádek"
+                  aria-label="Odebrat řádek"
+                  sx={{ justifySelf: { xs: "start", md: "center" } }}
+                >
+                  {RemoveIcon}
+                </IconButton>
+              </Box>
+            ))}
+          </Box>
+          <Button
+            variant="outlined"
+            color="inherit"
+            startIcon={PlusIcon}
+            onClick={addItem}
+            sx={{ mt: 2 }}
+          >
+            Přidat položku
+          </Button>
+        </Card>
       </motion.div>
-    </div>
+    </Box>
   );
 }