Applicants for {job?.title || 'Senior Mason Project'}

{job?.salary || '2800'} AED

Hiring Progress

{applicants.filter(a => a.status?.toLowerCase() === 'hired').length} / {job?.workers_needed || 5} Positions

{/* 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.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}

View Full Profile

{/* Actions Bar */}

Chat

)) ) : (

No applicants found for this job yet.

)}

{/* Modal Header */}

Update Application Status

{selectedApp?.name}

{/* Modal Body */}

{/* Status Selector */}

Select Stage

{/* Notes Textarea */}

Internal Employer Notes

setNotes(e.target.value)}
                                    placeholder="Add any internal feedback, interview times, or notes about this candidate..."
                                    rows={4}
                                    className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-xs font-medium text-slate-900 placeholder-slate-400 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all resize-none"
                                />
                            </div>

{/* Status History Audit Trail */}
                            {selectedApp?.status_history && selectedApp.status_history.length > 0 && (
                                <div className="space-y-2 pt-2">
                                    <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Status Audit Log</label>
                                    <div className="max-h-24 overflow-y-auto space-y-2 pr-1 border border-slate-100 rounded-xl p-2 bg-slate-50/40">
                                        {selectedApp.status_history.map((hist, index) => (
                                            <div key={index} className="text-[9px] text-slate-500 flex justify-between items-start">
                                                <div>
                                                    <span className="font-bold uppercase text-[#185FA5]">{hist.status}</span>
                                                    {hist.notes && <span className="ml-1 text-slate-400 italic">({hist.notes})</span>}
                                                </div>
                                                <span className="text-[8px] font-mono text-slate-300">{new Date(hist.timestamp).toLocaleDateString()}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>

{/* Modal Footer */}
                        <div className="p-6 bg-slate-50 border-t border-slate-100 flex items-center justify-end space-x-3">
                            <button 
                                onClick={() => { setShowModal(false); setSelectedApp(null); }}
                                className="px-5 py-2.5 bg-white border border-slate-200 hover:bg-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest text-slate-600 transition-colors"
                            >
                                Cancel
                            </button>
                            <button 
                                onClick={handleSaveStatus}
                                className="px-5 py-2.5 bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all shadow-md shadow-blue-500/10"
                            >
                                Save Status
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </EmployerLayout>
    );
}