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." />}
+    />
   );
 }

src/admin/components/BulkAttendanceModal.tsx

@@ -1,5 +1,6 @@
-import FormModal from "./FormModal";
-import AdminDatePicker from "./AdminDatePicker";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { Modal, MonthField, TimeField, Field, CheckboxField } from "../ui";
 
 interface BulkAttendanceForm {
   month: string;
@@ -39,127 +40,136 @@ export default function BulkAttendanceModal({
   toggleAllUsers,
 }: BulkAttendanceModalProps) {
   return (
-    <FormModal
+    <Modal
       isOpen={isOpen}
       onClose={onClose}
       title="Vyplnit docházku za měsíc"
-      size="lg"
+      maxWidth="lg"
       loading={submitting}
       onSubmit={onSubmit}
-      submitLabel="Vyplnit měsíc"
+      submitText="Vyplnit měsíc"
       submitDisabled={form.user_ids.length === 0}
     >
-      <p
-        style={{
-          color: "var(--text-secondary)",
-          marginTop: "0.25rem",
-          marginBottom: "1rem",
-          fontSize: "0.875rem",
-        }}
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        sx={{ mt: 0.25, mb: 2 }}
       >
         Vytvoří záznamy pro všechny pracovní dny. Svátky se automaticky označí.
         Existující záznamy se přeskočí.
-      </p>
+      </Typography>
 
-      <div className="admin-form">
-        <div className="admin-form-group">
-          <label className="admin-form-label">Měsíc</label>
-          <AdminDatePicker
-            mode="month"
-            value={form.month}
-            onChange={(val) => setForm({ ...form, month: val })}
-          />
-        </div>
+      <Field label="Měsíc">
+        <MonthField
+          value={form.month}
+          onChange={(val) => setForm({ ...form, month: val })}
+        />
+      </Field>
 
-        <div className="admin-form-group">
-          <label className="admin-form-label">
+      <Box sx={{ mb: 2 }}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 1.5,
+            mb: 0.5,
+          }}
+        >
+          <Typography
+            component="span"
+            variant="body2"
+            sx={{ fontWeight: 600, color: "text.secondary" }}
+          >
             Zaměstnanci
-            <button
-              type="button"
-              onClick={toggleAllUsers}
-              style={{
-                marginLeft: "0.75rem",
-                background: "none",
-                border: "none",
-                color: "var(--accent-color)",
-                cursor: "pointer",
-                fontSize: "0.8125rem",
-                fontWeight: 500,
-                padding: 0,
-              }}
-            >
-              {form.user_ids.length === users.length
-                ? "Odznačit vše"
-                : "Vybrat vše"}
-            </button>
-          </label>
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "0.375rem",
-              maxHeight: "200px",
-              overflowY: "auto",
-              padding: "0.75rem",
-              background: "var(--bg-tertiary)",
-              borderRadius: "var(--border-radius-sm)",
-              border: "1px solid var(--border-color)",
+          </Typography>
+          <Typography
+            component="button"
+            type="button"
+            onClick={toggleAllUsers}
+            variant="caption"
+            sx={{
+              background: "none",
+              border: "none",
+              p: 0,
+              cursor: "pointer",
+              fontWeight: 500,
+              color: "primary.main",
             }}
           >
-            {users.map((user) => (
-              <label key={user.id} className="admin-form-checkbox">
-                <input
-                  type="checkbox"
-                  checked={form.user_ids.includes(String(user.id))}
-                  onChange={() => toggleUser(user.id)}
-                />
-                <span>{user.name}</span>
-              </label>
-            ))}
-          </div>
-          <small className="admin-form-hint">
-            Vybráno: {form.user_ids.length} z {users.length}
-          </small>
-        </div>
+            {form.user_ids.length === users.length
+              ? "Odznačit vše"
+              : "Vybrat vše"}
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.25,
+            maxHeight: 200,
+            overflowY: "auto",
+            p: 1.5,
+            bgcolor: "action.hover",
+            borderRadius: 2,
+            border: 1,
+            borderColor: "divider",
+          }}
+        >
+          {users.map((user) => (
+            <CheckboxField
+              key={user.id}
+              label={user.name}
+              checked={form.user_ids.includes(String(user.id))}
+              onChange={() => toggleUser(user.id)}
+            />
+          ))}
+        </Box>
+        <Typography variant="caption" color="text.secondary">
+          Vybráno: {form.user_ids.length} z {users.length}
+        </Typography>
+      </Box>
 
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">Příchod</label>
-            <AdminDatePicker
-              mode="time"
-              value={form.arrival_time}
-              onChange={(val) => setForm({ ...form, arrival_time: val })}
-            />
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">Odchod</label>
-            <AdminDatePicker
-              mode="time"
-              value={form.departure_time}
-              onChange={(val) => setForm({ ...form, departure_time: val })}
-            />
-          </div>
-        </div>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+          gap: 2,
+        }}
+      >
+        <Field label="Příchod">
+          <TimeField
+            value={form.arrival_time}
+            onChange={(val) => setForm({ ...form, arrival_time: val })}
+          />
+        </Field>
+        <Field label="Odchod">
+          <TimeField
+            value={form.departure_time}
+            onChange={(val) => setForm({ ...form, departure_time: val })}
+          />
+        </Field>
+      </Box>
 
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">Začátek pauzy</label>
-            <AdminDatePicker
-              mode="time"
-              value={form.break_start_time}
-              onChange={(val) => setForm({ ...form, break_start_time: val })}
-            />
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">Konec pauzy</label>
-            <AdminDatePicker
-              mode="time"
-              value={form.break_end_time}
-              onChange={(val) => setForm({ ...form, break_end_time: val })}
-            />
-          </div>
-        </div>
-      </div>
-    </FormModal>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+          gap: 2,
+        }}
+      >
+        <Field label="Začátek pauzy">
+          <TimeField
+            value={form.break_start_time}
+            onChange={(val) => setForm({ ...form, break_start_time: val })}
+          />
+        </Field>
+        <Field label="Konec pauzy">
+          <TimeField
+            value={form.break_end_time}
+            onChange={(val) => setForm({ ...form, break_end_time: val })}
+          />
+        </Field>
+      </Box>
+    </Modal>
   );
 }

src/admin/components/ShiftFormModal.tsx

@@ -1,5 +1,16 @@
-import AdminDatePicker from "./AdminDatePicker";
-import FormModal from "./FormModal";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import {
+  Modal,
+  Button,
+  Select,
+  TextField,
+  DateField,
+  TimeField,
+  Field,
+  Alert,
+} from "../ui";
 import {
   calcFormWorkMinutes,
   calcProjectMinutesTotal,
@@ -80,6 +91,19 @@ export interface ShiftFormModalProps {
   editingRecord: EditingRecord | null;
 }
 
+const RemoveIcon = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
 // ---------- ProjectTimeStatus ----------
 
 function ProjectTimeStatus({ form, projectLogs }: ProjectTimeStatusProps) {
@@ -100,30 +124,14 @@ function ProjectTimeStatus({ form, projectLogs }: ProjectTimeStatusProps) {
 
   const isMatch = remaining === 0;
   return (
-    <div
-      style={{
-        padding: "0.5rem 0.75rem",
-        marginBottom: "0.5rem",
-        borderRadius: "6px",
-        fontSize: "0.8rem",
-        background: isMatch
-          ? "var(--success-bg, rgba(34,197,94,0.1))"
-          : "var(--danger-bg, rgba(239,68,68,0.1))",
-        color: isMatch
-          ? "var(--success-color, #16a34a)"
-          : "var(--danger-color, #dc2626)",
-        border: `1px solid ${
-          isMatch
-            ? "var(--success-border, rgba(34,197,94,0.3))"
-            : "var(--danger-border, rgba(239,68,68,0.3))"
-        }`,
-      }}
-    >
-      Odpracováno: {Math.floor(totalWork / 60)}h {totalWork % 60}m | Přiřazeno:{" "}
-      {Math.floor(totalProject / 60)}h {totalProject % 60}m | Zbývá:{" "}
-      {Math.floor(Math.abs(remaining) / 60)}h {Math.abs(remaining) % 60}m{" "}
-      {remaining < 0 ? "(překročeno)" : ""}
-    </div>
+    <Box sx={{ mb: 1 }}>
+      <Alert severity={isMatch ? "success" : "error"}>
+        Odpracováno: {Math.floor(totalWork / 60)}h {totalWork % 60}m |
+        Přiřazeno: {Math.floor(totalProject / 60)}h {totalProject % 60}m |
+        Zbývá: {Math.floor(Math.abs(remaining) / 60)}h{" "}
+        {Math.abs(remaining) % 60}m {remaining < 0 ? "(překročeno)" : ""}
+      </Alert>
+    </Box>
   );
 }
 
@@ -137,65 +145,65 @@ function ProjectLogRow({
   onRemove,
 }: ProjectLogRowProps) {
   return (
-    <div className="flex-row gap-2 mb-2">
-      <select
-        value={log.project_id}
-        onChange={(e) => onUpdate(index, "project_id", e.target.value)}
-        className="admin-form-select"
-        style={{ flex: 3, marginBottom: 0 }}
-      >
-        <option value="">— Projekt —</option>
-        {projectList.map((p) => (
-          <option key={p.id} value={p.id}>
-            {p.project_number} – {p.name}
-          </option>
-        ))}
-      </select>
-      <input
-        type="number"
-        min="0"
-        max="24"
-        value={log.hours}
-        onChange={(e) => onUpdate(index, "hours", e.target.value)}
-        className="admin-form-input"
-        style={{ width: "60px", marginBottom: 0, textAlign: "center" }}
-        placeholder="h"
-      />
-      <span style={{ fontSize: "0.85rem", color: "var(--text-secondary)" }}>
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        gap: 1,
+        mb: 1,
+      }}
+    >
+      <Box sx={{ flex: 3, minWidth: 0 }}>
+        <Select
+          value={String(log.project_id)}
+          onChange={(val) => onUpdate(index, "project_id", val)}
+          options={[
+            { value: "", label: "— Projekt —" },
+            ...projectList.map((p) => ({
+              value: String(p.id),
+              label: `${p.project_number} – ${p.name}`,
+            })),
+          ]}
+        />
+      </Box>
+      <Box sx={{ width: 70, flexShrink: 0 }}>
+        <TextField
+          type="number"
+          value={log.hours}
+          onChange={(e) => onUpdate(index, "hours", e.target.value)}
+          placeholder="h"
+          slotProps={{
+            htmlInput: { min: 0, max: 24, style: { textAlign: "center" } },
+          }}
+        />
+      </Box>
+      <Typography variant="body2" color="text.secondary">
         h
-      </span>
-      <input
-        type="number"
-        min="0"
-        max="59"
-        value={log.minutes}
-        onChange={(e) => onUpdate(index, "minutes", e.target.value)}
-        className="admin-form-input"
-        style={{ width: "60px", marginBottom: 0, textAlign: "center" }}
-        placeholder="m"
-      />
-      <span style={{ fontSize: "0.85rem", color: "var(--text-secondary)" }}>
+      </Typography>
+      <Box sx={{ width: 70, flexShrink: 0 }}>
+        <TextField
+          type="number"
+          value={log.minutes}
+          onChange={(e) => onUpdate(index, "minutes", e.target.value)}
+          placeholder="m"
+          slotProps={{
+            htmlInput: { min: 0, max: 59, style: { textAlign: "center" } },
+          }}
+        />
+      </Box>
+      <Typography variant="body2" color="text.secondary">
         m
-      </span>
-      <button
-        type="button"
+      </Typography>
+      <IconButton
+        size="small"
         onClick={() => onRemove(index)}
-        className="admin-btn admin-btn-secondary admin-btn-sm"
-        style={{ padding: "0.375rem", flexShrink: 0 }}
+        aria-label="Odebrat"
         title="Odebrat"
+        sx={{ flexShrink: 0 }}
       >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path d="M18 6L6 18M6 6l12 12" />
-        </svg>
-      </button>
-    </div>
+        {RemoveIcon}
+      </IconButton>
+    </Box>
   );
 }
 
@@ -245,7 +253,7 @@ export default function ShiftFormModal({
   };
 
   return (
-    <FormModal
+    <Modal
       isOpen={isOpen}
       onClose={onClose}
       title={isCreate ? "Přidat záznam docházky" : "Upravit docházku"}
@@ -254,200 +262,202 @@ export default function ShiftFormModal({
           ? `${editingRecord.user_name} — ${formatDate(editingRecord.shift_date)}`
           : undefined
       }
-      size="lg"
+      maxWidth="lg"
       onSubmit={onSubmit}
-      submitLabel="Uložit"
-      cancelLabel="Zrušit"
+      submitText="Uložit"
+      cancelText="Zrušit"
     >
-      <div className="admin-form">
-        {isCreate ? (
-          <div className="admin-form-row">
-            <div className="admin-form-group">
-              <label className="admin-form-label required">Zaměstnanec</label>
-              <select
-                value={form.user_id}
-                onChange={(e) => updateField("user_id", e.target.value)}
-                className="admin-form-select"
-              >
-                <option value="">Vyberte zaměstnance</option>
-                {users.map((user) => (
-                  <option key={user.id} value={user.id}>
-                    {user.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="admin-form-group">
-              <label className="admin-form-label required">Datum směny</label>
-              <AdminDatePicker
-                mode="date"
-                value={form.shift_date}
-                onChange={(val) => onShiftDateChange(val)}
-              />
-            </div>
-          </div>
-        ) : (
-          <div className="admin-form-group">
-            <label className="admin-form-label">Datum směny</label>
-            <AdminDatePicker
-              mode="date"
+      {isCreate ? (
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+            gap: 2,
+          }}
+        >
+          <Field label="Zaměstnanec" required>
+            <Select
+              value={form.user_id}
+              onChange={(val) => updateField("user_id", val)}
+              options={[
+                { value: "", label: "Vyberte zaměstnance" },
+                ...users.map((user) => ({
+                  value: String(user.id),
+                  label: user.name,
+                })),
+              ]}
+            />
+          </Field>
+          <Field label="Datum směny" required>
+            <DateField
               value={form.shift_date}
-              onChange={(val) => updateField("shift_date", val)}
+              onChange={(val) => onShiftDateChange(val)}
             />
-          </div>
-        )}
-
-        <div className="admin-form-group">
-          <label className="admin-form-label">Typ záznamu</label>
-          <select
-            value={form.leave_type}
-            onChange={(e) => updateField("leave_type", e.target.value)}
-            className="admin-form-select"
-          >
-            <option value="work">Práce</option>
-            <option value="vacation">Dovolená</option>
-            <option value="sick">Nemoc</option>
-            <option value="unpaid">Neplacené volno</option>
-          </select>
-        </div>
-
-        {!isWorkType && (
-          <div className="admin-form-group">
-            <label className="admin-form-label">Počet hodin</label>
-            <input
-              type="number"
-              inputMode="decimal"
-              value={form.leave_hours}
-              onChange={(e) =>
-                updateField("leave_hours", parseFloat(e.target.value))
-              }
-              min="0.5"
-              max="24"
-              step="0.5"
-              className="admin-form-input"
-            />
-            {isCreate && (
-              <small className="admin-form-hint">8 hodin = celý den</small>
-            )}
-          </div>
-        )}
-
-        {isWorkType && (
-          <>
-            <div className="admin-form-row">
-              <div className="admin-form-group">
-                <label className="admin-form-label">Příchod - datum</label>
-                <AdminDatePicker
-                  mode="date"
-                  value={form.arrival_date}
-                  onChange={(val) => updateField("arrival_date", val)}
-                />
-              </div>
-              <div className="admin-form-group">
-                <label className="admin-form-label">Příchod - čas</label>
-                <AdminDatePicker
-                  mode="time"
-                  value={form.arrival_time}
-                  onChange={(val) => updateField("arrival_time", val)}
-                />
-              </div>
-            </div>
-
-            <div className="admin-form-row">
-              <div className="admin-form-group">
-                <label className="admin-form-label">
-                  Začátek pauzy - datum
-                </label>
-                <AdminDatePicker
-                  mode="date"
-                  value={form.break_start_date}
-                  onChange={(val) => updateField("break_start_date", val)}
-                />
-              </div>
-              <div className="admin-form-group">
-                <label className="admin-form-label">Začátek pauzy - čas</label>
-                <AdminDatePicker
-                  mode="time"
-                  value={form.break_start_time}
-                  onChange={(val) => updateField("break_start_time", val)}
-                />
-              </div>
-            </div>
-
-            <div className="admin-form-row">
-              <div className="admin-form-group">
-                <label className="admin-form-label">Konec pauzy - datum</label>
-                <AdminDatePicker
-                  mode="date"
-                  value={form.break_end_date}
-                  onChange={(val) => updateField("break_end_date", val)}
-                />
-              </div>
-              <div className="admin-form-group">
-                <label className="admin-form-label">Konec pauzy - čas</label>
-                <AdminDatePicker
-                  mode="time"
-                  value={form.break_end_time}
-                  onChange={(val) => updateField("break_end_time", val)}
-                />
-              </div>
-            </div>
-
-            <div className="admin-form-row">
-              <div className="admin-form-group">
-                <label className="admin-form-label">Odchod - datum</label>
-                <AdminDatePicker
-                  mode="date"
-                  value={form.departure_date}
-                  onChange={(val) => updateField("departure_date", val)}
-                />
-              </div>
-              <div className="admin-form-group">
-                <label className="admin-form-label">Odchod - čas</label>
-                <AdminDatePicker
-                  mode="time"
-                  value={form.departure_time}
-                  onChange={(val) => updateField("departure_time", val)}
-                />
-              </div>
-            </div>
-          </>
-        )}
-
-        {isWorkType && projectList.length > 0 && (
-          <div className="admin-form-group">
-            <label className="admin-form-label">Projekty</label>
-            <ProjectTimeStatus form={form} projectLogs={projectLogs} />
-            {projectLogs.map((log, i) => (
-              <ProjectLogRow
-                key={log._key || i}
-                log={log}
-                index={i}
-                projectList={projectList}
-                onUpdate={updateProjectLog}
-                onRemove={removeProjectLog}
-              />
-            ))}
-            <button
-              type="button"
-              onClick={addProjectLog}
-              className="admin-btn admin-btn-secondary admin-btn-sm"
-            >
-              + Přidat projekt
-            </button>
-          </div>
-        )}
-
-        <div className="admin-form-group">
-          <label className="admin-form-label">Poznámka</label>
-          <textarea
-            value={form.notes}
-            onChange={(e) => updateField("notes", e.target.value)}
-            className="admin-form-textarea"
-            rows={3}
+          </Field>
+        </Box>
+      ) : (
+        <Field label="Datum směny">
+          <DateField
+            value={form.shift_date}
+            onChange={(val) => updateField("shift_date", val)}
           />
-        </div>
-      </div>
-    </FormModal>
+        </Field>
+      )}
+
+      <Field label="Typ záznamu">
+        <Select
+          value={form.leave_type}
+          onChange={(val) => updateField("leave_type", val)}
+          options={[
+            { value: "work", label: "Práce" },
+            { value: "vacation", label: "Dovolená" },
+            { value: "sick", label: "Nemoc" },
+            { value: "unpaid", label: "Neplacené volno" },
+          ]}
+        />
+      </Field>
+
+      {!isWorkType && (
+        <Field
+          label="Počet hodin"
+          hint={isCreate ? "8 hodin = celý den" : undefined}
+        >
+          <TextField
+            type="number"
+            inputMode="decimal"
+            value={form.leave_hours}
+            onChange={(e) =>
+              updateField("leave_hours", parseFloat(e.target.value))
+            }
+            slotProps={{ htmlInput: { min: 0.5, max: 24, step: 0.5 } }}
+          />
+        </Field>
+      )}
+
+      {isWorkType && (
+        <>
+          {/* Arrival */}
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Field label="Příchod - datum">
+              <DateField
+                value={form.arrival_date}
+                onChange={(val) => updateField("arrival_date", val)}
+              />
+            </Field>
+            <Field label="Příchod - čas">
+              <TimeField
+                value={form.arrival_time}
+                onChange={(val) => updateField("arrival_time", val)}
+              />
+            </Field>
+          </Box>
+
+          {/* Break start */}
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Field label="Začátek pauzy - datum">
+              <DateField
+                value={form.break_start_date}
+                onChange={(val) => updateField("break_start_date", val)}
+              />
+            </Field>
+            <Field label="Začátek pauzy - čas">
+              <TimeField
+                value={form.break_start_time}
+                onChange={(val) => updateField("break_start_time", val)}
+              />
+            </Field>
+          </Box>
+
+          {/* Break end */}
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Field label="Konec pauzy - datum">
+              <DateField
+                value={form.break_end_date}
+                onChange={(val) => updateField("break_end_date", val)}
+              />
+            </Field>
+            <Field label="Konec pauzy - čas">
+              <TimeField
+                value={form.break_end_time}
+                onChange={(val) => updateField("break_end_time", val)}
+              />
+            </Field>
+          </Box>
+
+          {/* Departure */}
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+              gap: 2,
+            }}
+          >
+            <Field label="Odchod - datum">
+              <DateField
+                value={form.departure_date}
+                onChange={(val) => updateField("departure_date", val)}
+              />
+            </Field>
+            <Field label="Odchod - čas">
+              <TimeField
+                value={form.departure_time}
+                onChange={(val) => updateField("departure_time", val)}
+              />
+            </Field>
+          </Box>
+        </>
+      )}
+
+      {isWorkType && projectList.length > 0 && (
+        <Field label="Projekty">
+          <ProjectTimeStatus form={form} projectLogs={projectLogs} />
+          {projectLogs.map((log, i) => (
+            <ProjectLogRow
+              key={log._key || i}
+              log={log}
+              index={i}
+              projectList={projectList}
+              onUpdate={updateProjectLog}
+              onRemove={removeProjectLog}
+            />
+          ))}
+          <Button
+            variant="outlined"
+            color="inherit"
+            size="small"
+            onClick={addProjectLog}
+          >
+            + Přidat projekt
+          </Button>
+        </Field>
+      )}
+
+      <Field label="Poznámka">
+        <TextField
+          multiline
+          minRows={3}
+          value={form.notes}
+          onChange={(e) => updateField("notes", e.target.value)}
+        />
+      </Field>
+    </Modal>
   );
 }