import React, { useState } from 'react'; import { Head, Link } from '@inertiajs/react'; import EmployerMobileLayout from './Layouts/EmployerMobileLayout'; import { Search, Filter, Globe, Briefcase, DollarSign, Star, Heart, MapPin, ArrowRight, ChevronLeft, Bookmark, CheckCircle2, Calendar, Sparkles, X, RotateCcw } from 'lucide-react'; export default function EmployerWorkers() { const [searchQuery, setSearchQuery] = useState(''); const [showFilters, setShowFilters] = useState(false); const [activeCat, setActiveCat] = useState('All'); const [filters, setFilters] = useState({ nationality: 'All Nationalities', availability: 'All Availabilities', experience: 'All Experience', religion: 'All Religions', maxSalary: 3000 }); const categories = ['All', 'Housemaid', 'Nanny', 'Cook', 'Driver', 'Gardener']; const filterOptions = { nationalities: ['All Nationalities', 'Philippines', 'India', 'Sri Lanka', 'Kenya', 'Ethiopia', 'Indonesia'], availabilities: ['All Availabilities', 'Available Now', 'Available in 1 week', 'Available in 1 month'], experienceLevels: ['All Experience', '0-2 Years', '2-5 Years', '5-10 Years', '10+ Years'], religions: ['All Religions', 'Christianity', 'Islam', 'Hinduism', 'Other'] }; const workers = [ { id: 1, name: 'Maria Santos', role: 'Childcare', salary: '1800 AED / mo', nationality: 'Philippines', initial: 'M', bio: '"Experienced nanny with 6 years working with expatriate families in Dubai. Certified in pediatric first aid."', exp: '5+ Years', avail: 'Immediate', religion: 'Christian', age: '32 yrs', skills: ['Childcare', 'Cooking', 'Housekeeping', 'Ironing'] }, { id: 2, name: 'Elena Gilbert', role: 'Housemaid', salary: '2500 AED / mo', nationality: 'Kenya', initial: 'E', bio: '"Professional housekeeper with expertise in deep cleaning and organizing. Fluent in English and Swahili."', exp: '3+ Years', avail: 'Immediate', religion: 'Christian', age: '28 yrs', skills: ['Cleaning', 'Ironing', 'Bilingual'] } ]; const resetFilters = () => { setFilters({ nationality: 'All Nationalities', availability: 'All Availabilities', experience: 'All Experience', religion: 'All Religions', maxSalary: 3000 }); setSearchQuery(''); }; return (
{/* Header */}

Find Workers

{/* Search Bar */}
setSearchQuery(e.target.value)} className="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all" />
{/* Category Tabs */}
{categories.map((cat) => ( ))}
{/* Worker Listing */}
{workers.map((worker) => (
{/* Card Header Section */}
{worker.initial}

{worker.name}

{worker.nationality}
{/* Card Body Section */}
{worker.role}
{worker.salary}

{worker.bio}

{/* Stats Grid 2x2 */}
Exp: {worker.exp}
Avail: {worker.avail}
{worker.religion}
Age: {worker.age}
{/* Skills Tags */}
{worker.skills.map((skill) => ( {skill} ))}
View Full Profile
))}
{/* Filter Drawer - Simple UI Style */} {showFilters && (
setShowFilters(false)} />

Filters

{/* Nationality */}
{/* Availability */}
{filterOptions.availabilities.map(av => ( ))}
{/* Experience */}
{/* Salary Slider */}
{filters.maxSalary} AED
setFilters({...filters, maxSalary: Number(e.target.value)})} className="w-full h-2 bg-slate-100 rounded-full appearance-none cursor-pointer accent-[#185FA5]" />
1200 AED 3000 AED
)}
); }