From b54fa84ac76082af57489698e969c8c9e4a51002 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sat, 6 Jun 2026 23:56:00 +0200
Subject: [PATCH] =?UTF-8?q?feat(mui):=20migrate=20Leave=20Approval=20(Schv?=
 =?UTF-8?q?alov=C3=A1n=C3=AD)=20onto=20MUI=20kit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/admin/pages/LeaveApproval.tsx b/src/admin/pages/LeaveApproval.tsx
index 748ee28..f5f7733 100644
--- a/src/admin/pages/LeaveApproval.tsx
+++ b/src/admin/pages/LeaveApproval.tsx
@@ -3,17 +3,33 @@ import { useQuery } from "@tanstack/react-query";
 import { useAuth } from "../context/AuthContext";
 import { useAlert } from "../context/AlertContext";
 import { motion } from "framer-motion";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import { formatDate, formatDatetime } from "../utils/attendanceHelpers";
 import { czechPlural } from "../utils/formatters";
 import {
   leavePendingOptions,
   leaveProcessedOptions,
 } from "../lib/queries/leave";
-import ConfirmModal from "../components/ConfirmModal";
 import Forbidden from "../components/Forbidden";
-import FormModal from "../components/FormModal";
-import FormField from "../components/FormField";
 import { useApiMutation } from "../lib/queries/mutations";
+import {
+  Button,
+  Card,
+  DataTable,
+  ConfirmDialog,
+  Modal,
+  StatusChip,
+  Field,
+  TextField,
+  PageHeader,
+  EmptyState,
+  LoadingState,
+  Tabs,
+  TabPanel,
+  type DataColumn,
+  type TabDef,
+} from "../ui";
 
 const API_BASE = "/api/admin";
 
@@ -23,12 +39,6 @@ const leaveTypeLabels: Record<string, string> = {
   unpaid: "Neplacené volno",
 };
 
-const leaveTypeClasses: Record<string, string> = {
-  vacation: "badge-vacation",
-  sick: "badge-sick",
-  unpaid: "badge-unpaid",
-};
-
 const statusLabels: Record<string, string> = {
   pending: "Čeká na schválení",
   approved: "Schváleno",
@@ -36,13 +46,25 @@ const statusLabels: Record<string, string> = {
   cancelled: "Zrušeno",
 };
 
-const statusClasses: Record<string, string> = {
-  pending: "badge-pending",
-  approved: "badge-approved",
-  rejected: "badge-rejected",
-  cancelled: "badge-cancelled",
+// Leave type → StatusChip color
+const leaveTypeColor: Record<
+  string,
+  "info" | "error" | "default" | "success" | "warning"
+> = {
+  vacation: "info",
+  sick: "error",
+  unpaid: "default",
 };
 
+// Status → StatusChip color
+const statusColor: Record<string, "warning" | "success" | "error" | "default"> =
+  {
+    pending: "warning",
+    approved: "success",
+    rejected: "error",
+    cancelled: "default",
+  };
+
 interface RawLeaveRequest {
   id: number;
   leave_type: string;
@@ -192,290 +214,243 @@ export default function LeaveApproval() {
   };
 
   if (loading) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
+  const tabs: TabDef[] = [
+    { value: "pending", label: `Ke schválení (${pendingCount})` },
+    { value: "processed", label: "Vyřízené" },
+  ];
+
+  const processedColumns: DataColumn<LeaveRequest>[] = [
+    {
+      key: "employee_name",
+      header: "Zaměstnanec",
+      width: "16%",
+      bold: true,
+      render: (req) => req.employee_name,
+    },
+    {
+      key: "leave_type",
+      header: "Typ",
+      width: "13%",
+      render: (req) => (
+        <StatusChip
+          label={leaveTypeLabels[req.leave_type] || req.leave_type}
+          color={leaveTypeColor[req.leave_type] ?? "default"}
+        />
+      ),
+    },
+    {
+      key: "date_from",
+      header: "Od",
+      width: "10%",
+      mono: true,
+      render: (req) => formatDate(req.date_from),
+    },
+    {
+      key: "date_to",
+      header: "Do",
+      width: "10%",
+      mono: true,
+      render: (req) => formatDate(req.date_to),
+    },
+    {
+      key: "total_days",
+      header: "Dny",
+      width: "6%",
+      mono: true,
+      render: (req) => String(req.total_days),
+    },
+    {
+      key: "status",
+      header: "Stav",
+      width: "13%",
+      render: (req) => (
+        <StatusChip
+          label={statusLabels[req.status] || req.status}
+          color={statusColor[req.status] ?? "default"}
+        />
+      ),
+    },
+    {
+      key: "reviewer_name",
+      header: "Schválil",
+      width: "12%",
+      render: (req) => req.reviewer_name || "—",
+    },
+    {
+      key: "reviewer_note",
+      header: "Poznámka",
+      width: "12%",
+      render: (req) =>
+        req.reviewer_note ? (
+          <Box component="span" title={req.reviewer_note}>
+            {req.reviewer_note.length > 40
+              ? `${req.reviewer_note.substring(0, 40)}...`
+              : req.reviewer_note}
+          </Box>
+        ) : (
+          "—"
+        ),
+    },
+    {
+      key: "reviewed_at",
+      header: "Vyřízeno",
+      width: "8%",
+      mono: true,
+      render: (req) => formatDatetime(req.reviewed_at),
+    },
+  ];
+
   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">Schvalování nepřítomnosti</h1>
-          <p className="admin-page-subtitle">
-            {pendingCount > 0
+        <PageHeader
+          title="Schvalování nepřítomnosti"
+          subtitle={
+            pendingCount > 0
               ? `${pendingCount} ${czechPlural(pendingCount, "žádost čeká", "žádosti čekají", "žádostí čeká")} na schválení`
-              : "Žádné čekající žádosti"}
-          </p>
-        </div>
+              : "Žádné čekající žádosti"
+          }
+        />
       </motion.div>
 
-      {/* Tabs */}
       <motion.div
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
-        <div className="admin-tabs mb-6">
-          <button
-            className={`admin-tab ${activeTab === "pending" ? "active" : ""}`}
-            onClick={() => setActiveTab("pending")}
-          >
-            Ke schválení
-            {pendingCount > 0 && (
-              <span
-                className="admin-badge badge-pending"
-                style={{
-                  marginLeft: "0.5rem",
-                  fontSize: "0.7rem",
-                  padding: "0.15rem 0.5rem",
-                }}
-              >
-                {pendingCount}
-              </span>
-            )}
-          </button>
-          <button
-            className={`admin-tab ${activeTab === "processed" ? "active" : ""}`}
-            onClick={() => setActiveTab("processed")}
-          >
-            Vyřízené
-          </button>
-        </div>
+        <Tabs
+          value={activeTab}
+          onChange={(v) => setActiveTab(v as "pending" | "processed")}
+          tabs={tabs}
+        />
       </motion.div>
 
       {/* Pending Tab */}
-      {activeTab === "pending" && (
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.25, delay: 0.08 }}
-        >
-          {pendingRequests.length === 0 ? (
-            <div className="admin-card">
-              <div className="admin-card-body">
-                <div className="admin-empty-state">
-                  <svg
-                    width="48"
-                    height="48"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    className="text-muted mb-4"
-                  >
-                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-                    <polyline points="22 4 12 14.01 9 11.01" />
-                  </svg>
-                  <p>Žádné čekající žádosti</p>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "1rem",
-              }}
-            >
-              {pendingRequests.map((req) => (
-                <div key={req.id} className="admin-card">
-                  <div
-                    className="admin-card-body"
-                    style={{ padding: "1.25rem" }}
-                  >
-                    <div
-                      style={{
+      <TabPanel value="pending" current={activeTab}>
+        {pendingRequests.length === 0 ? (
+          <Card>
+            <EmptyState title="Žádné čekající žádosti" />
+          </Card>
+        ) : (
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            {pendingRequests.map((req) => (
+              <Card key={req.id}>
+                <Box
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start",
+                    flexWrap: "wrap",
+                    gap: 2,
+                  }}
+                >
+                  <Box sx={{ flex: 1 }}>
+                    <Box
+                      sx={{
                         display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "flex-start",
-                        flexWrap: "wrap",
-                        gap: "1rem",
+                        alignItems: "center",
+                        gap: 1.5,
+                        mb: 1,
                       }}
                     >
-                      <div className="flex-1">
-                        <div className="flex-row-gap mb-2">
-                          <strong style={{ fontSize: "1rem" }}>
-                            {req.employee_name}
-                          </strong>
-                          <span
-                            className={`attendance-leave-badge ${leaveTypeClasses[req.leave_type] || ""}`}
-                          >
-                            {leaveTypeLabels[req.leave_type] || req.leave_type}
-                          </span>
-                        </div>
-                        <div
-                          className="text-secondary"
-                          style={{
-                            display: "flex",
-                            gap: "1.5rem",
-                            flexWrap: "wrap",
-                            fontSize: "0.875rem",
-                          }}
-                        >
-                          <span>
-                            <strong>{formatDate(req.date_from)}</strong> —{" "}
-                            <strong>{formatDate(req.date_to)}</strong>
-                          </span>
-                          <span>
-                            {req.total_days}{" "}
-                            {czechPlural(req.total_days, "den", "dny", "dnů")} (
-                            {req.total_hours}h)
-                          </span>
-                          <span className="text-muted">
-                            Podáno: {formatDatetime(req.created_at)}
-                          </span>
-                        </div>
-                        {req.notes && (
-                          <div
-                            className="text-secondary"
-                            style={{
-                              marginTop: "0.5rem",
-                              fontSize: "0.875rem",
-                              fontStyle: "italic",
-                            }}
-                          >
-                            {req.notes}
-                          </div>
-                        )}
-                      </div>
-                      <div
-                        style={{
-                          display: "flex",
-                          gap: "0.5rem",
-                          flexShrink: 0,
+                      <Typography
+                        component="strong"
+                        sx={{ fontSize: "1rem", fontWeight: 600 }}
+                      >
+                        {req.employee_name}
+                      </Typography>
+                      <StatusChip
+                        label={
+                          leaveTypeLabels[req.leave_type] || req.leave_type
+                        }
+                        color={leaveTypeColor[req.leave_type] ?? "default"}
+                      />
+                    </Box>
+                    <Box
+                      sx={{
+                        display: "flex",
+                        gap: 3,
+                        flexWrap: "wrap",
+                        fontSize: "0.875rem",
+                        color: "text.secondary",
+                      }}
+                    >
+                      <Box component="span">
+                        <strong>{formatDate(req.date_from)}</strong> —{" "}
+                        <strong>{formatDate(req.date_to)}</strong>
+                      </Box>
+                      <Box component="span">
+                        {req.total_days}{" "}
+                        {czechPlural(req.total_days, "den", "dny", "dnů")} (
+                        {req.total_hours}h)
+                      </Box>
+                      <Box component="span" sx={{ color: "text.disabled" }}>
+                        Podáno: {formatDatetime(req.created_at)}
+                      </Box>
+                    </Box>
+                    {req.notes && (
+                      <Box
+                        sx={{
+                          mt: 1,
+                          fontSize: "0.875rem",
+                          fontStyle: "italic",
+                          color: "text.secondary",
                         }}
                       >
-                        <button
-                          onClick={() =>
-                            setApproveModal({ open: true, request: req })
-                          }
-                          className="admin-btn admin-btn-sm"
-                          style={{
-                            background: "var(--success-light)",
-                            color: "var(--success)",
-                            border: "none",
-                          }}
-                        >
-                          Schválit
-                        </button>
-                        <button
-                          onClick={() =>
-                            setRejectModal({ open: true, request: req })
-                          }
-                          className="admin-btn admin-btn-sm"
-                          style={{
-                            background: "var(--danger-light)",
-                            color: "var(--danger)",
-                            border: "none",
-                          }}
-                        >
-                          Zamítnout
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </motion.div>
-      )}
+                        {req.notes}
+                      </Box>
+                    )}
+                  </Box>
+                  <Box sx={{ display: "flex", gap: 1, flexShrink: 0 }}>
+                    <Button
+                      size="small"
+                      color="success"
+                      variant="outlined"
+                      onClick={() =>
+                        setApproveModal({ open: true, request: req })
+                      }
+                    >
+                      Schválit
+                    </Button>
+                    <Button
+                      size="small"
+                      color="error"
+                      variant="outlined"
+                      onClick={() =>
+                        setRejectModal({ open: true, request: req })
+                      }
+                    >
+                      Zamítnout
+                    </Button>
+                  </Box>
+                </Box>
+              </Card>
+            ))}
+          </Box>
+        )}
+      </TabPanel>
 
       {/* Processed Tab */}
-      {activeTab === "processed" && (
-        <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">
-            {processedRequests.length === 0 ? (
-              <div className="admin-empty-state">
-                <p>Zatím žádné vyřízené žádosti</p>
-              </div>
-            ) : (
-              <div className="admin-table-responsive">
-                <table className="admin-table">
-                  <thead>
-                    <tr>
-                      <th>Zaměstnanec</th>
-                      <th>Typ</th>
-                      <th>Od</th>
-                      <th>Do</th>
-                      <th>Dny</th>
-                      <th>Stav</th>
-                      <th>Schválil</th>
-                      <th>Poznámka</th>
-                      <th>Vyřízeno</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {processedRequests.map((req) => (
-                      <tr key={req.id}>
-                        <td>
-                          <strong>{req.employee_name}</strong>
-                        </td>
-                        <td>
-                          <span
-                            className={`attendance-leave-badge ${leaveTypeClasses[req.leave_type] || ""}`}
-                          >
-                            {leaveTypeLabels[req.leave_type] || req.leave_type}
-                          </span>
-                        </td>
-                        <td className="admin-mono">
-                          {formatDate(req.date_from)}
-                        </td>
-                        <td className="admin-mono">
-                          {formatDate(req.date_to)}
-                        </td>
-                        <td className="admin-mono">{req.total_days}</td>
-                        <td>
-                          <span
-                            className={`admin-badge ${statusClasses[req.status] || ""}`}
-                          >
-                            {statusLabels[req.status] || req.status}
-                          </span>
-                        </td>
-                        <td>{req.reviewer_name || "—"}</td>
-                        <td style={{ maxWidth: "200px" }}>
-                          {req.reviewer_note ? (
-                            <span title={req.reviewer_note}>
-                              {req.reviewer_note.length > 40
-                                ? `${req.reviewer_note.substring(0, 40)}...`
-                                : req.reviewer_note}
-                            </span>
-                          ) : (
-                            "—"
-                          )}
-                        </td>
-                        <td
-                          className="admin-mono"
-                          style={{ whiteSpace: "nowrap" }}
-                        >
-                          {formatDatetime(req.reviewed_at)}
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </motion.div>
-      )}
+      <TabPanel value="processed" current={activeTab}>
+        <Card>
+          <DataTable<LeaveRequest>
+            columns={processedColumns}
+            rows={processedRequests}
+            rowKey={(req) => req.id}
+            empty={<EmptyState title="Zatím žádné vyřízené žádosti" />}
+          />
+        </Card>
+      </TabPanel>
 
       {/* Approve Confirmation */}
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={approveModal.open}
         onClose={() => setApproveModal({ open: false, request: null })}
         onConfirm={handleApprove}
@@ -486,12 +461,11 @@ export default function LeaveApproval() {
             : ""
         }
         confirmText="Schválit"
-        type="info"
         loading={approveMutation.isPending}
       />
 
       {/* Reject Modal */}
-      <FormModal
+      <Modal
         isOpen={rejectModal.open && !!rejectModal.request}
         onClose={() => {
           setRejectModal({ open: false, request: null });
@@ -499,31 +473,31 @@ export default function LeaveApproval() {
         }}
         onSubmit={handleReject}
         title="Zamítnout žádost"
-        submitLabel="Zamítnout"
+        submitText="Zamítnout"
         loading={rejectMutation.isPending}
       >
         {rejectModal.request && (
           <>
-            <p className="text-secondary mb-4">
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
               {rejectModal.request.employee_name} —{" "}
               {leaveTypeLabels[rejectModal.request.leave_type]},{" "}
               {formatDate(rejectModal.request.date_from)} —{" "}
               {formatDate(rejectModal.request.date_to)} (
               {rejectModal.request.total_days} dnů)
-            </p>
-            <FormField label="Důvod zamítnutí" required>
-              <textarea
+            </Typography>
+            <Field label="Důvod zamítnutí" required>
+              <TextField
                 value={rejectNote}
                 onChange={(e) => setRejectNote(e.target.value)}
                 placeholder="Uveďte důvod zamítnutí..."
-                className="admin-form-textarea"
+                multiline
                 rows={3}
                 autoFocus
               />
-            </FormField>
+            </Field>
           </>
         )}
-      </FormModal>
-    </div>
+      </Modal>
+    </Box>
   );
 }