feat(mui): migrate WarehouseReceiptDetail onto MUI kit

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

src/admin/pages/WarehouseReceiptDetail.tsx

@@ -1,24 +1,41 @@
 import { useState } from "react";
-import { useParams, useNavigate, Link } from "react-router-dom";
+import { useParams, 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 ConfirmModal from "../components/ConfirmModal";
-import FormField from "../components/FormField";
 
 import { formatCurrency, formatDate } from "../utils/formatters";
 import {
   warehouseReceiptDetailOptions,
   type WarehouseReceipt,
+  type WarehouseReceiptItem,
+  type WarehouseReceiptAttachment,
 } from "../lib/queries/warehouse";
 import { useApiMutation } from "../lib/queries/mutations";
+import {
+  Button,
+  Card,
+  DataTable,
+  StatusChip,
+  EmptyState,
+  LoadingState,
+  PageHeader,
+  ConfirmDialog,
+  type DataColumn,
+} from "../ui";
 
-const STATUS_BADGE: Record<string, string> = {
+const STATUS_COLOR: Record<
-  DRAFT: "admin-badge-warning",
+  string,
-  CONFIRMED: "admin-badge-active",
+  "default" | "success" | "error" | "warning" | "info"
-  CANCELLED: "admin-badge-danger",
+> = {
+  DRAFT: "warning",
+  CONFIRMED: "success",
+  CANCELLED: "error",
 };
 
 const STATUS_LABEL: Record<string, string> = {
@@ -33,6 +50,35 @@ function formatFileSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
+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 TrashIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </svg>
+);
+
 export default function WarehouseReceiptDetail() {
   const { id } = useParams();
   const alert = useAlert();
@@ -122,44 +168,30 @@ export default function WarehouseReceiptDetail() {
   const cancelling = cancelMutation.isPending;
 
   if (isPending) {
-    return (
+    return <LoadingState />;
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
   }
 
   if (error || !receipt) {
     return (
-      <div>
+      <Box>
-        <div className="admin-page-header">
+        <PageHeader
-          <div>
+          title="Příjemka"
-            <Link
+          actions={
+            <Button
+              component={RouterLink}
               to="/warehouse/receipts"
-              className="admin-btn-icon"
+              variant="outlined"
-              title="Zpět na seznam"
+              color="inherit"
+              startIcon={BackIcon}
             >
-              <svg
+              Zpět
-                width="20"
+            </Button>
-                height="20"
+          }
-                viewBox="0 0 24 24"
+        />
-                fill="none"
+        <Card>
-                stroke="currentColor"
+          <EmptyState title="Doklad nebyl nalezen." />
-                strokeWidth="2"
+        </Card>
-              >
+      </Box>
-                <path d="M19 12H5M12 19l-7-7 7-7" />
-              </svg>
-            </Link>
-          </div>
-        </div>
-        <div className="admin-card">
-          <div className="admin-card-body">
-            <div className="admin-empty-state">
-              <p>Doklad nebyl nalezen.</p>
-            </div>
-          </div>
-        </div>
-      </div>
     );
   }
 
@@ -167,272 +199,310 @@ export default function WarehouseReceiptDetail() {
   const items = r.items ?? [];
   const attachments = r.attachments ?? [];
 
+  const itemColumns: DataColumn<WarehouseReceiptItem>[] = [
+    {
+      key: "item",
+      header: "Položka",
+      width: "25%",
+      bold: true,
+      render: (row) => row.item?.name || `ID: ${row.item_id}`,
+    },
+    {
+      key: "quantity",
+      header: "Množství",
+      width: "12%",
+      mono: true,
+      render: (row) => String(Number(row.quantity)),
+    },
+    {
+      key: "unit_price",
+      header: "Cena/ks",
+      width: "16%",
+      mono: true,
+      render: (row) => formatCurrency(Number(row.unit_price), "CZK"),
+    },
+    {
+      key: "total",
+      header: "Celkem",
+      width: "16%",
+      mono: true,
+      bold: true,
+      render: (row) =>
+        formatCurrency(Number(row.quantity) * Number(row.unit_price), "CZK"),
+    },
+    {
+      key: "location",
+      header: "Lokace",
+      width: "16%",
+      mono: true,
+      render: (row) => row.location?.code || "—",
+    },
+    {
+      key: "notes",
+      header: "Poznámka",
+      width: "15%",
+      render: (row) => row.notes || "—",
+    },
+  ];
+
+  const attachmentColumns: DataColumn<WarehouseReceiptAttachment>[] = [
+    {
+      key: "file_name",
+      header: "Název souboru",
+      width: "45%",
+      bold: true,
+      render: (att) => (
+        <a
+          href={`/api/admin/warehouse/receipts/${r.id}/attachments/${att.id}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {att.file_name}
+        </a>
+      ),
+    },
+    {
+      key: "file_size",
+      header: "Velikost",
+      width: "15%",
+      mono: true,
+      render: (att) => formatFileSize(att.file_size),
+    },
+    {
+      key: "created_at",
+      header: "Datum",
+      width: "20%",
+      mono: true,
+      render: (att) => formatDate(att.created_at),
+    },
+    {
+      key: "actions",
+      header: "Akce",
+      width: "20%",
+      render: (att) =>
+        r.status === "DRAFT" && canOperate ? (
+          <IconButton
+            size="small"
+            onClick={() => handleDeleteAttachment(att.id)}
+            title="Smazat přílohu"
+            aria-label="Smazat přílohu"
+            color="error"
+          >
+            {TrashIcon}
+          </IconButton>
+        ) : null,
+    },
+  ];
+
   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" }}>
+        <PageHeader
-          <Link
+          title={r.receipt_number || "Nový doklad"}
-            to="/warehouse/receipts"
+          subtitle={r.supplier?.name}
-            className="admin-btn-icon"
+          actions={
-            title="Zpět na seznam"
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            aria-label="Zpět na seznam"
+              <Button
-          >
+                component={RouterLink}
-            <svg
+                to="/warehouse/receipts"
-              width="20"
+                variant="outlined"
-              height="20"
+                color="inherit"
-              viewBox="0 0 24 24"
+                startIcon={BackIcon}
-              fill="none"
+              >
-              stroke="currentColor"
+                Zpět
-              strokeWidth="2"
+              </Button>
-            >
+              <StatusChip
-              <path d="M19 12H5M12 19l-7-7 7-7" />
+                label={STATUS_LABEL[r.status] ?? r.status}
-            </svg>
+                color={STATUS_COLOR[r.status] ?? "default"}
-          </Link>
+              />
-          <div>
+              {canOperate && r.status === "DRAFT" && (
-            <h1 className="admin-page-title">
+                <>
-              {r.receipt_number || "Nový doklad"}
+                  <Button
-            </h1>
+                    variant="outlined"
-            {r.supplier?.name && (
+                    color="inherit"
-              <p className="admin-page-subtitle">{r.supplier.name}</p>
+                    onClick={() => navigate(`/warehouse/receipts/${r.id}/edit`)}
-            )}
+                  >
-          </div>
+                    Upravit
-          <span
+                  </Button>
-            className={`admin-badge ${STATUS_BADGE[r.status] ?? ""}`}
+                  <Button onClick={handleConfirm} disabled={confirming}>
-            style={{ marginLeft: "0.5rem" }}
+                    {confirming ? "Potvrzování..." : "Potvrdit"}
-          >
+                  </Button>
-            {STATUS_LABEL[r.status] ?? r.status}
+                  <Button
-          </span>
+                    variant="outlined"
-        </div>
+                    color="error"
-        {canOperate && (
+                    onClick={() => setCancelConfirm(true)}
-          <div className="admin-page-actions">
+                  >
-            {r.status === "DRAFT" && (
+                    Zrušit
-              <>
+                  </Button>
-                <button
+                </>
-                  onClick={() => navigate(`/warehouse/receipts/${r.id}/edit`)}
+              )}
-                  className="admin-btn admin-btn-secondary"
+              {canOperate && r.status === "CONFIRMED" && (
-                >
+                <Button
-                  Upravit
+                  variant="outlined"
-                </button>
+                  color="error"
-                <button
-                  onClick={handleConfirm}
-                  className="admin-btn admin-btn-primary"
-                  disabled={confirming}
-                >
-                  {confirming ? "Potvrzování..." : "Potvrdit"}
-                </button>
-                <button
                   onClick={() => setCancelConfirm(true)}
-                  className="admin-btn admin-btn-secondary"
-                  style={{ color: "var(--danger)" }}
                 >
                   Zrušit
-                </button>
+                </Button>
-              </>
+              )}
-            )}
+            </Box>
-            {r.status === "CONFIRMED" && (
+          }
-              <button
+        />
-                onClick={() => setCancelConfirm(true)}
-                className="admin-btn admin-btn-secondary"
-                style={{ color: "var(--danger)" }}
-              >
-                Zrušit
-              </button>
-            )}
-          </div>
-        )}
       </motion.div>
 
-      {/* Header info */}
+      {/* Basic info */}
       <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">
+        <Card sx={{ mb: 3 }}>
-          <h3 className="admin-card-title">Základní údaje</h3>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
-          <div className="admin-form">
+            Základní údaje
-            <div className="admin-form-row">
+          </Typography>
-              <FormField label="Číslo dokladu">
+          <Box
-                <div className="admin-mono fw-500">
+            sx={{
-                  {r.receipt_number || "—"}
+              display: "grid",
-                </div>
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
-              </FormField>
+              gap: 2,
-              <FormField label="Dodavatel">
+            }}
-                <div className="admin-mono fw-500">
+          >
-                  {r.supplier?.name || "—"}
+            <Box>
-                </div>
+              <Typography variant="caption" color="text.secondary">
-              </FormField>
+                Číslo dokladu
-            </div>
+              </Typography>
-            <div className="admin-form-row">
+              <Typography
-              <FormField label="Číslo dodacího listu">
+                variant="body2"
-                <div className="admin-mono">
+                sx={{
-                  {r.delivery_note_number || "—"}
+                  fontFamily: "'DM Mono', Menlo, monospace",
-                </div>
+                  fontWeight: 500,
-              </FormField>
+                }}
-              <FormField label="Datum dodacího listu">
+              >
-                <div className="admin-mono">
+                {r.receipt_number || "—"}
-                  {formatDate(r.delivery_note_date)}
+              </Typography>
-                </div>
+            </Box>
-              </FormField>
+            <Box>
-            </div>
+              <Typography variant="caption" color="text.secondary">
-            <div className="admin-form-row">
+                Dodavatel
-              <FormField label="Přijal">
+              </Typography>
-                <div className="admin-mono fw-500">
+              <Typography
-                  {r.received_by_user
+                variant="body2"
-                    ? `${r.received_by_user.first_name} ${r.received_by_user.last_name}`
+                sx={{
-                    : "—"}
+                  fontFamily: "'DM Mono', Menlo, monospace",
-                </div>
+                  fontWeight: 500,
-              </FormField>
+                }}
-              <FormField label="Vytvořeno">
+              >
-                <div className="admin-mono">{formatDate(r.created_at)}</div>
+                {r.supplier?.name || "—"}
-              </FormField>
+              </Typography>
-            </div>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Číslo dodacího listu
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {r.delivery_note_number || "—"}
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Datum dodacího listu
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {formatDate(r.delivery_note_date)}
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Přijal
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 500,
+                }}
+              >
+                {r.received_by_user
+                  ? `${r.received_by_user.first_name} ${r.received_by_user.last_name}`
+                  : "—"}
+              </Typography>
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Vytvořeno
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{ fontFamily: "'DM Mono', Menlo, monospace" }}
+              >
+                {formatDate(r.created_at)}
+              </Typography>
+            </Box>
             {r.notes && (
-              <FormField label="Poznámky">
+              <Box sx={{ gridColumn: { sm: "1 / -1" } }}>
-                <div style={{ whiteSpace: "pre-wrap" }}>{r.notes}</div>
+                <Typography variant="caption" color="text.secondary">
-              </FormField>
+                  Poznámky
+                </Typography>
+                <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
+                  {r.notes}
+                </Typography>
+              </Box>
             )}
-          </div>
+          </Box>
-        </div>
+        </Card>
       </motion.div>
 
       {/* Lines table */}
       <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">
+        <Card sx={{ mb: 3 }}>
-          <h3 className="admin-card-title">Položky</h3>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
-          {items.length === 0 ? (
+            Položky
-            <div className="admin-empty-state">Žádné řádky</div>
+          </Typography>
-          ) : (
+          <DataTable<WarehouseReceiptItem>
-            <div className="admin-table-responsive">
+            columns={itemColumns}
-              <table className="admin-table">
+            rows={items}
-                <thead>
+            rowKey={(row) => row.id}
-                  <tr>
+            empty={<EmptyState title="Žádné řádky" />}
-                    <th>Položka</th>
+          />
-                    <th>Množství</th>
+        </Card>
-                    <th>Cena/ks</th>
-                    <th>Celkem</th>
-                    <th>Lokace</th>
-                    <th>Poznámka</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {items.map((item) => (
-                    <tr key={item.id}>
-                      <td className="fw-500">
-                        {item.item?.name || `ID: ${item.item_id}`}
-                      </td>
-                      <td className="admin-mono">{Number(item.quantity)}</td>
-                      <td className="admin-mono">
-                        {formatCurrency(Number(item.unit_price), "CZK")}
-                      </td>
-                      <td className="admin-mono fw-500">
-                        {formatCurrency(
-                          Number(item.quantity) * Number(item.unit_price),
-                          "CZK",
-                        )}
-                      </td>
-                      <td className="admin-mono">
-                        {item.location?.code || "—"}
-                      </td>
-                      <td>{item.notes || "—"}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
       </motion.div>
 
       {/* Attachments */}
       <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">
+        <Card sx={{ mb: 3 }}>
-          <h3 className="admin-card-title">Přílohy</h3>
+          <Typography variant="subtitle2" sx={{ mb: 2, fontWeight: 600 }}>
-          {attachments.length === 0 ? (
+            Přílohy
-            <div className="admin-empty-state">Žádné přílohy</div>
+          </Typography>
-          ) : (
+          <DataTable<WarehouseReceiptAttachment>
-            <div className="admin-table-responsive">
+            columns={attachmentColumns}
-              <table className="admin-table">
+            rows={attachments}
-                <thead>
+            rowKey={(att) => att.id}
-                  <tr>
+            empty={<EmptyState title="Žádné přílohy" />}
-                    <th>Název souboru</th>
+          />
-                    <th>Velikost</th>
+        </Card>
-                    <th>Datum</th>
-                    <th>Akce</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {attachments.map((att) => (
-                    <tr key={att.id}>
-                      <td className="fw-500">
-                        <a
-                          href={`/api/admin/warehouse/receipts/${r.id}/attachments/${att.id}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {att.file_name}
-                        </a>
-                      </td>
-                      <td className="admin-mono">
-                        {formatFileSize(att.file_size)}
-                      </td>
-                      <td className="admin-mono">
-                        {formatDate(att.created_at)}
-                      </td>
-                      <td>
-                        <div className="admin-table-actions">
-                          {r.status === "DRAFT" && canOperate && (
-                            <button
-                              onClick={() => handleDeleteAttachment(att.id)}
-                              className="admin-btn-icon danger"
-                              title="Smazat přílohu"
-                              aria-label="Smazat přílohu"
-                            >
-                              <svg
-                                width="18"
-                                height="18"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                              >
-                                <polyline points="3 6 5 6 21 6" />
-                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                              </svg>
-                            </button>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
       </motion.div>
 
-      {/* Cancel confirmation modal */}
+      {/* Cancel confirmation dialog */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={cancelConfirm}
         onClose={() => setCancelConfirm(false)}
         onConfirm={handleCancel}
@@ -442,6 +512,6 @@ export default function WarehouseReceiptDetail() {
         confirmVariant="danger"
         loading={cancelling}
       />
-    </div>
+    </Box>
   );
 }