import React, { useState, useEffect } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '../../Layouts/EmployerLayout'; 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 [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: 'Total Candidates', count: workers.length, icon: Users, color: 'text-slate-600', bg: 'bg-slate-50' }, { label: 'Reviewing', count: workers.filter(w => w.status === 'Reviewing' || !w.status).length, icon: Search, color: 'text-amber-600', bg: 'bg-amber-50' }, { label: 'Offer Sent', count: workers.filter(w => w.status === 'Offer Sent').length, icon: Send, color: 'text-blue-600', bg: 'bg-blue-50' }, { label: 'Hired', count: workers.filter(w => w.status === 'Hired').length, icon: CheckCircle2, color: 'text-emerald-600', bg: 'bg-emerald-50' }, { label: 'Rejected', count: workers.filter(w => w.status === 'Rejected').length, icon: UserCheck, color: 'text-rose-600', bg: 'bg-rose-50' }, ]; return (

{/* Header Section */}

Candidates

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) => ( )) ) : ( )}

Candidate	Selected	Category	Salary	Status	Actions
{worker.name.charAt(0)} {worker.name} {worker.nationality}	Nov 14, 2026	{worker.category}	{worker.salary} AED	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"> 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"> 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"> 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"> Rejected
No candidates found

{/* Pagination Footer */}

Showing 1 to {workers.length} of {workers.length} candidates

); }