import React, { useState, useMemo } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import EmployerLayout from '@/Layouts/EmployerLayout'; import { Plus, Search, Filter, Download, MoreHorizontal, MapPin, DollarSign, Users, Calendar, Briefcase, CheckCircle2, XCircle, Clock, Eye, Edit2, Trash2 } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { toast } from 'sonner'; export default function Index({ initialJobs }) { const [searchTerm, setSearchTerm] = useState(''); const [statusFilter, setStatusFilter] = useState('All'); const handleDelete = (jobId) => { if (confirm('Are you sure you want to delete this job posting? This action cannot be undone.')) { router.delete(`/employer/jobs/${jobId}`, { onSuccess: () => { toast.success('Job deleted successfully.'); }, onError: () => { toast.error('Failed to delete job.'); } }); } }; const [jobs, setJobs] = useState(initialJobs || [ { id: 1, title: 'Experienced Mason', location: 'Dubai Marina', salary: 2800, workers_needed: 5, applied_count: 3, posted_at: 'Nov 12, 2026', status: 'Active' }, { id: 2, title: 'Villa Cleaner', location: 'Al Barsha', salary: 1800, workers_needed: 2, applied_count: 12, posted_at: 'Nov 10, 2026', status: 'Active' }, { id: 3, title: 'Site Supervisor', location: 'Sharjah', salary: 4500, workers_needed: 1, applied_count: 8, posted_at: 'Nov 05, 2026', status: 'Closed' }, { id: 4, title: 'Plumber for Project', location: 'Jumeirah', salary: 2600, workers_needed: 3, applied_count: 0, posted_at: 'Nov 14, 2026', status: 'Draft' }, ]); const filteredJobs = useMemo(() => { return jobs.filter(job => { const matchesSearch = job.title.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === 'All' || job.status === statusFilter; return matchesSearch && matchesStatus; }); }, [jobs, searchTerm, statusFilter]); return (

{/* Header Actions */}

Active Job Postings

Manage and track your recruitment status

Post a Job

{/* Filters & Search Bar */}

setSearchTerm(e.target.value)} />

{['All', 'Active', 'Closed', 'Draft'].map(status => ( ))}

{/* Jobs Grid */}

{filteredJobs.length > 0 ? ( filteredJobs.map((job) => (

{job.title}

{job.posted_at}

{job.status === 'Active' && } {job.status === 'Closed' && } {job.status === 'Draft' && } {job.status}

Location

{job.location}

Monthly Salary

{job.salary} AED

{[...Array(3)].map((_, i) => (

{i === 2 ? `+${job.applied_count}` : ''}

))}

{job.applied_count} Applications

{job.applied_count < job.workers_needed ? ( {job.applied_count}/{job.workers_needed} Filled ) : ( Fully Staffed )}

View Applicants Quick Actions View Details Edit Posting handleDelete(job.id)}>

Delete Job

)) ) : (

No jobs found

Post your first job

)}

); }