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