import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '@/Layouts/EmployerLayout'; import { ArrowLeft, MessageSquare, CheckCircle2, XCircle, Globe2, Briefcase, DollarSign, MoreHorizontal, Search, Filter, ShieldCheck, Star, X, FileText } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { toast } from 'sonner'; export default function Applicants({ job, applicants: initialApplicants, isShortlistedOnly = false }) { const [searchTerm, setSearchTerm] = useState(''); const [applicants, setApplicants] = useState(initialApplicants || []); // Modal states const [selectedApp, setSelectedApp] = useState(null); const [newStatus, setNewStatus] = useState(''); const [notes, setNotes] = useState(''); const [showModal, setShowModal] = useState(false); const filteredApplicants = applicants.filter(a => a.name.toLowerCase().includes(searchTerm.toLowerCase()) || a.nationality.toLowerCase().includes(searchTerm.toLowerCase()) ); const openStatusModal = (app, statusPreset = '') => { setSelectedApp(app); setNewStatus(statusPreset || app.status || 'Applied'); setNotes(app.notes || ''); setShowModal(true); }; const handleSaveStatus = () => { if (!selectedApp) return; router.post(`/employer/candidates/${selectedApp.application_id}/status`, { status: newStatus, notes: notes }, { onSuccess: () => { toast.success('Applicant status updated successfully.'); setShowModal(false); setSelectedApp(null); }, onError: (errors) => { toast.error('Failed to update status: ' + (errors.error || errors.status || 'Error occurred')); } }); }; const pageTitle = isShortlistedOnly ? 'Shortlisted Workers' : (job ? 'Job Applicants' : 'All Applicants'); const headerTitle = isShortlistedOnly ? 'Shortlisted Workers' : (job ? `Applicants for ${job.title}` : 'All Job Applicants'); return (
{/* Job Header Info */}
{job ? 'Back to My Jobs' : 'Back to Dashboard'}

{isShortlistedOnly ? ( Shortlisted Workers ) : ( Applicants for {job?.title || 'All Jobs'} )}

{job && (
{job.salary} AED
)}
{isShortlistedOnly ? 'Total Shortlisted' : (job ? 'Hiring Progress' : 'Total Applicants')}
{isShortlistedOnly ? ( {applicants.length} Workers ) : job ? ( {applicants.filter(a => a.status?.toLowerCase() === 'hired').length} / {job.workers_needed} Positions ) : ( {applicants.length} Applicants )}
{/* Filters */}
setSearchTerm(e.target.value)} />
{/* Applicants Grid */}
{filteredApplicants.length > 0 ? ( filteredApplicants.map((applicant) => (
{/* Applicant Header */}
{applicant.name.charAt(0)}

{applicant.name} {applicant.is_saved && ( )}

{applicant.nationality}
{applicant.job_title && (
Applied: {applicant.job_title}
)}
{applicant.match_score}% Match
{/* Stats Grid */}
Experience
{applicant.experience}
Expected Pay
{applicant.salary} AED
{/* Internal Notes Preview */} {applicant.notes && (
{applicant.notes}
)} {/* Current Status Badge */}
openStatusModal(applicant)}> {applicant.status?.toLowerCase() === 'hire_requested' ? 'Pending Confirmation' : applicant.status}
View Full Profile
{/* Actions Bar */}
Chat
)) ) : (

No applicants found for this job yet.

)}
{/* Status Update Modal */} {showModal && (
{/* Modal Header */}

Update Application Status

{selectedApp?.name}

{/* Modal Body */}
{selectedApp?.status?.toLowerCase() === 'hire_requested' && (
A hiring offer is pending. Waiting for worker confirmation.
)} {/* Status Selector */}
{/* Notes Textarea */}