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 (

You have {workers.length} candidates saved for review

Browse more workers
{workers.length > 0 ? (
{workers.map((worker) => (
{/* Header Banner */}
{worker.name.charAt(0)}
{worker.name} {worker.verified && }
{worker.nationality}
{/* Body */}
{worker.category}
{worker.salary} AED / mo
Exp: {worker.experience}
Avail: {worker.availability}
{worker.skills?.map(s => ( {s} ))}
View Profile Message
))}
) : (
Your shortlist is empty

Explore candidate profiles and click the bookmark icon to save them for later comparison.

Find Workers Now
)}
); }