779 lines
36 KiB
TypeScript
779 lines
36 KiB
TypeScript
|
import React, { useState, useEffect, useMemo } from 'react';
|
|||
|
|
import {
|
|||
|
|
ShieldCheck, AlertTriangle, CheckCircle2, ClipboardList, HardHat,
|
|||
|
|
Zap, Clock, BookOpen, GraduationCap, Plus, Edit, Trash2, X,
|
|||
|
|
FileText, Calendar, User, Search, Filter, Users, Settings, Building2, MapPin
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { Employee, TrainingProgram, EmployeeTraining, TrainingStatus, TrainingType, TrainingCategory } from '../../types';
|
|||
|
|
import { ProgramModal } from './ProgramModal';
|
|||
|
|
import { TrainingManagementModal } from './TrainingManagementModal';
|
|||
|
|
import { BookMeetingRoomModal } from '../office/BookMeetingRoomModal';
|
|||
|
|
import { authFetch } from '../../services/apiClient';
|
|||
|
|
|
|||
|
|
export const TrainingModule: React.FC = () => {
|
|||
|
|
const [employees, setEmployees] = useState<Employee[]>([]);
|
|||
|
|
const [programs, setPrograms] = useState<TrainingProgram[]>([]);
|
|||
|
|
const [trainings, setTrainings] = useState<EmployeeTraining[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [selectedEmployee, setSelectedEmployee] = useState<string | null>(null);
|
|||
|
|
const [filterStatus, setFilterStatus] = useState<TrainingStatus | 'all'>('all');
|
|||
|
|
const [filterCategory, setFilterCategory] = useState<TrainingCategory | 'all'>('all');
|
|||
|
|
const [isProgramModalOpen, setIsProgramModalOpen] = useState(false);
|
|||
|
|
const [editingProgram, setEditingProgram] = useState<TrainingProgram | null>(null);
|
|||
|
|
const [managingTraining, setManagingTraining] = useState<EmployeeTraining | null>(null);
|
|||
|
|
const [trainingForBooking, setTrainingForBooking] = useState<EmployeeTraining | null>(null);
|
|||
|
|
|
|||
|
|
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
|||
|
|
|
|||
|
|
const activeEmployees = useMemo(
|
|||
|
|
() => employees.filter((e) => e.status !== 'inactive'),
|
|||
|
|
[employees]
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchData();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const fetchData = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
|
|||
|
|
// Загружаем сотрудников
|
|||
|
|
const employeesUrl = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? '/api/employees'
|
|||
|
|
: `${apiBaseUrl}/employees`;
|
|||
|
|
const employeesRes = await authFetch(employeesUrl);
|
|||
|
|
if (employeesRes.ok) {
|
|||
|
|
const employeesData = await employeesRes.json();
|
|||
|
|
setEmployees(employeesData);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Загружаем программы обучения
|
|||
|
|
try {
|
|||
|
|
const programsUrl = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? '/api/training/programs'
|
|||
|
|
: `${apiBaseUrl}/training/programs`;
|
|||
|
|
const programsRes = await authFetch(programsUrl);
|
|||
|
|
if (programsRes.ok) {
|
|||
|
|
const programsData = await programsRes.json();
|
|||
|
|
setPrograms(programsData);
|
|||
|
|
} else if (programsRes.status === 404) {
|
|||
|
|
// Endpoint еще не создан - это нормально, просто пустой список
|
|||
|
|
console.warn('Training programs endpoint not found - server may need restart');
|
|||
|
|
setPrograms([]);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.warn('Error fetching training programs:', error);
|
|||
|
|
setPrograms([]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Загружаем все обучения
|
|||
|
|
await fetchTrainings();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error fetching data:', error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const fetchTrainings = async () => {
|
|||
|
|
try {
|
|||
|
|
if (selectedEmployee) {
|
|||
|
|
const trainingsUrl = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? `/api/training/employee/${selectedEmployee}`
|
|||
|
|
: `${apiBaseUrl}/training/employee/${selectedEmployee}`;
|
|||
|
|
const trainingsRes = await authFetch(trainingsUrl);
|
|||
|
|
if (trainingsRes.ok) {
|
|||
|
|
const trainingsData = await trainingsRes.json();
|
|||
|
|
setTrainings(trainingsData);
|
|||
|
|
} else if (trainingsRes.status === 404) {
|
|||
|
|
console.warn('Training endpoint not found - server may need restart');
|
|||
|
|
setTrainings([]);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// Загружаем все назначенные обучения для всех сотрудников
|
|||
|
|
try {
|
|||
|
|
const allTrainingsUrl = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? '/api/training/all'
|
|||
|
|
: `${apiBaseUrl}/training/all`;
|
|||
|
|
const allTrainingsRes = await authFetch(allTrainingsUrl);
|
|||
|
|
if (allTrainingsRes.ok) {
|
|||
|
|
const allTrainingsData = await allTrainingsRes.json();
|
|||
|
|
setTrainings(allTrainingsData || []);
|
|||
|
|
} else if (allTrainingsRes.status === 404) {
|
|||
|
|
// Если endpoint не найден, пробуем загрузить просроченные
|
|||
|
|
console.warn('Training all endpoint not found, trying overdue...');
|
|||
|
|
const overdueUrl = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? '/api/training/overdue'
|
|||
|
|
: `${apiBaseUrl}/training/overdue`;
|
|||
|
|
const overdueRes = await authFetch(overdueUrl);
|
|||
|
|
if (overdueRes.ok) {
|
|||
|
|
const overdueData = await overdueRes.json();
|
|||
|
|
setTrainings(overdueData || []);
|
|||
|
|
} else {
|
|||
|
|
setTrainings([]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.warn('Error fetching all trainings:', error);
|
|||
|
|
setTrainings([]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error fetching trainings:', error);
|
|||
|
|
setTrainings([]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
fetchTrainings();
|
|||
|
|
}, [selectedEmployee]);
|
|||
|
|
|
|||
|
|
// Статистика
|
|||
|
|
const stats = {
|
|||
|
|
total: trainings.length,
|
|||
|
|
completed: trainings.filter(t => t.status === 'completed').length,
|
|||
|
|
inProgress: trainings.filter(t => t.status === 'in_progress').length,
|
|||
|
|
expired: trainings.filter(t => {
|
|||
|
|
if (!t.expiryDate) return false;
|
|||
|
|
return new Date(t.expiryDate) < new Date() && t.status === 'completed';
|
|||
|
|
}).length,
|
|||
|
|
overdue: trainings.filter(t => {
|
|||
|
|
if (!t.expiryDate) return false;
|
|||
|
|
return new Date(t.expiryDate) < new Date();
|
|||
|
|
}).length
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Фильтрация
|
|||
|
|
const filteredTrainings = trainings.filter(t => {
|
|||
|
|
if (filterStatus !== 'all' && t.status !== filterStatus) return false;
|
|||
|
|
if (filterCategory !== 'all' && t.programCategory !== filterCategory) return false;
|
|||
|
|
return true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const getStatusColor = (status: TrainingStatus, expiryDate?: string) => {
|
|||
|
|
if (expiryDate && new Date(expiryDate) < new Date() && status === 'completed') {
|
|||
|
|
return 'bg-red-50 text-red-600 border-red-200';
|
|||
|
|
}
|
|||
|
|
switch (status) {
|
|||
|
|
case 'completed': return 'bg-emerald-50 text-emerald-600 border-emerald-200';
|
|||
|
|
case 'in_progress': return 'bg-amber-50 text-amber-600 border-amber-200';
|
|||
|
|
case 'failed': return 'bg-red-50 text-red-600 border-red-200';
|
|||
|
|
case 'expired': return 'bg-red-50 text-red-600 border-red-200';
|
|||
|
|
case 'cancelled': return 'bg-slate-50 text-slate-600 border-slate-200';
|
|||
|
|
default: return 'bg-slate-50 text-slate-400 border-slate-200';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getStatusLabel = (status: TrainingStatus) => {
|
|||
|
|
const labels: Record<TrainingStatus, string> = {
|
|||
|
|
not_started: 'Не начато',
|
|||
|
|
in_progress: 'В процессе',
|
|||
|
|
completed: 'Завершено',
|
|||
|
|
failed: 'Не пройдено',
|
|||
|
|
expired: 'Просрочено',
|
|||
|
|
cancelled: 'Отменено'
|
|||
|
|
};
|
|||
|
|
return labels[status] || status;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getCategoryLabel = (category: TrainingCategory) => {
|
|||
|
|
const labels: Record<TrainingCategory, string> = {
|
|||
|
|
safety: 'Техника безопасности',
|
|||
|
|
fire_safety: 'Пожарная безопасность',
|
|||
|
|
electrical: 'Электротехническая безопасность',
|
|||
|
|
first_aid: 'Первая помощь',
|
|||
|
|
professional: 'Профессиональное обучение',
|
|||
|
|
compliance: 'Соответствие требованиям',
|
|||
|
|
other: 'Другое'
|
|||
|
|
};
|
|||
|
|
return labels[category] || category;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getTypeLabel = (type: TrainingType) => {
|
|||
|
|
const labels: Record<TrainingType, string> = {
|
|||
|
|
instruction: 'Инструктаж',
|
|||
|
|
course: 'Курс',
|
|||
|
|
certification: 'Сертификация',
|
|||
|
|
exam: 'Экзамен',
|
|||
|
|
other: 'Другое'
|
|||
|
|
};
|
|||
|
|
return labels[type] || type;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSaveProgram = async (program: TrainingProgram, selectedEmployeeIds?: string[]) => {
|
|||
|
|
try {
|
|||
|
|
// Определяем, создаем новую программу или редактируем существующую
|
|||
|
|
// Проверяем, что program существует и имеет валидный ID
|
|||
|
|
const isEdit = !!(program && program.id && typeof program.id === 'string' && program.id.trim() !== '');
|
|||
|
|
|
|||
|
|
const url = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? (isEdit ? `/api/training/programs/${program.id}` : '/api/training/programs')
|
|||
|
|
: (isEdit ? `${apiBaseUrl}/training/programs/${program.id}` : `${apiBaseUrl}/training/programs`);
|
|||
|
|
|
|||
|
|
const method = isEdit ? 'PUT' : 'POST';
|
|||
|
|
|
|||
|
|
// Преобразуем данные в формат, который ожидает backend
|
|||
|
|
// При создании новой программы НЕ отправляем id (backend сам сгенерирует)
|
|||
|
|
const requestData: any = {
|
|||
|
|
title: program.title,
|
|||
|
|
description: program.description,
|
|||
|
|
type: program.type,
|
|||
|
|
category: program.category,
|
|||
|
|
durationHours: program.durationHours,
|
|||
|
|
validityMonths: program.validityMonths,
|
|||
|
|
isRequired: program.isRequired,
|
|||
|
|
requiredForPositions: program.requiredForPositions,
|
|||
|
|
instructorName: program.instructorName,
|
|||
|
|
materialsUrl: program.materialsUrl
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Добавляем id только при редактировании существующей программы
|
|||
|
|
if (isEdit) {
|
|||
|
|
requestData.id = program.id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const response = await authFetch(url, {
|
|||
|
|
method,
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify(requestData)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
const savedProgram = await response.json();
|
|||
|
|
|
|||
|
|
// Проверяем, что программа была успешно создана/обновлена
|
|||
|
|
if (!savedProgram) {
|
|||
|
|
alert('Ошибка: Программа не была создана. Проверьте данные и попробуйте снова.');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Получаем ID программы (может быть в разных форматах после нормализации)
|
|||
|
|
const programId = savedProgram.id;
|
|||
|
|
if (!programId) {
|
|||
|
|
console.error('Saved program response:', savedProgram);
|
|||
|
|
alert('Ошибка: Не удалось получить ID созданной программы. Проверьте консоль для деталей.');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Если выбраны сотрудники, назначаем им обучение массово
|
|||
|
|
if (selectedEmployeeIds && selectedEmployeeIds.length > 0) {
|
|||
|
|
// Небольшая задержка, чтобы убедиться, что программа сохранена в БД
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 200));
|
|||
|
|
|
|||
|
|
const assigned = await assignTrainingToEmployees(programId, selectedEmployeeIds);
|
|||
|
|
if (assigned > 0) {
|
|||
|
|
if (isEdit) {
|
|||
|
|
alert(`Программа обновлена. Обучение назначено ${assigned} сотрудникам`);
|
|||
|
|
} else {
|
|||
|
|
alert(`Программа создана и назначена ${assigned} сотрудникам`);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (isEdit) {
|
|||
|
|
alert('Программа обновлена, но не удалось назначить обучение сотрудникам. Проверьте данные.');
|
|||
|
|
} else {
|
|||
|
|
alert('Программа создана, но не удалось назначить обучение сотрудникам. Проверьте данные.');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else if (isEdit) {
|
|||
|
|
// Если редактируем программу без выбора сотрудников, просто сохраняем
|
|||
|
|
alert('Программа обновлена');
|
|||
|
|
} else {
|
|||
|
|
alert('Программа успешно создана');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setIsProgramModalOpen(false);
|
|||
|
|
setEditingProgram(null);
|
|||
|
|
await fetchData();
|
|||
|
|
} else {
|
|||
|
|
let errorMessage = `Ошибка ${response.status}: ${response.statusText}`;
|
|||
|
|
try {
|
|||
|
|
const error = await response.json();
|
|||
|
|
errorMessage = error.error || error.details || errorMessage;
|
|||
|
|
} catch (e) {
|
|||
|
|
const text = await response.text().catch(() => '');
|
|||
|
|
if (text) errorMessage = text;
|
|||
|
|
}
|
|||
|
|
alert(`Ошибка: ${errorMessage}`);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error saving program:', error);
|
|||
|
|
alert('Ошибка при сохранении программы');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpdateTraining = async (trainingId: number, updates: Partial<EmployeeTraining>) => {
|
|||
|
|
try {
|
|||
|
|
const training = trainings.find(t => t.id === trainingId);
|
|||
|
|
if (!training) {
|
|||
|
|
throw new Error('Обучение не найдено');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? `/api/training/employee/${training.employeeId}/${trainingId}`
|
|||
|
|
: `${apiBaseUrl}/training/employee/${training.employeeId}/${trainingId}`;
|
|||
|
|
|
|||
|
|
const response = await authFetch(url, {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify(updates)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const error = await response.json();
|
|||
|
|
throw new Error(error.error || 'Не удалось обновить обучение');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Обновляем список обучений
|
|||
|
|
await fetchTrainings();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error updating training:', error);
|
|||
|
|
throw error;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const assignTrainingToEmployees = async (programId: string, employeeIds: string[]) => {
|
|||
|
|
const startDate = new Date().toISOString().split('T')[0];
|
|||
|
|
let assignedCount = 0;
|
|||
|
|
const errors: string[] = [];
|
|||
|
|
|
|||
|
|
for (const employeeId of employeeIds) {
|
|||
|
|
try {
|
|||
|
|
const url = (import.meta.env.DEV || !apiBaseUrl)
|
|||
|
|
? `/api/training/employee/${employeeId}`
|
|||
|
|
: `${apiBaseUrl}/training/employee/${employeeId}`;
|
|||
|
|
|
|||
|
|
const response = await authFetch(url, {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
programId,
|
|||
|
|
startDate
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
assignedCount++;
|
|||
|
|
} else {
|
|||
|
|
const errorData = await response.json().catch(() => ({ error: response.statusText }));
|
|||
|
|
const errorMsg = errorData.error || `Ошибка ${response.status}`;
|
|||
|
|
errors.push(`Сотрудник ${employeeId}: ${errorMsg}`);
|
|||
|
|
console.error(`Error assigning training to employee ${employeeId}:`, errorMsg);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
const errorMsg = error instanceof Error ? error.message : 'Неизвестная ошибка';
|
|||
|
|
errors.push(`Сотрудник ${employeeId}: ${errorMsg}`);
|
|||
|
|
console.error(`Error assigning training to employee ${employeeId}:`, error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (errors.length > 0 && assignedCount === 0) {
|
|||
|
|
console.error('Все назначения завершились ошибкой:', errors);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return assignedCount;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center py-20">
|
|||
|
|
<div className="text-slate-400 text-sm">Загрузка данных...</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6 animate-fade-in">
|
|||
|
|
{/* Статистика */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|||
|
|
<div className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm flex items-center gap-5">
|
|||
|
|
<div className="w-16 h-16 rounded-3xl bg-emerald-50 flex items-center justify-center text-emerald-600">
|
|||
|
|
<CheckCircle2 className="w-8 h-8"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-2xl font-black text-slate-800 leading-none">{stats.completed}</h4>
|
|||
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1.5 tracking-wider">Завершено</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white p-6 rounded-[2rem] border border-amber-100 shadow-sm flex items-center gap-5">
|
|||
|
|
<div className="w-16 h-16 rounded-3xl bg-amber-50 flex items-center justify-center text-amber-600">
|
|||
|
|
<Clock className="w-8 h-8"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-2xl font-black text-amber-600 leading-none">{stats.inProgress}</h4>
|
|||
|
|
<p className="text-[10px] text-amber-400 font-bold uppercase mt-1.5 tracking-wider">В процессе</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white p-6 rounded-[2rem] border border-red-100 shadow-sm flex items-center gap-5 relative overflow-hidden">
|
|||
|
|
<div className="absolute right-0 top-0 p-4 opacity-5">
|
|||
|
|
<AlertTriangle className="w-20 h-20 text-red-600"/>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-16 h-16 rounded-3xl bg-red-50 flex items-center justify-center text-red-600">
|
|||
|
|
<AlertTriangle className="w-8 h-8 animate-pulse"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-2xl font-black text-red-600 leading-none">{stats.expired}</h4>
|
|||
|
|
<p className="text-[10px] text-red-400 font-bold uppercase mt-1.5 tracking-wider">Просрочено</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white p-6 rounded-[2rem] border border-slate-200 shadow-sm flex items-center gap-5">
|
|||
|
|
<div className="w-16 h-16 rounded-3xl bg-primary-50 flex items-center justify-center text-primary-600">
|
|||
|
|
<BookOpen className="w-8 h-8"/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-2xl font-black text-slate-800 leading-none">{programs.length}</h4>
|
|||
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1.5 tracking-wider">Программ</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Фильтры и действия */}
|
|||
|
|
<div className="flex flex-wrap items-center gap-4">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Filter className="w-4 h-4 text-slate-400"/>
|
|||
|
|
<select
|
|||
|
|
value={filterStatus}
|
|||
|
|
onChange={(e) => setFilterStatus(e.target.value as TrainingStatus | 'all')}
|
|||
|
|
className="px-3 py-2 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 bg-white"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все статусы</option>
|
|||
|
|
<option value="not_started">Не начато</option>
|
|||
|
|
<option value="in_progress">В процессе</option>
|
|||
|
|
<option value="completed">Завершено</option>
|
|||
|
|
<option value="failed">Не пройдено</option>
|
|||
|
|
<option value="expired">Просрочено</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<select
|
|||
|
|
value={filterCategory}
|
|||
|
|
onChange={(e) => setFilterCategory(e.target.value as TrainingCategory | 'all')}
|
|||
|
|
className="px-3 py-2 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 bg-white"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все категории</option>
|
|||
|
|
<option value="safety">Техника безопасности</option>
|
|||
|
|
<option value="fire_safety">Пожарная безопасность</option>
|
|||
|
|
<option value="electrical">Электротехническая безопасность</option>
|
|||
|
|
<option value="first_aid">Первая помощь</option>
|
|||
|
|
<option value="professional">Профессиональное обучение</option>
|
|||
|
|
<option value="compliance">Соответствие требованиям</option>
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<select
|
|||
|
|
value={selectedEmployee || 'all'}
|
|||
|
|
onChange={(e) => setSelectedEmployee(e.target.value === 'all' ? null : e.target.value)}
|
|||
|
|
className="px-3 py-2 border border-slate-200 rounded-xl text-sm font-bold text-slate-700 bg-white"
|
|||
|
|
>
|
|||
|
|
<option value="all">Все сотрудники</option>
|
|||
|
|
{activeEmployees.map(emp => (
|
|||
|
|
<option key={emp.id} value={emp.id}>{emp.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex gap-2 ml-auto">
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setEditingProgram(null);
|
|||
|
|
setIsProgramModalOpen(true);
|
|||
|
|
}}
|
|||
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-xl text-[10px] font-black uppercase flex items-center gap-2 hover:bg-primary-700 transition-all"
|
|||
|
|
>
|
|||
|
|
<Plus className="w-4 h-4"/> Программа
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Список программ обучения */}
|
|||
|
|
{programs.length > 0 && (
|
|||
|
|
<div className="space-y-4 mb-6">
|
|||
|
|
<div className="flex items-center justify-between px-1">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em]">
|
|||
|
|
Программы обучения (шаблоны)
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-[9px] text-slate-400 font-bold mt-1">
|
|||
|
|
Создайте программу и назначьте её сотрудникам — записи появятся ниже
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|||
|
|
{programs.map(prog => (
|
|||
|
|
<div
|
|||
|
|
key={prog.id}
|
|||
|
|
className="bg-white p-4 rounded-2xl border-2 border-slate-200 hover:border-primary-300 transition-all"
|
|||
|
|
>
|
|||
|
|
<div className="flex justify-between items-start mb-3">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<h4 className="text-sm font-black text-slate-800 leading-tight mb-1">
|
|||
|
|
{prog.title}
|
|||
|
|
</h4>
|
|||
|
|
<p className="text-xs text-slate-400 font-bold uppercase">
|
|||
|
|
{getTypeLabel(prog.type)} • {getCategoryLabel(prog.category)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setEditingProgram(prog);
|
|||
|
|
setIsProgramModalOpen(true);
|
|||
|
|
}}
|
|||
|
|
className="p-1.5 text-slate-400 hover:text-primary-600 transition-colors"
|
|||
|
|
title="Редактировать"
|
|||
|
|
>
|
|||
|
|
<Edit className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setEditingProgram(prog);
|
|||
|
|
setIsProgramModalOpen(true);
|
|||
|
|
}}
|
|||
|
|
className="p-1.5 text-slate-400 hover:text-emerald-600 transition-colors"
|
|||
|
|
title="Записать сотрудников на программу"
|
|||
|
|
>
|
|||
|
|
<Users className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{prog.description && (
|
|||
|
|
<p className="text-xs text-slate-500 mb-2 line-clamp-2">{prog.description}</p>
|
|||
|
|
)}
|
|||
|
|
<div className="flex items-center gap-4 text-xs text-slate-400">
|
|||
|
|
{prog.durationHours && (
|
|||
|
|
<span className="flex items-center gap-1">
|
|||
|
|
<Clock className="w-3 h-3"/> {prog.durationHours} ч.
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{prog.validityMonths && (
|
|||
|
|
<span>Срок: {prog.validityMonths} мес.</span>
|
|||
|
|
)}
|
|||
|
|
{prog.isRequired && (
|
|||
|
|
<span className="text-amber-600 font-bold">Обязательное</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Список обучений */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="flex items-center justify-between px-1">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-black text-slate-500 text-[10px] uppercase tracking-[0.2em]">
|
|||
|
|
{selectedEmployee ? 'Обучение сотрудника' : 'Назначенные обучения'}
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-[9px] text-slate-400 font-bold mt-1">
|
|||
|
|
{selectedEmployee
|
|||
|
|
? 'Обучение, назначенное выбранному сотруднику'
|
|||
|
|
: 'Конкретные назначения программ сотрудникам. Назначьте программу выше, чтобы здесь появились записи'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{filteredTrainings.length === 0 ? (
|
|||
|
|
<div className="bg-white p-8 rounded-2xl border border-slate-100 text-center">
|
|||
|
|
<BookOpen className="w-12 h-12 text-slate-300 mx-auto mb-3"/>
|
|||
|
|
<p className="text-slate-400 text-sm font-bold mb-2">Нет назначенных обучений</p>
|
|||
|
|
<p className="text-[10px] text-slate-400 font-bold">
|
|||
|
|
{programs.length > 0
|
|||
|
|
? 'Выберите программу выше и нажмите иконку 👥, чтобы назначить её сотрудникам'
|
|||
|
|
: 'Создайте программу обучения, затем назначьте её сотрудникам'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{filteredTrainings.map(training => {
|
|||
|
|
const isExpired = training.expiryDate && new Date(training.expiryDate) < new Date();
|
|||
|
|
const isOverdue = isExpired && training.status === 'completed';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={training.id}
|
|||
|
|
className={`bg-white p-4 rounded-2xl border-2 transition-all ${
|
|||
|
|
isOverdue ? 'border-red-200 bg-red-50/5' : getStatusColor(training.status, training.expiryDate)
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<div className="flex justify-between items-start mb-3">
|
|||
|
|
<div className="flex items-center gap-3 flex-1">
|
|||
|
|
<div className={`p-2.5 rounded-xl ${
|
|||
|
|
isOverdue ? 'bg-red-100 text-red-600' :
|
|||
|
|
training.status === 'completed' ? 'bg-emerald-100 text-emerald-600' :
|
|||
|
|
'bg-slate-50 text-slate-400'
|
|||
|
|
}`}>
|
|||
|
|
{training.programCategory === 'safety' || training.programCategory === 'electrical' ? (
|
|||
|
|
<HardHat className="w-5 h-5"/>
|
|||
|
|
) : training.programCategory === 'fire_safety' ? (
|
|||
|
|
<Zap className="w-5 h-5"/>
|
|||
|
|
) : (
|
|||
|
|
<GraduationCap className="w-5 h-5"/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<p className="text-sm font-black text-slate-800 leading-tight">
|
|||
|
|
{training.programTitle || 'Неизвестная программа'}
|
|||
|
|
</p>
|
|||
|
|
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
|||
|
|
<span className="text-[9px] text-slate-400 font-bold uppercase">
|
|||
|
|
{training.employeeName || 'Неизвестный сотрудник'}
|
|||
|
|
</span>
|
|||
|
|
{training.employeePosition && (
|
|||
|
|
<>
|
|||
|
|
<span className="text-slate-300">•</span>
|
|||
|
|
<span className="text-[9px] text-slate-400 font-bold uppercase">
|
|||
|
|
{training.employeePosition}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
{isOverdue ? (
|
|||
|
|
<span className="text-[8px] font-black bg-red-500 text-white px-2 py-0.5 rounded-full uppercase animate-pulse">
|
|||
|
|
Пересдать!
|
|||
|
|
</span>
|
|||
|
|
) : training.status === 'completed' ? (
|
|||
|
|
<div className="flex items-center gap-1 text-[9px] font-black text-emerald-500 uppercase">
|
|||
|
|
<CheckCircle2 className="w-3 h-3"/> Завершено
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase ${
|
|||
|
|
training.status === 'in_progress' ? 'bg-amber-100 text-amber-600' :
|
|||
|
|
training.status === 'failed' ? 'bg-red-100 text-red-600' :
|
|||
|
|
training.status === 'cancelled' ? 'bg-slate-100 text-slate-400' :
|
|||
|
|
'bg-slate-100 text-slate-500'
|
|||
|
|
}`}>
|
|||
|
|
{getStatusLabel(training.status)}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
onClick={() => setTrainingForBooking(training)}
|
|||
|
|
className="p-1.5 text-slate-400 hover:text-amber-600 transition-colors"
|
|||
|
|
title="Забронировать переговорную для обучения"
|
|||
|
|
>
|
|||
|
|
<Building2 className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => setManagingTraining(training)}
|
|||
|
|
className="p-1.5 text-slate-400 hover:text-primary-600 transition-colors"
|
|||
|
|
title="Управление обучением"
|
|||
|
|
>
|
|||
|
|
<Edit className="w-4 h-4"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{training.location && (
|
|||
|
|
<div className="flex items-center gap-2 mb-2 text-[9px] font-bold text-slate-500 uppercase">
|
|||
|
|
<MapPin className="w-3.5 h-3.5 text-slate-400"/>
|
|||
|
|
<span>Где: {training.location}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-4 border-t border-slate-100 pt-3">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<FileText className="w-3.5 h-3.5 text-slate-400"/>
|
|||
|
|
<span className="text-[9px] font-bold text-slate-500 uppercase">
|
|||
|
|
{getTypeLabel(training.programType || 'other')} • {getCategoryLabel(training.programCategory || 'other')}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2 text-right justify-end">
|
|||
|
|
{training.expiryDate ? (
|
|||
|
|
<>
|
|||
|
|
<Clock className={`w-3.5 h-3.5 ${isExpired ? 'text-red-500' : 'text-slate-300'}`}/>
|
|||
|
|
<span className={`text-[9px] font-bold uppercase ${isExpired ? 'text-red-600' : 'text-slate-500'}`}>
|
|||
|
|
До: {new Date(training.expiryDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
) : training.completionDate ? (
|
|||
|
|
<>
|
|||
|
|
<Calendar className="w-3.5 h-3.5 text-slate-300"/>
|
|||
|
|
<span className="text-[9px] font-bold text-slate-500 uppercase">
|
|||
|
|
{new Date(training.completionDate).toLocaleDateString('ru-RU')}
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
) : null}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{training.certificateNumber && (
|
|||
|
|
<div className="mt-2 pt-2 border-t border-slate-100">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<FileText className="w-3 h-3 text-slate-400"/>
|
|||
|
|
<span className="text-[9px] font-bold text-slate-500">
|
|||
|
|
Сертификат: {training.certificateNumber}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Кнопка формирования приказа */}
|
|||
|
|
<button className="w-full py-4 bg-slate-900 text-white rounded-2xl text-[10px] font-black uppercase tracking-[0.2em] shadow-xl active:scale-95 transition-all flex items-center justify-center gap-3">
|
|||
|
|
<ClipboardList className="w-5 h-5"/> Сформировать приказ об инструктаже
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{/* Модальное окно создания/редактирования программы */}
|
|||
|
|
{isProgramModalOpen && (
|
|||
|
|
<ProgramModal
|
|||
|
|
program={editingProgram || undefined}
|
|||
|
|
employees={activeEmployees}
|
|||
|
|
onClose={() => {
|
|||
|
|
setIsProgramModalOpen(false);
|
|||
|
|
setEditingProgram(null);
|
|||
|
|
}}
|
|||
|
|
onSave={handleSaveProgram}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Модальное окно управления обучением */}
|
|||
|
|
{managingTraining && (
|
|||
|
|
<TrainingManagementModal
|
|||
|
|
training={managingTraining}
|
|||
|
|
onClose={() => setManagingTraining(null)}
|
|||
|
|
onUpdate={handleUpdateTraining}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Бронирование переговорной для обучения */}
|
|||
|
|
{trainingForBooking && (
|
|||
|
|
<BookMeetingRoomModal
|
|||
|
|
purpose={`Обучение: ${trainingForBooking.programTitle || 'Программа'} — ${trainingForBooking.employeeName || 'Сотрудник'}`}
|
|||
|
|
defaultDate={(() => {
|
|||
|
|
try {
|
|||
|
|
const d = trainingForBooking.startDate;
|
|||
|
|
if (d == null || d === '') return undefined;
|
|||
|
|
const parsed = new Date(d);
|
|||
|
|
return isNaN(parsed.getTime()) ? undefined : parsed.toISOString().split('T')[0];
|
|||
|
|
} catch {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
})()}
|
|||
|
|
onBooked={async (roomName) => {
|
|||
|
|
if (roomName) {
|
|||
|
|
try {
|
|||
|
|
await handleUpdateTraining(trainingForBooking.id, { location: roomName });
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setTrainingForBooking(null);
|
|||
|
|
}}
|
|||
|
|
onClose={() => setTrainingForBooking(null)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|