147 lines
8.3 KiB
JavaScript
147 lines
8.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import {
|
|
Bookmark,
|
|
CheckCircle2,
|
|
Globe2,
|
|
Briefcase,
|
|
DollarSign,
|
|
MessageSquare,
|
|
Trash2,
|
|
SlidersHorizontal
|
|
} from 'lucide-react';
|
|
|
|
export default function Shortlist({ shortlistedWorkers }) {
|
|
const [workers, setWorkers] = useState(shortlistedWorkers || []);
|
|
|
|
const removeWorker = (id) => {
|
|
// Optimistic UI state update
|
|
setWorkers(workers.filter(w => w.id !== id));
|
|
|
|
// Persist change to database
|
|
router.post(`/employer/shortlist/${id}/remove`, {}, {
|
|
preserveScroll: true
|
|
});
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title="My Shortlist">
|
|
<Head title="Shortlist - Employer Portal" />
|
|
|
|
<div className="space-y-6 select-none">
|
|
<div className="flex items-center justify-between">
|
|
<p className="text-xs text-slate-500 font-medium">
|
|
You have <span className="text-slate-900 font-bold">{workers.length}</span> candidates saved for review
|
|
</p>
|
|
<Link
|
|
href="/employer/workers"
|
|
className="text-xs font-bold text-[#185FA5] hover:underline"
|
|
>
|
|
Browse more workers
|
|
</Link>
|
|
</div>
|
|
|
|
{workers.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{workers.map((worker) => (
|
|
<div key={worker.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col overflow-hidden">
|
|
{/* Header Banner */}
|
|
<div className="bg-slate-50 p-6 border-b border-slate-100 flex items-start justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-14 h-14 rounded-full bg-blue-100 text-[#185FA5] flex items-center justify-center font-bold text-xl border border-blue-200 shadow-inner">
|
|
{worker.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<div className="font-bold text-base text-slate-900 flex items-center space-x-1.5">
|
|
<span>{worker.name}</span>
|
|
{worker.verified && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
|
|
</div>
|
|
<div className="flex items-center space-x-1.5 text-xs text-slate-500 mt-0.5">
|
|
<Globe2 className="w-3.5 h-3.5 text-slate-400" />
|
|
<span>{worker.nationality}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => removeWorker(worker.id)}
|
|
className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-colors"
|
|
title="Remove from shortlist"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="p-6 flex-1 flex flex-col justify-between space-y-4">
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="px-2.5 py-1 bg-blue-50 text-[#185FA5] font-bold rounded-lg border border-blue-100">
|
|
{worker.category}
|
|
</span>
|
|
<div className="flex items-center space-x-1 font-bold text-slate-800">
|
|
<DollarSign className="w-4 h-4 text-emerald-600" />
|
|
<span>{worker.salary} AED / mo</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 p-3 bg-slate-50 rounded-xl text-[11px] text-slate-600 font-medium">
|
|
<div className="flex items-center space-x-1.5">
|
|
<Briefcase className="w-3.5 h-3.5 text-slate-400" />
|
|
<span>Exp: {worker.experience}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1.5">
|
|
<span className="font-bold text-[#185FA5] truncate">Avail: {worker.availability}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{worker.skills?.map(s => (
|
|
<span key={s} className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-md font-semibold">
|
|
{s}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3 pt-2">
|
|
<Link
|
|
href={`/employer/workers/${worker.id}`}
|
|
className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl h-10 font-bold text-xs flex items-center justify-center transition-colors"
|
|
>
|
|
View Profile
|
|
</Link>
|
|
<Link
|
|
href={`/employer/messages/${worker.id}`}
|
|
className="flex-1 bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl h-10 font-bold text-xs flex items-center justify-center space-x-1.5 transition-colors shadow-sm"
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
<span>Message</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16 bg-white rounded-2xl border border-slate-200 shadow-sm space-y-3">
|
|
<SlidersHorizontal className="w-12 h-12 text-slate-300 mx-auto" />
|
|
<div className="text-base font-bold text-slate-800">Your shortlist is empty</div>
|
|
<p className="text-xs text-slate-500 max-w-sm mx-auto">
|
|
Explore candidate profiles and click the bookmark icon to save them for later comparison.
|
|
</p>
|
|
<Link
|
|
href="/employer/workers"
|
|
className="inline-block mt-2 bg-[#185FA5] text-white px-6 py-2.5 rounded-xl text-xs font-bold shadow-sm hover:bg-[#144f8a] transition-colors"
|
|
>
|
|
Find Workers Now
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|