feat(mui): migrate Warehouse Issues (Výdeje) onto MUI kit

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

src/admin/pages/WarehouseIssues.tsx

@@ -1,12 +1,10 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
-import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import AdminDatePicker from "../components/AdminDatePicker";
-import { motion, AnimatePresence } from "framer-motion";
-import Pagination from "../components/Pagination";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
 import useDebounce from "../hooks/useDebounce";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
 
@@ -16,13 +14,31 @@ import {
   type WarehouseIssue,
 } from "../lib/queries/warehouse";
 import { projectListOptions, type Project } from "../lib/queries/projects";
+import {
+  Button,
+  Card,
+  DataTable,
+  Pagination,
+  TextField,
+  Select,
+  DateField,
+  StatusChip,
+  PageHeader,
+  FilterBar,
+  EmptyState,
+  LoadingState,
+  type DataColumn,
+} from "../ui";
 
 const PER_PAGE = 20;
 
-const STATUS_BADGE: Record<string, string> = {
-  DRAFT: "admin-badge-warning",
-  CONFIRMED: "admin-badge-active",
-  CANCELLED: "admin-badge-danger",
+const STATUS_COLOR: Record<
+  string,
+  "warning" | "success" | "error" | "info" | "default"
+> = {
+  DRAFT: "warning",
+  CONFIRMED: "success",
+  CANCELLED: "error",
 };
 
 const STATUS_LABEL: Record<string, string> = {
@@ -31,8 +47,23 @@ const STATUS_LABEL: Record<string, string> = {
   CANCELLED: "Zrušeno",
 };
 
+const PlusIcon = (
+  <svg
+    width="20"
+    height="20"
+    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 WarehouseIssues() {
   const { hasPermission } = useAuth();
+  const navigate = useNavigate();
 
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
@@ -58,16 +89,10 @@ export default function WarehouseIssues() {
       }),
     );
 
-  const navigate = useNavigate();
-
   if (!hasPermission("warehouse.view")) return <Forbidden />;
 
   const canOperate = hasPermission("warehouse.operate");
 
-  const handleRowClick = (issue: WarehouseIssue) => {
-    navigate(`/warehouse/issues/${issue.id}`);
-  };
-
   const resetFilters = () => {
     setSearch("");
     setStatusFilter("");
@@ -77,256 +102,196 @@ export default function WarehouseIssues() {
     setPage(1);
   };
 
-  const hasActiveFilters = statusFilter || projectId || dateFrom || dateTo;
+  const hasActiveFilters = !!(statusFilter || projectId || dateFrom || dateTo);
 
   if (isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
+  const total = pagination?.total ?? items.length;
+  const subtitle = `${total} ${
+    total === 1 ? "doklad" : total >= 2 && total <= 4 ? "doklady" : "dokladů"
+  }`;
+
+  const columns: DataColumn<WarehouseIssue>[] = [
+    {
+      key: "issue_number",
+      header: "Číslo dokladu",
+      width: "15%",
+      mono: true,
+      bold: true,
+      render: (r) => r.issue_number || "—",
+    },
+    {
+      key: "project",
+      header: "Projekt",
+      width: "25%",
+      render: (r) =>
+        r.project ? `${r.project.project_number} – ${r.project.name}` : "—",
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "13%",
+      render: (r) => (
+        <StatusChip
+          label={STATUS_LABEL[r.status] ?? r.status}
+          color={STATUS_COLOR[r.status] ?? "default"}
+        />
+      ),
+    },
+    {
+      key: "issued_by_user",
+      header: "Vydal",
+      width: "20%",
+      render: (r) =>
+        r.issued_by_user
+          ? `${r.issued_by_user.first_name} ${r.issued_by_user.last_name}`
+          : "—",
+    },
+    {
+      key: "created_at",
+      header: "Vytvořeno",
+      width: "14%",
+      mono: true,
+      render: (r) => formatDate(r.created_at),
+    },
+    {
+      key: "items_count",
+      header: "Položek",
+      width: "13%",
+      mono: true,
+      render: (r) => String(r._count?.items ?? 0),
+    },
+  ];
+
   return (
-    <div>
+    <Box>
       <motion.div
-        className="admin-page-header"
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25 }}
       >
-        <div>
-          <h1 className="admin-page-title">Výdejky</h1>
-          <p className="admin-page-subtitle">
-            {pagination?.total ?? items.length}{" "}
-            {pagination?.total === 1
-              ? "doklad"
-              : pagination?.total !== undefined &&
-                  pagination.total >= 2 &&
-                  pagination.total <= 4
-                ? "doklady"
-                : "dokladů"}
-          </p>
-        </div>
-        <div className="admin-page-actions">
-          {canOperate && (
-            <button
-              onClick={() => navigate("/warehouse/issues/new")}
-              className="admin-btn admin-btn-primary"
-            >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
+        <PageHeader
+          title="Výdejky"
+          subtitle={subtitle}
+          actions={
+            canOperate ? (
+              <Button
+                startIcon={PlusIcon}
+                onClick={() => navigate("/warehouse/issues/new")}
               >
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-              Nová výdejka
-            </button>
-          )}
-        </div>
+                Nová výdejka
+              </Button>
+            ) : undefined
+          }
+        />
       </motion.div>
 
-      <motion.div
-        className="admin-card"
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.25, delay: 0.06 }}
-        style={{ opacity: isFetching ? 0.6 : 1, transition: "opacity 0.2s" }}
-      >
-        <div className="admin-card-body">
-          <div className="admin-search-bar mb-4">
-            <div className="admin-search">
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <circle cx="11" cy="11" r="8" />
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
-              </svg>
-              <input
-                type="text"
-                value={search}
-                onChange={(e) => {
-                  setSearch(e.target.value);
-                  setPage(1);
-                }}
-                placeholder="Hledat podle čísla dokladu..."
-                className="admin-form-input"
-              />
-            </div>
-            <select
-              value={statusFilter}
-              onChange={(e) => {
-                setStatusFilter(e.target.value);
-                setPage(1);
-              }}
-              className="admin-form-select"
-            >
-              <option value="">Všechny stavy</option>
-              <option value="DRAFT">Návrh</option>
-              <option value="CONFIRMED">Potvrzeno</option>
-              <option value="CANCELLED">Zrušeno</option>
-            </select>
-            {projects.length > 0 && (
-              <select
-                value={projectId}
-                onChange={(e) => {
-                  setProjectId(
-                    e.target.value === "" ? "" : Number(e.target.value),
-                  );
-                  setPage(1);
-                }}
-                className="admin-form-select"
-              >
-                <option value="">Všechny projekty</option>
-                {projects.map((p: Project) => (
-                  <option key={p.id} value={p.id}>
-                    {p.project_number} – {p.name}
-                  </option>
-                ))}
-              </select>
-            )}
-            <AdminDatePicker
-              mode="date"
-              value={dateFrom}
+      <FilterBar>
+        <Box sx={{ flex: "1 1 220px" }}>
+          <TextField
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            }}
+            placeholder="Hledat podle čísla dokladu..."
+            fullWidth
+          />
+        </Box>
+        <Box sx={{ flex: "0 0 160px" }}>
+          <Select
+            value={statusFilter}
+            onChange={(val) => {
+              setStatusFilter(val);
+              setPage(1);
+            }}
+            options={[
+              { value: "", label: "Všechny stavy" },
+              { value: "DRAFT", label: "Návrh" },
+              { value: "CONFIRMED", label: "Potvrzeno" },
+              { value: "CANCELLED", label: "Zrušeno" },
+            ]}
+          />
+        </Box>
+        {projects.length > 0 && (
+          <Box sx={{ flex: "0 0 200px" }}>
+            <Select
+              value={projectId === "" ? "" : String(projectId)}
               onChange={(val) => {
-                setDateFrom(val);
+                setProjectId(val === "" ? "" : Number(val));
                 setPage(1);
               }}
-              placeholder="Od"
+              options={[
+                { value: "", label: "Všechny projekty" },
+                ...projects.map((p: Project) => ({
+                  value: String(p.id),
+                  label: `${p.project_number} – ${p.name}`,
+                })),
+              ]}
             />
-            <AdminDatePicker
-              mode="date"
-              value={dateTo}
-              onChange={(val) => {
-                setDateTo(val);
-                setPage(1);
-              }}
-              placeholder="Do"
-            />
-            {hasActiveFilters && (
-              <button
-                type="button"
-                className="admin-btn admin-btn-secondary"
-                onClick={resetFilters}
-                style={{ whiteSpace: "nowrap" }}
-              >
-                Zrušit filtry
-              </button>
-            )}
-          </div>
+          </Box>
+        )}
+        <Box sx={{ flex: "0 0 150px" }}>
+          <DateField
+            value={dateFrom}
+            onChange={(val) => {
+              setDateFrom(val);
+              setPage(1);
+            }}
+            label="Od"
+          />
+        </Box>
+        <Box sx={{ flex: "0 0 150px" }}>
+          <DateField
+            value={dateTo}
+            onChange={(val) => {
+              setDateTo(val);
+              setPage(1);
+            }}
+            label="Do"
+          />
+        </Box>
+        {hasActiveFilters && (
+          <Button variant="outlined" onClick={resetFilters}>
+            Zrušit filtry
+          </Button>
+        )}
+      </FilterBar>
 
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={`${debouncedSearch}-${statusFilter}-${projectId}-${dateFrom}-${dateTo}-${page}-${items.length}`}
-              initial={{ opacity: 0, y: 6 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.15 }}
-            >
-              {items.length === 0 && (
-                <div className="admin-empty-state">
-                  <div className="admin-empty-icon">
-                    <svg
-                      width="28"
-                      height="28"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                      <polyline points="14 2 14 8 20 8" />
-                      <line x1="16" y1="13" x2="8" y2="13" />
-                      <line x1="16" y1="17" x2="8" y2="17" />
-                    </svg>
-                  </div>
-                  <p>
-                    {search || hasActiveFilters
-                      ? "Žádné doklady pro zadaný filtr."
-                      : "Zatím nejsou žádné výdejky."}
-                  </p>
-                  {canOperate && !search && !hasActiveFilters && (
-                    <button
+      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
+        <DataTable<WarehouseIssue>
+          columns={columns}
+          rows={items}
+          rowKey={(r) => r.id}
+          onRowClick={(r) => navigate(`/warehouse/issues/${r.id}`)}
+          empty={
+            search || hasActiveFilters ? (
+              <EmptyState title="Žádné doklady pro zadaný filtr." />
+            ) : (
+              <EmptyState
+                title="Zatím nejsou žádné výdejky."
+                action={
+                  canOperate ? (
+                    <Button
+                      startIcon={PlusIcon}
                       onClick={() => navigate("/warehouse/issues/new")}
-                      className="admin-btn admin-btn-primary"
                     >
                       Vytvořit první výdejku
-                    </button>
-                  )}
-                </div>
-              )}
-              {items.length > 0 && (
-                <div className="admin-table-responsive">
-                  <table className="admin-table">
-                    <thead>
-                      <tr>
-                        <th>Číslo dokladu</th>
-                        <th>Projekt</th>
-                        <th>Stav</th>
-                        <th>Vydal</th>
-                        <th>Vytvořeno</th>
-                        <th>Položek</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {items.map((issue) => (
-                        <tr
-                          key={issue.id}
-                          onClick={() => handleRowClick(issue)}
-                          style={{ cursor: "pointer" }}
-                        >
-                          <td className="admin-mono fw-500">
-                            {issue.issue_number || "—"}
-                          </td>
-                          <td>
-                            {issue.project
-                              ? `${issue.project.project_number} – ${issue.project.name}`
-                              : "—"}
-                          </td>
-                          <td>
-                            <span
-                              className={`admin-badge ${STATUS_BADGE[issue.status] ?? ""}`}
-                            >
-                              {STATUS_LABEL[issue.status] ?? issue.status}
-                            </span>
-                          </td>
-                          <td>
-                            {issue.issued_by_user
-                              ? `${issue.issued_by_user.first_name} ${issue.issued_by_user.last_name}`
-                              : "—"}
-                          </td>
-                          <td className="admin-mono">
-                            {formatDate(issue.created_at)}
-                          </td>
-                          <td className="admin-mono">
-                            {issue._count?.items ?? 0}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-
-          <Pagination pagination={pagination} onPageChange={setPage} />
-        </div>
-      </motion.div>
-    </div>
+                    </Button>
+                  ) : undefined
+                }
+              />
+            )
+          }
+        />
+        <Pagination
+          page={page}
+          pageCount={pagination?.total_pages ?? 1}
+          onChange={setPage}
+        />
+      </Card>
+    </Box>
   );
 }