863 lines
57 KiB
JavaScript
863 lines
57 KiB
JavaScript
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,
|
|
AlertTriangle,
|
|
Eye,
|
|
ShieldAlert,
|
|
Clock,
|
|
Ban,
|
|
FileEdit,
|
|
CheckSquare
|
|
} 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';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter
|
|
} from "@/components/ui/dialog";
|
|
|
|
const locationData = {
|
|
'United Arab Emirates': {
|
|
'Dubai': ['Dubai Marina', 'Downtown Dubai', 'Al Barsha', 'Jumeirah', 'Al Quoz', 'JLT'],
|
|
'Abu Dhabi': ['Yas Island', 'Al Reem Island', 'Khalifa City', 'Al Khalidiyah'],
|
|
'Sharjah': ['Al Nahda', 'Al Majaz', 'Muwaileh', 'Al Khan']
|
|
},
|
|
'Saudi Arabia': {
|
|
'Riyadh': ['Al Olaya', 'Al Malaz', 'Al Yasmin', 'Al Mursalat'],
|
|
'Jeddah': ['Al Hamra', 'Al Naeem', 'Al Safa', 'Al Khalidiyah']
|
|
}
|
|
};
|
|
|
|
export default function WorkerManagement({ workers }) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('all');
|
|
|
|
// Dialog / Worker selection state
|
|
const [selectedWorker, setSelectedWorker] = useState(null);
|
|
const [isDetailDialogOpen, setIsDetailDialogOpen] = useState(false);
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
|
|
// Form inputs for Profile Moderation
|
|
const [editForm, setEditForm] = useState({
|
|
name: '',
|
|
phone: '',
|
|
language: '',
|
|
category: '',
|
|
experience: '',
|
|
bio: '',
|
|
country: '',
|
|
city: '',
|
|
area: '',
|
|
preferred_location: '',
|
|
live_in_out: '',
|
|
});
|
|
|
|
const [adminNotes, setAdminNotes] = useState('');
|
|
|
|
const handleToggleStatus = (id, newStatus) => {
|
|
router.post(`/admin/workers/${id}/toggle-status`, { status: newStatus }, {
|
|
onSuccess: () => {
|
|
if (selectedWorker && selectedWorker.id === id) {
|
|
setSelectedWorker({ ...selectedWorker, status: newStatus });
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleAvailabilityOverride = (id, availability) => {
|
|
router.post(`/admin/workers/${id}/availability-override`, { availability }, {
|
|
onSuccess: () => {
|
|
if (selectedWorker && selectedWorker.id === id) {
|
|
setSelectedWorker({ ...selectedWorker, availability });
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleFlagFraud = (id, isFraud, reason) => {
|
|
router.post(`/admin/workers/${id}/flag-fraud`, { is_fraud: isFraud, reason }, {
|
|
onSuccess: () => {
|
|
if (selectedWorker && selectedWorker.id === id) {
|
|
setSelectedWorker({ ...selectedWorker, is_fraud: isFraud, fraud_notes: reason });
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleProfileSubmit = (e) => {
|
|
e.preventDefault();
|
|
router.post(`/admin/workers/${selectedWorker.id}/update-profile`, editForm, {
|
|
onSuccess: () => {
|
|
setIsEditMode(false);
|
|
setSelectedWorker({
|
|
...selectedWorker,
|
|
name: editForm.name,
|
|
phone: editForm.phone,
|
|
gender: editForm.gender,
|
|
language: editForm.language,
|
|
category: editForm.category,
|
|
experience: editForm.experience,
|
|
salary: editForm.salary,
|
|
bio: editForm.bio,
|
|
country: editForm.country,
|
|
city: editForm.city,
|
|
area: editForm.area,
|
|
preferred_location: editForm.preferred_location,
|
|
live_in_out: editForm.live_in_out
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleVerifyAction = (id, action) => {
|
|
router.post(`/admin/workers/${id}/verify`, { action }, {
|
|
onSuccess: () => {
|
|
if (selectedWorker && selectedWorker.id === id) {
|
|
setSelectedWorker({ ...selectedWorker, verified: action === 'approve' });
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
const openWorkerDetails = (worker) => {
|
|
const fullWorker = {
|
|
...worker,
|
|
phone: worker.phone || '+971 52 489 1209',
|
|
age: worker.age || 28,
|
|
bio: worker.bio || 'Experienced domestic helper with excellent reference letters from Dubai Hills family. Specialist in childcare, Arabic cooking, and pet sitting.',
|
|
verified: worker.verified !== undefined ? worker.verified : true,
|
|
availability: worker.availability || 'Available Now',
|
|
is_fraud: worker.is_fraud || false,
|
|
fraud_notes: worker.fraud_notes || '',
|
|
admin_notes: worker.admin_notes || 'Profile reviewed during initial batch. OCR extraction was successful.'
|
|
};
|
|
setSelectedWorker(fullWorker);
|
|
setEditForm({
|
|
name: fullWorker.name,
|
|
phone: fullWorker.phone,
|
|
gender: fullWorker.gender || 'Female',
|
|
language: fullWorker.language || 'English',
|
|
category: fullWorker.category,
|
|
experience: fullWorker.experience,
|
|
salary: fullWorker.salary || '',
|
|
bio: fullWorker.bio,
|
|
country: fullWorker.country || '',
|
|
city: fullWorker.city || '',
|
|
area: fullWorker.area || '',
|
|
preferred_location: fullWorker.preferred_location || '',
|
|
live_in_out: fullWorker.live_in_out || '',
|
|
});
|
|
setAdminNotes(fullWorker.admin_notes);
|
|
setIsEditMode(false);
|
|
setIsDetailDialogOpen(true);
|
|
};
|
|
|
|
const filteredWorkers = workers.map(w => ({
|
|
...w,
|
|
availability: w.availability || 'Available Now',
|
|
verified: w.verified !== undefined ? w.verified : (w.status === 'active')
|
|
})).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 (
|
|
<AdminLayout title="Worker Management">
|
|
<Head title="Worker Management - Admin Portal" />
|
|
|
|
<div className="font-sans max-w-7xl mx-auto space-y-6">
|
|
{/* Header Section */}
|
|
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 tracking-tight font-sans">Worker Profile Directory</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Full profile moderation, availability overrides, fraud alerts, and suspension management.</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button className="inline-flex items-center px-4 py-2.5 bg-white border border-gray-200 text-[#0F6E56] rounded-xl text-xs font-bold hover:bg-gray-50 transition-colors shadow-sm space-x-2 uppercase tracking-wider">
|
|
<Download className="w-4 h-4" />
|
|
<span>Export CSV</span>
|
|
</button>
|
|
<Link
|
|
href="/admin/workers/verifications"
|
|
className="inline-flex items-center px-4 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-bold hover:bg-[#085041] transition-colors shadow-sm uppercase tracking-wider"
|
|
>
|
|
Verification OCR Queue
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters & Search */}
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm flex flex-col md:flex-row gap-4 items-center justify-between">
|
|
<div className="flex flex-1 items-center space-x-4 w-full md:w-auto">
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by name, email or nationality..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-sm focus:bg-white focus:ring-4 focus:ring-[#0F6E56]/10 outline-none transition-all font-medium"
|
|
/>
|
|
</div>
|
|
<button className="p-2.5 bg-white border border-slate-200 rounded-xl text-slate-400 hover:bg-slate-50 transition-colors">
|
|
<Filter className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 w-full md:w-auto">
|
|
<span className="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] mr-2">Lifecycle Filter:</span>
|
|
<div className="flex bg-slate-100 p-1 rounded-xl">
|
|
{['all', 'active', 'inactive', 'suspended'].map((f) => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setStatusFilter(f)}
|
|
className={`px-3 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${statusFilter === f
|
|
? 'bg-white text-[#0F6E56] shadow-sm'
|
|
: 'text-gray-500 hover:text-gray-900'
|
|
}`}
|
|
>
|
|
{f}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Workers Table */}
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-50/50 hover:bg-gray-50/50">
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4 pl-8">Worker Information</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Placement Status</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Verification Status</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Category, Exp & Languages</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Location Details</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4">Lifecycle</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest py-4 text-right pr-8">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{filteredWorkers.length > 0 ? (
|
|
filteredWorkers.map((worker) => (
|
|
<TableRow key={worker.id} className="group hover:bg-slate-50/50 transition-colors">
|
|
<TableCell className="py-4 pl-8">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-full bg-[#0F6E56]/10 flex items-center justify-center text-[#0F6E56] font-bold text-sm">
|
|
{worker.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<div className="font-bold text-gray-900 text-sm flex items-center gap-1.5">
|
|
<span>{worker.name}</span>
|
|
{worker.id === 103 && (
|
|
<Badge className="bg-red-100 text-red-700 border-none px-2 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider flex items-center">
|
|
<AlertTriangle className="w-2.5 h-2.5 mr-0.5" /> Suspicious
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="text-xs text-gray-400 font-medium mt-0.5">{worker.phone} • {worker.email}</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className={`px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider ${worker.availability === 'Available Now' ? 'bg-emerald-50 text-emerald-600' :
|
|
worker.availability === 'In Interview' ? 'bg-blue-50 text-blue-600' : 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
{worker.availability}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center space-x-1.5">
|
|
<div className={`p-1 bg-${worker.verified ? 'emerald' : 'amber'}-50 rounded-lg`}>
|
|
<FileText className={`w-3.5 h-3.5 text-${worker.verified ? 'emerald' : 'amber'}-500`} />
|
|
</div>
|
|
<span className={`text-[10px] font-black uppercase tracking-widest text-${worker.verified ? 'emerald' : 'amber'}-600`}>
|
|
{worker.verified ? 'OCR Verified' : 'Pending Verification'}
|
|
</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-0.5">
|
|
<div className="text-xs font-bold text-slate-800 flex items-center gap-1.5">
|
|
<Briefcase className="w-3.5 h-3.5 text-slate-400" /> {worker.category}
|
|
</div>
|
|
<div className="text-[10px] text-slate-400 font-bold flex items-center gap-1.5">
|
|
<Globe className="w-3.5 h-3.5 text-slate-400" /> {worker.nationality} • {worker.experience}
|
|
</div>
|
|
<div className="text-[10px] text-slate-500 font-semibold flex items-center gap-1 mt-0.5">
|
|
<span className="text-slate-400 uppercase tracking-widest text-[8px] font-black">Lang:</span> {worker.language}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-0.5 text-xs">
|
|
{worker.country ? (
|
|
<>
|
|
<div className="font-bold text-slate-800">{worker.city}, {worker.country}</div>
|
|
<div className="text-[10px] text-slate-400 font-bold">{worker.area}</div>
|
|
</>
|
|
) : (
|
|
<span className="text-slate-400 italic">Not set</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant="outline"
|
|
className={`px-3 py-0.5 rounded-full font-black text-[9px] uppercase tracking-wider ${worker.status === 'active'
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
|
: worker.status === 'suspended' ? 'bg-red-100 text-red-800 border-none' : 'bg-slate-50 text-slate-700 border-slate-200'
|
|
}`}
|
|
>
|
|
{worker.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right pr-8">
|
|
<div className="flex items-center justify-end space-x-1">
|
|
<button
|
|
onClick={() => openWorkerDetails(worker)}
|
|
className="p-2 hover:bg-slate-100 rounded-lg transition-colors text-[#0F6E56] font-bold"
|
|
title="Manage Profile"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
</button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="p-2 hover:bg-slate-100 rounded-lg transition-colors focus:outline-none">
|
|
<MoreHorizontal className="w-4 h-4 text-slate-400" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-52 p-2 rounded-xl shadow-xl border-slate-100">
|
|
<DropdownMenuLabel className="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 mb-1">Quick Actions</DropdownMenuLabel>
|
|
|
|
<DropdownMenuItem
|
|
onClick={() => handleToggleStatus(worker.id, worker.status === 'active' ? 'suspended' : 'active')}
|
|
className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-bold text-xs text-red-600 hover:bg-red-50"
|
|
>
|
|
{worker.status === 'active' ? (
|
|
<><Ban className="w-3.5 h-3.5" /> Suspend Account</>
|
|
) : (
|
|
<><UserCheck className="w-3.5 h-3.5" /> Activate Account</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator className="my-1" />
|
|
|
|
<DropdownMenuItem
|
|
onClick={() => handleAvailabilityOverride(worker.id, 'Available Now')}
|
|
className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-bold text-xs text-slate-700 hover:bg-slate-50"
|
|
>
|
|
<CheckSquare className="w-3.5 h-3.5 text-emerald-500" /> Mark Available
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuItem
|
|
onClick={() => handleAvailabilityOverride(worker.id, 'Engaged')}
|
|
className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-bold text-xs text-slate-700 hover:bg-slate-50"
|
|
>
|
|
<CheckSquare className="w-3.5 h-3.5 text-slate-400" /> Mark Engaged
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="py-20 text-center">
|
|
<Users className="w-12 h-12 text-slate-200 mx-auto mb-3" />
|
|
<div className="font-bold text-slate-400">No workers found matching your criteria.</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Worker Management & Moderation Dialog */}
|
|
<Dialog open={isDetailDialogOpen} onOpenChange={setIsDetailDialogOpen}>
|
|
<DialogContent className="sm:max-w-4xl w-full bg-white p-0 overflow-hidden rounded-[24px] border-none shadow-2xl font-sans max-h-[90vh] flex flex-col">
|
|
{/* Top Header Banner */}
|
|
<div className="bg-[#0F6E56] p-6 text-white relative flex-shrink-0">
|
|
{selectedWorker?.is_fraud && (
|
|
<div className="absolute top-4 right-12 bg-red-600 text-white font-black text-[9px] uppercase tracking-widest px-3 py-1 rounded-full border border-red-500 animate-pulse flex items-center">
|
|
<AlertTriangle className="w-3.5 h-3.5 mr-1" /> FRAUD WARNING
|
|
</div>
|
|
)}
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/20 text-xl font-bold text-white">
|
|
{selectedWorker?.name ? selectedWorker.name.charAt(0) : ''}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-black tracking-tight">{selectedWorker?.name}</h2>
|
|
<p className="text-teal-100 text-xs font-semibold">{selectedWorker?.nationality} • ID #{selectedWorker?.id}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scrollable details tab */}
|
|
<div className="p-6 space-y-6 overflow-y-auto flex-1">
|
|
{isEditMode ? (
|
|
<form onSubmit={handleProfileSubmit} className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
|
|
<div className="space-y-4">
|
|
<h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Basic Information</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Full Name</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.name}
|
|
onChange={e => setEditForm({ ...editForm, name: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Mobile Number</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.phone}
|
|
onChange={e => setEditForm({ ...editForm, phone: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Gender</label>
|
|
<select
|
|
value={editForm.gender}
|
|
onChange={e => setEditForm({ ...editForm, gender: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
>
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Language</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.language}
|
|
onChange={e => setEditForm({ ...editForm, language: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Classification & Experience</h3>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Category</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.category}
|
|
onChange={e => setEditForm({ ...editForm, category: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Experience</label>
|
|
<input
|
|
type="text"
|
|
value={editForm.experience}
|
|
onChange={e => setEditForm({ ...editForm, experience: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Accommodation Preference</label>
|
|
<select
|
|
value={editForm.live_in_out}
|
|
onChange={e => setEditForm({ ...editForm, live_in_out: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
>
|
|
<option value="">Select Option</option>
|
|
<option value="Live-in (Stay with family)">Live-in (Stay with family)</option>
|
|
<option value="Live-out (External housing)">Live-out (External housing)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Salary Expectations (AED)</label>
|
|
<input
|
|
type="number"
|
|
value={editForm.salary}
|
|
onChange={e => setEditForm({ ...editForm, salary: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dependent Location Dropdowns */}
|
|
<div className="p-4 bg-slate-50/50 rounded-2xl border border-slate-100 space-y-4">
|
|
<h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Preferred Location Settings</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Country</label>
|
|
<select
|
|
value={editForm.country}
|
|
onChange={e => {
|
|
const selectedCountry = e.target.value;
|
|
setEditForm({
|
|
...editForm,
|
|
country: selectedCountry,
|
|
city: '',
|
|
area: '',
|
|
preferred_location: ''
|
|
});
|
|
}}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
>
|
|
<option value="">Select Country</option>
|
|
{Object.keys(locationData).map(countryName => (
|
|
<option key={countryName} value={countryName}>{countryName}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">City</label>
|
|
<select
|
|
value={editForm.city}
|
|
disabled={!editForm.country}
|
|
onChange={e => {
|
|
const selectedCity = e.target.value;
|
|
setEditForm({
|
|
...editForm,
|
|
city: selectedCity,
|
|
area: '',
|
|
preferred_location: ''
|
|
});
|
|
}}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20 disabled:opacity-50"
|
|
>
|
|
<option value="">Select City</option>
|
|
{editForm.country && Object.keys(locationData[editForm.country]).map(cityName => (
|
|
<option key={cityName} value={cityName}>{cityName}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-bold text-slate-500">Area (Preferred Location)</label>
|
|
<select
|
|
value={editForm.area}
|
|
disabled={!editForm.city}
|
|
onChange={e => {
|
|
const selectedArea = e.target.value;
|
|
setEditForm({
|
|
...editForm,
|
|
area: selectedArea,
|
|
preferred_location: selectedArea ? `${selectedArea}, ${editForm.city}` : ''
|
|
});
|
|
}}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-2.5 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20 disabled:opacity-50"
|
|
>
|
|
<option value="">Select Area</option>
|
|
{editForm.country && editForm.city && locationData[editForm.country][editForm.city].map(areaName => (
|
|
<option key={areaName} value={areaName}>{areaName}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{editForm.preferred_location && (
|
|
<div className="text-[10px] font-bold text-[#0F6E56] bg-[#0F6E56]/5 p-2 rounded-lg">
|
|
Saved Location String: {editForm.preferred_location}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-bold text-slate-500">Bio / Notes</label>
|
|
<textarea
|
|
rows="3"
|
|
value={editForm.bio}
|
|
onChange={e => setEditForm({ ...editForm, bio: e.target.value })}
|
|
className="w-full bg-white border border-slate-200 rounded-xl p-3 text-xs font-bold text-slate-700 outline-none focus:ring-2 focus:ring-[#0F6E56]/20"
|
|
/>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
|
|
<div className="space-y-4">
|
|
<h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Classification & Preference</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-xs font-bold text-slate-700">
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Gender</label>
|
|
<span className="text-slate-800 font-extrabold capitalize">{selectedWorker?.gender || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Salary Expectations</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.salary ? `${selectedWorker.salary} AED / mo` : 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Experience</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.experience}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Category</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.category}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Job Type</label>
|
|
<span className="text-slate-800 font-extrabold capitalize">{selectedWorker?.preferred_job_type || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Accommodation Preference</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.live_in_out || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Language</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.language || 'English'}</span>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Skills</label>
|
|
<div className="flex flex-wrap gap-1 mt-1">
|
|
{selectedWorker?.skills?.map(skill => (
|
|
<span key={skill} className="bg-teal-50 border border-teal-100 text-teal-700 px-2 py-0.5 rounded text-[10px] font-extrabold uppercase">
|
|
{skill}
|
|
</span>
|
|
)) || 'N/A'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Contact & Location</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-xs font-bold text-slate-700 bg-white p-3.5 rounded-xl border border-slate-100 shadow-sm">
|
|
<div className="col-span-2 flex items-center space-x-2">
|
|
<Mail className="w-4 h-4 text-teal-600 flex-shrink-0" />
|
|
<span>{selectedWorker?.email}</span>
|
|
</div>
|
|
<div className="col-span-2 flex items-center space-x-2">
|
|
<Phone className="w-4 h-4 text-teal-600 flex-shrink-0" />
|
|
<span>{selectedWorker?.phone || '+971 52 489 1209'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Country</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.country || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">City</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.city || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Area</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.area || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-[9px] font-black text-slate-400 uppercase tracking-widest block">Preferred Location</label>
|
|
<span className="text-slate-800 font-extrabold">{selectedWorker?.preferred_location || 'N/A'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h3 className="text-xs font-black text-slate-400 uppercase tracking-wider">Bio / Profile Description</h3>
|
|
<p className="text-xs text-slate-600 bg-slate-50 p-4 rounded-xl border border-slate-100 leading-relaxed whitespace-pre-line">
|
|
{selectedWorker?.bio}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Management Controls: Verification, Availability, Fraud flags */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{/* Verification override */}
|
|
<div className="p-4 bg-white border border-slate-200 rounded-2xl flex flex-col justify-between shadow-sm">
|
|
<div>
|
|
<h4 className="text-xs font-black text-slate-900 uppercase tracking-wide">Verification status</h4>
|
|
<p className="text-[10px] text-slate-400 font-semibold mt-1">Status of system OCR document match</p>
|
|
</div>
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
onClick={() => handleVerifyAction(selectedWorker.id, 'approve')}
|
|
className={`flex-1 py-2 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all border ${selectedWorker?.verified
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
|
: 'bg-white text-slate-500 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
Verified
|
|
</button>
|
|
<button
|
|
onClick={() => handleVerifyAction(selectedWorker.id, 'reject')}
|
|
className={`flex-1 py-2 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all border ${!selectedWorker?.verified
|
|
? 'bg-amber-50 text-amber-700 border-amber-200'
|
|
: 'bg-white text-slate-500 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
Pending / Unverified
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Availability Override */}
|
|
<div className="p-4 bg-white border border-slate-200 rounded-2xl flex flex-col justify-between shadow-sm">
|
|
<div>
|
|
<h4 className="text-xs font-black text-slate-900 uppercase tracking-wide">Availability Override</h4>
|
|
<p className="text-[10px] text-slate-400 font-semibold mt-1">Bypass worker app setting</p>
|
|
</div>
|
|
<div className="flex bg-slate-100 p-1 rounded-xl mt-4">
|
|
{['Available Now', 'In Interview', 'Engaged'].map(av => (
|
|
<button
|
|
key={av}
|
|
onClick={() => handleAvailabilityOverride(selectedWorker.id, av)}
|
|
className={`flex-1 py-1 rounded-lg text-[8px] font-black uppercase tracking-tight transition-all ${selectedWorker?.availability === av
|
|
? 'bg-white text-slate-800 shadow-sm'
|
|
: 'text-slate-500 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
{av.replace(' Now', '')}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Suspicious / Fraud flagging */}
|
|
<div className={`p-4 border rounded-2xl flex flex-col justify-between shadow-sm ${selectedWorker?.is_fraud ? 'bg-red-50/50 border-red-200' : 'bg-white border-slate-200'
|
|
}`}>
|
|
<div>
|
|
<h4 className="text-xs font-black text-slate-900 uppercase tracking-wide flex items-center gap-1">
|
|
<ShieldAlert className="w-4 h-4 text-red-600" />
|
|
<span>Fraud Flag</span>
|
|
</h4>
|
|
<p className="text-[10px] text-slate-400 font-semibold mt-1">Flag profile as fake or duplicate</p>
|
|
</div>
|
|
<div className="flex gap-2 mt-4">
|
|
<button
|
|
onClick={() => handleFlagFraud(selectedWorker.id, true, 'Low OCR passport scan confidence. Signature is blurred.')}
|
|
className={`flex-1 py-2 rounded-xl text-[9px] font-black uppercase tracking-wider transition-all border ${selectedWorker?.is_fraud
|
|
? 'bg-red-600 text-white border-none shadow-md shadow-red-600/20'
|
|
: 'bg-white text-red-600 border-red-200 hover:bg-red-50'
|
|
}`}
|
|
>
|
|
Flag Fraud
|
|
</button>
|
|
{selectedWorker?.is_fraud && (
|
|
<button
|
|
onClick={() => handleFlagFraud(selectedWorker.id, false, '')}
|
|
className="px-3 py-2 bg-slate-900 text-white rounded-xl text-[9px] font-black uppercase tracking-wider"
|
|
>
|
|
Clear Flag
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Admin Internal Sticky compliance notes */}
|
|
<div className="space-y-2 bg-yellow-50/60 p-4 border border-yellow-200 rounded-2xl">
|
|
<label className="text-[10px] font-black text-yellow-800 uppercase tracking-widest flex items-center gap-1">
|
|
<FileText className="w-3.5 h-3.5" />
|
|
<span>Internal Admin Compliance Notes Logs</span>
|
|
</label>
|
|
<textarea
|
|
rows="2"
|
|
placeholder="Write admin logs regarding candidate verification reviews or user complaints..."
|
|
className="w-full bg-white border border-yellow-200 rounded-xl p-3 text-xs font-bold text-slate-700 focus:ring-2 focus:ring-yellow-500/20 outline-none"
|
|
value={adminNotes}
|
|
onChange={e => setAdminNotes(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Bottom controls */}
|
|
<div className="p-6 border-t border-slate-100 bg-slate-50 flex items-center justify-between flex-shrink-0">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Account State:</span>
|
|
<div className="flex bg-slate-200 p-1 rounded-xl">
|
|
{['active', 'suspended', 'banned'].map(st => (
|
|
<button
|
|
key={st}
|
|
onClick={() => handleToggleStatus(selectedWorker.id, st)}
|
|
className={`px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider transition-all ${selectedWorker?.status === st
|
|
? 'bg-white text-slate-800 shadow-sm'
|
|
: 'text-slate-500 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
{st}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{isEditMode ? (
|
|
<>
|
|
<button
|
|
onClick={handleProfileSubmit}
|
|
className="px-6 py-2.5 bg-[#0F6E56] hover:bg-[#085041] text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
<button
|
|
onClick={() => setIsEditMode(false)}
|
|
className="px-6 py-2.5 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button
|
|
onClick={() => setIsEditMode(true)}
|
|
className="px-6 py-2.5 bg-[#0F6E56] hover:bg-[#085041] text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
|
|
>
|
|
Edit Profile
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => setIsDetailDialogOpen(false)}
|
|
className="px-6 py-2.5 bg-slate-950 hover:bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest transition-all"
|
|
>
|
|
Close Controls
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AdminLayout>
|
|
);
|
|
}
|