From 3eb364fba59e195e07460d36f0c13330faba0797 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sun, 7 Jun 2026 00:50:01 +0200
Subject: [PATCH] =?UTF-8?q?feat(mui):=20migrate=20Attendance=20Create=20(V?=
 =?UTF-8?q?ytvo=C5=99it=20z=C3=A1znam)=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/AttendanceCreate.tsx | 307 ++++++++++++++-------------
 1 file changed, 165 insertions(+), 142 deletions(-)

diff --git a/src/admin/pages/AttendanceCreate.tsx b/src/admin/pages/AttendanceCreate.tsx
index ab6e8a7..9de2318 100644
--- a/src/admin/pages/AttendanceCreate.tsx
+++ b/src/admin/pages/AttendanceCreate.tsx
@@ -1,16 +1,28 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { Link as RouterLink } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import Box from "@mui/material/Box";
+import { motion } from "framer-motion";
+
 import { userListOptions } from "../lib/queries/users";
 import { useAlert } from "../context/AlertContext";
 import { useAuth } from "../context/AuthContext";
 import Forbidden from "../components/Forbidden";
-import { useNavigate, Link } from "react-router-dom";
-import { motion } from "framer-motion";
-
-import AdminDatePicker from "../components/AdminDatePicker";
-import FormField from "../components/FormField";
 import { useApiMutation } from "../lib/queries/mutations";
 import { todayLocalStr } from "../utils/formatters";
+import {
+  Button,
+  Card,
+  DateField,
+  Field,
+  LoadingState,
+  PageHeader,
+  Select,
+  TextField,
+  TimeField,
+} from "../ui";
+
 const API_BASE = "/api/admin";
 
 interface CreateForm {
@@ -102,89 +114,85 @@ export default function AttendanceCreate() {
   if (!hasPermission("attendance.manage")) return <Forbidden />;
 
   if (loading) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
   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">Přidat záznam docházky</h1>
-        </div>
-        <div className="admin-page-actions">
-          <Link
-            to="/attendance/admin"
-            className="admin-btn admin-btn-secondary"
-          >
-            &larr; Zpět na správu
-          </Link>
-        </div>
+        <PageHeader
+          title="Přidat záznam docházky"
+          actions={
+            <Button
+              variant="outlined"
+              color="inherit"
+              component={RouterLink}
+              to="/attendance/admin"
+            >
+              ← Zpět na správu
+            </Button>
+          }
+        />
       </motion.div>
 
       <motion.div
-        className="admin-card"
-        style={{ maxWidth: "600px" }}
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.25, delay: 0.06 }}
       >
-        <div className="admin-card-body">
-          <form onSubmit={handleSubmit} className="admin-form">
-            <div className="admin-form-row">
-              <FormField label="Zaměstnanec" required>
-                <select
+        <Card sx={{ maxWidth: 640 }}>
+          <Box component="form" onSubmit={handleSubmit}>
+            {/* Employee + Shift date */}
+            <Box
+              sx={{
+                display: "grid",
+                gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+                gap: 2,
+              }}
+            >
+              <Field label="Zaměstnanec" required>
+                <Select
                   value={form.user_id}
-                  onChange={(e) =>
-                    setForm({ ...form, user_id: e.target.value })
-                  }
-                  className="admin-form-select"
-                  required
-                >
-                  <option value="">Vyberte zaměstnance</option>
-                  {users.map((user) => (
-                    <option key={user.id} value={user.id}>
-                      {user.name}
-                    </option>
-                  ))}
-                </select>
-              </FormField>
-              <FormField label="Datum směny" required>
-                <AdminDatePicker
-                  mode="date"
-                  value={form.shift_date}
-                  onChange={(val: string) => handleShiftDateChange(val)}
-                  required
+                  onChange={(val) => setForm({ ...form, user_id: val })}
+                  options={[
+                    { value: "", label: "Vyberte zaměstnance" },
+                    ...users.map((u) => ({
+                      value: String(u.id),
+                      label: u.name,
+                    })),
+                  ]}
                 />
-              </FormField>
-            </div>
+              </Field>
+              <Field label="Datum směny" required>
+                <DateField
+                  value={form.shift_date}
+                  onChange={(val) => handleShiftDateChange(val)}
+                />
+              </Field>
+            </Box>
 
-            <FormField label="Typ záznamu" required>
-              <select
+            {/* Record type */}
+            <Field label="Typ záznamu" required>
+              <Select
                 value={form.leave_type}
-                onChange={(e) =>
-                  setForm({ ...form, 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>
-            </FormField>
+                onChange={(val) => setForm({ ...form, leave_type: val })}
+                options={[
+                  { value: "work", label: "Práce" },
+                  { value: "vacation", label: "Dovolená" },
+                  { value: "sick", label: "Nemoc" },
+                  { value: "unpaid", label: "Neplacené volno" },
+                ]}
+              />
+            </Field>
 
+            {/* Leave hours — shown only for non-work types */}
             {!isWorkType && (
-              <FormField label="Počet hodin">
-                <input
+              <Field label="Počet hodin" hint="Výchozí 8 hodin pro celý den">
+                <TextField
                   type="number"
                   value={form.leave_hours}
                   onChange={(e) =>
@@ -193,132 +201,147 @@ export default function AttendanceCreate() {
                       leave_hours: parseFloat(e.target.value),
                     })
                   }
-                  min="0.5"
-                  max="24"
-                  step="0.5"
-                  className="admin-form-input"
+                  slotProps={{ htmlInput: { min: 0.5, max: 24, step: 0.5 } }}
                 />
-                <small className="admin-form-hint">
-                  Výchozí 8 hodin pro celý den
-                </small>
-              </FormField>
+              </Field>
             )}
 
+            {/* Work-type time fields */}
             {isWorkType && (
               <>
-                <div className="admin-form-row">
-                  <FormField label="Příchod - datum">
-                    <AdminDatePicker
-                      mode="date"
+                {/* 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: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, arrival_date: val })
                       }
                     />
-                  </FormField>
-                  <FormField label="Příchod - čas">
-                    <AdminDatePicker
-                      mode="time"
+                  </Field>
+                  <Field label="Příchod - čas">
+                    <TimeField
                       value={form.arrival_time}
-                      onChange={(val: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, arrival_time: val })
                       }
                     />
-                  </FormField>
-                </div>
+                  </Field>
+                </Box>
 
-                <div className="admin-form-row">
-                  <FormField label="Začátek pauzy - datum">
-                    <AdminDatePicker
-                      mode="date"
+                {/* 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: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, break_start_date: val })
                       }
                     />
-                  </FormField>
-                  <FormField label="Začátek pauzy - čas">
-                    <AdminDatePicker
-                      mode="time"
+                  </Field>
+                  <Field label="Začátek pauzy - čas">
+                    <TimeField
                       value={form.break_start_time}
-                      onChange={(val: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, break_start_time: val })
                       }
                     />
-                  </FormField>
-                </div>
+                  </Field>
+                </Box>
 
-                <div className="admin-form-row">
-                  <FormField label="Konec pauzy - datum">
-                    <AdminDatePicker
-                      mode="date"
+                {/* 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: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, break_end_date: val })
                       }
                     />
-                  </FormField>
-                  <FormField label="Konec pauzy - čas">
-                    <AdminDatePicker
-                      mode="time"
+                  </Field>
+                  <Field label="Konec pauzy - čas">
+                    <TimeField
                       value={form.break_end_time}
-                      onChange={(val: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, break_end_time: val })
                       }
                     />
-                  </FormField>
-                </div>
+                  </Field>
+                </Box>
 
-                <div className="admin-form-row">
-                  <FormField label="Odchod - datum">
-                    <AdminDatePicker
-                      mode="date"
+                {/* Departure */}
+                <Box
+                  sx={{
+                    display: "grid",
+                    gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
+                    gap: 2,
+                  }}
+                >
+                  <Field label="Odchod - datum">
+                    <DateField
                       value={form.departure_date}
-                      onChange={(val: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, departure_date: val })
                       }
                     />
-                  </FormField>
-                  <FormField label="Odchod - čas">
-                    <AdminDatePicker
-                      mode="time"
+                  </Field>
+                  <Field label="Odchod - čas">
+                    <TimeField
                       value={form.departure_time}
-                      onChange={(val: string) =>
+                      onChange={(val) =>
                         setForm({ ...form, departure_time: val })
                       }
                     />
-                  </FormField>
-                </div>
+                  </Field>
+                </Box>
               </>
             )}
 
-            <FormField label="Poznámka">
-              <textarea
+            {/* Notes */}
+            <Field label="Poznámka">
+              <TextField
+                multiline
+                minRows={3}
                 value={form.notes}
                 onChange={(e) => setForm({ ...form, notes: e.target.value })}
-                className="admin-form-textarea"
-                rows={3}
               />
-            </FormField>
+            </Field>
 
-            <div className="admin-form-actions">
-              <Link
+            {/* Actions */}
+            <Box sx={{ display: "flex", gap: 1.5, justifyContent: "flex-end" }}>
+              <Button
+                variant="outlined"
+                color="inherit"
+                component={RouterLink}
                 to="/attendance/admin"
-                className="admin-btn admin-btn-secondary"
               >
                 Zrušit
-              </Link>
-              <button
-                type="submit"
-                disabled={submitting}
-                className="admin-btn admin-btn-primary"
-              >
+              </Button>
+              <Button type="submit" disabled={submitting}>
                 {submitting ? "Ukládám..." : "Uložit"}
-              </button>
-            </div>
-          </form>
-        </div>
+              </Button>
+            </Box>
+          </Box>
+        </Card>
       </motion.div>
-    </div>
+    </Box>
   );
 }