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

feat(mui): migrate Leave Approval (Schvalování) 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-06 23:56:00 +02:00
parent ca386c9d98
commit b54fa84ac7
1 changed files with 255 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

536
src/admin/pages/LeaveApproval.tsx
View File

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