import React from 'react'; import { Head } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Search, Filter, Download, Briefcase, Mail, MapPin, Calendar, CheckCircle, Clock, XCircle, ExternalLink, MoreVertical, BadgeDollarSign } from 'lucide-react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, } from "@/components/ui/dialog"; export default function EmployersIndex({ employers: initialEmployers }) { const [searchTerm, setSearchTerm] = React.useState(''); const [statusFilter, setStatusFilter] = React.useState('All'); const [locationFilter, setLocationFilter] = React.useState('All'); const [selectedEmployer, setSelectedEmployer] = React.useState(null); const [isDialogOpen, setIsDialogOpen] = React.useState(false); const [employers, setEmployers] = React.useState(initialEmployers || [ { id: 1, name: 'Al Barari Real Estate', email: 'hr@albarari.ae', plan: 'Premium Pass', status: 'Active', location: 'Dubai', join_date: '2026-04-10', phone: '+971 50 123 4567', contact_person: 'Ahmed Malik', website: 'www.albarari.ae', company_id: 'TRD-991283' }, { id: 2, name: 'Marina Cleaners', email: 'contact@marinaclean.com', plan: 'Basic Search', status: 'Active', location: 'Abu Dhabi', join_date: '2026-04-12', phone: '+971 50 234 5678', contact_person: 'Sarah Johnson', website: 'marinaclean.com', company_id: 'TRD-102938' }, { id: 3, name: 'Golden Hospitality', email: 'hiring@golden.hotel', plan: 'None', status: 'Pending', location: 'Sharjah', join_date: '2026-05-01', phone: '+971 50 345 6789', contact_person: 'John Doe', website: 'golden.hotel', company_id: 'TRD-882731' }, { id: 4, name: 'Emirates Logistics', email: 'jobs@emirateslogistics.com', plan: 'Premium Pass', status: 'Active', location: 'Dubai', join_date: '2026-03-20', phone: '+971 50 456 7890', contact_person: 'Mike Ross', website: 'emirateslogistics.com', company_id: 'TRD-771625' }, { id: 5, name: 'Dubai Mall Services', email: 'support@dubaimall.ae', plan: 'VIP Concierge', status: 'Suspended', location: 'Dubai', join_date: '2026-02-15', phone: '+971 50 567 8901', contact_person: 'Jane Foster', website: 'dubaimall.ae', company_id: 'TRD-660514' }, ]); const filteredEmployers = React.useMemo(() => { return employers.filter(emp => { const matchesSearch = emp.name.toLowerCase().includes(searchTerm.toLowerCase()) || emp.email.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === 'All' || emp.status === statusFilter; const matchesLocation = locationFilter === 'All' || emp.location === locationFilter; return matchesSearch && matchesStatus && matchesLocation; }); }, [employers, searchTerm, statusFilter, locationFilter]); const handleApprove = (id) => { setEmployers(employers.map(emp => emp.id === id ? { ...emp, status: 'Active' } : emp )); }; const handleAction = (emp) => { setSelectedEmployer(emp); setIsDialogOpen(true); }; return (

{/* Search and Filters */}

setSearchTerm(e.target.value)} />

{/* Employers Table */}

Employer Info Location Plan Reg. Date Status Action {filteredEmployers.map((emp) => (

{emp.name}

{emp.email}

{emp.location}

{emp.plan} {emp.join_date}

{emp.status === 'Active' && } {emp.status === 'Pending' && } {emp.status === 'Suspended' && } {emp.status}

Actions handleAction(emp)}>

View Details

{emp.status === 'Pending' && ( handleApprove(emp.id)}>

Approve Employer

)}

Suspend Account

))}

); }