1075 lines
53 KiB
TypeScript
1075 lines
53 KiB
TypeScript
|
|
|||
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|||
|
|
import { Calendar, Plus, Filter, Search, X, CheckCircle, XCircle, Clock, AlertCircle, ChevronLeft, ChevronRight } from 'lucide-react';
|
|||
|
|
import { Employee, EmployeeVacation, EmployeeSickLeave, EmployeeAbsence, User } from '../../types';
|
|||
|
|
import { WorkCalendarModal, AbsenceType } from './WorkCalendarModal';
|
|||
|
|
import { authFetch } from '../../services/apiClient';
|
|||
|
|
|
|||
|
|
interface WorkCalendarViewProps {
|
|||
|
|
currentUser?: User; // Текущий пользователь для проверки прав доступа
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const WorkCalendarView: React.FC<WorkCalendarViewProps> = ({ currentUser }) => {
|
|||
|
|
const [employees, setEmployees] = useState<Employee[]>([]);
|
|||
|
|
const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
|
|||
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|||
|
|
const [modalType, setModalType] = useState<AbsenceType | undefined>(undefined);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|||
|
|
const [filterType, setFilterType] = useState<string>('all');
|
|||
|
|
const [filterStatus, setFilterStatus] = useState<string>('all');
|
|||
|
|
const [currentDate, setCurrentDate] = useState<Date>(new Date());
|
|||
|
|
const [daysToShow, setDaysToShow] = useState<number>(7);
|
|||
|
|
const [sickLeaveCloseModal, setSickLeaveCloseModal] = useState<{ employeeId: string; sickLeaveId: number; employee: Employee } | null>(null);
|
|||
|
|
const [sickLeaveExtendModal, setSickLeaveExtendModal] = useState<{ employeeId: string; sickLeaveId: number; employee: Employee } | null>(null);
|
|||
|
|
const [closeEndDate, setCloseEndDate] = useState('');
|
|||
|
|
const [closeSickLeaveNumber, setCloseSickLeaveNumber] = useState('');
|
|||
|
|
const [extendExpectedReturnDate, setExtendExpectedReturnDate] = useState('');
|
|||
|
|
const [sickLeaveActionLoading, setSickLeaveActionLoading] = useState(false);
|
|||
|
|
const [sickLeaveActionError, setSickLeaveActionError] = useState('');
|
|||
|
|
const [vacationApprovingKey, setVacationApprovingKey] = useState<string | null>(null);
|
|||
|
|
const [vacationRejectModal, setVacationRejectModal] = useState<{ employeeId: string; vacationId: number; employee: Employee } | null>(null);
|
|||
|
|
const [vacationRejectReason, setVacationRejectReason] = useState('');
|
|||
|
|
const [absenceRejectModal, setAbsenceRejectModal] = useState<{ employeeId: string; absenceId: number; employee: Employee } | null>(null);
|
|||
|
|
const [absenceRejectReason, setAbsenceRejectReason] = useState('');
|
|||
|
|
const [absenceApprovingKey, setAbsenceApprovingKey] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchEmployees();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const fetchEmployees = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
|||
|
|
const apiUrl = (import.meta.env.DEV || !apiBaseUrl) ? '/api/employees' : `${apiBaseUrl}/employees`;
|
|||
|
|
const response = await authFetch(apiUrl);
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
setEmployees(data);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error fetching employees:', error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleOpenModal = (employee: Employee, type?: AbsenceType) => {
|
|||
|
|
setSelectedEmployee(employee);
|
|||
|
|
setModalType(type);
|
|||
|
|
setIsModalOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// В рабочем календаре только действующие сотрудники (без уволенных)
|
|||
|
|
const activeEmployees = useMemo(
|
|||
|
|
() => employees.filter((e) => e.status !== 'inactive'),
|
|||
|
|
[employees]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const isHr = currentUser?.role === 'HR_MANAGER' || currentUser?.role === 'DIRECTOR';
|
|||
|
|
const subordinates = useMemo(
|
|||
|
|
() => (currentUser?.id ? activeEmployees.filter((e) => e.managerId === currentUser.id) : []),
|
|||
|
|
[activeEmployees, currentUser?.id]
|
|||
|
|
);
|
|||
|
|
const selfEmployee = useMemo(
|
|||
|
|
() => (currentUser?.id ? activeEmployees.find((e) => e.id === currentUser.id) : null),
|
|||
|
|
[activeEmployees, currentUser?.id]
|
|||
|
|
);
|
|||
|
|
const actAsOptions = useMemo(() => {
|
|||
|
|
if (isHr) return activeEmployees;
|
|||
|
|
const list = selfEmployee ? [selfEmployee, ...subordinates] : subordinates;
|
|||
|
|
return list;
|
|||
|
|
}, [isHr, activeEmployees, selfEmployee, subordinates]);
|
|||
|
|
|
|||
|
|
const employeesICanApprove = useMemo(() => (isHr ? activeEmployees : subordinates), [isHr, activeEmployees, subordinates]);
|
|||
|
|
|
|||
|
|
const pendingVacations = useMemo(() => {
|
|||
|
|
const list: Array<{ id: number; employee: Employee; startDate: string; endDate: string; daysCount: number }> = [];
|
|||
|
|
employeesICanApprove.forEach((emp) => {
|
|||
|
|
emp.hrData?.vacations?.forEach((v) => {
|
|||
|
|
if (v.status === 'planned') list.push({ id: v.id, employee: emp, startDate: v.startDate, endDate: v.endDate, daysCount: v.daysCount });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return list;
|
|||
|
|
}, [employeesICanApprove]);
|
|||
|
|
|
|||
|
|
const pendingDayOffs = useMemo(() => {
|
|||
|
|
const list: Array<{ id: number; employee: Employee; startDate: string; endDate?: string; reason?: string }> = [];
|
|||
|
|
employeesICanApprove.forEach((emp) => {
|
|||
|
|
emp.hrData?.absences?.forEach((a) => {
|
|||
|
|
if (a.absenceType === 'day_off' && a.status === 'pending')
|
|||
|
|
list.push({ id: a.id, employee: emp, startDate: a.startDate, endDate: a.endDate, reason: a.reason });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return list;
|
|||
|
|
}, [employeesICanApprove]);
|
|||
|
|
|
|||
|
|
const recentSickLeaves = useMemo(() => {
|
|||
|
|
const list: Array<{ id: number; employee: Employee; startDate: string; endDate?: string; expectedReturnDate?: string }> = [];
|
|||
|
|
employeesICanApprove.forEach((emp) => {
|
|||
|
|
emp.hrData?.sickLeaves?.forEach((s) => {
|
|||
|
|
if (s.status === 'active') list.push({ id: s.id, employee: emp, startDate: s.startDate, endDate: s.endDate, expectedReturnDate: s.expectedReturnDate });
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
return list;
|
|||
|
|
}, [employeesICanApprove]);
|
|||
|
|
|
|||
|
|
const handleCloseModal = () => {
|
|||
|
|
setIsModalOpen(false);
|
|||
|
|
setSelectedEmployee(null);
|
|||
|
|
setModalType(undefined);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSave = () => {
|
|||
|
|
fetchEmployees();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
|||
|
|
const baseUrl = (import.meta.env.DEV || !apiBaseUrl) ? '/api' : `${apiBaseUrl}`;
|
|||
|
|
|
|||
|
|
const handleCloseSickLeave = async () => {
|
|||
|
|
if (!sickLeaveCloseModal) return;
|
|||
|
|
if (!closeSickLeaveNumber.trim()) {
|
|||
|
|
setSickLeaveActionError('Номер больничного листа обязателен при выходе с больничного');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
setSickLeaveActionLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(
|
|||
|
|
`${baseUrl}/employees/${sickLeaveCloseModal.employeeId}/sick-leaves/${sickLeaveCloseModal.sickLeaveId}`,
|
|||
|
|
{
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
status: 'closed',
|
|||
|
|
endDate: closeEndDate || new Date().toISOString().split('T')[0],
|
|||
|
|
sickLeaveNumber: closeSickLeaveNumber.trim(),
|
|||
|
|
}),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json();
|
|||
|
|
throw new Error(data.error || 'Ошибка при закрытии больничного');
|
|||
|
|
}
|
|||
|
|
setSickLeaveCloseModal(null);
|
|||
|
|
setCloseEndDate('');
|
|||
|
|
setCloseSickLeaveNumber('');
|
|||
|
|
fetchEmployees();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSickLeaveActionError(err instanceof Error ? err.message : 'Ошибка при закрытии больничного');
|
|||
|
|
} finally {
|
|||
|
|
setSickLeaveActionLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleExtendSickLeave = async () => {
|
|||
|
|
if (!sickLeaveExtendModal || !extendExpectedReturnDate) return;
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
setSickLeaveActionLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(
|
|||
|
|
`${baseUrl}/employees/${sickLeaveExtendModal.employeeId}/sick-leaves/${sickLeaveExtendModal.sickLeaveId}`,
|
|||
|
|
{
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ expectedReturnDate: extendExpectedReturnDate }),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json();
|
|||
|
|
throw new Error(data.error || 'Ошибка при переносе даты выхода');
|
|||
|
|
}
|
|||
|
|
setSickLeaveExtendModal(null);
|
|||
|
|
setExtendExpectedReturnDate('');
|
|||
|
|
fetchEmployees();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSickLeaveActionError(err instanceof Error ? err.message : 'Ошибка при переносе даты выхода');
|
|||
|
|
} finally {
|
|||
|
|
setSickLeaveActionLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const canApproveVacation = (absence: { type: string; status: string; employee: Employee }): boolean => {
|
|||
|
|
if (absence.type !== 'vacation' || absence.status !== 'planned') return false;
|
|||
|
|
if (!currentUser) return false;
|
|||
|
|
const isHr = currentUser.role === 'HR_MANAGER' || currentUser.role === 'DIRECTOR';
|
|||
|
|
const isManager = absence.employee.managerId === currentUser.id;
|
|||
|
|
return isHr || isManager;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleApproveVacation = async (employeeId: string, vacationId: number) => {
|
|||
|
|
const key = `${employeeId}-${vacationId}`;
|
|||
|
|
setVacationApprovingKey(key);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(
|
|||
|
|
`${baseUrl}/employees/${employeeId}/vacations/${vacationId}`,
|
|||
|
|
{
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ status: 'approved', approvedBy: currentUser?.name || 'Руководитель' }),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json();
|
|||
|
|
throw new Error(data.error || 'Ошибка при утверждении отпуска');
|
|||
|
|
}
|
|||
|
|
fetchEmployees();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSickLeaveActionError(err instanceof Error ? err.message : 'Ошибка при утверждении отпуска');
|
|||
|
|
} finally {
|
|||
|
|
setVacationApprovingKey(null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRejectVacation = async () => {
|
|||
|
|
if (!vacationRejectModal) return;
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
setSickLeaveActionLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(
|
|||
|
|
`${baseUrl}/employees/${vacationRejectModal.employeeId}/vacations/${vacationRejectModal.vacationId}`,
|
|||
|
|
{
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
status: 'rejected',
|
|||
|
|
rejectedBy: currentUser?.name || 'Руководитель',
|
|||
|
|
rejectionReason: vacationRejectReason.trim() || undefined,
|
|||
|
|
}),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json();
|
|||
|
|
throw new Error(data.error || 'Ошибка при отклонении отпуска');
|
|||
|
|
}
|
|||
|
|
setVacationRejectModal(null);
|
|||
|
|
setVacationRejectReason('');
|
|||
|
|
fetchEmployees();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSickLeaveActionError(err instanceof Error ? err.message : 'Ошибка при отклонении отпуска');
|
|||
|
|
} finally {
|
|||
|
|
setSickLeaveActionLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const canApproveDayOff = (absence: { type: string; status: string; employee: Employee }): boolean => {
|
|||
|
|
if (absence.type !== 'day_off' || absence.status !== 'pending') return false;
|
|||
|
|
if (!currentUser) return false;
|
|||
|
|
const isHrRole = currentUser.role === 'HR_MANAGER' || currentUser.role === 'DIRECTOR';
|
|||
|
|
const isManager = absence.employee.managerId === currentUser.id;
|
|||
|
|
return isHrRole || isManager;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleApproveAbsence = async (employeeId: string, absenceId: number) => {
|
|||
|
|
const key = `abs-${employeeId}-${absenceId}`;
|
|||
|
|
setAbsenceApprovingKey(key);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(
|
|||
|
|
`${baseUrl}/employees/${employeeId}/absences/${absenceId}`,
|
|||
|
|
{
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({ status: 'approved', approvedBy: currentUser?.name || 'Руководитель' }),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json();
|
|||
|
|
throw new Error(data.error || 'Ошибка при утверждении отгула');
|
|||
|
|
}
|
|||
|
|
fetchEmployees();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSickLeaveActionError(err instanceof Error ? err.message : 'Ошибка при утверждении отгула');
|
|||
|
|
} finally {
|
|||
|
|
setAbsenceApprovingKey(null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleRejectAbsence = async () => {
|
|||
|
|
if (!absenceRejectModal) return;
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
setSickLeaveActionLoading(true);
|
|||
|
|
try {
|
|||
|
|
const res = await authFetch(
|
|||
|
|
`${baseUrl}/employees/${absenceRejectModal.employeeId}/absences/${absenceRejectModal.absenceId}`,
|
|||
|
|
{
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
status: 'rejected',
|
|||
|
|
rejectedBy: currentUser?.name || 'Руководитель',
|
|||
|
|
rejectionReason: absenceRejectReason.trim() || undefined,
|
|||
|
|
}),
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const data = await res.json();
|
|||
|
|
throw new Error(data.error || 'Ошибка при отклонении отгула');
|
|||
|
|
}
|
|||
|
|
setAbsenceRejectModal(null);
|
|||
|
|
setAbsenceRejectReason('');
|
|||
|
|
fetchEmployees();
|
|||
|
|
} catch (err) {
|
|||
|
|
setSickLeaveActionError(err instanceof Error ? err.message : 'Ошибка при отклонении отгула');
|
|||
|
|
} finally {
|
|||
|
|
setSickLeaveActionLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const filteredEmployees = useMemo(() => {
|
|||
|
|
return activeEmployees.filter(emp => {
|
|||
|
|
const matchesSearch = emp.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|||
|
|
emp.position.toLowerCase().includes(searchQuery.toLowerCase());
|
|||
|
|
return matchesSearch;
|
|||
|
|
});
|
|||
|
|
}, [activeEmployees, searchQuery]);
|
|||
|
|
|
|||
|
|
const getAbsenceTypeLabel = (type: string) => {
|
|||
|
|
const labels: Record<string, { label: string; color: string; icon: string }> = {
|
|||
|
|
vacation: { label: 'Отпуск', color: 'bg-blue-50 text-blue-600 border-blue-200', icon: '🏖️' },
|
|||
|
|
sick_leave: { label: 'Больничный', color: 'bg-red-50 text-red-600 border-red-200', icon: '🏥' },
|
|||
|
|
day_off: { label: 'Отгул', color: 'bg-amber-50 text-amber-600 border-amber-200', icon: '📅' },
|
|||
|
|
absence: { label: 'Прогул', color: 'bg-orange-50 text-orange-600 border-orange-200', icon: '⚠️' },
|
|||
|
|
late: { label: 'Опоздание', color: 'bg-purple-50 text-purple-600 border-purple-200', icon: '⏰' },
|
|||
|
|
early_leave: { label: 'Ранний уход', color: 'bg-indigo-50 text-indigo-600 border-indigo-200', icon: '🚪' },
|
|||
|
|
};
|
|||
|
|
return labels[type] || { label: type, color: 'bg-slate-50 text-slate-600 border-slate-200', icon: '📌' };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusLabel = (status: string) => {
|
|||
|
|
const labels: Record<string, { label: string; color: string }> = {
|
|||
|
|
pending: { label: 'На согласовании', color: 'bg-amber-50 text-amber-600' },
|
|||
|
|
approved: { label: 'Утверждено', color: 'bg-emerald-50 text-emerald-600' },
|
|||
|
|
rejected: { label: 'Отклонено', color: 'bg-red-50 text-red-600' },
|
|||
|
|
canceled: { label: 'Отменено', color: 'bg-slate-50 text-slate-600' },
|
|||
|
|
planned: { label: 'Запланировано', color: 'bg-blue-50 text-blue-600' },
|
|||
|
|
active: { label: 'Активно', color: 'bg-emerald-50 text-emerald-600' },
|
|||
|
|
completed: { label: 'Завершено', color: 'bg-slate-50 text-slate-600' },
|
|||
|
|
closed: { label: 'Закрыт', color: 'bg-slate-50 text-slate-600' },
|
|||
|
|
};
|
|||
|
|
return labels[status] || { label: status, color: 'bg-slate-50 text-slate-600' };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatDate = (dateString: string) => {
|
|||
|
|
const date = new Date(dateString);
|
|||
|
|
return date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatDateShort = (date: Date) => {
|
|||
|
|
return date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatDateWeekday = (date: Date) => {
|
|||
|
|
return date.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Генерация списка дат для отображения
|
|||
|
|
const dateList = useMemo(() => {
|
|||
|
|
const dates: Date[] = [];
|
|||
|
|
const startDate = new Date(currentDate);
|
|||
|
|
|
|||
|
|
// Если показываем неделю (7 дней), начинаем с понедельника
|
|||
|
|
if (daysToShow === 7) {
|
|||
|
|
const dayOfWeek = startDate.getDay(); // 0 = воскресенье, 1 = понедельник, ..., 6 = суббота
|
|||
|
|
// Вычисляем смещение до понедельника (1 = понедельник)
|
|||
|
|
// Если день = 0 (воскресенье), то нужно отступить 6 дней назад
|
|||
|
|
// Если день = 1 (понедельник), то смещение = 0
|
|||
|
|
// Если день = 2 (вторник), то смещение = -1
|
|||
|
|
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
|
|||
|
|
startDate.setDate(startDate.getDate() + daysToMonday);
|
|||
|
|
} else {
|
|||
|
|
// Для других периодов используем текущую логику
|
|||
|
|
startDate.setDate(startDate.getDate() - Math.floor(daysToShow / 2));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (let i = 0; i < daysToShow; i++) {
|
|||
|
|
const date = new Date(startDate);
|
|||
|
|
date.setDate(startDate.getDate() + i);
|
|||
|
|
dates.push(date);
|
|||
|
|
}
|
|||
|
|
return dates;
|
|||
|
|
}, [currentDate, daysToShow]);
|
|||
|
|
|
|||
|
|
// Навигация по датам
|
|||
|
|
const handlePreviousDays = () => {
|
|||
|
|
const newDate = new Date(currentDate);
|
|||
|
|
if (daysToShow === 7) {
|
|||
|
|
// Для недели переходим на понедельник предыдущей недели
|
|||
|
|
const dayOfWeek = newDate.getDay();
|
|||
|
|
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
|
|||
|
|
newDate.setDate(newDate.getDate() + daysToMonday - 7);
|
|||
|
|
} else {
|
|||
|
|
newDate.setDate(newDate.getDate() - daysToShow);
|
|||
|
|
}
|
|||
|
|
setCurrentDate(newDate);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleNextDays = () => {
|
|||
|
|
const newDate = new Date(currentDate);
|
|||
|
|
if (daysToShow === 7) {
|
|||
|
|
// Для недели переходим на понедельник следующей недели
|
|||
|
|
const dayOfWeek = newDate.getDay();
|
|||
|
|
const daysToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
|
|||
|
|
newDate.setDate(newDate.getDate() + daysToMonday + 7);
|
|||
|
|
} else {
|
|||
|
|
newDate.setDate(newDate.getDate() + daysToShow);
|
|||
|
|
}
|
|||
|
|
setCurrentDate(newDate);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleToday = () => {
|
|||
|
|
setCurrentDate(new Date());
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getAllAbsences = (employee: Employee) => {
|
|||
|
|
const absences: Array<{
|
|||
|
|
id: string | number;
|
|||
|
|
type: string;
|
|||
|
|
startDate: string;
|
|||
|
|
endDate?: string;
|
|||
|
|
startTime?: string;
|
|||
|
|
endTime?: string;
|
|||
|
|
daysCount: number;
|
|||
|
|
status: string;
|
|||
|
|
reason?: string;
|
|||
|
|
approvedBy?: string;
|
|||
|
|
createdAt: string;
|
|||
|
|
employee: Employee;
|
|||
|
|
}> = [];
|
|||
|
|
|
|||
|
|
// Отпуска
|
|||
|
|
if (employee.hrData?.vacations) {
|
|||
|
|
employee.hrData.vacations.forEach(v => {
|
|||
|
|
absences.push({
|
|||
|
|
id: v.id,
|
|||
|
|
type: 'vacation',
|
|||
|
|
startDate: v.startDate,
|
|||
|
|
endDate: v.endDate,
|
|||
|
|
daysCount: v.daysCount,
|
|||
|
|
status: v.status,
|
|||
|
|
approvedBy: v.approvedBy,
|
|||
|
|
createdAt: v.createdAt,
|
|||
|
|
employee: employee,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Больничные
|
|||
|
|
if (employee.hrData?.sickLeaves) {
|
|||
|
|
employee.hrData.sickLeaves.forEach(s => {
|
|||
|
|
absences.push({
|
|||
|
|
id: s.id,
|
|||
|
|
type: 'sick_leave',
|
|||
|
|
startDate: s.startDate,
|
|||
|
|
endDate: s.endDate,
|
|||
|
|
daysCount: s.daysCount || 0,
|
|||
|
|
status: s.status,
|
|||
|
|
createdAt: s.createdAt,
|
|||
|
|
employee: employee,
|
|||
|
|
sickLeaveNumber: s.sickLeaveNumber,
|
|||
|
|
expectedReturnDate: s.expectedReturnDate,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Отгулы и прогулы
|
|||
|
|
if (employee.hrData?.absences) {
|
|||
|
|
employee.hrData.absences.forEach(a => {
|
|||
|
|
absences.push({
|
|||
|
|
id: a.id,
|
|||
|
|
type: a.absenceType,
|
|||
|
|
startDate: a.startDate,
|
|||
|
|
endDate: a.endDate,
|
|||
|
|
startTime: a.startTime,
|
|||
|
|
endTime: a.endTime,
|
|||
|
|
daysCount: a.daysCount,
|
|||
|
|
status: a.status,
|
|||
|
|
reason: a.reason,
|
|||
|
|
approvedBy: a.approvedBy,
|
|||
|
|
createdAt: a.createdAt,
|
|||
|
|
employee: employee,
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return absences;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Группировка событий по датам
|
|||
|
|
const eventsByDate = useMemo(() => {
|
|||
|
|
const eventsMap: Record<string, Array<{
|
|||
|
|
id: string | number;
|
|||
|
|
type: string;
|
|||
|
|
startDate: string;
|
|||
|
|
endDate?: string;
|
|||
|
|
startTime?: string;
|
|||
|
|
endTime?: string;
|
|||
|
|
daysCount: number;
|
|||
|
|
status: string;
|
|||
|
|
reason?: string;
|
|||
|
|
approvedBy?: string;
|
|||
|
|
createdAt: string;
|
|||
|
|
employee: Employee;
|
|||
|
|
}>> = {};
|
|||
|
|
|
|||
|
|
// Инициализация всех дат
|
|||
|
|
dateList.forEach(date => {
|
|||
|
|
const dateKey = date.toISOString().split('T')[0];
|
|||
|
|
eventsMap[dateKey] = [];
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Сбор всех событий
|
|||
|
|
filteredEmployees.forEach(employee => {
|
|||
|
|
const absences = getAllAbsences(employee);
|
|||
|
|
absences.forEach(absence => {
|
|||
|
|
const startDate = new Date(absence.startDate);
|
|||
|
|
const endDate = absence.endDate ? new Date(absence.endDate) : startDate;
|
|||
|
|
|
|||
|
|
// Проверяем каждую дату в диапазоне
|
|||
|
|
dateList.forEach(date => {
|
|||
|
|
const dateKey = date.toISOString().split('T')[0];
|
|||
|
|
const currentDateOnly = new Date(date);
|
|||
|
|
currentDateOnly.setHours(0, 0, 0, 0);
|
|||
|
|
const startDateOnly = new Date(startDate);
|
|||
|
|
startDateOnly.setHours(0, 0, 0, 0);
|
|||
|
|
const endDateOnly = new Date(endDate);
|
|||
|
|
endDateOnly.setHours(0, 0, 0, 0);
|
|||
|
|
|
|||
|
|
// Если событие попадает на эту дату
|
|||
|
|
if (currentDateOnly >= startDateOnly && currentDateOnly <= endDateOnly) {
|
|||
|
|
// Фильтрация по типу и статусу
|
|||
|
|
const matchesType = filterType === 'all' || absence.type === filterType;
|
|||
|
|
const matchesStatus = filterStatus === 'all' || absence.status === filterStatus;
|
|||
|
|
|
|||
|
|
if (matchesType && matchesStatus) {
|
|||
|
|
// Проверяем, нет ли уже этого события для этой даты
|
|||
|
|
if (!eventsMap[dateKey].some(e => e.id === absence.id && e.employee.id === employee.id)) {
|
|||
|
|
eventsMap[dateKey].push(absence);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return eventsMap;
|
|||
|
|
}, [filteredEmployees, dateList, filterType, filterStatus]);
|
|||
|
|
|
|||
|
|
const effectiveActAsEmployee =
|
|||
|
|
filteredEmployees.length > 0
|
|||
|
|
? filteredEmployees[0]
|
|||
|
|
: (currentUser?.id ? activeEmployees.find((e) => e.id === currentUser.id) : null) ?? activeEmployees[0];
|
|||
|
|
|
|||
|
|
if (loading && employees.length === 0) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center h-64">
|
|||
|
|
<div className="text-slate-400">Загрузка...</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* Заголовок и кнопка добавления */}
|
|||
|
|
<div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-lg font-bold text-slate-800">Рабочий календарь</h3>
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">Управление отпусками, отгулами, больничными и пропусками</p>
|
|||
|
|
</div>
|
|||
|
|
{activeEmployees.length > 0 && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
const emp = effectiveActAsEmployee ?? activeEmployees[0];
|
|||
|
|
if (emp) handleOpenModal(emp);
|
|||
|
|
}}
|
|||
|
|
className="bg-primary-600 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-primary-700 transition-colors flex items-center gap-2 shadow-lg shadow-primary-500/20"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4"/> Добавить запись
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{sickLeaveActionError && !sickLeaveCloseModal && !sickLeaveExtendModal && !vacationRejectModal && !absenceRejectModal && (
|
|||
|
|
<div className="flex items-center justify-between gap-4 p-4 bg-red-50 border border-red-200 rounded-xl">
|
|||
|
|
<p className="text-sm text-red-700">{sickLeaveActionError}</p>
|
|||
|
|
<button type="button" onClick={() => setSickLeaveActionError('')} className="p-1.5 text-red-600 hover:bg-red-100 rounded-lg">
|
|||
|
|
<X className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Ожидают вашего согласования: отпуска и отгулы */}
|
|||
|
|
{(pendingVacations.length > 0 || pendingDayOffs.length > 0) && (
|
|||
|
|
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|||
|
|
<h4 className="text-sm font-bold text-amber-800 flex items-center gap-2 mb-3">
|
|||
|
|
<AlertCircle className="w-4 h-4"/> Ожидают вашего согласования
|
|||
|
|
</h4>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{pendingVacations.map((v) => (
|
|||
|
|
<div key={`v-${v.employee.id}-${v.id}`} className="flex flex-wrap items-center justify-between gap-2 py-2 border-b border-amber-100 last:border-0">
|
|||
|
|
<div>
|
|||
|
|
<span className="font-medium text-slate-800">{v.employee.name}</span>
|
|||
|
|
<span className="text-amber-700 text-xs ml-2">Отпуск</span>
|
|||
|
|
<span className="text-slate-600 text-xs ml-2">{formatDate(v.startDate)} – {formatDate(v.endDate)} ({v.daysCount} д.)</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button type="button" disabled={vacationApprovingKey === `${v.employee.id}-${v.id}`} onClick={() => handleApproveVacation(v.employee.id, v.id)} className="px-3 py-1.5 bg-emerald-600 text-white rounded-lg text-xs font-bold hover:bg-emerald-700 disabled:opacity-50 flex items-center gap-1"><CheckCircle className="w-3.5 h-3.5"/> Утвердить</button>
|
|||
|
|
<button type="button" onClick={() => { setVacationRejectModal({ employeeId: v.employee.id, vacationId: v.id, employee: v.employee }); setVacationRejectReason(''); setSickLeaveActionError(''); }} className="px-3 py-1.5 bg-red-600 text-white rounded-lg text-xs font-bold hover:bg-red-700 flex items-center gap-1"><XCircle className="w-3.5 h-3.5"/> Отклонить</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{pendingDayOffs.map((a) => (
|
|||
|
|
<div key={`a-${a.employee.id}-${a.id}`} className="flex flex-wrap items-center justify-between gap-2 py-2 border-b border-amber-100 last:border-0">
|
|||
|
|
<div>
|
|||
|
|
<span className="font-medium text-slate-800">{a.employee.name}</span>
|
|||
|
|
<span className="text-amber-700 text-xs ml-2">Отгул</span>
|
|||
|
|
<span className="text-slate-600 text-xs ml-2">{formatDate(a.startDate)}{a.endDate ? ` – ${formatDate(a.endDate)}` : ''}{a.reason ? ` • ${a.reason}` : ''}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button type="button" disabled={absenceApprovingKey === `abs-${a.employee.id}-${a.id}`} onClick={() => handleApproveAbsence(a.employee.id, a.id)} className="px-3 py-1.5 bg-emerald-600 text-white rounded-lg text-xs font-bold hover:bg-emerald-700 disabled:opacity-50 flex items-center gap-1"><CheckCircle className="w-3.5 h-3.5"/> Утвердить</button>
|
|||
|
|
<button type="button" onClick={() => { setAbsenceRejectModal({ employeeId: a.employee.id, absenceId: a.id, employee: a.employee }); setAbsenceRejectReason(''); setSickLeaveActionError(''); }} className="px-3 py-1.5 bg-red-600 text-white rounded-lg text-xs font-bold hover:bg-red-700 flex items-center gap-1"><XCircle className="w-3.5 h-3.5"/> Отклонить</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Оформленные больничные (информация, согласование не требуется) */}
|
|||
|
|
{recentSickLeaves.length > 0 && (
|
|||
|
|
<div className="bg-slate-50 border border-slate-200 rounded-xl p-4">
|
|||
|
|
<h4 className="text-sm font-bold text-slate-700 flex items-center gap-2 mb-3">
|
|||
|
|
<Clock className="w-4 h-4"/> Оформленные больничные
|
|||
|
|
</h4>
|
|||
|
|
<p className="text-xs text-slate-500 mb-2">Сотрудники на больничном. Согласование руководителем не требуется.</p>
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
{recentSickLeaves.map((s) => (
|
|||
|
|
<div key={`s-${s.employee.id}-${s.id}`} className="flex items-center justify-between gap-2 py-1.5 text-sm">
|
|||
|
|
<span className="font-medium text-slate-800">{s.employee.name}</span>
|
|||
|
|
<span className="text-slate-600 text-xs">{formatDate(s.startDate)}{s.endDate ? ` – ${formatDate(s.endDate)}` : ''}{s.expectedReturnDate ? ` • предв. выход: ${formatDate(s.expectedReturnDate)}` : ''}</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Карточка: имя сотрудника (начните печатать) и фильтры */}
|
|||
|
|
<div className="bg-white rounded-xl p-4 border border-slate-200">
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1.5">Имя сотрудника</label>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"/>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={searchQuery}
|
|||
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|||
|
|
placeholder="Начните печатать имя..."
|
|||
|
|
className="w-full pl-10 pr-4 py-2 rounded-lg border border-slate-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{searchQuery.trim() && (
|
|||
|
|
<p className="text-xs text-slate-500 mt-1">
|
|||
|
|
Найдено: {filteredEmployees.length} {filteredEmployees.length === 1 ? 'сотрудник' : filteredEmployees.length < 5 ? 'сотрудника' : 'сотрудников'}
|
|||
|
|
{filteredEmployees.length > 0 && ' • «Добавить запись» откроет форму для первого в списке'}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<select
|
|||
|
|
value={filterType}
|
|||
|
|
onChange={(e) => setFilterType(e.target.value)}
|
|||
|
|
className="px-4 py-2 rounded-lg border border-slate-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все типы</option>
|
|||
|
|
<option value="vacation">Отпуск</option>
|
|||
|
|
<option value="sick_leave">Больничный</option>
|
|||
|
|
<option value="day_off">Отгул</option>
|
|||
|
|
<option value="absence">Прогул</option>
|
|||
|
|
<option value="late">Опоздание</option>
|
|||
|
|
<option value="early_leave">Ранний уход</option>
|
|||
|
|
</select>
|
|||
|
|
<select
|
|||
|
|
value={filterStatus}
|
|||
|
|
onChange={(e) => setFilterStatus(e.target.value)}
|
|||
|
|
className="px-4 py-2 rounded-lg border border-slate-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все статусы</option>
|
|||
|
|
<option value="pending">На согласовании</option>
|
|||
|
|
<option value="approved">Утверждено</option>
|
|||
|
|
<option value="rejected">Отклонено</option>
|
|||
|
|
<option value="active">Активно</option>
|
|||
|
|
<option value="completed">Завершено</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Навигация по датам */}
|
|||
|
|
<div className="bg-white rounded-xl p-4 border border-slate-200">
|
|||
|
|
<div className="flex items-center justify-between gap-4">
|
|||
|
|
<button
|
|||
|
|
onClick={handlePreviousDays}
|
|||
|
|
className="p-2 rounded-lg border border-slate-200 hover:bg-slate-50 transition-colors flex items-center gap-2"
|
|||
|
|
title="Предыдущие дни"
|
|||
|
|
>
|
|||
|
|
<ChevronLeft className="w-5 h-5 text-slate-600"/>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div className="flex-1 flex items-center justify-center gap-4">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<div className="text-sm font-bold text-slate-800">
|
|||
|
|
{formatDateShort(dateList[0])} - {formatDateShort(dateList[dateList.length - 1])}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-slate-500 mt-1">
|
|||
|
|
{daysToShow} {daysToShow === 1 ? 'день' : daysToShow < 5 ? 'дня' : 'дней'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
onClick={handleToday}
|
|||
|
|
className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg text-xs font-bold hover:bg-slate-200 transition-colors"
|
|||
|
|
>
|
|||
|
|
Сегодня
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
onClick={handleNextDays}
|
|||
|
|
className="p-2 rounded-lg border border-slate-200 hover:bg-slate-50 transition-colors flex items-center gap-2"
|
|||
|
|
title="Следующие дни"
|
|||
|
|
>
|
|||
|
|
<ChevronRight className="w-5 h-5 text-slate-600"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Календарь по датам */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{dateList.map((date, index) => {
|
|||
|
|
const dateKey = date.toISOString().split('T')[0];
|
|||
|
|
const events = eventsByDate[dateKey] || [];
|
|||
|
|
const isToday = date.toDateString() === new Date().toDateString();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={dateKey}
|
|||
|
|
className={`bg-white rounded-xl border overflow-hidden ${
|
|||
|
|
isToday ? 'border-primary-500 shadow-lg shadow-primary-500/10' : 'border-slate-200'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{/* Заголовок даты */}
|
|||
|
|
<div className={`p-4 border-b ${isToday ? 'bg-primary-50 border-primary-200' : 'bg-slate-50 border-slate-200'}`}>
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h4 className={`font-bold ${isToday ? 'text-primary-800' : 'text-slate-800'}`}>
|
|||
|
|
{formatDateWeekday(date)}
|
|||
|
|
</h4>
|
|||
|
|
<p className={`text-xs mt-1 ${isToday ? 'text-primary-600' : 'text-slate-500'}`}>
|
|||
|
|
{formatDateShort(date)}
|
|||
|
|
{isToday && <span className="ml-2 font-bold">• Сегодня</span>}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-sm font-bold text-slate-400">
|
|||
|
|
{events.length} {events.length === 1 ? 'событие' : events.length < 5 ? 'события' : 'событий'}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* События на эту дату */}
|
|||
|
|
{events.length > 0 ? (
|
|||
|
|
<div className="p-4 space-y-3">
|
|||
|
|
{events.map((absence, eventIndex) => {
|
|||
|
|
const typeInfo = getAbsenceTypeLabel(absence.type);
|
|||
|
|
const statusInfo = getStatusLabel(absence.status);
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={`${absence.type}-${absence.id}-${eventIndex}`}
|
|||
|
|
className="bg-slate-50 rounded-lg p-4 border border-slate-200 hover:border-primary-300 transition-colors"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-start justify-between gap-4">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
|||
|
|
<span className="text-lg">{typeInfo.icon}</span>
|
|||
|
|
<span className={`text-xs font-bold px-2 py-1 rounded-full border ${typeInfo.color}`}>
|
|||
|
|
{typeInfo.label}
|
|||
|
|
</span>
|
|||
|
|
<span className={`text-[9px] font-black px-2 py-1 rounded-full uppercase tracking-tighter ${statusInfo.color}`}>
|
|||
|
|
{statusInfo.label}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-sm font-bold text-slate-800 mb-1">
|
|||
|
|
{absence.employee.name} • {absence.employee.position}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-slate-600 mb-1">
|
|||
|
|
{absence.startTime && (
|
|||
|
|
<>Время: {absence.startTime}</>
|
|||
|
|
)}
|
|||
|
|
{absence.endTime && (
|
|||
|
|
<> - {absence.endTime}</>
|
|||
|
|
)}
|
|||
|
|
{!absence.startTime && absence.endDate && absence.endDate !== absence.startDate && (
|
|||
|
|
<>Период: {formatDate(absence.startDate)} - {formatDate(absence.endDate)}</>
|
|||
|
|
)}
|
|||
|
|
{!absence.startTime && (!absence.endDate || absence.endDate === absence.startDate) && (
|
|||
|
|
<>Дата: {formatDate(absence.startDate)}</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-slate-500">
|
|||
|
|
{absence.daysCount > 0 && (
|
|||
|
|
<>{absence.daysCount} {absence.daysCount === 1 ? 'день' : absence.daysCount < 5 ? 'дня' : 'дней'}</>
|
|||
|
|
)}
|
|||
|
|
{absence.type === 'sick_leave' && (absence as { expectedReturnDate?: string }).expectedReturnDate && (
|
|||
|
|
<> • Предв. выход: {formatDate((absence as { expectedReturnDate?: string }).expectedReturnDate!)}</>
|
|||
|
|
)}
|
|||
|
|
{absence.reason && ` • ${absence.reason}`}
|
|||
|
|
{absence.approvedBy && ` • Утверждено: ${absence.approvedBy}`}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-col sm:flex-row gap-2 flex-shrink-0">
|
|||
|
|
{absence.type === 'vacation' && absence.status === 'planned' && canApproveVacation(absence) && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
disabled={vacationApprovingKey === `${absence.employee.id}-${absence.id}`}
|
|||
|
|
onClick={() => handleApproveVacation(absence.employee.id, Number(absence.id))}
|
|||
|
|
className="px-3 py-1.5 bg-emerald-600 text-white rounded-lg text-xs font-bold hover:bg-emerald-700 transition-colors disabled:opacity-50 flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<CheckCircle className="w-3.5 h-3.5"/> Утвердить
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setVacationRejectModal({
|
|||
|
|
employeeId: absence.employee.id,
|
|||
|
|
vacationId: Number(absence.id),
|
|||
|
|
employee: absence.employee,
|
|||
|
|
});
|
|||
|
|
setVacationRejectReason('');
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-1.5 bg-red-600 text-white rounded-lg text-xs font-bold hover:bg-red-700 transition-colors flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<XCircle className="w-3.5 h-3.5"/> Отклонить
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{absence.type === 'day_off' && absence.status === 'pending' && canApproveDayOff(absence) && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
disabled={absenceApprovingKey === `abs-${absence.employee.id}-${absence.id}`}
|
|||
|
|
onClick={() => handleApproveAbsence(absence.employee.id, Number(absence.id))}
|
|||
|
|
className="px-3 py-1.5 bg-emerald-600 text-white rounded-lg text-xs font-bold hover:bg-emerald-700 transition-colors disabled:opacity-50 flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<CheckCircle className="w-3.5 h-3.5"/> Утвердить
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setAbsenceRejectModal({
|
|||
|
|
employeeId: absence.employee.id,
|
|||
|
|
absenceId: Number(absence.id),
|
|||
|
|
employee: absence.employee,
|
|||
|
|
});
|
|||
|
|
setAbsenceRejectReason('');
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-1.5 bg-red-600 text-white rounded-lg text-xs font-bold hover:bg-red-700 transition-colors flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<XCircle className="w-3.5 h-3.5"/> Отклонить
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{absence.type === 'sick_leave' && absence.status === 'active' && (
|
|||
|
|
<>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setSickLeaveCloseModal({
|
|||
|
|
employeeId: absence.employee.id,
|
|||
|
|
sickLeaveId: Number(absence.id),
|
|||
|
|
employee: absence.employee,
|
|||
|
|
});
|
|||
|
|
setCloseEndDate(new Date().toISOString().split('T')[0]);
|
|||
|
|
setCloseSickLeaveNumber('');
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-1.5 bg-emerald-600 text-white rounded-lg text-xs font-bold hover:bg-emerald-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
Выход с больничного
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
setSickLeaveExtendModal({
|
|||
|
|
employeeId: absence.employee.id,
|
|||
|
|
sickLeaveId: Number(absence.id),
|
|||
|
|
employee: absence.employee,
|
|||
|
|
});
|
|||
|
|
setExtendExpectedReturnDate((absence as { expectedReturnDate?: string }).expectedReturnDate || '');
|
|||
|
|
setSickLeaveActionError('');
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-1.5 bg-amber-600 text-white rounded-lg text-xs font-bold hover:bg-amber-700 transition-colors"
|
|||
|
|
>
|
|||
|
|
Перенести дату выхода
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
onClick={() => handleOpenModal(absence.employee)}
|
|||
|
|
className="px-3 py-1.5 bg-primary-600 text-white rounded-lg text-xs font-bold hover:bg-primary-700 transition-colors flex items-center gap-2"
|
|||
|
|
title="Добавить запись"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-3 h-3"/> Добавить
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="p-4 text-center text-sm text-slate-400">
|
|||
|
|
Нет событий на эту дату
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Модалка: Отклонить отпуск */}
|
|||
|
|
{vacationRejectModal && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setVacationRejectModal(null)}>
|
|||
|
|
<div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
|||
|
|
<h4 className="text-lg font-bold text-slate-800 mb-2">Отклонить отпуск</h4>
|
|||
|
|
<p className="text-sm text-slate-600 mb-4">{vacationRejectModal.employee.name}</p>
|
|||
|
|
{sickLeaveActionError && (
|
|||
|
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{sickLeaveActionError}</div>
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-1">Причина отклонения (необязательно)</label>
|
|||
|
|
<textarea
|
|||
|
|
value={vacationRejectReason}
|
|||
|
|
onChange={e => setVacationRejectReason(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Укажите причину"
|
|||
|
|
className="w-full px-4 py-2 rounded-lg border border-slate-200 resize-none"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 mt-6">
|
|||
|
|
<button type="button" onClick={() => setVacationRejectModal(null)} className="flex-1 py-2 bg-slate-100 text-slate-700 rounded-xl text-sm font-bold">Отмена</button>
|
|||
|
|
<button type="button" onClick={handleRejectVacation} disabled={sickLeaveActionLoading} className="flex-1 py-2 bg-red-600 text-white rounded-xl text-sm font-bold disabled:opacity-50">Отклонить</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка: Отклонить отгул */}
|
|||
|
|
{absenceRejectModal && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setAbsenceRejectModal(null)}>
|
|||
|
|
<div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
|||
|
|
<h4 className="text-lg font-bold text-slate-800 mb-2">Отклонить отгул</h4>
|
|||
|
|
<p className="text-sm text-slate-600 mb-4">{absenceRejectModal.employee.name}</p>
|
|||
|
|
{sickLeaveActionError && (
|
|||
|
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{sickLeaveActionError}</div>
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-1">Причина отклонения (необязательно)</label>
|
|||
|
|
<textarea
|
|||
|
|
value={absenceRejectReason}
|
|||
|
|
onChange={e => setAbsenceRejectReason(e.target.value)}
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Укажите причину"
|
|||
|
|
className="w-full px-4 py-2 rounded-lg border border-slate-200 resize-none"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 mt-6">
|
|||
|
|
<button type="button" onClick={() => setAbsenceRejectModal(null)} className="flex-1 py-2 bg-slate-100 text-slate-700 rounded-xl text-sm font-bold">Отмена</button>
|
|||
|
|
<button type="button" onClick={handleRejectAbsence} disabled={sickLeaveActionLoading} className="flex-1 py-2 bg-red-600 text-white rounded-xl text-sm font-bold disabled:opacity-50">Отклонить</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка: Выход с больничного */}
|
|||
|
|
{sickLeaveCloseModal && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setSickLeaveCloseModal(null)}>
|
|||
|
|
<div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
|||
|
|
<h4 className="text-lg font-bold text-slate-800 mb-2">Выход с больничного</h4>
|
|||
|
|
<p className="text-sm text-slate-600 mb-4">{sickLeaveCloseModal.employee.name}</p>
|
|||
|
|
{sickLeaveActionError && (
|
|||
|
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{sickLeaveActionError}</div>
|
|||
|
|
)}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-1">Дата выхода</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={closeEndDate}
|
|||
|
|
onChange={e => setCloseEndDate(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-1">Номер больничного листа <span className="text-red-600">*</span></label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={closeSickLeaveNumber}
|
|||
|
|
onChange={e => setCloseSickLeaveNumber(e.target.value)}
|
|||
|
|
placeholder="Обязательно при выходе"
|
|||
|
|
className="w-full px-4 py-2 rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 mt-6">
|
|||
|
|
<button type="button" onClick={() => setSickLeaveCloseModal(null)} className="flex-1 py-2 bg-slate-100 text-slate-700 rounded-xl text-sm font-bold">Отмена</button>
|
|||
|
|
<button type="button" onClick={handleCloseSickLeave} disabled={sickLeaveActionLoading} className="flex-1 py-2 bg-emerald-600 text-white rounded-xl text-sm font-bold disabled:opacity-50">Выход с больничного</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модалка: Перенести дату выхода */}
|
|||
|
|
{sickLeaveExtendModal && (
|
|||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={() => setSickLeaveExtendModal(null)}>
|
|||
|
|
<div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl" onClick={e => e.stopPropagation()}>
|
|||
|
|
<h4 className="text-lg font-bold text-slate-800 mb-2">Перенести дату выхода</h4>
|
|||
|
|
<p className="text-sm text-slate-600 mb-2">{sickLeaveExtendModal.employee.name}</p>
|
|||
|
|
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg p-2 mb-4">Уведомить сотрудника: сегодня закрыть или перенести дату выхода.</p>
|
|||
|
|
{sickLeaveActionError && (
|
|||
|
|
<div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{sickLeaveActionError}</div>
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-bold text-slate-700 mb-1">Новая предварительная дата выхода</label>
|
|||
|
|
<input
|
|||
|
|
type="date"
|
|||
|
|
value={extendExpectedReturnDate}
|
|||
|
|
onChange={e => setExtendExpectedReturnDate(e.target.value)}
|
|||
|
|
className="w-full px-4 py-2 rounded-lg border border-slate-200"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 mt-6">
|
|||
|
|
<button type="button" onClick={() => setSickLeaveExtendModal(null)} className="flex-1 py-2 bg-slate-100 text-slate-700 rounded-xl text-sm font-bold">Отмена</button>
|
|||
|
|
<button type="button" onClick={handleExtendSickLeave} disabled={sickLeaveActionLoading || !extendExpectedReturnDate} className="flex-1 py-2 bg-amber-600 text-white rounded-xl text-sm font-bold disabled:opacity-50">Перенести</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модальное окно добавления записи */}
|
|||
|
|
{isModalOpen && selectedEmployee && (
|
|||
|
|
<WorkCalendarModal
|
|||
|
|
employee={selectedEmployee}
|
|||
|
|
onClose={handleCloseModal}
|
|||
|
|
onSave={handleSave}
|
|||
|
|
type={modalType}
|
|||
|
|
currentUser={currentUser}
|
|||
|
|
employees={activeEmployees}
|
|||
|
|
selectableEmployees={actAsOptions}
|
|||
|
|
onEmployeeChange={setSelectedEmployee}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|