import React, { useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import EmployerMobileLayout from './Layouts/EmployerMobileLayout'; import { Users, Clock, CheckCircle2, XCircle, Search, Filter, MessageSquare, MoreHorizontal } from 'lucide-react'; export default function EmployerCandidates() { const [searchQuery, setSearchQuery] = useState(''); const stats = [ { label: 'Total Candidates', value: 5, icon: Users, color: 'bg-blue-50 text-blue-600' }, { label: 'Reviewing', value: 3, icon: Clock, color: 'bg-orange-50 text-orange-500' }, { label: 'Hired', value: 1, icon: CheckCircle2, color: 'bg-emerald-50 text-emerald-600' }, { label: 'Rejected', value: 1, icon: XCircle, color: 'bg-rose-50 text-rose-500' }, ]; const candidates = [ { id: 1, name: 'Sarah Connor', country: 'Philippines', role: 'Site Supervisor', salary: '4,500 AED', status: 'Reviewing' }, { id: 2, name: 'Maria Garcia', country: 'Kenya', role: 'Housemaid', salary: '2,500 AED', status: 'Hired' }, { id: 3, name: 'Elena Gilbert', country: 'Indonesia', role: 'Nanny', salary: '3,000 AED', status: 'Rejected' }, ]; const getStatusStyles = (status) => { switch (status) { case 'Reviewing': return 'bg-orange-50 text-orange-600 border-orange-100'; case 'Hired': return 'bg-emerald-50 text-emerald-600 border-emerald-100'; case 'Rejected': return 'bg-rose-50 text-rose-600 border-rose-100'; default: return 'bg-slate-50 text-slate-600 border-slate-100'; } }; const getStatusDot = (status) => { switch (status) { case 'Reviewing': return 'bg-orange-500'; case 'Hired': return 'bg-emerald-500'; case 'Rejected': return 'bg-rose-500'; default: return 'bg-slate-500'; } }; return (

{/* Page Title */}

Candidates

Manage your workforce recruitment pipeline

{/* Stats Grid 2x2 */}

{stats.map((stat, i) => (

{stat.value}

{stat.label}

))}

{/* Search & Filter */}

setSearchQuery(e.target.value)} className="w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl text-sm focus:ring-4 focus:ring-slate-100 focus:border-slate-300 outline-none transition-all" />

{/* Candidate List */}

{candidates.map((candidate) => (

{candidate.name.charAt(0)}

{candidate.name}

{candidate.country}

{candidate.role}

{candidate.salary}

{candidate.status}

))}

); }