import React, { useState, useMemo } from 'react'; import { Head, Link } from '@inertiajs/react'; import EmployerLayout from '../../../Layouts/EmployerLayout'; import { Search, SlidersHorizontal, CheckCircle2, MapPin, Briefcase, DollarSign, Calendar, Bookmark, RotateCcw, HeartHandshake, Globe2, Sparkles, Filter } from 'lucide-react'; export default function Index({ initialWorkers, filtersMetadata }) { const [searchQuery, setSearchQuery] = useState(''); const [selectedCategory, setSelectedCategory] = useState('All Categories'); const [selectedNationality, setSelectedNationality] = useState('All Nationalities'); const [selectedAvailability, setSelectedAvailability] = useState('All Availabilities'); const [selectedExperience, setSelectedExperience] = useState('All Experience'); const [selectedReligion, setSelectedReligion] = useState('All Religions'); const [maxSalary, setMaxSalary] = useState(3000); const [shortlistedIds, setShortlistedIds] = useState([101, 103]); const toggleShortlist = (id) => { if (shortlistedIds.includes(id)) { setShortlistedIds(shortlistedIds.filter(i => i !== id)); } else { setShortlistedIds([...shortlistedIds, id]); } }; const resetFilters = () => { setSearchQuery(''); setSelectedCategory('All Categories'); setSelectedNationality('All Nationalities'); setSelectedAvailability('All Availabilities'); setSelectedExperience('All Experience'); setSelectedReligion('All Religions'); setMaxSalary(3000); }; const filteredWorkers = useMemo(() => { return initialWorkers.filter(worker => { // Search Query if (searchQuery.trim() !== '') { const query = searchQuery.toLowerCase(); const matchName = worker.name.toLowerCase().includes(query); const matchBio = worker.bio.toLowerCase().includes(query); const matchSkills = worker.skills.some(s => s.toLowerCase().includes(query)); if (!matchName && !matchBio && !matchSkills) return false; } // Category if (selectedCategory !== 'All Categories' && worker.category !== selectedCategory) { return false; } // Nationality if (selectedNationality !== 'All Nationalities' && worker.nationality !== selectedNationality) { return false; } // Availability if (selectedAvailability !== 'All Availabilities' && worker.availability !== selectedAvailability) { return false; } // Experience if (selectedExperience !== 'All Experience' && worker.experience !== selectedExperience) { return false; } // Religion if (selectedReligion !== 'All Religions' && worker.religion !== selectedReligion) { return false; } // Salary Bracket if (worker.salary > maxSalary) { return false; } return true; }); }, [ initialWorkers, searchQuery, selectedCategory, selectedNationality, selectedAvailability, selectedExperience, selectedReligion, maxSalary ]); return (
{/* Search & Top Filters Bar */}
{/* Search Input */}
setSearchQuery(e.target.value)} placeholder="Search by name, bio, or skills (e.g., Cooking, Childcare, Arabic)..." className="w-full pl-11 pr-4 py-3 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5]" />
{/* Reset Filters CTA */}
{/* Detailed Filters Grid */}
{/* Category Dropdown */}
{/* Nationality Dropdown */}
{/* Availability Dropdown */}
{/* Experience Dropdown */}
{/* Max Salary Slider */}
Max Salary {maxSalary} AED
setMaxSalary(Number(e.target.value))} className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-[#185FA5]" />
{/* Results Header */}
Showing {filteredWorkers.length} domestic workers matching your criteria
OCR Vetted & Legal
{/* Workers Grid */} {filteredWorkers.length > 0 ? (
{filteredWorkers.map((worker) => { const isShortlisted = shortlistedIds.includes(worker.id); return (
{/* Card Header Banner */}
{worker.name.charAt(0)}
{worker.name} {worker.verified && }
{worker.nationality}
{/* Shortlist Toggle Button */}
{/* Card Body */}
{/* Top Skill Pill & Salary */}
{worker.category}
{worker.salary} AED / mo
{/* Bio Snippet */}

"{worker.bio}"

{/* Details Grid */}
Exp: {worker.experience}
Avail: {worker.availability}
{worker.religion}
Age: {worker.age} yrs
{/* Skill Tags */}
{worker.skills.map(s => ( {s} ))}
{/* View Profile Button */} View Full Profile
); })}
) : (
No workers match your filter criteria

Try adjusting your salary slider, broadening your category selection, or resetting all filters.

)}
); }