136 lines
7.2 KiB
JavaScript
136 lines
7.2 KiB
JavaScript
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 (
|
|
<EmployerMobileLayout>
|
|
<Head title="Candidates" />
|
|
|
|
<div className="p-6 space-y-8">
|
|
{/* Page Title */}
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-bold tracking-tight">Candidates</h1>
|
|
<p className="text-sm text-slate-500 font-medium">Manage your workforce recruitment pipeline</p>
|
|
</div>
|
|
|
|
{/* Stats Grid 2x2 */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
{stats.map((stat, i) => (
|
|
<div key={i} className="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm space-y-3">
|
|
<div className={`w-10 h-10 rounded-xl flex items-center justify-center ${stat.color}`}>
|
|
<stat.icon className="w-5 h-5" />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<div className="text-xl font-bold">{stat.value}</div>
|
|
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest leading-none">{stat.label}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Search & Filter */}
|
|
<div className="flex items-center space-x-3">
|
|
<div className="relative flex-1 group">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-[#141B34] transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search candidates..."
|
|
value={searchQuery}
|
|
onChange={(e) => 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"
|
|
/>
|
|
</div>
|
|
<button className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-slate-400 border border-slate-200 active:scale-95 transition-all">
|
|
<Filter className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Candidate List */}
|
|
<div className="space-y-4 pb-10">
|
|
{candidates.map((candidate) => (
|
|
<div key={candidate.id} className="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm space-y-5">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-14 h-14 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center text-[#141B34] font-bold text-xl">
|
|
{candidate.name.charAt(0)}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<h4 className="font-bold text-slate-900 text-base">{candidate.name}</h4>
|
|
<div className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">{candidate.country}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex space-x-2">
|
|
<button className="w-9 h-9 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 border border-slate-100">
|
|
<MessageSquare className="w-4 h-4" />
|
|
</button>
|
|
<button className="w-9 h-9 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 border border-slate-100">
|
|
<MoreHorizontal className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-2">
|
|
<span className="px-3 py-1.5 bg-slate-50 text-slate-600 text-[10px] font-bold uppercase tracking-widest rounded-lg border border-slate-100">
|
|
{candidate.role}
|
|
</span>
|
|
<div className="text-xs font-bold text-slate-900 ml-1">{candidate.salary}</div>
|
|
</div>
|
|
|
|
<div className={`flex items-center space-x-2 px-3 py-1.5 rounded-full border text-[10px] font-bold uppercase tracking-widest ${getStatusStyles(candidate.status)}`}>
|
|
<div className={`w-1.5 h-1.5 rounded-full ${getStatusDot(candidate.status)}`} />
|
|
<span>{candidate.status}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|