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 } from "framer-motion";
-import { motion, AnimatePresence } from "framer-motion";
+import Box from "@mui/material/Box";
-import Pagination from "../components/Pagination";
 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> = {
+const STATUS_COLOR: Record<
-  DRAFT: "admin-badge-warning",
+  string,
-  CONFIRMED: "admin-badge-active",
+  "warning" | "success" | "error" | "info" | "default"
-  CANCELLED: "admin-badge-danger",
+> = {
+  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 (
+    return <LoadingState />;
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
   }
 
+  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>
+        <PageHeader
-          <h1 className="admin-page-title">Výdejky</h1>
+          title="Výdejky"
-          <p className="admin-page-subtitle">
+          subtitle={subtitle}
-            {pagination?.total ?? items.length}{" "}
+          actions={
-            {pagination?.total === 1
+            canOperate ? (
-              ? "doklad"
+              <Button
-              : pagination?.total !== undefined &&
+                startIcon={PlusIcon}
-                  pagination.total >= 2 &&
+                onClick={() => navigate("/warehouse/issues/new")}
-                  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"
               >
-                <line x1="12" y1="5" x2="12" y2="19" />
+                Nová výdejka
-                <line x1="5" y1="12" x2="19" y2="12" />
+              </Button>
-              </svg>
+            ) : undefined
-              Nová výdejka
+          }
-            </button>
+        />
-          )}
-        </div>
       </motion.div>
 
-      <motion.div
+      <FilterBar>
-        className="admin-card"
+        <Box sx={{ flex: "1 1 220px" }}>
-        initial={{ opacity: 0, y: 12 }}
+          <TextField
-        animate={{ opacity: 1, y: 0 }}
+            value={search}
-        transition={{ duration: 0.25, delay: 0.06 }}
+            onChange={(e) => {
-        style={{ opacity: isFetching ? 0.6 : 1, transition: "opacity 0.2s" }}
+              setSearch(e.target.value);
-      >
+              setPage(1);
-        <div className="admin-card-body">
+            }}
-          <div className="admin-search-bar mb-4">
+            placeholder="Hledat podle čísla dokladu..."
-            <div className="admin-search">
+            fullWidth
-              <svg
+          />
-                width="16"
+        </Box>
-                height="16"
+        <Box sx={{ flex: "0 0 160px" }}>
-                viewBox="0 0 24 24"
+          <Select
-                fill="none"
+            value={statusFilter}
-                stroke="currentColor"
+            onChange={(val) => {
-                strokeWidth="2"
+              setStatusFilter(val);
-                strokeLinecap="round"
+              setPage(1);
-                strokeLinejoin="round"
+            }}
-              >
+            options={[
-                <circle cx="11" cy="11" r="8" />
+              { value: "", label: "Všechny stavy" },
-                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+              { value: "DRAFT", label: "Návrh" },
-              </svg>
+              { value: "CONFIRMED", label: "Potvrzeno" },
-              <input
+              { value: "CANCELLED", label: "Zrušeno" },
-                type="text"
+            ]}
-                value={search}
+          />
-                onChange={(e) => {
+        </Box>
-                  setSearch(e.target.value);
+        {projects.length > 0 && (
-                  setPage(1);
+          <Box sx={{ flex: "0 0 200px" }}>
-                }}
+            <Select
-                placeholder="Hledat podle čísla dokladu..."
+              value={projectId === "" ? "" : String(projectId)}
-                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}
               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
+          </Box>
-              mode="date"
+        )}
-              value={dateTo}
+        <Box sx={{ flex: "0 0 150px" }}>
-              onChange={(val) => {
+          <DateField
-                setDateTo(val);
+            value={dateFrom}
-                setPage(1);
+            onChange={(val) => {
-              }}
+              setDateFrom(val);
-              placeholder="Do"
+              setPage(1);
-            />
+            }}
-            {hasActiveFilters && (
+            label="Od"
-              <button
+          />
-                type="button"
+        </Box>
-                className="admin-btn admin-btn-secondary"
+        <Box sx={{ flex: "0 0 150px" }}>
-                onClick={resetFilters}
+          <DateField
-                style={{ whiteSpace: "nowrap" }}
+            value={dateTo}
-              >
+            onChange={(val) => {
-                Zrušit filtry
+              setDateTo(val);
-              </button>
+              setPage(1);
-            )}
+            }}
-          </div>
+            label="Do"
+          />
+        </Box>
+        {hasActiveFilters && (
+          <Button variant="outlined" onClick={resetFilters}>
+            Zrušit filtry
+          </Button>
+        )}
+      </FilterBar>
 
-          <AnimatePresence mode="wait">
+      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
-            <motion.div
+        <DataTable<WarehouseIssue>
-              key={`${debouncedSearch}-${statusFilter}-${projectId}-${dateFrom}-${dateTo}-${page}-${items.length}`}
+          columns={columns}
-              initial={{ opacity: 0, y: 6 }}
+          rows={items}
-              animate={{ opacity: 1, y: 0 }}
+          rowKey={(r) => r.id}
-              exit={{ opacity: 0 }}
+          onRowClick={(r) => navigate(`/warehouse/issues/${r.id}`)}
-              transition={{ duration: 0.15 }}
+          empty={
-            >
+            search || hasActiveFilters ? (
-              {items.length === 0 && (
+              <EmptyState title="Žádné doklady pro zadaný filtr." />
-                <div className="admin-empty-state">
+            ) : (
-                  <div className="admin-empty-icon">
+              <EmptyState
-                    <svg
+                title="Zatím nejsou žádné výdejky."
-                      width="28"
+                action={
-                      height="28"
+                  canOperate ? (
-                      viewBox="0 0 24 24"
+                    <Button
-                      fill="none"
+                      startIcon={PlusIcon}
-                      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
                       onClick={() => navigate("/warehouse/issues/new")}
-                      className="admin-btn admin-btn-primary"
                     >
                       Vytvořit první výdejku
-                    </button>
+                    </Button>
-                  )}
+                  ) : undefined
-                </div>
+                }
-              )}
+              />
-              {items.length > 0 && (
+            )
-                <div className="admin-table-responsive">
+          }
-                  <table className="admin-table">
+        />
-                    <thead>
+        <Pagination
-                      <tr>
+          page={page}
-                        <th>Číslo dokladu</th>
+          pageCount={pagination?.total_pages ?? 1}
-                        <th>Projekt</th>
+          onChange={setPage}
-                        <th>Stav</th>
+        />
-                        <th>Vydal</th>
+      </Card>
-                        <th>Vytvořeno</th>
+    </Box>
-                        <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>
   );
 }