171 lines
11 KiB
JavaScript
171 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerLayout from '@/Layouts/EmployerLayout';
|
|
import {
|
|
ArrowLeft,
|
|
MessageSquare,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Globe2,
|
|
Briefcase,
|
|
DollarSign,
|
|
MoreHorizontal,
|
|
Search,
|
|
Filter,
|
|
ShieldCheck,
|
|
Star
|
|
} from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
export default function Applicants({ job, applicants: initialApplicants }) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [applicants, setApplicants] = useState(initialApplicants || [
|
|
{ id: 101, name: 'Anjali Sharma', nationality: 'Indian', category: 'Nanny', salary: 2500, experience: '5 Years', status: 'Reviewing', match_score: 95 },
|
|
{ id: 102, name: 'Siti Rahma', nationality: 'Indonesian', category: 'Housemaid', salary: 1800, experience: '3 Years', status: 'Hired', match_score: 88 },
|
|
{ id: 103, name: 'Maricel Cruz', nationality: 'Filipino', category: 'Domestic Helper', salary: 2200, experience: '7 Years', status: 'Rejected', match_score: 72 },
|
|
{ id: 104, name: 'Bebeth Santos', nationality: 'Filipino', category: 'Cook', salary: 3000, experience: '10 Years', status: 'Reviewing', match_score: 98 },
|
|
]);
|
|
|
|
const filteredApplicants = applicants.filter(a =>
|
|
a.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
a.nationality.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
return (
|
|
<EmployerLayout title="Job Applicants">
|
|
<Head title={`Applicants for ${job?.title || 'Job'}`} />
|
|
|
|
<div className="space-y-8 select-none pb-12">
|
|
{/* Job Header Info */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div className="space-y-2">
|
|
<Link
|
|
href="/employer/jobs"
|
|
className="inline-flex items-center space-x-2 text-[10px] font-black text-[#185FA5] uppercase tracking-widest hover:translate-x-[-4px] transition-transform"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5" />
|
|
<span>Back to My Jobs</span>
|
|
</Link>
|
|
<h1 className="text-2xl font-black text-slate-900 tracking-tight">
|
|
Applicants for <span className="text-[#185FA5]">{job?.title || 'Senior Mason Project'}</span>
|
|
</h1>
|
|
<div className="flex items-center space-x-3 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
<span className="flex items-center"><Briefcase className="w-3 h-3 mr-1" /> {job?.category || 'Mason'}</span>
|
|
<span className="w-1 h-1 bg-slate-200 rounded-full" />
|
|
<span className="flex items-center"><DollarSign className="w-3 h-3 mr-1" /> {job?.salary || '2800'} AED</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white px-6 py-4 rounded-2xl border border-slate-200 shadow-sm flex items-center space-x-4 flex-shrink-0">
|
|
<div className="text-right">
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Hiring Progress</div>
|
|
<div className="text-lg font-black text-slate-900 tracking-tight">{applicants.filter(a => a.status === 'Hired').length} / 5 <span className="text-slate-300 text-sm">Positions</span></div>
|
|
</div>
|
|
<div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
|
|
<Star className="w-6 h-6 text-[#185FA5]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-col sm:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Find applicant by name or nationality..."
|
|
className="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-xs font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
<button className="flex items-center justify-center space-x-2 px-6 py-2.5 bg-white border border-slate-200 rounded-xl text-[10px] font-black text-slate-600 hover:bg-slate-50 transition-colors uppercase tracking-widest">
|
|
<Filter className="w-3.5 h-3.5" />
|
|
<span>Filter Matches</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Applicants List */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredApplicants.length > 0 ? (
|
|
filteredApplicants.map((applicant) => (
|
|
<div key={applicant.id} className="bg-white rounded-[24px] border border-slate-200 shadow-sm overflow-hidden flex flex-col group hover:shadow-md transition-all">
|
|
<div className="p-6 space-y-5">
|
|
{/* Applicant Header */}
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-12 h-12 rounded-full bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold text-lg border-2 border-white shadow-sm ring-1 ring-slate-100">
|
|
{applicant.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-slate-900 group-hover:text-[#185FA5] transition-colors line-clamp-1">{applicant.name}</h3>
|
|
<div className="flex items-center space-x-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-0.5">
|
|
<Globe2 className="w-3 h-3" />
|
|
<span>{applicant.nationality}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-end space-y-1">
|
|
<div className="flex items-center space-x-1 text-emerald-600 font-black text-[10px] bg-emerald-50 px-2 py-0.5 rounded-full">
|
|
<ShieldCheck className="w-3 h-3" />
|
|
<span>{applicant.match_score}% Match</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-2 gap-3 p-4 bg-slate-50/50 rounded-2xl border border-slate-50">
|
|
<div className="space-y-1">
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Experience</div>
|
|
<div className="text-[11px] font-bold text-slate-700">{applicant.experience}</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-widest">Expected Pay</div>
|
|
<div className="text-[11px] font-bold text-slate-700">{applicant.salary} AED</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Current Status Badge */}
|
|
<div className="flex items-center justify-between">
|
|
<span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${
|
|
applicant.status === 'Hired' ? 'bg-emerald-100 text-emerald-700' :
|
|
applicant.status === 'Rejected' ? 'bg-rose-100 text-rose-700' :
|
|
'bg-amber-100 text-amber-700'
|
|
}`}>
|
|
{applicant.status}
|
|
</span>
|
|
<div className="flex items-center space-x-1 text-[10px] font-bold text-slate-400">
|
|
<Link href={`/employer/workers/${applicant.id}`} className="hover:text-[#185FA5] flex items-center underline underline-offset-2">
|
|
View Full Profile
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions Bar */}
|
|
<div className="p-4 bg-slate-50 border-t border-slate-100 flex items-center space-x-2">
|
|
<button className="flex-1 bg-white border border-slate-200 text-[#185FA5] hover:bg-blue-50 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center space-x-2">
|
|
<MessageSquare className="w-3.5 h-3.5" />
|
|
<span>Chat</span>
|
|
</button>
|
|
<button className="p-2.5 bg-[#185FA5] text-white hover:bg-[#144f8a] rounded-xl transition-all shadow-sm shadow-blue-500/10">
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
</button>
|
|
<button className="p-2.5 bg-white border border-slate-200 text-rose-500 hover:bg-rose-50 rounded-xl transition-all">
|
|
<XCircle className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="col-span-full py-20 text-center">
|
|
<Users className="w-12 h-12 text-slate-200 mx-auto mb-3" />
|
|
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest">No applicants found for this job yet.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|