Initial commit MKD fixes

components/hr/AssignTrainingModal.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+import { Employee, TrainingProgram } from '../../types';
+
+interface AssignTrainingModalProps {
+  employees: Employee[];
+  programs: TrainingProgram[];
+  onClose: () => void;
+  onAssign: (employeeId: string, programId: string, startDate?: string) => void;
+}
+
+export const AssignTrainingModal: React.FC<AssignTrainingModalProps> = ({
+  employees,
+  programs,
+  onClose,
+  onAssign
+}) => {
+  const [selectedEmployee, setSelectedEmployee] = useState('');
+  const [selectedProgram, setSelectedProgram] = useState('');
+  const [startDate, setStartDate] = useState(new Date().toISOString().split('T')[0]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!selectedEmployee || !selectedProgram) {
+      alert('Выберите сотрудника и программу обучения');
+      return;
+    }
+
+    onAssign(selectedEmployee, selectedProgram, startDate);
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in"
+      onClick={onClose}
+    >
+      <div
+        className="bg-white rounded-2xl w-full max-w-lg shadow-2xl animate-slide-up"
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="sticky top-0 bg-white border-b border-slate-200 p-6 rounded-t-2xl z-10">
+          <div className="flex justify-between items-center">
+            <h3 className="text-2xl font-bold text-slate-800">Назначить обучение</h3>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-slate-100 rounded-full transition-colors"
+            >
+              <X className="w-5 h-5 text-slate-500"/>
+            </button>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          <div>
+            <label className="block text-sm font-bold text-slate-700 mb-2">
+              Сотрудник *
+            </label>
+            <select
+              value={selectedEmployee}
+              onChange={(e) => setSelectedEmployee(e.target.value)}
+              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
+              required
+            >
+              <option value="">Выберите сотрудника</option>
+              {employees.map(emp => (
+                <option key={emp.id} value={emp.id}>
+                  {emp.name} - {emp.position}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-sm font-bold text-slate-700 mb-2">
+              Программа обучения *
+            </label>
+            <select
+              value={selectedProgram}
+              onChange={(e) => setSelectedProgram(e.target.value)}
+              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
+              required
+            >
+              <option value="">Выберите программу</option>
+              {programs.map(prog => (
+                <option key={prog.id} value={prog.id}>
+                  {prog.title} ({prog.type === 'instruction' ? 'Инструктаж' : 
+                                 prog.type === 'course' ? 'Курс' :
+                                 prog.type === 'certification' ? 'Сертификация' :
+                                 prog.type === 'exam' ? 'Экзамен' : 'Другое'})
+                </option>
+              ))}
+            </select>
+            {programs.length === 0 && (
+              <p className="text-xs text-slate-400 mt-2">
+                Нет доступных программ. Создайте программу обучения сначала.
+              </p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-sm font-bold text-slate-700 mb-2">
+              Дата начала
+            </label>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              className="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary-500"
+            />
+          </div>
+
+          <div className="flex gap-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-6 py-3 border border-slate-200 text-slate-700 rounded-xl font-bold hover:bg-slate-50 transition-all"
+            >
+              Отмена
+            </button>
+            <button
+              type="submit"
+              className="flex-1 px-6 py-3 bg-emerald-600 text-white rounded-xl font-bold hover:bg-emerald-700 transition-all"
+              disabled={!selectedEmployee || !selectedProgram || programs.length === 0}
+            >
+              Назначить
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};