Initial commit MKD fixes

components/hr/TrainingModule.tsx

@@ -0,0 +1,778 @@
+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>
+  );
+};