From ff527ca577e9882a2e7009b1b13521b7338e2624 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sat, 6 Jun 2026 23:59:18 +0200
Subject: [PATCH] feat(mui): migrate Warehouse Reports (Reporty) onto MUI kit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/pages/WarehouseReports.tsx | 663 ++++++++++++++-------------
 1 file changed, 338 insertions(+), 325 deletions(-)

diff --git a/src/admin/pages/WarehouseReports.tsx b/src/admin/pages/WarehouseReports.tsx
index 111cde8..843c4b5 100644
--- a/src/admin/pages/WarehouseReports.tsx
+++ b/src/admin/pages/WarehouseReports.tsx
@@ -3,8 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
 import { motion } from "framer-motion";
-import FormField from "../components/FormField";
-import AdminDatePicker from "../components/AdminDatePicker";
+import Box from "@mui/material/Box";
 import { projectListOptions } from "../lib/queries/projects";
 import {
   warehouseStockStatusOptions,
@@ -14,6 +13,22 @@ import {
 } from "../lib/queries/warehouse";
 import apiFetch from "../utils/api";
 import { formatCurrency } from "../utils/formatters";
+import {
+  Button,
+  Card,
+  DataTable,
+  Select,
+  DateField,
+  StatusChip,
+  PageHeader,
+  FilterBar,
+  EmptyState,
+  LoadingState,
+  Tabs,
+  TabPanel,
+  type DataColumn,
+  type TabDef,
+} from "../ui";
 
 type TabId =
   | "stock-status"
@@ -38,17 +53,18 @@ interface MovementLogRow {
   supplier_or_project: string;
 }
 
-const TABS: { id: TabId; label: string }[] = [
-  { id: "stock-status", label: "Stav zásob" },
-  { id: "project-consumption", label: "Spotřeba projektů" },
-  { id: "movement-log", label: "Pohyby" },
-  { id: "below-minimum", label: "Pod minimem" },
+const TABS: TabDef[] = [
+  { value: "stock-status", label: "Stav zásob" },
+  { value: "project-consumption", label: "Spotřeba projektů" },
+  { value: "movement-log", label: "Pohyby" },
+  { value: "below-minimum", label: "Pod minimem" },
 ];
 
-const MOVEMENT_BADGE: Record<string, string> = {
-  receipt: "admin-badge-incoming",
-  issue: "admin-badge-outgoing",
-  inventory: "admin-badge-info",
+// Movement type → StatusChip color (legacy: incoming=success, outgoing=info, inventory=info)
+const MOVEMENT_COLOR: Record<string, "success" | "info"> = {
+  receipt: "success",
+  issue: "info",
+  inventory: "info",
 };
 
 export default function WarehouseReports() {
@@ -73,68 +89,57 @@ export default function WarehouseReports() {
   if (!hasPermission("warehouse.view")) return <Forbidden />;
 
   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">Skladové reporty</h1>
-        </div>
+        <PageHeader title="Skladové reporty" />
       </motion.div>
 
-      {/* Tab navigation */}
       <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">
-          <div className="admin-tabs" style={{ marginBottom: "1.5rem" }}>
-            {TABS.map((tab) => (
-              <button
-                key={tab.id}
-                className={`admin-tab ${activeTab === tab.id ? "active" : ""}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-
-          {activeTab === "stock-status" && (
-            <StockStatusTab
-              categoryId={categoryId}
-              setCategoryId={setCategoryId}
-            />
-          )}
-          {activeTab === "project-consumption" && (
-            <ProjectConsumptionTab
-              projectId={consumptionProjectId}
-              setProjectId={setConsumptionProjectId}
-              dateFrom={consumptionDateFrom}
-              setDateFrom={setConsumptionDateFrom}
-              dateTo={consumptionDateTo}
-              setDateTo={setConsumptionDateTo}
-            />
-          )}
-          {activeTab === "movement-log" && (
-            <MovementLogTab
-              type={movementType}
-              setType={setMovementType}
-              dateFrom={movementDateFrom}
-              setDateFrom={setMovementDateFrom}
-              dateTo={movementDateTo}
-              setDateTo={setMovementDateTo}
-            />
-          )}
-          {activeTab === "below-minimum" && <BelowMinimumTab />}
-        </div>
+        <Tabs
+          value={activeTab}
+          onChange={(v) => setActiveTab(v as TabId)}
+          tabs={TABS}
+        />
       </motion.div>
-    </div>
+
+      <TabPanel value="stock-status" current={activeTab}>
+        <StockStatusTab categoryId={categoryId} setCategoryId={setCategoryId} />
+      </TabPanel>
+
+      <TabPanel value="project-consumption" current={activeTab}>
+        <ProjectConsumptionTab
+          projectId={consumptionProjectId}
+          setProjectId={setConsumptionProjectId}
+          dateFrom={consumptionDateFrom}
+          setDateFrom={setConsumptionDateFrom}
+          dateTo={consumptionDateTo}
+          setDateTo={setConsumptionDateTo}
+        />
+      </TabPanel>
+
+      <TabPanel value="movement-log" current={activeTab}>
+        <MovementLogTab
+          type={movementType}
+          setType={setMovementType}
+          dateFrom={movementDateFrom}
+          setDateFrom={setMovementDateFrom}
+          dateTo={movementDateTo}
+          setDateTo={setMovementDateTo}
+        />
+      </TabPanel>
+
+      <TabPanel value="below-minimum" current={activeTab}>
+        <BelowMinimumTab />
+      </TabPanel>
+    </Box>
   );
 }
 
@@ -154,79 +159,91 @@ function StockStatusTab({
     }),
   );
 
+  const columns: DataColumn<WarehouseItem>[] = [
+    {
+      key: "name",
+      header: "Název",
+      width: "30%",
+      bold: true,
+      render: (item) => item.name,
+    },
+    {
+      key: "total_quantity",
+      header: "Celkem",
+      width: "12%",
+      mono: true,
+      render: (item) => String(item.total_quantity ?? 0),
+    },
+    {
+      key: "available_quantity",
+      header: "K dispozici",
+      width: "13%",
+      mono: true,
+      render: (item) => String(item.available_quantity ?? 0),
+    },
+    {
+      key: "stock_value",
+      header: "Hodnota",
+      width: "17%",
+      mono: true,
+      render: (item) =>
+        item.stock_value != null
+          ? formatCurrency(item.stock_value, "CZK")
+          : "0,00 Kč",
+    },
+    {
+      key: "min_quantity",
+      header: "Min. množství",
+      width: "14%",
+      mono: true,
+      render: (item) => (item.min_quantity ?? "—").toString(),
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "14%",
+      render: (item) =>
+        item.below_minimum ? (
+          <StatusChip label="Pod min." color="error" />
+        ) : (
+          <StatusChip label="OK" color="success" />
+        ),
+    },
+  ];
+
   return (
-    <div>
-      <div className="admin-search-bar mb-4">
+    <Box>
+      <FilterBar>
         {categories.length > 0 && (
-          <select
-            value={categoryId}
-            onChange={(e) =>
-              setCategoryId(e.target.value === "" ? "" : Number(e.target.value))
-            }
-            className="admin-form-select"
-          >
-            <option value="">Všechny kategorie</option>
-            {categories.map((cat) => (
-              <option key={cat.id} value={cat.id}>
-                {cat.name}
-              </option>
-            ))}
-          </select>
+          <Box sx={{ flex: "0 0 220px" }}>
+            <Select
+              value={categoryId === "" ? "" : String(categoryId)}
+              onChange={(val) => setCategoryId(val === "" ? "" : Number(val))}
+              options={[
+                { value: "", label: "Všechny kategorie" },
+                ...categories.map((cat) => ({
+                  value: String(cat.id),
+                  label: cat.name,
+                })),
+              ]}
+            />
+          </Box>
         )}
-      </div>
+      </FilterBar>
 
       {isPending ? (
-        <div className="admin-loading">
-          <div className="admin-spinner" />
-        </div>
+        <LoadingState />
       ) : (
-        <div className="admin-table-responsive">
-          <table className="admin-table">
-            <thead>
-              <tr>
-                <th>Název</th>
-                <th>Celkem</th>
-                <th>K dispozici</th>
-                <th>Hodnota</th>
-                <th>Min. množství</th>
-                <th>Stav</th>
-              </tr>
-            </thead>
-            <tbody>
-              {(items as WarehouseItem[] | undefined)?.length === 0 && (
-                <tr>
-                  <td colSpan={6} className="admin-empty-state">
-                    Žádné položky
-                  </td>
-                </tr>
-              )}
-              {(items as WarehouseItem[] | undefined)?.map((item) => (
-                <tr key={item.id}>
-                  <td className="fw-500">{item.name}</td>
-                  <td className="admin-mono">{item.total_quantity ?? 0}</td>
-                  <td className="admin-mono">{item.available_quantity ?? 0}</td>
-                  <td className="admin-mono">
-                    {item.stock_value != null
-                      ? formatCurrency(item.stock_value, "CZK")
-                      : "0,00 Kč"}
-                  </td>
-                  <td className="admin-mono">{item.min_quantity ?? "—"}</td>
-                  <td>
-                    {item.below_minimum ? (
-                      <span className="admin-badge admin-badge-danger">
-                        Pod min.
-                      </span>
-                    ) : (
-                      <span className="admin-badge admin-badge-active">OK</span>
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <Card>
+          <DataTable<WarehouseItem>
+            columns={columns}
+            rows={(items as WarehouseItem[] | undefined) ?? []}
+            rowKey={(item) => item.id}
+            empty={<EmptyState title="Žádné položky" />}
+          />
+        </Card>
       )}
-    </div>
+    </Box>
   );
 }
 
@@ -284,93 +301,80 @@ function ProjectConsumptionTab({
     }
   };
 
+  const columns: DataColumn<ProjectConsumptionRow & { _idx: number }>[] = [
+    {
+      key: "item_name",
+      header: "Položka",
+      width: "32%",
+      bold: true,
+      render: (row) => row.item_name,
+    },
+    {
+      key: "project_name",
+      header: "Projekt",
+      width: "32%",
+      render: (row) => row.project_name,
+    },
+    {
+      key: "total_qty",
+      header: "Množství",
+      width: "18%",
+      mono: true,
+      render: (row) => String(row.total_qty),
+    },
+    {
+      key: "total_value",
+      header: "Hodnota",
+      width: "18%",
+      mono: true,
+      render: (row) => formatCurrency(row.total_value, "CZK"),
+    },
+  ];
+
   return (
-    <div>
-      <div className="admin-search-bar mb-4">
+    <Box>
+      <FilterBar>
         {projects.length > 0 && (
-          <select
-            value={projectId}
-            onChange={(e) =>
-              setProjectId(e.target.value === "" ? "" : Number(e.target.value))
-            }
-            className="admin-form-select"
-          >
-            <option value="">Všechny projekty</option>
-            {projects.map((p) => (
-              <option key={p.id} value={p.id}>
-                {p.project_number} – {p.name}
-              </option>
-            ))}
-          </select>
+          <Box sx={{ flex: "0 0 280px" }}>
+            <Select
+              value={projectId === "" ? "" : String(projectId)}
+              onChange={(val) => setProjectId(val === "" ? "" : Number(val))}
+              options={[
+                { value: "", label: "Všechny projekty" },
+                ...projects.map((p) => ({
+                  value: String(p.id),
+                  label: `${p.project_number} – ${p.name}`,
+                })),
+              ]}
+            />
+          </Box>
         )}
-        <AdminDatePicker
-          mode="date"
-          value={dateFrom}
-          onChange={setDateFrom}
-          placeholder="Od"
-        />
-        <AdminDatePicker
-          mode="date"
-          value={dateTo}
-          onChange={setDateTo}
-          placeholder="Do"
-        />
-        <button
-          type="button"
-          onClick={handleFetch}
-          className="admin-btn admin-btn-primary"
-          disabled={loading}
-        >
+        <Box sx={{ flex: "0 0 150px" }}>
+          <DateField value={dateFrom} onChange={setDateFrom} label="Od" />
+        </Box>
+        <Box sx={{ flex: "0 0 150px" }}>
+          <DateField value={dateTo} onChange={setDateTo} label="Do" />
+        </Box>
+        <Button type="button" onClick={handleFetch} disabled={loading}>
           {loading ? "Načítání..." : "Zobrazit"}
-        </button>
-      </div>
+        </Button>
+      </FilterBar>
 
-      {!fetched && (
-        <div className="admin-empty-state">
-          <p>Zvolte filtr a klikněte na Zobrazit</p>
-        </div>
-      )}
+      {!fetched && <EmptyState title="Zvolte filtr a klikněte na Zobrazit" />}
 
-      {fetched && loading && (
-        <div className="admin-loading">
-          <div className="admin-spinner" />
-        </div>
-      )}
+      {fetched && loading && <LoadingState />}
 
       {fetched && !loading && data && (
-        <div className="admin-table-responsive">
-          <table className="admin-table">
-            <thead>
-              <tr>
-                <th>Položka</th>
-                <th>Projekt</th>
-                <th>Množství</th>
-                <th>Hodnota</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.length === 0 && (
-                <tr>
-                  <td colSpan={4} className="admin-empty-state">
-                    Žádná data
-                  </td>
-                </tr>
-              )}
-              {data.map((row, i) => (
-                <tr key={i}>
-                  <td className="fw-500">{row.item_name}</td>
-                  <td>{row.project_name}</td>
-                  <td className="admin-mono">{row.total_qty}</td>
-                  <td className="admin-mono">
-                    {formatCurrency(row.total_value, "CZK")}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <Card>
+          <DataTable<ProjectConsumptionRow & { _idx: number }>
+            columns={columns}
+            rows={data.map((row, i) => ({ ...row, _idx: i }))}
+            rowKey={(row) => row._idx}
+            empty={<EmptyState title="Žádná data" />}
+          />
+        </Card>
       )}
-    </div>
+    </Box>
   );
 }
 
@@ -425,98 +429,101 @@ function MovementLogTab({
     issue: "Výdej",
   };
 
+  const columns: DataColumn<MovementLogRow & { _idx: number }>[] = [
+    {
+      key: "date",
+      header: "Datum",
+      width: "12%",
+      mono: true,
+      render: (row) => row.date,
+    },
+    {
+      key: "type",
+      header: "Typ",
+      width: "12%",
+      render: (row) => (
+        <StatusChip
+          label={TYPE_LABEL[row.type] ?? row.type}
+          color={MOVEMENT_COLOR[row.type] ?? "info"}
+        />
+      ),
+    },
+    {
+      key: "document_number",
+      header: "Doklad",
+      width: "14%",
+      mono: true,
+      render: (row) => row.document_number || "—",
+    },
+    {
+      key: "item_name",
+      header: "Položka",
+      width: "22%",
+      bold: true,
+      render: (row) => row.item_name,
+    },
+    {
+      key: "quantity",
+      header: "Množství",
+      width: "10%",
+      mono: true,
+      render: (row) => String(row.quantity),
+    },
+    {
+      key: "unit_price",
+      header: "Cena/ks",
+      width: "12%",
+      mono: true,
+      render: (row) => formatCurrency(row.unit_price, "CZK"),
+    },
+    {
+      key: "supplier_or_project",
+      header: "Dodavatel / Projekt",
+      width: "18%",
+      render: (row) => row.supplier_or_project || "—",
+    },
+  ];
+
   return (
-    <div>
-      <div className="admin-search-bar mb-4">
-        <select
-          value={type}
-          onChange={(e) => setType(e.target.value)}
-          className="admin-form-select"
-        >
-          <option value="">Všechny typy</option>
-          <option value="receipt">Příjem</option>
-          <option value="issue">Výdej</option>
-        </select>
-        <AdminDatePicker
-          mode="date"
-          value={dateFrom}
-          onChange={setDateFrom}
-          placeholder="Od"
-        />
-        <AdminDatePicker
-          mode="date"
-          value={dateTo}
-          onChange={setDateTo}
-          placeholder="Do"
-        />
-        <button
-          type="button"
-          onClick={handleFetch}
-          className="admin-btn admin-btn-primary"
-          disabled={loading}
-        >
+    <Box>
+      <FilterBar>
+        <Box sx={{ flex: "0 0 160px" }}>
+          <Select
+            value={type}
+            onChange={setType}
+            options={[
+              { value: "", label: "Všechny typy" },
+              { value: "receipt", label: "Příjem" },
+              { value: "issue", label: "Výdej" },
+            ]}
+          />
+        </Box>
+        <Box sx={{ flex: "0 0 150px" }}>
+          <DateField value={dateFrom} onChange={setDateFrom} label="Od" />
+        </Box>
+        <Box sx={{ flex: "0 0 150px" }}>
+          <DateField value={dateTo} onChange={setDateTo} label="Do" />
+        </Box>
+        <Button type="button" onClick={handleFetch} disabled={loading}>
           {loading ? "Načítání..." : "Zobrazit"}
-        </button>
-      </div>
+        </Button>
+      </FilterBar>
 
-      {!fetched && (
-        <div className="admin-empty-state">
-          <p>Zvolte filtr a klikněte na Zobrazit</p>
-        </div>
-      )}
+      {!fetched && <EmptyState title="Zvolte filtr a klikněte na Zobrazit" />}
 
-      {fetched && loading && (
-        <div className="admin-loading">
-          <div className="admin-spinner" />
-        </div>
-      )}
+      {fetched && loading && <LoadingState />}
 
       {fetched && !loading && data && (
-        <div className="admin-table-responsive">
-          <table className="admin-table">
-            <thead>
-              <tr>
-                <th>Datum</th>
-                <th>Typ</th>
-                <th>Doklad</th>
-                <th>Položka</th>
-                <th>Množství</th>
-                <th>Cena/ks</th>
-                <th>Dodavatel / Projekt</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data.length === 0 && (
-                <tr>
-                  <td colSpan={7} className="admin-empty-state">
-                    Žádná data
-                  </td>
-                </tr>
-              )}
-              {data.map((row, i) => (
-                <tr key={i}>
-                  <td className="admin-mono">{row.date}</td>
-                  <td>
-                    <span
-                      className={`admin-badge ${MOVEMENT_BADGE[row.type] ?? "admin-badge-info"}`}
-                    >
-                      {TYPE_LABEL[row.type] ?? row.type}
-                    </span>
-                  </td>
-                  <td className="admin-mono">{row.document_number || "—"}</td>
-                  <td className="fw-500">{row.item_name}</td>
-                  <td className="admin-mono">{row.quantity}</td>
-                  <td className="admin-mono">
-                    {formatCurrency(row.unit_price, "CZK")}
-                  </td>
-                  <td>{row.supplier_or_project || "—"}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <Card>
+          <DataTable<MovementLogRow & { _idx: number }>
+            columns={columns}
+            rows={data.map((row, i) => ({ ...row, _idx: i }))}
+            rowKey={(row) => row._idx}
+            empty={<EmptyState title="Žádná data" />}
+          />
+        </Card>
       )}
-    </div>
+    </Box>
   );
 }
 
@@ -525,45 +532,51 @@ function MovementLogTab({
 function BelowMinimumTab() {
   const { data: items, isPending } = useQuery(warehouseBelowMinimumOptions());
 
+  const columns: DataColumn<WarehouseItem>[] = [
+    {
+      key: "name",
+      header: "Název",
+      width: "40%",
+      bold: true,
+      render: (item) => item.name,
+    },
+    {
+      key: "total_quantity",
+      header: "Celkem",
+      width: "20%",
+      mono: true,
+      render: (item) => String(item.total_quantity ?? 0),
+    },
+    {
+      key: "available_quantity",
+      header: "K dispozici",
+      width: "20%",
+      mono: true,
+      render: (item) => String(item.available_quantity ?? 0),
+    },
+    {
+      key: "min_quantity",
+      header: "Min. množství",
+      width: "20%",
+      mono: true,
+      bold: true,
+      render: (item) => String(item.min_quantity ?? 0),
+    },
+  ];
+
   if (isPending) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
   return (
-    <div className="admin-table-responsive">
-      <table className="admin-table">
-        <thead>
-          <tr>
-            <th>Název</th>
-            <th>Celkem</th>
-            <th>K dispozici</th>
-            <th>Min. množství</th>
-          </tr>
-        </thead>
-        <tbody>
-          {(items as WarehouseItem[] | undefined)?.length === 0 && (
-            <tr>
-              <td colSpan={4} className="admin-empty-state">
-                Všechny položky jsou nad minimem
-              </td>
-            </tr>
-          )}
-          {(items as WarehouseItem[] | undefined)?.map((item) => (
-            <tr key={item.id} className="admin-warehouse-row-danger">
-              <td className="fw-500">{item.name}</td>
-              <td className="admin-mono">{item.total_quantity ?? 0}</td>
-              <td className="admin-mono">{item.available_quantity ?? 0}</td>
-              <td className="admin-mono fw-500 admin-warehouse-danger-value">
-                {item.min_quantity ?? 0}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <Card>
+      <DataTable<WarehouseItem>
+        columns={columns}
+        rows={(items as WarehouseItem[] | undefined) ?? []}
+        rowKey={(item) => item.id}
+        rowDanger={() => true}
+        empty={<EmptyState title="Všechny položky jsou nad minimem" />}
+      />
+    </Card>
   );
 }