feat(mui): migrate Warehouse Inventory (Inventura) onto MUI kit

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

src/admin/pages/WarehouseInventory.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { motion, AnimatePresence } from "framer-motion";
-import Pagination from "../components/Pagination";
 import { usePaginatedQuery } from "../hooks/usePaginatedQuery";
 
 import { formatDate } from "../utils/formatters";
@@ -11,12 +11,28 @@ import {
   warehouseInventoryListOptions,
   type WarehouseInventorySession,
 } from "../lib/queries/warehouse";
+import {
+  Button,
+  Card,
+  DataTable,
+  Pagination,
+  Select,
+  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",
+const STATUS_COLOR: Record<
+  string,
+  "warning" | "success" | "error" | "info" | "default"
+> = {
+  DRAFT: "warning",
+  CONFIRMED: "success",
 };
 
 const STATUS_LABEL: Record<string, string> = {
@@ -24,8 +40,23 @@ const STATUS_LABEL: Record<string, string> = {
   CONFIRMED: "Potvrzeno",
 };
 
+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 WarehouseInventory() {
   const { hasPermission } = useAuth();
+  const navigate = useNavigate();
 
   const [page, setPage] = useState(1);
   const [statusFilter, setStatusFilter] = useState<string>("");
@@ -39,190 +70,135 @@ export default function WarehouseInventory() {
       }),
     );
 
-  const navigate = useNavigate();
-
   if (!hasPermission("warehouse.inventory")) return <Forbidden />;
 
-  const handleRowClick = (session: WarehouseInventorySession) => {
-    navigate(`/warehouse/inventory/${session.id}`);
-  };
-
   const resetFilters = () => {
     setStatusFilter("");
     setPage(1);
   };
 
   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
+      ? "inventura"
+      : total >= 2 && total <= 4
+        ? "inventury"
+        : "inventur"
+  }`;
+
+  const columns: DataColumn<WarehouseInventorySession>[] = [
+    {
+      key: "session_number",
+      header: "Číslo inventury",
+      width: "30%",
+      mono: true,
+      bold: true,
+      render: (s) => s.session_number || "—",
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "20%",
+      render: (s) => (
+        <StatusChip
+          label={STATUS_LABEL[s.status] ?? s.status}
+          color={STATUS_COLOR[s.status] ?? "default"}
+        />
+      ),
+    },
+    {
+      key: "created_at",
+      header: "Vytvořeno",
+      width: "30%",
+      mono: true,
+      render: (s) => formatDate(s.created_at),
+    },
+    {
+      key: "items",
+      header: "Položky",
+      width: "20%",
+      mono: true,
+      render: (s) => String(s.items?.length ?? 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">Inventury</h1>
-          <p className="admin-page-subtitle">
-            {pagination?.total ?? items.length}{" "}
-            {pagination?.total === 1
-              ? "inventura"
-              : pagination?.total !== undefined &&
-                  pagination.total >= 2 &&
-                  pagination.total <= 4
-                ? "inventury"
-                : "inventur"}
-          </p>
-        </div>
-        <div className="admin-page-actions">
-          <button
-            onClick={() => navigate("/warehouse/inventory/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="Inventury"
+          subtitle={subtitle}
+          actions={
+            <Button
+              startIcon={PlusIcon}
+              onClick={() => navigate("/warehouse/inventory/new")}
             >
-              <line x1="12" y1="5" x2="12" y2="19" />
-              <line x1="5" y1="12" x2="19" y2="12" />
-            </svg>
-            Nová inventura
-          </button>
-        </div>
+              Nová inventura
+            </Button>
+          }
+        />
       </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">
-            <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>
-            </select>
-            {statusFilter && (
-              <button
-                type="button"
-                className="admin-btn admin-btn-secondary"
-                onClick={resetFilters}
-                style={{ whiteSpace: "nowrap" }}
-              >
-                Zrušit filtry
-              </button>
-            )}
-          </div>
+      <FilterBar>
+        <Box sx={{ flex: "0 0 200px" }}>
+          <Select
+            value={statusFilter}
+            onChange={(val) => {
+              setStatusFilter(val);
+              setPage(1);
+            }}
+            options={[
+              { value: "", label: "Všechny stavy" },
+              { value: "DRAFT", label: "Návrh" },
+              { value: "CONFIRMED", label: "Potvrzeno" },
+            ]}
+          />
+        </Box>
+        {statusFilter && (
+          <Button variant="outlined" onClick={resetFilters}>
+            Zrušit filtry
+          </Button>
+        )}
+      </FilterBar>
 
-          <AnimatePresence mode="wait">
-            <motion.div
-              key={`${statusFilter}-${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>
-                    {statusFilter
-                      ? "Žádné inventury pro zadaný filtr."
-                      : "Zatím nejsou žádné inventury."}
-                  </p>
-                  {!statusFilter && (
-                    <button
-                      onClick={() => navigate("/warehouse/inventory/new")}
-                      className="admin-btn admin-btn-primary"
-                    >
-                      Vytvořit první inventuru
-                    </button>
-                  )}
-                </div>
-              )}
-              {items.length > 0 && (
-                <div className="admin-table-responsive">
-                  <table className="admin-table">
-                    <thead>
-                      <tr>
-                        <th>Číslo inventury</th>
-                        <th>Stav</th>
-                        <th>Vytvořeno</th>
-                        <th>Položky</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {items.map((session) => (
-                        <tr
-                          key={session.id}
-                          onClick={() => handleRowClick(session)}
-                          style={{ cursor: "pointer" }}
-                        >
-                          <td className="admin-mono fw-500">
-                            {session.session_number || "—"}
-                          </td>
-                          <td>
-                            <span
-                              className={`admin-badge ${STATUS_BADGE[session.status] ?? ""}`}
-                            >
-                              {STATUS_LABEL[session.status] ?? session.status}
-                            </span>
-                          </td>
-                          <td className="admin-mono">
-                            {formatDate(session.created_at)}
-                          </td>
-                          <td className="admin-mono">
-                            {session.items?.length ?? 0}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </AnimatePresence>
-
-          <Pagination pagination={pagination} onPageChange={setPage} />
-        </div>
-      </motion.div>
-    </div>
+      <Card sx={{ opacity: isFetching ? 0.6 : 1, transition: "opacity .2s" }}>
+        <DataTable<WarehouseInventorySession>
+          columns={columns}
+          rows={items}
+          rowKey={(s) => s.id}
+          onRowClick={(s) => navigate(`/warehouse/inventory/${s.id}`)}
+          empty={
+            statusFilter ? (
+              <EmptyState title="Žádné inventury pro zadaný filtr." />
+            ) : (
+              <EmptyState
+                title="Zatím nejsou žádné inventury."
+                action={
+                  <Button
+                    startIcon={PlusIcon}
+                    onClick={() => navigate("/warehouse/inventory/new")}
+                  >
+                    Vytvořit první inventuru
+                  </Button>
+                }
+              />
+            )
+          }
+        />
+        <Pagination
+          page={page}
+          pageCount={pagination?.total_pages ?? 1}
+          onChange={setPage}
+        />
+      </Card>
+    </Box>
   );
 }