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
});
};
return (
{t('candidates_pipeline_desc', 'Manage your workforce recruitment pipeline')}
| {t('candidate_header', 'Candidate')} | {t('selected_header', 'Selected')} | {t('category_header', 'Category')} | {t('salary_header', 'Salary')} | {t('status_header', 'Status')} | {t('actions_header', 'Actions')} | |
|---|---|---|---|---|---|---|
|
{worker.name.charAt(0)}
{worker.name}
{worker.nationality}
|
Nov 14, 2026 | {worker.category} | {worker.salary} AED | {t('hired', 'Hired').toUpperCase()} |
|
|
|
{t('no_candidates_found', 'No candidates found')}
|
||||||