feat(mui): migrate Attendance Admin (Správa docházky) onto MUI kit

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

src/admin/components/AttendanceShiftTable.tsx

@@ -1,4 +1,6 @@
-import { Link } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
 import {
   formatDate,
   formatDatetime,
@@ -6,8 +8,8 @@ import {
   calculateWorkMinutes,
   formatMinutes,
   getLeaveTypeName,
-  getLeaveTypeBadgeClass,
 } from "../utils/attendanceHelpers";
+import { DataTable, StatusChip, EmptyState, type DataColumn } from "../ui";
 import type { AttendanceRecord as HookAttendanceRecord } from "../hooks/useAttendanceAdmin";
 
 interface AttendanceRecord extends HookAttendanceRecord {
@@ -23,6 +25,56 @@ interface AttendanceShiftTableProps {
   onDelete: (record: AttendanceRecord) => void;
 }
 
+const EditIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+  </svg>
+);
+
+const DeleteIcon = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+  </svg>
+);
+
+/** Map an attendance leave_type to a StatusChip semantic color (mirrors the
+ *  legacy getLeaveTypeBadgeClass colors): work→info, vacation→info(blue),
+ *  sick→error(red), unpaid→default(gray). */
+function leaveTypeChipColor(
+  type: string,
+): "default" | "success" | "error" | "warning" | "info" {
+  switch (type) {
+    case "vacation":
+      return "info";
+    case "sick":
+      return "error";
+    case "unpaid":
+      return "default";
+    default:
+      return "info";
+  }
+}
+
 function formatBreak(record: AttendanceRecord): string {
   if (record.break_start && record.break_end) {
     return `${formatTime(record.break_start)} - ${formatTime(record.break_end)}`;
@@ -36,9 +88,7 @@ function formatBreak(record: AttendanceRecord): string {
 function renderProjectCell(record: AttendanceRecord): React.ReactNode {
   if (record.project_logs && record.project_logs.length > 0) {
     return (
-      <div
-        style={{ display: "flex", flexDirection: "column", gap: "0.125rem" }}
-      >
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 0.25 }}>
         {record.project_logs.map((log, i) => {
           let h: number,
             m: number,
@@ -65,33 +115,32 @@ function renderProjectCell(record: AttendanceRecord): React.ReactNode {
             }
           }
           return (
-            <span
+            <StatusChip
               key={log.id ?? i}
-              className="admin-badge"
-              style={{
-                fontSize: "0.7rem",
-                display: "inline-block",
-                background: isActive ? "var(--accent-light)" : undefined,
-              }}
-            >
-              {log.project_name || `#${log.project_id}`}{" "}
-              {durationValid
-                ? `(${h}:${String(m).padStart(2, "0")}h${isActive ? " ▸" : ""})`
-                : "—"}
-            </span>
+              color={isActive ? "info" : "default"}
+              label={`${log.project_name || `#${log.project_id}`} ${
+                durationValid
+                  ? `(${h}:${String(m).padStart(2, "0")}h${isActive ? " ▸" : ""})`
+                  : "—"
+              }`}
+              sx={{ fontSize: "0.7rem", maxWidth: "100%" }}
+            />
           );
         })}
-      </div>
+      </Box>
     );
   }
   if (record.project_name) {
     return (
-      <span
-        className="admin-badge admin-badge-wrap"
-        style={{ fontSize: "0.75rem" }}
-      >
-        {record.project_name}
-      </span>
+      <StatusChip
+        color="default"
+        label={record.project_name}
+        sx={{
+          fontSize: "0.75rem",
+          height: "auto",
+          "& .MuiChip-label": { whiteSpace: "normal", py: 0.25 },
+        }}
+      />
     );
   }
   return "—";
@@ -102,141 +151,164 @@ export default function AttendanceShiftTable({
   onEdit,
   onDelete,
 }: AttendanceShiftTableProps) {
-  if (records.length === 0) {
-    return (
-      <div className="admin-empty-state">
-        <p>Za tento měsíc nejsou žádné záznamy.</p>
-      </div>
-    );
-  }
+  const columns: DataColumn<AttendanceRecord>[] = [
+    {
+      key: "date",
+      header: "Datum",
+      width: "9%",
+      mono: true,
+      render: (record) => formatDate(record.shift_date),
+    },
+    {
+      key: "user",
+      header: "Zaměstnanec",
+      width: "14%",
+      render: (record) => record.user_name,
+    },
+    {
+      key: "type",
+      header: "Typ",
+      width: "10%",
+      render: (record) => {
+        const leaveType = record.leave_type || "work";
+        return (
+          <StatusChip
+            color={leaveTypeChipColor(leaveType)}
+            label={getLeaveTypeName(leaveType)}
+          />
+        );
+      },
+    },
+    {
+      key: "arrival",
+      header: "Příchod",
+      width: "9%",
+      mono: true,
+      render: (record) => {
+        const isLeave = (record.leave_type || "work") !== "work";
+        return isLeave ? "—" : formatDatetime(record.arrival_time);
+      },
+    },
+    {
+      key: "break",
+      header: "Pauza",
+      width: "10%",
+      mono: true,
+      render: (record) => {
+        const isLeave = (record.leave_type || "work") !== "work";
+        return isLeave ? "—" : formatBreak(record);
+      },
+    },
+    {
+      key: "departure",
+      header: "Odchod",
+      width: "9%",
+      mono: true,
+      render: (record) => {
+        const isLeave = (record.leave_type || "work") !== "work";
+        return isLeave ? "—" : formatDatetime(record.departure_time);
+      },
+    },
+    {
+      key: "hours",
+      header: "Hodiny",
+      width: "9%",
+      mono: true,
+      render: (record) => {
+        const leaveType = record.leave_type || "work";
+        const isLeave = leaveType !== "work";
+        const workMinutes = isLeave
+          ? (record.leave_hours != null ? Number(record.leave_hours) : 8) * 60
+          : calculateWorkMinutes({
+              ...record,
+              notes: record.notes ?? undefined,
+            });
+        return workMinutes > 0 ? `${formatMinutes(workMinutes)} h` : "—";
+      },
+    },
+    {
+      key: "project",
+      header: "Projekt",
+      width: "13%",
+      render: (record) => renderProjectCell(record),
+    },
+    {
+      key: "gps",
+      header: "GPS",
+      width: "5%",
+      render: (record) => {
+        const hasLocation =
+          (record.arrival_lat && record.arrival_lng) ||
+          (record.departure_lat && record.departure_lng);
+        return hasLocation ? (
+          <Box
+            component={RouterLink}
+            to={`/attendance/location/${record.id}`}
+            title="Zobrazit polohu"
+            aria-label="Zobrazit polohu"
+            sx={{ textDecoration: "none" }}
+          >
+            <span aria-hidden="true">{"📍"}</span>
+          </Box>
+        ) : (
+          "—"
+        );
+      },
+    },
+    {
+      key: "notes",
+      header: "Poznámka",
+      width: "9%",
+      render: (record) => (
+        <Box
+          component="span"
+          title={record.notes || ""}
+          sx={{
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {record.notes || ""}
+        </Box>
+      ),
+    },
+    {
+      key: "actions",
+      header: "Akce",
+      width: "8%",
+      align: "right",
+      render: (record) => (
+        <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+          <IconButton
+            size="small"
+            onClick={() => onEdit(record)}
+            aria-label="Upravit"
+            title="Upravit"
+          >
+            {EditIcon}
+          </IconButton>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => onDelete(record)}
+            aria-label="Smazat"
+            title="Smazat"
+          >
+            {DeleteIcon}
+          </IconButton>
+        </Box>
+      ),
+    },
+  ];
 
   return (
-    <div className="admin-table-responsive">
-      <table className="admin-table">
-        <thead>
-          <tr>
-            <th>Datum</th>
-            <th>Zaměstnanec</th>
-            <th>Typ</th>
-            <th>Příchod</th>
-            <th>Pauza</th>
-            <th>Odchod</th>
-            <th>Hodiny</th>
-            <th>Projekt</th>
-            <th>GPS</th>
-            <th>Poznámka</th>
-            <th>Akce</th>
-          </tr>
-        </thead>
-        <tbody>
-          {records.map((record) => {
-            const leaveType = record.leave_type || "work";
-            const isLeave = leaveType !== "work";
-            const workMinutes = isLeave
-              ? (record.leave_hours != null ? Number(record.leave_hours) : 8) *
-                60
-              : calculateWorkMinutes({
-                  ...record,
-                  notes: record.notes ?? undefined,
-                });
-            const hasLocation =
-              (record.arrival_lat && record.arrival_lng) ||
-              (record.departure_lat && record.departure_lng);
-
-            return (
-              <tr key={record.id}>
-                <td className="admin-mono">{formatDate(record.shift_date)}</td>
-                <td>{record.user_name}</td>
-                <td>
-                  <span
-                    className={`attendance-leave-badge ${getLeaveTypeBadgeClass(leaveType)}`}
-                  >
-                    {getLeaveTypeName(leaveType)}
-                  </span>
-                </td>
-                <td className="admin-mono">
-                  {isLeave ? "—" : formatDatetime(record.arrival_time)}
-                </td>
-                <td className="admin-mono">
-                  {isLeave ? "—" : formatBreak(record)}
-                </td>
-                <td className="admin-mono">
-                  {isLeave ? "—" : formatDatetime(record.departure_time)}
-                </td>
-                <td className="admin-mono">
-                  {workMinutes > 0 ? `${formatMinutes(workMinutes)} h` : "—"}
-                </td>
-                <td>{renderProjectCell(record)}</td>
-                <td>
-                  {hasLocation ? (
-                    <Link
-                      to={`/attendance/location/${record.id}`}
-                      className="attendance-gps-link"
-                      title="Zobrazit polohu"
-                      aria-label="Zobrazit polohu"
-                    >
-                      <span aria-hidden="true">{"📍"}</span>
-                    </Link>
-                  ) : (
-                    "—"
-                  )}
-                </td>
-                <td
-                  style={{
-                    maxWidth: "100px",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                  }}
-                  title={record.notes || ""}
-                >
-                  {record.notes || ""}
-                </td>
-                <td>
-                  <div className="admin-table-actions">
-                    <button
-                      onClick={() => onEdit(record)}
-                      className="admin-btn-icon"
-                      title="Upravit"
-                      aria-label="Upravit"
-                    >
-                      <svg
-                        width="18"
-                        height="18"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                      >
-                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                      </svg>
-                    </button>
-                    <button
-                      onClick={() => onDelete(record)}
-                      className="admin-btn-icon danger"
-                      title="Smazat"
-                      aria-label="Smazat"
-                    >
-                      <svg
-                        width="18"
-                        height="18"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                      >
-                        <polyline points="3 6 5 6 21 6" />
-                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                      </svg>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
+    <DataTable<AttendanceRecord>
+      columns={columns}
+      rows={records}
+      rowKey={(record) => record.id}
+      empty={<EmptyState title="Za tento měsíc nejsou žádné záznamy." />}
+    />
   );
 }