feat(mui): migrate WarehouseIssueDetail onto MUI kit

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

src/admin/pages/WarehouseIssueDetail.tsx

@@ -1,24 +1,39 @@
 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 { 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 {
   warehouseIssueDetailOptions,
   type WarehouseIssue,
+  type WarehouseIssueItem,
 } 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> = {
@@ -27,6 +42,19 @@ const STATUS_LABEL: Record<string, string> = {
   CANCELLED: "Zrušeno",
 };
 
+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>
+);
+
 export default function WarehouseIssueDetail() {
   const { id } = useParams();
   const alert = useAlert();
@@ -92,257 +120,290 @@ export default function WarehouseIssueDetail() {
   const cancelling = cancelMutation.isPending;
 
   if (isPending) {
-    return (
+    return <LoadingState />;
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
   }
 
   if (error || !issue) {
     return (
-      <div>
+      <Box>
-        <div className="admin-page-header">
+        <PageHeader
-          <div>
+          title="Výdejka"
-            <Link
+          actions={
+            <Button
+              component={RouterLink}
               to="/warehouse/issues"
-              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="Výdejka nebyla nalezena." />
-                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>Výdejka nebyla nalezena.</p>
-            </div>
-          </div>
-        </div>
-      </div>
     );
   }
 
   const iss = issue as WarehouseIssue;
   const items = iss.items ?? [];
 
+  const itemColumns: DataColumn<WarehouseIssueItem>[] = [
+    {
+      key: "item",
+      header: "Položka",
+      width: "20%",
+      bold: true,
+      render: (row) => row.item?.name || `ID: ${row.item_id}`,
+    },
+    {
+      key: "batch",
+      header: "Šarže",
+      width: "18%",
+      mono: true,
+      render: (row) =>
+        row.batch
+          ? `${formatDate(row.batch.received_at)} – ${formatCurrency(Number(row.batch.unit_price), "CZK")}`
+          : "—",
+    },
+    {
+      key: "quantity",
+      header: "Množství",
+      width: "10%",
+      mono: true,
+      render: (row) => String(Number(row.quantity)),
+    },
+    {
+      key: "unit_price",
+      header: "Cena/ks",
+      width: "13%",
+      mono: true,
+      render: (row) =>
+        row.batch ? formatCurrency(Number(row.batch.unit_price), "CZK") : "—",
+    },
+    {
+      key: "total",
+      header: "Celkem",
+      width: "13%",
+      mono: true,
+      bold: true,
+      render: (row) =>
+        row.batch
+          ? formatCurrency(
+              Number(row.quantity) * Number(row.batch.unit_price),
+              "CZK",
+            )
+          : "—",
+    },
+    {
+      key: "location",
+      header: "Lokace",
+      width: "10%",
+      mono: true,
+      render: (row) => row.location?.code || "—",
+    },
+    {
+      key: "reservation",
+      header: "Rezervace",
+      width: "10%",
+      mono: true,
+      render: (row) =>
+        row.reservation
+          ? `ID: ${row.reservation.id} (${Number(row.reservation.remaining_qty)} ks)`
+          : "—",
+    },
+    {
+      key: "notes",
+      header: "Poznámka",
+      width: "6%",
+      render: (row) => row.notes || "—",
+    },
+  ];
+
   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={iss.issue_number || "Nová výdejka"}
-            to="/warehouse/issues"
+          subtitle={
-            className="admin-btn-icon"
+            iss.project
-            title="Zpět na seznam"
+              ? `${iss.project.project_number} – ${iss.project.name}`
-            aria-label="Zpět na seznam"
+              : undefined
-          >
+          }
-            <svg
+          actions={
-              width="20"
+            <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-              height="20"
+              <Button
-              viewBox="0 0 24 24"
+                component={RouterLink}
-              fill="none"
+                to="/warehouse/issues"
-              stroke="currentColor"
+                variant="outlined"
-              strokeWidth="2"
+                color="inherit"
-            >
+                startIcon={BackIcon}
-              <path d="M19 12H5M12 19l-7-7 7-7" />
+              >
-            </svg>
+                Zpět
-          </Link>
+              </Button>
-          <div>
+              <StatusChip
-            <h1 className="admin-page-title">
+                label={STATUS_LABEL[iss.status] ?? iss.status}
-              {iss.issue_number || "Nová výdejka"}
+                color={STATUS_COLOR[iss.status] ?? "default"}
-            </h1>
+              />
-            {iss.project && (
+              {canOperate && iss.status === "DRAFT" && (
-              <p className="admin-page-subtitle">
+                <>
-                {iss.project.project_number} – {iss.project.name}
+                  <Button
-              </p>
+                    variant="outlined"
-            )}
+                    color="inherit"
-          </div>
+                    onClick={() => navigate(`/warehouse/issues/${iss.id}/edit`)}
-          <span
+                  >
-            className={`admin-badge ${STATUS_BADGE[iss.status] ?? ""}`}
+                    Upravit
-            style={{ marginLeft: "0.5rem" }}
+                  </Button>
-          >
+                  <Button onClick={handleConfirm} disabled={confirming}>
-            {STATUS_LABEL[iss.status] ?? iss.status}
+                    {confirming ? "Potvrzování..." : "Potvrdit"}
-          </span>
+                  </Button>
-        </div>
+                  <Button
-        {canOperate && (
+                    variant="outlined"
-          <div className="admin-page-actions">
+                    color="error"
-            {iss.status === "DRAFT" && (
+                    onClick={() => setCancelConfirm(true)}
-              <>
+                  >
-                <button
+                    Zrušit
-                  onClick={() => navigate(`/warehouse/issues/${iss.id}/edit`)}
+                  </Button>
-                  className="admin-btn admin-btn-secondary"
+                </>
-                >
+              )}
-                  Upravit
+              {canOperate && iss.status === "CONFIRMED" && (
-                </button>
+                <Button
-                <button
+                  variant="outlined"
-                  onClick={handleConfirm}
+                  color="error"
-                  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>
-            {iss.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 admin-form-row-3">
+          </Typography>
-              <FormField label="Číslo dokladu">
+          <Box
-                <div className="admin-mono fw-500">
+            sx={{
-                  {iss.issue_number || "—"}
+              display: "grid",
-                </div>
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr 1fr" },
-              </FormField>
+              gap: 2,
-              <FormField label="Projekt">
+            }}
-                <div>
+          >
-                  {iss.project ? (
+            <Box>
-                    <a
+              <Typography variant="caption" color="text.secondary">
-                      className="link-accent admin-mono fw-500"
+                Číslo dokladu
-                      href={`/projects/${iss.project.id}`}
+              </Typography>
-                    >
+              <Typography
-                      {iss.project.project_number} – {iss.project.name}
+                variant="body2"
-                    </a>
+                sx={{
-                  ) : (
+                  fontFamily: "'DM Mono', Menlo, monospace",
-                    "—"
+                  fontWeight: 500,
-                  )}
+                }}
-                </div>
+              >
-              </FormField>
+                {iss.issue_number || "—"}
-              <FormField label="Vydal">
+              </Typography>
-                <div className="admin-mono fw-500">
+            </Box>
-                  {iss.issued_by_user
+            <Box>
-                    ? `${iss.issued_by_user.first_name} ${iss.issued_by_user.last_name}`
+              <Typography variant="caption" color="text.secondary">
-                    : "—"}
+                Projekt
-                </div>
+              </Typography>
-              </FormField>
+              {iss.project ? (
-            </div>
+                <Typography
-            <div className="admin-form-row">
+                  variant="body2"
-              <FormField label="Vytvořeno">
+                  component="a"
-                <div className="admin-mono">{formatDate(iss.created_at)}</div>
+                  href={`/projects/${iss.project.id}`}
-              </FormField>
+                  sx={{
-            </div>
+                    fontFamily: "'DM Mono', Menlo, monospace",
+                    fontWeight: 500,
+                    color: "primary.main",
+                    textDecoration: "none",
+                    "&:hover": { textDecoration: "underline" },
+                    display: "block",
+                  }}
+                >
+                  {iss.project.project_number} – {iss.project.name}
+                </Typography>
+              ) : (
+                <Typography variant="body2">—</Typography>
+              )}
+            </Box>
+            <Box>
+              <Typography variant="caption" color="text.secondary">
+                Vydal
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  fontFamily: "'DM Mono', Menlo, monospace",
+                  fontWeight: 500,
+                }}
+              >
+                {iss.issued_by_user
+                  ? `${iss.issued_by_user.first_name} ${iss.issued_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(iss.created_at)}
+              </Typography>
+            </Box>
             {iss.notes && (
-              <FormField label="Poznámky">
+              <Box sx={{ gridColumn: { sm: "1 / -1" } }}>
-                <div style={{ whiteSpace: "pre-wrap" }}>{iss.notes}</div>
+                <Typography variant="caption" color="text.secondary">
-              </FormField>
+                  Poznámky
+                </Typography>
+                <Typography variant="body2" sx={{ whiteSpace: "pre-wrap" }}>
+                  {iss.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<WarehouseIssueItem>
-            <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>Šarže</th>
+        </Card>
-                    <th>Množství</th>
-                    <th>Cena/ks</th>
-                    <th>Celkem</th>
-                    <th>Lokace</th>
-                    <th>Rezervace</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">
-                        {item.batch
-                          ? `${formatDate(item.batch.received_at)} – ${formatCurrency(Number(item.batch.unit_price), "CZK")}`
-                          : "—"}
-                      </td>
-                      <td className="admin-mono">{Number(item.quantity)}</td>
-                      <td className="admin-mono">
-                        {item.batch
-                          ? formatCurrency(Number(item.batch.unit_price), "CZK")
-                          : "—"}
-                      </td>
-                      <td className="admin-mono fw-500">
-                        {item.batch
-                          ? formatCurrency(
-                              Number(item.quantity) *
-                                Number(item.batch.unit_price),
-                              "CZK",
-                            )
-                          : "—"}
-                      </td>
-                      <td className="admin-mono">
-                        {item.location?.code || "—"}
-                      </td>
-                      <td className="admin-mono">
-                        {item.reservation
-                          ? `ID: ${item.reservation.id} (${Number(item.reservation.remaining_qty)} ks)`
-                          : "—"}
-                      </td>
-                      <td>{item.notes || "—"}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
       </motion.div>
 
-      {/* Cancel confirmation modal */}
+      {/* Cancel confirmation dialog */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={cancelConfirm}
         onClose={() => setCancelConfirm(false)}
         onConfirm={handleCancel}
@@ -352,6 +413,6 @@ export default function WarehouseIssueDetail() {
         confirmVariant="danger"
         loading={cancelling}
       />
-    </div>
+    </Box>
   );
 }