import React, { useState, useEffect } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; import { useTranslation } from '../../lib/LanguageContext'; import { CheckCircle2, Globe2, Briefcase, DollarSign, MessageSquare, UserCheck, Search, FileText, Download, Printer, Copy, FileSpreadsheet, FileJson, Filter, ChevronRight, MoreHorizontal, Users, Send } from 'lucide-react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; export default function SelectedCandidates({ selectedWorkers }) { const { t } = useTranslation(); const [workers, setWorkers] = useState((selectedWorkers || []).filter(w => w.status !== 'Searching')); const [searchTerm, setSearchTerm] = useState(''); useEffect(() => { setWorkers((selectedWorkers || []).filter(w => w.status !== 'Searching')); }, [selectedWorkers]); const changeStatus = (id, newStatus) => { // Optimistic UI state update setWorkers(workers.map(w => w.id === id ? { ...w, status: newStatus } : w)); // Persist change to database router.post(`/employer/candidates/${id}/status`, { status: newStatus }, { preserveScroll: true }); }; const stats = [ { label: t('total_candidates', 'Total Candidates'), count: workers.length, icon: Users, color: 'text-slate-600', bg: 'bg-slate-50' }, { label: t('reviewing', 'Reviewing'), count: workers.filter(w => w.status === 'Reviewing' || !w.status).length, icon: Search, color: 'text-amber-600', bg: 'bg-amber-50' }, { label: t('offer_sent', 'Offer Sent'), count: workers.filter(w => w.status === 'Offer Sent').length, icon: Send, color: 'text-blue-600', bg: 'bg-blue-50' }, { label: t('hired', 'Hired'), count: workers.filter(w => w.status === 'Hired').length, icon: CheckCircle2, color: 'text-emerald-600', bg: 'bg-emerald-50' }, { label: t('rejected', 'Rejected'), count: workers.filter(w => w.status === 'Rejected').length, icon: UserCheck, color: 'text-rose-600', bg: 'bg-rose-50' }, ]; return (
{/* Header Section */}

{t('candidates_pipeline', 'Candidates')}

{t('candidates_pipeline_desc', 'Manage your workforce recruitment pipeline')}

{/* Stats Grid */}
{stats.map((stat) => (
{stat.count}
{stat.label}
))}
{/* Table Section */}
setSearchTerm(e.target.value)} />
{['COPY', 'CSV', 'PDF', 'PRINT'].map(action => ( ))}
{workers.length > 0 ? ( workers.filter(w => w.name.toLowerCase().includes(searchTerm.toLowerCase())).map((worker) => ( )) ) : ( )}
{t('candidate_header', 'Candidate')} {t('selected_header', 'Selected')} {t('category_header', 'Category')} {t('salary_header', 'Salary')} {t('status_header', 'Status')} {t('actions_header', 'Actions')}
{worker.name.charAt(0)}
{worker.name}
{worker.nationality}
 Nov 14, 2026 {worker.category} {worker.salary} AED {t('change_status_label', 'Change Status')} changeStatus(worker.id, 'Reviewing')} className="text-xs font-bold text-slate-600 focus:text-amber-700 focus:bg-amber-50 rounded-lg cursor-pointer"> {t('reviewing', 'Reviewing')} changeStatus(worker.id, 'Offer Sent')} className="text-xs font-bold text-slate-600 focus:text-blue-700 focus:bg-blue-50 rounded-lg cursor-pointer"> {t('offer_sent', 'Offer Sent')} changeStatus(worker.id, 'Hired')} className="text-xs font-bold text-slate-600 focus:text-emerald-700 focus:bg-emerald-50 rounded-lg cursor-pointer"> {t('hired', 'Hired')} changeStatus(worker.id, 'Rejected')} className="text-xs font-bold text-rose-600 focus:text-rose-700 focus:bg-rose-50 rounded-lg cursor-pointer"> {t('rejected', 'Rejected')}
{t('no_candidates_found', 'No candidates found')}
{/* Pagination Footer */}
{t('showing_candidates', 'Showing {start} to {end} of {total} candidates') .replace('{start}', 1) .replace('{end}', workers.length) .replace('{total}', workers.length)}
); }