276 lines
18 KiB
JavaScript
276 lines
18 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import { useTranslation } from '../../lib/LanguageContext';
|
|
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 { t } = useTranslation();
|
|
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: t('total_candidates', 'Total Candidates'),
|
|
count: workers.length,
|
|
icon: Users,
|
|
color: 'text-slate-600',
|
|
bg: 'bg-slate-50'
|
|
},
|
|
{
|
|
label: t('reviewing', 'Reviewing'),
|
|
count: workers.filter(w => w.status === 'Reviewing' || !w.status).length,
|
|
icon: Search,
|
|
color: 'text-amber-600',
|
|
bg: 'bg-amber-50'
|
|
},
|
|
{
|
|
label: t('offer_sent', 'Offer Sent'),
|
|
count: workers.filter(w => w.status === 'Offer Sent').length,
|
|
icon: Send,
|
|
color: 'text-blue-600',
|
|
bg: 'bg-blue-50'
|
|
},
|
|
{
|
|
label: t('hired', 'Hired'),
|
|
count: workers.filter(w => w.status === 'Hired').length,
|
|
icon: CheckCircle2,
|
|
color: 'text-emerald-600',
|
|
bg: 'bg-emerald-50'
|
|
},
|
|
{
|
|
label: t('rejected', 'Rejected'),
|
|
count: workers.filter(w => w.status === 'Rejected').length,
|
|
icon: UserCheck,
|
|
color: 'text-rose-600',
|
|
bg: 'bg-rose-50'
|
|
},
|
|
];
|
|
|
|
return (
|
|
<EmployerLayout title={t('candidates_pipeline', 'Candidates')}>
|
|
<Head title={`${t('candidates_pipeline', 'Candidates')} - ${t('employer_portal', 'Employer Portal')}`} />
|
|
|
|
<div className="space-y-8 select-none">
|
|
{/* Header Section */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-black text-slate-900 tracking-tight">{t('candidates_pipeline', 'Candidates')}</h1>
|
|
<p className="text-xs font-medium text-slate-500 mt-1">{t('candidates_pipeline_desc', 'Manage your workforce recruitment pipeline')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
{stats.map((stat) => (
|
|
<div key={stat.label} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm flex items-center space-x-4">
|
|
<div className={`p-3 rounded-xl ${stat.bg}`}>
|
|
<stat.icon className={`w-6 h-6 ${stat.color}`} />
|
|
</div>
|
|
<div>
|
|
<div className="text-2xl font-black text-slate-900 leading-none">{stat.count}</div>
|
|
<div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">{stat.label}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Table Section */}
|
|
<div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
|
|
<div className="relative w-72">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder={t('search_by_name', 'Search by name...')}
|
|
className="w-full pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-blue-100 focus:border-[#185FA5] transition-all outline-none"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center bg-white border border-slate-200 rounded-xl p-1">
|
|
{['COPY', 'CSV', 'PDF', 'PRINT'].map(action => (
|
|
<button key={action} className="px-3 py-1.5 text-[10px] font-bold text-slate-500 hover:text-[#185FA5] hover:bg-blue-50 rounded-lg transition-all">
|
|
{action}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button className="p-2.5 bg-white border border-slate-200 text-slate-400 hover:text-[#185FA5] rounded-xl transition-all shadow-sm">
|
|
<Filter className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead>
|
|
<tr className="border-b border-slate-100">
|
|
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('candidate_header', 'Candidate')}</th>
|
|
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('selected_header', 'Selected')}</th>
|
|
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('category_header', 'Category')}</th>
|
|
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('salary_header', 'Salary')}</th>
|
|
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('status_header', 'Status')}</th>
|
|
<th className="px-6 py-4 text-[10px] font-black text-slate-400 uppercase tracking-widest text-right">{t('actions_header', 'Actions')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-50">
|
|
{workers.length > 0 ? (
|
|
workers.filter(w => w.name.toLowerCase().includes(searchTerm.toLowerCase())).map((worker) => (
|
|
<tr key={worker.id} className="group hover:bg-slate-50/50 transition-colors">
|
|
<td className="px-6 py-5">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 rounded-full bg-blue-100 text-[#185FA5] flex items-center justify-center font-bold text-sm">
|
|
{worker.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-bold text-slate-900">{worker.name}</div>
|
|
<div className="text-[10px] text-slate-400 font-medium">{worker.nationality}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-5 text-[11px] font-bold text-slate-500">Nov 14, 2026</td>
|
|
<td className="px-6 py-5">
|
|
<span className="px-2 py-1 bg-slate-100 text-slate-600 text-[10px] font-bold rounded-lg">{worker.category}</span>
|
|
</td>
|
|
<td className="px-6 py-5">
|
|
<span className="text-sm font-bold text-slate-800">{worker.salary} <span className="text-[10px] text-slate-400">AED</span></span>
|
|
</td>
|
|
<td className="px-6 py-5">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className={`inline-flex items-center px-2.5 py-1 rounded-full text-[10px] font-black tracking-tight hover:ring-2 hover:ring-offset-1 transition-all ${
|
|
worker.status === 'Hired' ? 'bg-emerald-50 text-emerald-700 hover:ring-emerald-200' :
|
|
worker.status === 'Rejected' ? 'bg-rose-50 text-rose-700 hover:ring-rose-200' :
|
|
worker.status === 'Offer Sent' ? 'bg-blue-50 text-blue-700 hover:ring-blue-200' :
|
|
'bg-amber-50 text-amber-700 hover:ring-amber-200'
|
|
}`}>
|
|
<span className={`w-1 h-1 rounded-full mr-1.5 ${
|
|
worker.status === 'Hired' ? 'bg-emerald-500' :
|
|
worker.status === 'Rejected' ? 'bg-rose-500' :
|
|
worker.status === 'Offer Sent' ? 'bg-blue-500' :
|
|
'bg-amber-500'
|
|
}`} />
|
|
{worker.status === 'Hired' ? t('hired', 'Hired').toUpperCase() :
|
|
worker.status === 'Rejected' ? t('rejected', 'Rejected').toUpperCase() :
|
|
worker.status === 'Offer Sent' ? t('offer_sent', 'Offer Sent').toUpperCase() :
|
|
t('reviewing', 'Reviewing').toUpperCase()}
|
|
<ChevronRight className="w-3 h-3 ml-1 rotate-90 opacity-50" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-44 p-2 rounded-xl">
|
|
<DropdownMenuLabel className="text-[10px] font-black text-slate-400 uppercase tracking-widest px-2 py-1.5">{t('change_status_label', 'Change Status')}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => changeStatus(worker.id, 'Reviewing')} className="text-xs font-bold text-slate-600 focus:text-amber-700 focus:bg-amber-50 rounded-lg cursor-pointer">
|
|
{t('reviewing', 'Reviewing')}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => 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">
|
|
{t('offer_sent', 'Offer Sent')}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={() => changeStatus(worker.id, 'Hired')} className="text-xs font-bold text-slate-600 focus:text-emerald-700 focus:bg-emerald-50 rounded-lg cursor-pointer">
|
|
{t('hired', 'Hired')}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => changeStatus(worker.id, 'Rejected')} className="text-xs font-bold text-rose-600 focus:text-rose-700 focus:bg-rose-50 rounded-lg cursor-pointer">
|
|
{t('rejected', 'Rejected')}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</td>
|
|
<td className="px-6 py-5 text-right">
|
|
<div className="flex items-center justify-end space-x-1">
|
|
<Link
|
|
href={`/employer/messages/start/${worker.worker_id}`}
|
|
className="p-2 bg-blue-50 text-[#185FA5] hover:bg-[#185FA5] hover:text-white rounded-lg transition-all"
|
|
>
|
|
<MessageSquare className="w-3.5 h-3.5" />
|
|
</Link>
|
|
<Link
|
|
href={`/employer/workers/${worker.worker_id}`}
|
|
className="p-2 bg-slate-50 text-slate-400 hover:text-slate-900 rounded-lg transition-all"
|
|
>
|
|
<MoreHorizontal className="w-3.5 h-3.5" />
|
|
</Link>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan="7" className="p-20 text-center">
|
|
<div className="space-y-3">
|
|
<UserCheck className="w-12 h-12 text-slate-200 mx-auto" />
|
|
<div className="text-base font-bold text-slate-400">{t('no_candidates_found', 'No candidates found')}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Pagination Footer */}
|
|
<div className="px-6 py-4 bg-slate-50/50 border-t border-slate-100 flex items-center justify-between">
|
|
<div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">
|
|
{t('showing_candidates', 'Showing {start} to {end} of {total} candidates')
|
|
.replace('{start}', 1)
|
|
.replace('{end}', workers.length)
|
|
.replace('{total}', workers.length)}
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button className="px-3 py-1.5 bg-white border border-slate-200 text-slate-400 rounded-lg text-[10px] font-black cursor-not-allowed">PREV</button>
|
|
<div className="flex items-center space-x-1">
|
|
<button className="w-8 h-8 flex items-center justify-center bg-[#185FA5] text-white rounded-lg text-[10px] font-black">1</button>
|
|
<button className="w-8 h-8 flex items-center justify-center bg-white border border-slate-200 text-slate-600 hover:border-[#185FA5] rounded-lg text-[10px] font-black transition-colors">2</button>
|
|
</div>
|
|
<button className="px-3 py-1.5 bg-white border border-slate-200 text-[#185FA5] hover:bg-blue-50 rounded-lg text-[10px] font-black transition-colors">NEXT</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|