import React, { useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Users, Search, Filter, MoreHorizontal, CheckCircle2, XCircle, UserCheck, UserX, Mail, Globe, Briefcase, Download, Phone, FileText } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { Badge } from '@/components/ui/badge'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; export default function WorkerManagement({ workers }) { const [searchTerm, setSearchTerm] = useState(''); const [statusFilter, setStatusFilter] = useState('all'); const handleToggleStatus = (id, currentStatus) => { const newStatus = currentStatus === 'active' ? 'inactive' : 'active'; router.post(`/admin/workers/${id}/toggle-status`, { status: newStatus }); }; const filteredWorkers = workers.filter(worker => { const matchesSearch = worker.name.toLowerCase().includes(searchTerm.toLowerCase()) || worker.email.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === 'all' || worker.status === statusFilter; return matchesSearch && matchesStatus; }); return (
{/* Header Section */}

Worker Management

View and manage worker availability and account status.

View Verifications
{/* Filters & Search */}
setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-transparent rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] transition-all" />
Status:
{['all', 'active', 'inactive'].map((f) => ( ))}
{/* Workers Table */}
Worker Information Contact Info Category & Exp Documents Status Actions {filteredWorkers.length > 0 ? ( filteredWorkers.map((worker) => (
{worker.name.charAt(0)}
{worker.name}
{worker.email}
{worker.phone || '+971 50 000 0000'}
{worker.category}
{worker.nationality} • {worker.experience}
Verified
{worker.status === 'active' ? ( ) : ( )} {worker.status} Account Actions handleToggleStatus(worker.id, worker.status)} className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs ${ worker.status === 'active' ? 'text-red-600 hover:bg-red-50' : 'text-emerald-600 hover:bg-emerald-50' }`} > {worker.status === 'active' ? ( <> Deactivate Account ) : ( <> Activate Account )} Send Message View Full Profile )) ) : (
No workers found matching your criteria.
 )}
); }