5233db2002
Highlights: - Warehouse module: receipts, issues, reservations, inventory, reports, dashboard, master data (categories, suppliers, locations), FIFO service, integration tests - Docházka: mzda PDF counting model (Odpracováno / Vč. svátků / Přesčas / Svátek / So/Ne / Noc) with Czech weekday names and decimal hours - AttendanceAdmin/AttendanceHistory KPI cards unified to mzda formula with fund bar colored by delta, badges for Práce/Dov/Nem/Sv/Nep - Remove leave_type=holiday entirely (auto-computed from Czech public holidays) - Allow multiple work shifts per day (overlap detection only) - Pre-flight refresh in api.ts eliminates spurious 401s on fresh page loads - Prisma: company_settings gets 6 nullable columns for warehouse numbering (PRI/VYD/INV prefixes, default patterns); migration seeds defaults
447 lines
15 KiB
TypeScript
447 lines
15 KiB
TypeScript
import { useAlert } from "../context/AlertContext";
|
|
import { useAuth } from "../context/AuthContext";
|
|
import Forbidden from "../components/Forbidden";
|
|
import { motion } from "framer-motion";
|
|
import ConfirmModal from "../components/ConfirmModal";
|
|
import AdminDatePicker from "../components/AdminDatePicker";
|
|
import BulkAttendanceModal from "../components/BulkAttendanceModal";
|
|
import ShiftFormModal from "../components/ShiftFormModal";
|
|
import AttendanceShiftTable from "../components/AttendanceShiftTable";
|
|
import useModalLock from "../hooks/useModalLock";
|
|
import useAttendanceAdmin from "../hooks/useAttendanceAdmin";
|
|
import FormField from "../components/FormField";
|
|
import { formatMinutes, formatHoursDecimal } from "../utils/attendanceHelpers";
|
|
|
|
interface UserTotalData {
|
|
name: string;
|
|
minutes: number;
|
|
working: boolean;
|
|
vacation_hours: number;
|
|
sick_hours: number;
|
|
unpaid_hours: number;
|
|
fund: number | null;
|
|
worked_hours: number;
|
|
covered: number;
|
|
missing: number;
|
|
overtime: number;
|
|
// mzda-style summary fields (set by computeUserTotals in useAttendanceAdmin)
|
|
odpracovano?: number;
|
|
vcetne_svatku?: number;
|
|
prescas?: number;
|
|
svatek?: number;
|
|
worked_holiday_hours?: number;
|
|
}
|
|
|
|
function getFundBarBackground(data: UserTotalData) {
|
|
// fondUsed mirrors the Fond "used" line in the IIFE below:
|
|
// real_worked + vacation + worked_holiday + free_holiday
|
|
// (delta is fondUsed - fund; 0 means exactly at the fund).
|
|
const realWorked = data.worked_hours_raw ?? data.worked_hours;
|
|
const fondUsed =
|
|
realWorked +
|
|
(data.vacation_hours ?? 0) +
|
|
(data.worked_holiday_hours ?? 0) +
|
|
(data.svatek ?? 0);
|
|
const fundVal = data.fund ?? 0;
|
|
const delta = fondUsed - fundVal;
|
|
if (delta > 0) return "linear-gradient(135deg, var(--warning), #d97706)";
|
|
if (delta >= 0) return "linear-gradient(135deg, var(--success), #059669)";
|
|
return "var(--gradient)";
|
|
}
|
|
|
|
export default function AttendanceAdmin() {
|
|
const alert = useAlert();
|
|
const { hasPermission } = useAuth();
|
|
|
|
const {
|
|
loading,
|
|
month,
|
|
setMonth,
|
|
filterUserId,
|
|
setFilterUserId,
|
|
data,
|
|
hasData,
|
|
showBulkModal,
|
|
setShowBulkModal,
|
|
bulkSubmitting,
|
|
bulkForm,
|
|
setBulkForm,
|
|
showCreateModal,
|
|
setShowCreateModal,
|
|
createForm,
|
|
setCreateForm,
|
|
showEditModal,
|
|
setShowEditModal,
|
|
editingRecord,
|
|
editForm,
|
|
setEditForm,
|
|
deleteConfirm,
|
|
setDeleteConfirm,
|
|
projectList,
|
|
createProjectLogs,
|
|
setCreateProjectLogs,
|
|
editProjectLogs,
|
|
setEditProjectLogs,
|
|
openCreateModal,
|
|
handleCreateShiftDateChange,
|
|
handleCreateSubmit,
|
|
openBulkModal,
|
|
toggleBulkUser,
|
|
toggleAllBulkUsers,
|
|
handleBulkSubmit,
|
|
openEditModal,
|
|
handleEditSubmit,
|
|
handleDelete,
|
|
handlePrint,
|
|
} = useAttendanceAdmin({ alert });
|
|
|
|
useModalLock(showBulkModal);
|
|
useModalLock(showEditModal);
|
|
useModalLock(showCreateModal);
|
|
|
|
if (!hasPermission("attendance.manage")) return <Forbidden />;
|
|
|
|
// Show spinner only on initial load (no data yet), not on filter changes
|
|
const isInitialLoad =
|
|
loading &&
|
|
data.records.length === 0 &&
|
|
Object.keys(data.user_totals).length === 0;
|
|
|
|
if (isInitialLoad) {
|
|
return (
|
|
<div className="admin-loading">
|
|
<div className="admin-spinner" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<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">Správa docházky</h1>
|
|
</div>
|
|
<div className="admin-page-actions">
|
|
{hasData && (
|
|
<button
|
|
onClick={handlePrint}
|
|
className="admin-btn admin-btn-secondary"
|
|
title="Tisk docházky"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
style={{ marginRight: "0.5rem" }}
|
|
>
|
|
<polyline points="6 9 6 2 18 2 18 9" />
|
|
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
|
|
<rect x="6" y="14" width="12" height="8" />
|
|
</svg>
|
|
Tisk
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={openBulkModal}
|
|
className="admin-btn admin-btn-secondary"
|
|
>
|
|
Vyplnit měsíc
|
|
</button>
|
|
<button
|
|
onClick={openCreateModal}
|
|
className="admin-btn admin-btn-primary"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
Přidat záznam
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Filters */}
|
|
<motion.div
|
|
className="admin-card mb-6"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.06 }}
|
|
>
|
|
<div className="admin-card-body">
|
|
<div className="admin-form-row">
|
|
<FormField label="Měsíc">
|
|
<AdminDatePicker
|
|
mode="month"
|
|
value={month}
|
|
onChange={(val: string) => setMonth(val)}
|
|
/>
|
|
</FormField>
|
|
<FormField label="Zaměstnanec">
|
|
<select
|
|
value={filterUserId}
|
|
onChange={(e) => setFilterUserId(e.target.value)}
|
|
className="admin-form-select"
|
|
>
|
|
<option value="">Všichni</option>
|
|
{data.users.map((user) => (
|
|
<option key={user.id} value={user.id}>
|
|
{user.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</FormField>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* User Totals */}
|
|
{Object.keys(data.user_totals).length > 0 && (
|
|
<motion.div
|
|
className="admin-grid admin-grid-3 mb-6"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.09 }}
|
|
>
|
|
{Object.entries(data.user_totals).map(([uid, userData]) => {
|
|
const ut = userData as UserTotalData;
|
|
return (
|
|
<div key={uid} className="admin-card" style={{ display: "flex" }}>
|
|
<div
|
|
className="admin-card-body"
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<div className="flex-row gap-2 mb-2">
|
|
<span style={{ fontWeight: 600 }}>{ut.name}</span>
|
|
<span
|
|
className={`attendance-working-badge ${ut.working ? "working" : "finished"}`}
|
|
>
|
|
{ut.working ? "\u2713" : "\u2717"}
|
|
</span>
|
|
</div>
|
|
<div className="admin-stat-value">
|
|
{formatMinutes(ut.minutes)}
|
|
</div>
|
|
<div className="admin-stat-label">odpracováno</div>
|
|
<div
|
|
style={{
|
|
marginTop: "0.5rem",
|
|
marginBottom: "0.75rem",
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
gap: "0.4rem",
|
|
minHeight: "2rem",
|
|
}}
|
|
>
|
|
{ut.vacation_hours > 0 && (
|
|
<span className="attendance-leave-badge badge-vacation">
|
|
Dov: {ut.vacation_hours}h
|
|
</span>
|
|
)}
|
|
{ut.sick_hours > 0 && (
|
|
<span className="attendance-leave-badge badge-sick">
|
|
Nem: {ut.sick_hours}h
|
|
</span>
|
|
)}
|
|
{ut.svatek !== undefined && ut.svatek > 0 && (
|
|
<span className="attendance-leave-badge badge-holiday">
|
|
Sv: {Math.round(ut.svatek)}h
|
|
</span>
|
|
)}
|
|
{ut.unpaid_hours > 0 && (
|
|
<span className="attendance-leave-badge badge-unpaid">
|
|
Nep: {ut.unpaid_hours}h
|
|
</span>
|
|
)}
|
|
</div>
|
|
{ut.fund !== null &&
|
|
(() => {
|
|
// Fond "used" = real_worked + vacation + worked_holiday + free_holiday
|
|
// (everything the user actually got paid for this month:
|
|
// raw worked time with sub-day remainders, plus
|
|
// vacation days, plus hours worked on holidays, plus
|
|
// the 8h per unworked holiday from the fund).
|
|
const realWorked = ut.worked_hours_raw ?? ut.worked_hours;
|
|
const fondUsed =
|
|
realWorked +
|
|
(ut.vacation_hours ?? 0) +
|
|
(ut.worked_holiday_hours ?? 0) +
|
|
(ut.svatek ?? 0);
|
|
const fundVal = ut.fund ?? 0;
|
|
const delta = fondUsed - fundVal;
|
|
return (
|
|
<div
|
|
className="kpi-card-footer"
|
|
style={{
|
|
marginTop: "auto",
|
|
paddingTop: "0.75rem",
|
|
borderTop: "1px solid var(--border-color)",
|
|
}}
|
|
>
|
|
<div
|
|
className="text-secondary"
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
fontSize: "0.8rem",
|
|
}}
|
|
>
|
|
<span>
|
|
Fond: {formatHoursDecimal(fondUsed * 60)}h /{" "}
|
|
{formatHoursDecimal(fundVal * 60)}h
|
|
</span>
|
|
{delta > 0 && (
|
|
<span className="text-warning fw-600">
|
|
+{formatHoursDecimal(delta * 60)}h
|
|
</span>
|
|
)}
|
|
{delta <= 0 && delta < 0 && (
|
|
<span className="text-danger fw-600">
|
|
-{formatHoursDecimal(Math.abs(delta) * 60)}h
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginTop: "0.375rem",
|
|
height: "4px",
|
|
background: "var(--bg-tertiary)",
|
|
borderRadius: "2px",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: `${Math.min(
|
|
100,
|
|
(fondUsed / (ut.fund || 1)) * 100,
|
|
)}%`,
|
|
background: getFundBarBackground(ut),
|
|
borderRadius: "2px",
|
|
transition: "width 0.3s ease",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})()}
|
|
<div
|
|
className="text-secondary"
|
|
style={{ marginTop: "0.75rem", fontSize: "0.8rem" }}
|
|
>
|
|
{data.leave_balances[uid] ? (
|
|
<>
|
|
Zbývá dovolené:{" "}
|
|
{data.leave_balances[uid].vacation_remaining.toFixed(1)}
|
|
h / {data.leave_balances[uid].vacation_total}h
|
|
</>
|
|
) : (
|
|
<span style={{ visibility: "hidden" }}>—</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Records Table */}
|
|
<motion.div
|
|
className="admin-card"
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.25, delay: 0.12 }}
|
|
>
|
|
<div className="admin-card-body">
|
|
<AttendanceShiftTable
|
|
records={data.records}
|
|
onEdit={openEditModal}
|
|
onDelete={(record) => setDeleteConfirm({ show: true, record })}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Modals */}
|
|
<BulkAttendanceModal
|
|
isOpen={showBulkModal}
|
|
onClose={() => setShowBulkModal(false)}
|
|
form={bulkForm}
|
|
setForm={setBulkForm}
|
|
users={data.users}
|
|
onSubmit={handleBulkSubmit}
|
|
submitting={bulkSubmitting}
|
|
toggleUser={toggleBulkUser}
|
|
toggleAllUsers={toggleAllBulkUsers}
|
|
/>
|
|
|
|
<ShiftFormModal
|
|
mode="create"
|
|
isOpen={showCreateModal}
|
|
onClose={() => setShowCreateModal(false)}
|
|
onSubmit={handleCreateSubmit}
|
|
form={createForm}
|
|
setForm={setCreateForm}
|
|
projectLogs={createProjectLogs}
|
|
setProjectLogs={setCreateProjectLogs}
|
|
projectList={projectList}
|
|
users={data.users}
|
|
onShiftDateChange={handleCreateShiftDateChange}
|
|
editingRecord={null}
|
|
/>
|
|
|
|
<ShiftFormModal
|
|
mode="edit"
|
|
isOpen={showEditModal && !!editingRecord}
|
|
onClose={() => setShowEditModal(false)}
|
|
onSubmit={handleEditSubmit}
|
|
form={editForm}
|
|
setForm={setEditForm}
|
|
projectLogs={editProjectLogs}
|
|
setProjectLogs={setEditProjectLogs}
|
|
projectList={projectList}
|
|
users={data.users}
|
|
onShiftDateChange={handleCreateShiftDateChange}
|
|
editingRecord={
|
|
editingRecord
|
|
? {
|
|
user_name: editingRecord.user_name ?? "",
|
|
shift_date: editingRecord.shift_date,
|
|
}
|
|
: null
|
|
}
|
|
/>
|
|
|
|
<ConfirmModal
|
|
isOpen={deleteConfirm.show}
|
|
onClose={() => setDeleteConfirm({ show: false, record: null })}
|
|
onConfirm={handleDelete}
|
|
title="Smazat záznam"
|
|
message="Opravdu chcete smazat tento záznam docházky?"
|
|
confirmText="Smazat"
|
|
confirmVariant="danger"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|