500 lines
29 KiB
TypeScript
Executable File
500 lines
29 KiB
TypeScript
Executable File
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Candidate, Vacancy } from '../../types';
|
||
import { User, Search, Filter, Phone, Mail, Briefcase, Calendar, Plus, Edit, Trash2, X, AlertCircle, FileText, CheckCircle, Clock, UserCheck, History } from 'lucide-react';
|
||
import { CandidateFormModal } from './CandidateFormModal';
|
||
import { CandidateEventsTimeline } from './CandidateEventsTimeline';
|
||
import { authFetch } from '../../services/apiClient';
|
||
|
||
export const CandidatesRegistry: React.FC = () => {
|
||
const [candidates, setCandidates] = useState<Candidate[]>([]);
|
||
const [vacancies, setVacancies] = useState<Vacancy[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [stageFilter, setStageFilter] = useState<string[]>([]);
|
||
const [vacancyFilter, setVacancyFilter] = useState<string | null>(null);
|
||
const [isFormModalOpen, setIsFormModalOpen] = useState(false);
|
||
const [editingCandidate, setEditingCandidate] = useState<Candidate | null>(null);
|
||
const [selectedVacancyId, setSelectedVacancyId] = useState<string | null>(null);
|
||
const [selectedCandidateForEvents, setSelectedCandidateForEvents] = useState<Candidate | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
fetchCandidates();
|
||
fetchVacancies();
|
||
}, []);
|
||
|
||
const fetchCandidates = async () => {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
||
const apiUrl = (import.meta.env.DEV || !apiBaseUrl)
|
||
? '/api/candidates?includeEvents=true'
|
||
: `${apiBaseUrl}/candidates?includeEvents=true`;
|
||
const response = await authFetch(apiUrl);
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setCandidates(data);
|
||
} else {
|
||
const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));
|
||
const errorMessage = errorData.message || errorData.error || `HTTP ${response.status}: ${response.statusText}`;
|
||
setError(errorMessage);
|
||
console.error('Error fetching candidates:', errorMessage, errorData);
|
||
}
|
||
} catch (error) {
|
||
const errorMessage = error instanceof Error ? error.message : 'Failed to fetch candidates';
|
||
setError(errorMessage);
|
||
console.error('Error fetching candidates:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const fetchVacancies = async () => {
|
||
try {
|
||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
||
const apiUrl = (import.meta.env.DEV || !apiBaseUrl)
|
||
? '/api/vacancies'
|
||
: `${apiBaseUrl}/vacancies`;
|
||
const response = await authFetch(apiUrl);
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setVacancies(data);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching vacancies:', error);
|
||
}
|
||
};
|
||
|
||
const handleCreateCandidate = (vacancyId?: string | null) => {
|
||
setEditingCandidate(null);
|
||
setSelectedVacancyId(vacancyId || null);
|
||
setIsFormModalOpen(true);
|
||
};
|
||
|
||
const handleEditCandidate = (candidate: Candidate) => {
|
||
setEditingCandidate(candidate);
|
||
setSelectedVacancyId(null);
|
||
setIsFormModalOpen(true);
|
||
};
|
||
|
||
const handleDeleteCandidate = async (candidate: Candidate) => {
|
||
if (!confirm(`Удалить кандидата "${candidate.name}"?`)) return;
|
||
|
||
try {
|
||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
||
const apiUrl = (import.meta.env.DEV || !apiBaseUrl)
|
||
? `/api/candidates/${candidate.id}`
|
||
: `${apiBaseUrl}/candidates/${candidate.id}`;
|
||
const response = await authFetch(apiUrl, { method: 'DELETE' });
|
||
if (response.ok) {
|
||
await fetchCandidates();
|
||
} else {
|
||
alert('Ошибка при удалении кандидата');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error deleting candidate:', error);
|
||
alert('Ошибка при удалении кандидата');
|
||
}
|
||
};
|
||
|
||
const handleSaveCandidate = async (candidate: Candidate) => {
|
||
await fetchCandidates();
|
||
setIsFormModalOpen(false);
|
||
setEditingCandidate(null);
|
||
setSelectedVacancyId(null);
|
||
};
|
||
|
||
const toggleStageFilter = (stage: string) => {
|
||
setStageFilter(prev =>
|
||
prev.includes(stage)
|
||
? prev.filter(s => s !== stage)
|
||
: [...prev, stage]
|
||
);
|
||
};
|
||
|
||
const filteredCandidates = candidates.filter(c => {
|
||
const query = searchQuery.toLowerCase();
|
||
const matchesSearch = c.name.toLowerCase().includes(query) ||
|
||
c.position.toLowerCase().includes(query) ||
|
||
(c.phone && c.phone.toLowerCase().includes(query)) ||
|
||
(c.email && c.email.toLowerCase().includes(query));
|
||
|
||
const matchesStage = stageFilter.length === 0 || stageFilter.includes(c.stage);
|
||
const matchesVacancy = !vacancyFilter || c.vacancyId === vacancyFilter;
|
||
|
||
return matchesSearch && matchesStage && matchesVacancy;
|
||
});
|
||
|
||
const getStageLabel = (stage: string) => {
|
||
switch (stage) {
|
||
case 'new': return 'Новый';
|
||
case 'interview': return 'Собеседование';
|
||
case 'probation': return 'Испытательный срок';
|
||
case 'hired': return 'Трудоустроен';
|
||
case 'rejected': return 'Отклонен';
|
||
default: return stage;
|
||
}
|
||
};
|
||
|
||
const getStageColor = (stage: string) => {
|
||
switch (stage) {
|
||
case 'new': return 'bg-blue-50 text-blue-600';
|
||
case 'interview': return 'bg-amber-50 text-amber-600';
|
||
case 'probation': return 'bg-purple-50 text-purple-600';
|
||
case 'hired': return 'bg-emerald-50 text-emerald-600';
|
||
case 'rejected': return 'bg-red-50 text-red-600';
|
||
default: return 'bg-slate-50 text-slate-600';
|
||
}
|
||
};
|
||
|
||
const getStageIcon = (stage: string) => {
|
||
switch (stage) {
|
||
case 'new': return <Clock className="w-4 h-4" />;
|
||
case 'interview': return <Calendar className="w-4 h-4" />;
|
||
case 'probation': return <UserCheck className="w-4 h-4" />;
|
||
case 'hired': return <CheckCircle className="w-4 h-4" />;
|
||
case 'rejected': return <X className="w-4 h-4" />;
|
||
default: return <User className="w-4 h-4" />;
|
||
}
|
||
};
|
||
|
||
const getVacancyName = (vacancyId?: string) => {
|
||
if (!vacancyId) return 'Без вакансии';
|
||
const vacancy = vacancies.find(v => v.id === vacancyId);
|
||
return vacancy ? vacancy.position : 'Неизвестная вакансия';
|
||
};
|
||
|
||
const stats = {
|
||
total: candidates.length,
|
||
new: candidates.filter(c => c.stage === 'new').length,
|
||
interview: candidates.filter(c => c.stage === 'interview').length,
|
||
probation: candidates.filter(c => c.stage === 'probation').length,
|
||
hired: candidates.filter(c => c.stage === 'hired').length,
|
||
rejected: candidates.filter(c => c.stage === 'rejected').length,
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 animate-fade-in">
|
||
{/* Toolbar */}
|
||
<div className="flex gap-4">
|
||
<div className="relative flex-1">
|
||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
||
<input
|
||
type="text"
|
||
placeholder="Поиск кандидатов по имени, позиции, телефону..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
className="w-full pl-11 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm outline-none focus:ring-2 focus:ring-primary-500 shadow-sm"
|
||
/>
|
||
</div>
|
||
<button className="p-3 bg-white border border-slate-200 rounded-2xl text-slate-500 hover:bg-slate-50 transition-all shadow-sm">
|
||
<Filter className="w-5 h-5"/>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Stats Header */}
|
||
<div className="bg-slate-900 rounded-[2.5rem] p-8 text-white shadow-xl relative overflow-hidden">
|
||
<User className="absolute -bottom-4 -right-4 w-48 h-48 opacity-10 rotate-12" />
|
||
<div className="relative z-10">
|
||
<div className="flex items-center gap-2 text-primary-400 mb-2">
|
||
<Briefcase className="w-5 h-5"/>
|
||
<span className="text-[10px] font-black uppercase tracking-widest">Кандидаты</span>
|
||
</div>
|
||
<h3 className="text-3xl font-black mb-2">База кандидатов</h3>
|
||
<p className="text-xs text-slate-400 font-medium mb-8 max-w-md">
|
||
Всего {stats.total} кандидатов в базе. Активных на собеседовании: {stats.interview + stats.probation}.
|
||
</p>
|
||
|
||
<div className="flex gap-4 flex-wrap">
|
||
<div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
|
||
<p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Новые</p>
|
||
<p className="text-xl font-black text-white">{stats.new}</p>
|
||
</div>
|
||
<div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
|
||
<p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Собеседование</p>
|
||
<p className="text-xl font-black text-white">{stats.interview}</p>
|
||
</div>
|
||
<div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
|
||
<p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Испытательный срок</p>
|
||
<p className="text-xl font-black text-white">{stats.probation}</p>
|
||
</div>
|
||
<div className="bg-white/10 px-4 py-2 rounded-xl border border-white/10">
|
||
<p className="text-[10px] text-slate-400 font-bold uppercase mb-0.5">Трудоустроены</p>
|
||
<p className="text-xl font-black text-white">{stats.hired}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{/* Фильтр по статусу */}
|
||
<div>
|
||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-wider mb-2 block">
|
||
Статус
|
||
</label>
|
||
<div className="flex flex-wrap gap-2">
|
||
{['new', 'interview', 'probation', 'hired', 'rejected'].map(stage => (
|
||
<button
|
||
key={stage}
|
||
onClick={() => toggleStageFilter(stage)}
|
||
className={`px-3 py-1.5 rounded-xl text-[10px] font-black uppercase transition-all ${
|
||
stageFilter.includes(stage)
|
||
? getStageColor(stage)
|
||
: 'bg-slate-50 text-slate-400 hover:bg-slate-100'
|
||
}`}
|
||
>
|
||
{getStageLabel(stage)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{/* Фильтр по вакансии */}
|
||
<div>
|
||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-wider mb-2 block">
|
||
Вакансия
|
||
</label>
|
||
<select
|
||
value={vacancyFilter || ''}
|
||
onChange={(e) => setVacancyFilter(e.target.value || null)}
|
||
className="w-full p-3 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary-500 outline-none"
|
||
>
|
||
<option value="">Все вакансии</option>
|
||
<option value="null">Без вакансии</option>
|
||
{vacancies.map(vacancy => (
|
||
<option key={vacancy.id} value={vacancy.id}>
|
||
{vacancy.position} ({vacancy.department})
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Кнопка создания кандидата */}
|
||
<button
|
||
onClick={() => handleCreateCandidate()}
|
||
className="w-full py-4 bg-primary-600 text-white rounded-2xl text-sm font-black uppercase flex items-center justify-center gap-2 shadow-lg shadow-primary-500/20 hover:bg-primary-700 active:scale-95 transition-all"
|
||
>
|
||
<Plus className="w-5 h-5"/> Создать нового кандидата
|
||
</button>
|
||
|
||
{/* Error Message */}
|
||
{error && (
|
||
<div className="bg-red-50 border border-red-200 rounded-2xl p-4 flex items-start gap-3">
|
||
<AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
|
||
<div className="flex-1">
|
||
<h4 className="font-bold text-red-800 mb-1">Ошибка загрузки кандидатов</h4>
|
||
<p className="text-sm text-red-700">{error}</p>
|
||
<button
|
||
onClick={fetchCandidates}
|
||
className="mt-3 text-sm font-medium text-red-600 hover:text-red-800 underline"
|
||
>
|
||
Попробовать снова
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* List of Candidates */}
|
||
{loading ? (
|
||
<div className="text-center py-10 text-slate-400">Загрузка...</div>
|
||
) : error ? null : filteredCandidates.length === 0 ? (
|
||
<div className="text-center py-10 text-slate-400">
|
||
{searchQuery || stageFilter.length > 0 || vacancyFilter ? 'Кандидаты не найдены' : 'Нет кандидатов. Создайте первого кандидата.'}
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 gap-4">
|
||
{filteredCandidates.map(candidate => (
|
||
<div key={candidate.id} className="bg-white p-6 rounded-[2.5rem] border border-slate-200 shadow-sm hover:shadow-lg hover:border-primary-300 transition-all group relative overflow-hidden">
|
||
{/* Status Vertical Line */}
|
||
<div className={`absolute left-0 top-1/4 bottom-1/4 w-1.5 rounded-r-full ${
|
||
candidate.stage === 'new' ? 'bg-blue-500' :
|
||
candidate.stage === 'interview' ? 'bg-amber-500' :
|
||
candidate.stage === 'probation' ? 'bg-purple-500' :
|
||
candidate.stage === 'hired' ? 'bg-emerald-500' :
|
||
'bg-red-500'
|
||
}`}/>
|
||
|
||
<div className="flex flex-col md:flex-row justify-between gap-6">
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
||
<span className={`text-[9px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter flex items-center gap-1 ${getStageColor(candidate.stage)}`}>
|
||
{getStageIcon(candidate.stage)}
|
||
{getStageLabel(candidate.stage)}
|
||
</span>
|
||
{candidate.vacancyId && (
|
||
<span className="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 py-0.5 bg-slate-50 rounded-full border border-slate-100">
|
||
{getVacancyName(candidate.vacancyId)}
|
||
</span>
|
||
)}
|
||
{!candidate.vacancyId && (
|
||
<span className="text-[9px] font-black text-slate-300 uppercase tracking-widest px-2 py-0.5 bg-slate-50 rounded-full border border-slate-100">
|
||
Без вакансии
|
||
</span>
|
||
)}
|
||
</div>
|
||
<h4 className="text-xl font-black text-slate-800 leading-tight group-hover:text-primary-600 transition-colors mb-2">{candidate.name}</h4>
|
||
<p className="text-xs text-slate-500 font-medium leading-relaxed mb-3">{candidate.position}</p>
|
||
<div className="flex flex-wrap gap-4 text-xs text-slate-600">
|
||
{candidate.phone && (
|
||
<div className="flex items-center gap-1.5">
|
||
<Phone className="w-3.5 h-3.5 text-slate-400"/>
|
||
<span>{candidate.phone}</span>
|
||
</div>
|
||
)}
|
||
{candidate.email && (
|
||
<div className="flex items-center gap-1.5">
|
||
<Mail className="w-3.5 h-3.5 text-slate-400"/>
|
||
<span>{candidate.email}</span>
|
||
</div>
|
||
)}
|
||
{candidate.interviewDate && (
|
||
<div className="flex items-center gap-1.5">
|
||
<Calendar className="w-3.5 h-3.5 text-slate-400"/>
|
||
<span>Собеседование: {new Date(candidate.interviewDate).toLocaleDateString('ru-RU')}</span>
|
||
</div>
|
||
)}
|
||
{candidate.hiredDate && (
|
||
<div className="flex items-center gap-1.5">
|
||
<CheckCircle className="w-3.5 h-3.5 text-emerald-500"/>
|
||
<span>Трудоустроен: {new Date(candidate.hiredDate).toLocaleDateString('ru-RU')}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{candidate.interviewNotes && (
|
||
<div className="mt-3 p-3 bg-slate-50 rounded-xl border border-slate-100">
|
||
<p className="text-[10px] font-black text-slate-400 uppercase mb-1">Заметки с собеседования</p>
|
||
<p className="text-xs text-slate-600">{candidate.interviewNotes}</p>
|
||
</div>
|
||
)}
|
||
{candidate.events && candidate.events.length > 0 && (
|
||
<div className="mt-3 p-3 bg-primary-50 rounded-xl border border-primary-100">
|
||
<p className="text-[10px] font-black text-primary-600 uppercase mb-1 flex items-center gap-1">
|
||
<History className="w-3 h-3"/> Последнее событие
|
||
</p>
|
||
<p className="text-xs text-primary-700 font-medium">
|
||
{(() => {
|
||
const lastEvent = candidate.events[0];
|
||
const eventDate = new Date(lastEvent.eventDate);
|
||
const eventLabels: Record<string, string> = {
|
||
call: 'Созвон',
|
||
interview_1: 'Первое собеседование',
|
||
interview_2: 'Второе собеседование',
|
||
interview_3: 'Третье собеседование',
|
||
test_task: 'Тестовое задание',
|
||
offer: 'Оффер',
|
||
offer_accepted: 'Оффер принят',
|
||
offer_rejected: 'Оффер отклонен',
|
||
probation_start: 'Начало испытательного срока',
|
||
hired: 'Трудоустроен',
|
||
rejected: 'Отклонен',
|
||
other: 'Другое'
|
||
};
|
||
return `${eventLabels[lastEvent.eventType] || lastEvent.eventType} - ${eventDate.toLocaleDateString('ru-RU')}`;
|
||
})()}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-right flex flex-col justify-between items-end min-w-[150px]">
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => setSelectedCandidateForEvents(candidate)}
|
||
className="p-2 text-slate-300 hover:text-purple-600 transition-colors"
|
||
title="История событий"
|
||
>
|
||
<History className="w-5 h-5"/>
|
||
</button>
|
||
<button
|
||
onClick={() => handleEditCandidate(candidate)}
|
||
className="p-2 text-slate-300 hover:text-primary-600 transition-colors"
|
||
title="Редактировать"
|
||
>
|
||
<Edit className="w-5 h-5"/>
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteCandidate(candidate)}
|
||
className="p-2 text-slate-300 hover:text-red-600 transition-colors"
|
||
title="Удалить"
|
||
>
|
||
<Trash2 className="w-5 h-5"/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Модальное окно создания/редактирования кандидата */}
|
||
{isFormModalOpen && (
|
||
<CandidateFormModal
|
||
candidate={editingCandidate}
|
||
vacancyId={selectedVacancyId}
|
||
vacancies={vacancies}
|
||
onClose={() => {
|
||
setIsFormModalOpen(false);
|
||
setEditingCandidate(null);
|
||
setSelectedVacancyId(null);
|
||
}}
|
||
onSave={handleSaveCandidate}
|
||
/>
|
||
)}
|
||
|
||
{/* Модальное окно истории событий кандидата */}
|
||
{selectedCandidateForEvents && (
|
||
<div
|
||
className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm animate-fade-in"
|
||
onClick={() => setSelectedCandidateForEvents(null)}
|
||
>
|
||
<div
|
||
className="bg-white rounded-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto 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">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-slate-800">История событий</h3>
|
||
<p className="text-sm text-slate-500 mt-1">{selectedCandidateForEvents.name}</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setSelectedCandidateForEvents(null)}
|
||
className="p-2 hover:bg-slate-100 rounded-full transition-colors"
|
||
>
|
||
<X className="w-5 h-5 text-slate-500"/>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<CandidateEventsTimeline
|
||
candidate={selectedCandidateForEvents}
|
||
onEventAdded={() => {
|
||
fetchCandidates();
|
||
}}
|
||
onEventUpdated={() => {
|
||
fetchCandidates();
|
||
}}
|
||
onCandidateUpdated={(updatedCandidate) => {
|
||
// Обновляем кандидата в списке
|
||
setCandidates(prev =>
|
||
prev.map(c => c.id === updatedCandidate.id ? updatedCandidate : c)
|
||
);
|
||
// Обновляем выбранного кандидата
|
||
setSelectedCandidateForEvents(updatedCandidate);
|
||
fetchCandidates();
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|