boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat(mui): migrate Attendance Create (Vytvořit záznam) onto MUI kit

Browse Source 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-07 00:50:01 +02:00
parent 1f85a84e06
commit 3eb364fba5
1 changed files with 165 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
src/admin/pages/AttendanceCreate.tsx
View File

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