feat(mui): migrate WarehouseReceiptForm onto MUI kit

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

src/admin/pages/WarehouseReceiptForm.tsx

@@ -1,20 +1,34 @@
 import { useState, useEffect, useRef, useCallback, useId } from "react";
-import { useParams, useNavigate, Link } from "react-router-dom";
+import { useParams, useNavigate, Link as RouterLink } from "react-router-dom";
 import { useQuery, useQueryClient } 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 CircularProgress from "@mui/material/CircularProgress";
 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 AdminDatePicker from "../components/AdminDatePicker";
-import SupplierSelect from "../components/warehouse/SupplierSelect";
-import WarehouseMovementTable, {
-  type MovementItem,
-} from "../components/warehouse/WarehouseMovementTable";
+import ItemPicker from "../components/warehouse/ItemPicker";
 
 import apiFetch from "../utils/api";
-import { warehouseReceiptDetailOptions } from "../lib/queries/warehouse";
+import {
+  warehouseReceiptDetailOptions,
+  warehouseSupplierListOptions,
+  warehouseLocationListOptions,
+  type WarehouseSupplier,
+  type WarehouseLocation,
+} from "../lib/queries/warehouse";
 import { useApiMutation } from "../lib/queries/mutations";
+import {
+  Button,
+  Card,
+  TextField,
+  Select,
+  DateField,
+  Field,
+  LoadingState,
+} from "../ui";
 
 interface ReceiptForm {
   supplier_id: number | null;
@@ -23,6 +37,84 @@ interface ReceiptForm {
   notes: string;
 }
 
+interface MovementItem {
+  key: string;
+  item_id: number | null;
+  item_name?: string;
+  quantity: number;
+  unit_price: number;
+  location_id: number | null;
+  batch_id: number | null;
+  reservation_id: number | null;
+  notes: string | null;
+}
+
+function parseDecimal(raw: string): number {
+  const cleaned = raw.replace(/[eE+\-]/g, "");
+  const n = Number(cleaned);
+  return Number.isFinite(n) ? n : 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>
+);
+
+const UploadIcon = (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="17 8 12 3 7 8" />
+    <line x1="12" y1="3" x2="12" y2="15" />
+  </svg>
+);
+
 export default function WarehouseReceiptForm() {
   const { id } = useParams();
   const alert = useAlert();
@@ -68,6 +160,13 @@ export default function WarehouseReceiptForm() {
     warehouseReceiptDetailOptions(isEdit ? id : undefined),
   );
 
+  const { data: suppliersData } = useQuery(
+    warehouseSupplierListOptions({ perPage: 100 }),
+  );
+  const suppliers: WarehouseSupplier[] = suppliersData?.data ?? [];
+
+  const { data: locations } = useQuery(warehouseLocationListOptions());
+
   useEffect(() => {
     formInitialized.current = false;
   }, [id]);
@@ -119,6 +218,22 @@ export default function WarehouseReceiptForm() {
     ]);
   };
 
+  const removeItem = (index: number) => {
+    setItems((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const updateItem = (
+    index: number,
+    field: keyof MovementItem,
+    value: unknown,
+  ) => {
+    setItems((prev) => {
+      const updated = [...prev];
+      updated[index] = { ...updated[index], [field]: value };
+      return updated;
+    });
+  };
+
   const validate = (): boolean => {
     const newErrors: Record<string, string> = {};
     const validItems = items.filter((l) => l.item_id !== null);
@@ -275,167 +390,263 @@ export default function WarehouseReceiptForm() {
   }, []);
 
   if (isEdit && isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
+  const supplierOptions = [
+    { value: "", label: "-- bez dodavatele --" },
+    ...suppliers.map((s) => ({
+      value: String(s.id),
+      label: `${s.name}${s.ico ? ` (${s.ico})` : ""}`,
+    })),
+  ];
+
+  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/receipts"
-            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/receipts"
+              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">
+              {BackIcon}
+            </IconButton>
+            <Typography variant="h4">
               {isEdit ? "Upravit příjmový doklad" : "Nový příjmový doklad"}
-            </h1>
-          </div>
-        </div>
-        <div className="admin-page-actions">
-          <button
-            type="button"
-            onClick={handleSaveDraft}
-            className="admin-btn admin-btn-secondary"
-            disabled={saving}
-          >
-            {saving ? "Ukládání..." : "Uložit jako návrh"}
-          </button>
-          <button
-            type="button"
-            onClick={handleSaveAndConfirm}
-            className="admin-btn admin-btn-primary"
-            disabled={saving}
-          >
-            {saving ? "Ukládání..." : "Uložit a potvrdit"}
-          </button>
-        </div>
+            </Typography>
+          </Box>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <Button
+              variant="outlined"
+              color="inherit"
+              onClick={handleSaveDraft}
+              disabled={saving}
+            >
+              {saving ? "Ukládání..." : "Uložit jako návrh"}
+            </Button>
+            <Button onClick={handleSaveAndConfirm} disabled={saving}>
+              {saving ? "Ukládání..." : "Uložit a potvrdit"}
+            </Button>
+          </Box>
+        </Box>
       </motion.div>
 
       {/* Header fields */}
       <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>
-          <div className="admin-form">
-            <FormField label="Dodavatel">
-              <SupplierSelect
-                value={form.supplier_id}
-                onChange={(val) =>
-                  setForm((prev) => ({ ...prev, supplier_id: val }))
-                }
-              />
-            </FormField>
-            <div className="admin-form-row">
-              <FormField label="Číslo dodacího listu">
-                <input
-                  type="text"
-                  value={form.delivery_note_number}
-                  onChange={(e) =>
-                    setForm((prev) => ({
-                      ...prev,
-                      delivery_note_number: e.target.value,
-                    }))
-                  }
-                  className="admin-form-input"
-                  placeholder="Např. DL-2024-001"
-                />
-              </FormField>
-              <FormField label="Datum dodacího listu">
-                <AdminDatePicker
-                  mode="date"
-                  value={form.delivery_note_date}
-                  onChange={(val) =>
-                    setForm((prev) => ({
-                      ...prev,
-                      delivery_note_date: val,
-                    }))
-                  }
-                />
-              </FormField>
-            </div>
-            <FormField label="Poznámky">
-              <textarea
-                value={form.notes}
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Základní údaje
+          </Typography>
+          <Field label="Dodavatel">
+            <Select
+              value={form.supplier_id === null ? "" : String(form.supplier_id)}
+              onChange={(val) =>
+                setForm((prev) => ({
+                  ...prev,
+                  supplier_id: val ? Number(val) : null,
+                }))
+              }
+              options={supplierOptions}
+            />
+          </Field>
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Field label="Číslo dodacího listu">
+              <TextField
+                value={form.delivery_note_number}
                 onChange={(e) =>
-                  setForm((prev) => ({ ...prev, notes: e.target.value }))
+                  setForm((prev) => ({
+                    ...prev,
+                    delivery_note_number: e.target.value,
+                  }))
                 }
-                className="admin-form-input"
-                rows={3}
-                placeholder="Volitelné poznámky"
+                placeholder="Např. DL-2024-001"
               />
-            </FormField>
-          </div>
-        </div>
+            </Field>
+            <Field label="Datum dodacího listu">
+              <DateField
+                value={form.delivery_note_date}
+                onChange={(val) =>
+                  setForm((prev) => ({
+                    ...prev,
+                    delivery_note_date: val,
+                  }))
+                }
+              />
+            </Field>
+          </Box>
+          <Field label="Poznámky">
+            <TextField
+              multiline
+              minRows={3}
+              value={form.notes}
+              onChange={(e) =>
+                setForm((prev) => ({ ...prev, notes: e.target.value }))
+              }
+              placeholder="Volitelné poznámky"
+            />
+          </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>
+        <Card sx={{ mb: 3 }}>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+            Položky
+          </Typography>
           {errors.items && (
-            <div
-              className="admin-form-error"
-              style={{ marginBottom: "0.75rem" }}
+            <Typography
+              variant="caption"
+              color="error"
+              sx={{ display: "block", mb: 1.5 }}
             >
               {errors.items}
-            </div>
+            </Typography>
           )}
-          <WarehouseMovementTable
-            items={items}
-            onChange={setItems}
-            mode="receipt"
-          />
-        </div>
+          <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) 110px 110px minmax(140px, 1.2fr) minmax(140px, 1.5fr) auto",
+                  },
+                  gap: 1,
+                  alignItems: "start",
+                }}
+              >
+                <ItemPicker
+                  value={item.item_id}
+                  itemName={item.item_name}
+                  onChange={(id) => updateItem(index, "item_id", id)}
+                />
+                <TextField
+                  type="number"
+                  value={item.quantity || ""}
+                  onChange={(e) =>
+                    updateItem(index, "quantity", parseDecimal(e.target.value))
+                  }
+                  inputProps={{
+                    min: 0,
+                    step: 0.001,
+                    inputMode: "decimal",
+                    pattern: "[0-9]+([\\.,][0-9]+)?",
+                    "aria-label": `Množství, řádek ${index + 1}`,
+                  }}
+                  placeholder="Množství"
+                />
+                <TextField
+                  type="number"
+                  value={item.unit_price || ""}
+                  onChange={(e) =>
+                    updateItem(
+                      index,
+                      "unit_price",
+                      parseDecimal(e.target.value),
+                    )
+                  }
+                  inputProps={{
+                    min: 0,
+                    step: 0.01,
+                    inputMode: "decimal",
+                    pattern: "[0-9]+([\\.,][0-9]+)?",
+                    "aria-label": `Cena za kus, řádek ${index + 1}`,
+                  }}
+                  placeholder="Cena/ks"
+                />
+                <Select
+                  value={
+                    item.location_id === null ? "" : String(item.location_id)
+                  }
+                  onChange={(val) =>
+                    updateItem(index, "location_id", val ? Number(val) : null)
+                  }
+                  options={locationOptions}
+                />
+                <TextField
+                  value={item.notes ?? ""}
+                  onChange={(e) => updateItem(index, "notes", e.target.value)}
+                  placeholder="Poznámka"
+                />
+                <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>
 
       {/* File upload — only in edit mode for existing receipts */}
       {isEdit && (
         <motion.div
-          className="admin-card"
           initial={{ opacity: 0, y: 12 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.25, delay: 0.1 }}
         >
-          <div className="admin-card-body">
-            <h3 className="admin-card-title">Přílohy</h3>
-            <div
-              className="admin-warehouse-upload"
+          <Card sx={{ mb: 3 }}>
+            <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
+              Přílohy
+            </Typography>
+            <Box
               onDrop={handleDrop}
               onDragOver={handleDragOver}
-              style={{ opacity: uploadingFiles ? 0.6 : 1 }}
               onClick={() => {
                 const input = document.createElement("input");
                 input.type = "file";
@@ -447,41 +658,46 @@ export default function WarehouseReceiptForm() {
                 };
                 input.click();
               }}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 1,
+                p: 4,
+                border: "2px dashed",
+                borderColor: "divider",
+                borderRadius: 1,
+                color: "text.secondary",
+                cursor: "pointer",
+                opacity: uploadingFiles ? 0.6 : 1,
+                transition: "border-color .2s, background-color .2s",
+                "&:hover": {
+                  borderColor: "primary.main",
+                  bgcolor: "action.hover",
+                },
+              }}
             >
               {uploadingFiles ? (
                 <>
-                  <div className="admin-spinner admin-spinner-sm" />
-                  <p style={{ marginTop: "0.5rem" }}>Nahrávání...</p>
+                  <CircularProgress size={28} />
+                  <Typography variant="body2">Nahrávání...</Typography>
                 </>
               ) : (
                 <>
-                  <svg
-                    width="32"
-                    height="32"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="admin-warehouse-upload-icon"
-                  >
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                    <polyline points="17 8 12 3 7 8" />
-                    <line x1="12" y1="3" x2="12" y2="15" />
-                  </svg>
-                  <p className="admin-warehouse-upload-text">
+                  {UploadIcon}
+                  <Typography variant="body2">
                     Přetáhněte soubory sem nebo klikněte pro výběr
-                  </p>
-                  <p className="admin-warehouse-upload-hint">
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary">
                     Dodací listy, faktury a další dokumenty
-                  </p>
+                  </Typography>
                 </>
               )}
-            </div>
-          </div>
+            </Box>
+          </Card>
         </motion.div>
       )}
-    </div>
+    </Box>
   );
 }