649 lines
38 KiB
JavaScript
649 lines
38 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Head, router, Link } from '@inertiajs/react';
|
|
import AdminLayout from '@/Layouts/AdminLayout';
|
|
import {
|
|
Search,
|
|
Filter,
|
|
Download,
|
|
Users,
|
|
Mail,
|
|
MapPin,
|
|
Calendar,
|
|
CheckCircle,
|
|
Clock,
|
|
XCircle,
|
|
ExternalLink,
|
|
MoreVertical,
|
|
BadgeDollarSign,
|
|
ShieldAlert,
|
|
TrendingUp,
|
|
AlertOctagon,
|
|
Award,
|
|
Edit2,
|
|
Trash2,
|
|
Check,
|
|
Phone,
|
|
ShieldCheck,
|
|
Eye
|
|
} 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,
|
|
} from "@/components/ui/dialog";
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
export default function EmployersIndex({ employers: initialEmployers, sponsors, filters = {} }) {
|
|
const employers = initialEmployers || sponsors || { data: [], total: 0 };
|
|
const [searchTerm, setSearchTerm] = useState(filters.search || '');
|
|
const [statusFilter, setStatusFilter] = useState(filters.status || 'All');
|
|
const [locationFilter, setLocationFilter] = useState(filters.location || 'All');
|
|
const [sortField, setSortField] = useState(filters.sort_field || 'created_at');
|
|
const [sortOrder, setSortOrder] = useState(filters.sort_order || 'desc');
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return 'N/A';
|
|
try {
|
|
return new Date(dateStr).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
} catch (e) {
|
|
return dateStr;
|
|
}
|
|
};
|
|
|
|
const [selectedEmployer, setSelectedEmployer] = useState(null);
|
|
const [isDetailsOpen, setIsDetailsOpen] = useState(false);
|
|
const [isEditOpen, setIsEditOpen] = useState(false);
|
|
const [editForm, setEditForm] = useState({
|
|
id: '',
|
|
name: '',
|
|
email: '',
|
|
company_name: '',
|
|
phone: '',
|
|
country: '',
|
|
subscription_status: 'none'
|
|
});
|
|
|
|
// Handle search/filter queries
|
|
const triggerSearch = (searchVal, statusVal, locationVal, sortF, sortO) => {
|
|
router.get('/admin/employers', {
|
|
search: searchVal,
|
|
status: statusVal,
|
|
location: locationVal,
|
|
sort_field: sortF,
|
|
sort_order: sortO
|
|
}, {
|
|
preserveState: true,
|
|
preserveScroll: true,
|
|
replace: true
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const delayDebounceFn = setTimeout(() => {
|
|
if (searchTerm !== (filters.search || '')) {
|
|
triggerSearch(searchTerm, statusFilter, locationFilter, sortField, sortOrder);
|
|
}
|
|
}, 500);
|
|
|
|
return () => clearTimeout(delayDebounceFn);
|
|
}, [searchTerm]);
|
|
|
|
const handleFilterChange = (status, location) => {
|
|
setStatusFilter(status);
|
|
setLocationFilter(location);
|
|
triggerSearch(searchTerm, status, location, sortField, sortOrder);
|
|
};
|
|
|
|
const handleSort = (field) => {
|
|
const order = sortField === field && sortOrder === 'desc' ? 'asc' : 'desc';
|
|
setSortField(field);
|
|
setSortOrder(order);
|
|
triggerSearch(searchTerm, statusFilter, locationFilter, field, order);
|
|
};
|
|
|
|
const handleApprove = (id) => {
|
|
router.post(`/admin/employers/${id}/verify`, {}, {
|
|
onSuccess: () => {
|
|
setIsDetailsOpen(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSuspend = (id) => {
|
|
router.post(`/admin/employers/${id}/suspend`, {}, {
|
|
onSuccess: () => {
|
|
setIsDetailsOpen(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleActivate = (id) => {
|
|
router.post(`/admin/employers/${id}/activate`, {}, {
|
|
onSuccess: () => {
|
|
setIsDetailsOpen(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleDelete = (id) => {
|
|
if (confirm('Are you absolutely sure you want to permanently delete this employer?')) {
|
|
router.delete(`/admin/employers/${id}`);
|
|
}
|
|
};
|
|
|
|
const handleEditClick = (employer) => {
|
|
setEditForm({
|
|
id: employer.id,
|
|
name: employer.name,
|
|
email: employer.email,
|
|
company_name: employer.employer_profile?.company_name || '',
|
|
phone: employer.employer_profile?.phone || '',
|
|
country: employer.employer_profile?.country || 'UAE',
|
|
subscription_status: employer.subscription_status || 'none'
|
|
});
|
|
setIsEditOpen(true);
|
|
};
|
|
|
|
const handleEditSubmit = (e) => {
|
|
e.preventDefault();
|
|
router.post(`/admin/employers/${editForm.id}/update`, editForm, {
|
|
onSuccess: () => {
|
|
setIsEditOpen(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleExport = () => {
|
|
const params = new URLSearchParams({
|
|
search: searchTerm,
|
|
status: statusFilter,
|
|
location: locationFilter,
|
|
sort_field: sortField,
|
|
sort_order: sortOrder
|
|
});
|
|
window.location.href = `/admin/employers/export?${params.toString()}`;
|
|
};
|
|
|
|
const viewDetails = (employer) => {
|
|
setSelectedEmployer(employer);
|
|
setIsDetailsOpen(true);
|
|
};
|
|
|
|
return (
|
|
<AdminLayout title="Employers">
|
|
<Head title="Employers" />
|
|
|
|
<div className="space-y-6 font-sans">
|
|
{/* Statistics Ribbons */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-5">
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Total Employers</span>
|
|
<h3 className="text-2xl font-black text-slate-900">{employers.total || 0}</h3>
|
|
</div>
|
|
<div className="p-3 bg-teal-50 rounded-xl">
|
|
<Users className="w-6 h-6 text-teal-600" />
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Active Plans</span>
|
|
<h3 className="text-2xl font-black text-blue-600">
|
|
{employers.data.filter(e => e.subscription_status === 'active').length}
|
|
</h3>
|
|
</div>
|
|
<div className="p-3 bg-blue-50 rounded-xl">
|
|
<BadgeDollarSign className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Pending Approval</span>
|
|
<h3 className="text-2xl font-black text-amber-500">
|
|
{employers.data.filter(e => e.employer_profile?.verification_status !== 'approved').length}
|
|
</h3>
|
|
</div>
|
|
<div className="p-3 bg-amber-50 rounded-xl">
|
|
<Clock className="w-6 h-6 text-amber-500" />
|
|
</div>
|
|
</div>
|
|
<div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Suspended Accounts</span>
|
|
<h3 className="text-2xl font-black text-rose-600">
|
|
{employers.data.filter(e => e.status === 'suspended').length}
|
|
</h3>
|
|
</div>
|
|
<div className="p-3 bg-rose-50 rounded-xl">
|
|
<ShieldAlert className="w-6 h-6 text-rose-600" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
|
|
<div className="flex flex-1 items-center space-x-3">
|
|
<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-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by name, company, email..."
|
|
className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-xl text-sm font-medium focus:ring-4 focus:ring-teal-500/10 outline-none transition-all"
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2">
|
|
<select
|
|
className="px-4 py-2.5 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-600 outline-none focus:ring-2 focus:ring-teal-500/10 transition-all cursor-pointer"
|
|
value={statusFilter}
|
|
onChange={e => handleFilterChange(e.target.value, locationFilter)}
|
|
>
|
|
<option value="All">All Statuses</option>
|
|
<option value="Active">Active</option>
|
|
<option value="Suspended">Suspended</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={handleExport}
|
|
className="px-4 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-black uppercase tracking-wider flex items-center gap-2 hover:bg-[#0c5945] transition-all shadow-md shadow-teal-900/10 cursor-pointer"
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
<span>Export Employers</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Table */}
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
|
|
<TableHead onClick={() => handleSort('name')} className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 pl-8 cursor-pointer select-none">
|
|
Employer {sortField === 'name' && (sortOrder === 'desc' ? '↓' : '↑')}
|
|
</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Subscription Plan</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14">Country</TableHead>
|
|
<TableHead onClick={() => handleSort('status')} className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 cursor-pointer select-none">
|
|
Status {sortField === 'status' && (sortOrder === 'desc' ? '↓' : '↑')}
|
|
</TableHead>
|
|
<TableHead className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 text-right pr-8">Action</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{employers.data.length > 0 ? (
|
|
employers.data.map((emp) => (
|
|
<TableRow key={emp.id} className="hover:bg-slate-50/50 transition-colors">
|
|
<TableCell className="py-5 pl-8">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-10 h-10 rounded-xl bg-[#0F6E56]/10 text-[#0F6E56] flex items-center justify-center border border-[#0F6E56]/20 font-bold text-sm">
|
|
{emp.name?.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-slate-900 leading-none mb-1">{emp.name}</h4>
|
|
<p className="text-xs text-slate-500 font-medium">{emp.email}</p>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className={`px-2 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-tight ${
|
|
emp.subscription_status === 'active' ? 'bg-blue-50 text-blue-600 border border-blue-100' : 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
{emp.subscription_status || 'none'}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className="text-xs font-bold text-slate-700">
|
|
{emp.employer_profile?.country || 'United Arab Emirates'}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell>
|
|
<span className={`text-[10px] font-black uppercase tracking-widest ${
|
|
emp.status === 'active' ? 'text-emerald-600' : 'text-rose-600'
|
|
}`}>
|
|
{emp.status}
|
|
</span>
|
|
</TableCell>
|
|
<TableCell className="text-right pr-8">
|
|
<div className="flex items-center justify-end space-x-1">
|
|
<button
|
|
onClick={() => viewDetails(emp)}
|
|
className="p-2 hover:bg-slate-100 rounded-lg text-[#0F6E56] font-bold"
|
|
title="View Details"
|
|
>
|
|
<Eye className="w-4.5 h-4.5" />
|
|
</button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-all outline-none">
|
|
<MoreVertical className="w-5 h-5" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48 p-2 rounded-xl">
|
|
<DropdownMenuLabel className="text-[9px] font-black text-slate-400 uppercase tracking-widest px-2 py-2">Quick Actions</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className="p-3 rounded-lg focus:bg-blue-50 cursor-pointer text-blue-600 font-bold"
|
|
onClick={() => handleEditClick(emp)}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Edit2 className="w-4 h-4" />
|
|
<span className="text-xs font-bold">Edit Employer</span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
{emp.employer_profile?.verification_status !== 'approved' && (
|
|
<DropdownMenuItem className="p-3 rounded-lg focus:bg-emerald-50 cursor-pointer text-emerald-600 font-bold" onClick={() => handleApprove(emp.id)}>
|
|
<div className="flex items-center space-x-3">
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span className="text-xs font-bold">Verify Employer</span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
)}
|
|
{emp.status === 'active' ? (
|
|
<DropdownMenuItem
|
|
onClick={() => handleSuspend(emp.id)}
|
|
className="p-3 rounded-lg focus:bg-rose-50 cursor-pointer text-rose-600 font-bold"
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<XCircle className="w-4 h-4" />
|
|
<span className="text-xs font-bold">Suspend Employer</span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
) : (
|
|
<DropdownMenuItem
|
|
onClick={() => handleActivate(emp.id)}
|
|
className="p-3 rounded-lg focus:bg-emerald-50 cursor-pointer text-emerald-600 font-bold"
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<CheckCircle className="w-4 h-4" />
|
|
<span className="text-xs font-bold">Activate Employer</span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
onClick={() => handleDelete(emp.id)}
|
|
className="p-3 rounded-lg focus:bg-red-50 cursor-pointer text-red-600 font-bold"
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Trash2 className="w-4 h-4" />
|
|
<span className="text-xs font-bold">Delete Employer</span>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="py-12 text-center text-slate-400 font-semibold text-sm">
|
|
No employers found.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
{/* Pagination */}
|
|
<div className="p-5 border-t border-slate-100 flex items-center justify-between bg-slate-50/50">
|
|
<span className="text-xs text-slate-500 font-bold">
|
|
{employers.total > 0 ? (
|
|
`Showing ${employers.from || 0} to ${employers.to || 0} of ${employers.total} employers`
|
|
) : (
|
|
'No employers found'
|
|
)}
|
|
</span>
|
|
{employers.last_page > 1 && (
|
|
<div className="flex items-center space-x-2">
|
|
<Link
|
|
href={employers.prev_page_url || '#'}
|
|
only={['employers']}
|
|
preserveScroll
|
|
className={`px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-700 shadow-xs hover:bg-slate-50 transition-colors ${
|
|
!employers.prev_page_url && 'opacity-50 pointer-events-none'
|
|
}`}
|
|
>
|
|
Previous
|
|
</Link>
|
|
<Link
|
|
href={employers.next_page_url || '#'}
|
|
only={['employers']}
|
|
preserveScroll
|
|
className={`px-4 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-700 shadow-xs hover:bg-slate-50 transition-colors ${
|
|
!employers.next_page_url && 'opacity-50 pointer-events-none'
|
|
}`}
|
|
>
|
|
Next
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Employer Detail Modal */}
|
|
<Dialog open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
|
|
<DialogContent className="sm:max-w-xl w-full bg-white p-0 overflow-hidden rounded-[24px] max-h-[85vh] flex flex-col">
|
|
<div className="bg-gradient-to-r from-[#0F6E56] to-[#085041] p-6 text-white flex-shrink-0">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-14 h-14 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center border border-white/20 font-black text-xl">
|
|
{selectedEmployer?.name?.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-black tracking-tight">{selectedEmployer?.name}</h2>
|
|
<p className="text-teal-100/80 text-xs font-semibold mt-1">📍 Registered {new Date(selectedEmployer?.created_at).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6 overflow-y-auto flex-1 bg-slate-50/50">
|
|
{/* Employer Info Card */}
|
|
<div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-xs space-y-4">
|
|
<h3 className="text-xs font-black text-slate-700 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-2">
|
|
<Users className="w-4 h-4 text-[#0F6E56]" />
|
|
Employer Profile
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-xs">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Email Address</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.email || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Phone Number</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.phone || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Country / Location</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.country || 'United Arab Emirates'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subscription Plan Card */}
|
|
<div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-xs space-y-4">
|
|
<h3 className="text-xs font-black text-slate-700 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-2">
|
|
<BadgeDollarSign className="w-4 h-4 text-[#0F6E56]" />
|
|
Chosen Subscription Plan
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-xs">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Current Plan</span>
|
|
<span className={`inline-block px-2 py-0.5 rounded-md text-[10px] font-black uppercase tracking-tight ${
|
|
selectedEmployer?.subscription_status === 'active'
|
|
? 'bg-blue-50 text-blue-600 border border-blue-100'
|
|
: 'bg-slate-100 text-slate-500'
|
|
}`}>
|
|
{selectedEmployer?.subscription_status === 'active'
|
|
? (selectedEmployer?.sponsor?.subscription_plan || 'Active Premium Plan')
|
|
: 'No Active Plan'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Payment Status</span>
|
|
<span className="font-bold text-slate-800 uppercase">{selectedEmployer?.sponsor?.payment_status || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Plan Starts</span>
|
|
<span className="font-bold text-slate-800">{formatDate(selectedEmployer?.sponsor?.subscription_start_date)}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Plan Expires</span>
|
|
<span className="font-bold text-slate-800">{formatDate(selectedEmployer?.sponsor?.subscription_end_date)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Document Verification & OCR Extracted Details */}
|
|
<div className="bg-white p-5 border border-slate-200 rounded-2xl shadow-xs space-y-4">
|
|
<h3 className="text-xs font-black text-slate-700 uppercase tracking-widest border-b border-slate-100 pb-2 flex items-center gap-2">
|
|
<ShieldCheck className="w-4 h-4 text-[#0F6E56]" />
|
|
Emirates ID Details
|
|
</h3>
|
|
<div className="grid grid-cols-2 gap-4 text-xs">
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">ID Number</span>
|
|
<span className="font-mono font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_number || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Card Number</span>
|
|
<span className="font-mono font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_card_number || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Full Name</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_name || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Date of Birth</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_dob || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Nationality</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.nationality || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Gender</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_gender || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Issue Date</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_issue_date || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Expiry Date</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_expiry || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Occupation</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_occupation || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Employer</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_employer || 'N/A'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-wider block mb-0.5">Issuing Place</span>
|
|
<span className="font-bold text-slate-800">{selectedEmployer?.employer_profile?.emirates_id_issue_place || 'N/A'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 border-t border-slate-100 bg-slate-50 flex items-center justify-end gap-3 flex-shrink-0">
|
|
<button
|
|
onClick={() => setIsDetailsOpen(false)}
|
|
className="px-5 py-2.5 bg-slate-200 text-slate-700 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-300 transition-colors"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Edit Dialog */}
|
|
<Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
|
|
<DialogContent className="sm:max-w-xl w-full bg-white p-6 rounded-[24px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg font-black text-slate-800 uppercase tracking-wide">Edit Employer Details</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleEditSubmit} className="space-y-4 mt-4">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Full Name</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
|
|
value={editForm.name}
|
|
onChange={e => setEditForm({ ...editForm, name: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Email Address</label>
|
|
<input
|
|
type="email"
|
|
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
|
|
value={editForm.email}
|
|
onChange={e => setEditForm({ ...editForm, email: e.target.value })}
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Phone Number</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold focus:ring-4 focus:ring-teal-500/10 outline-none"
|
|
value={editForm.phone}
|
|
onChange={e => setEditForm({ ...editForm, phone: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end space-x-3 pt-4 border-t border-slate-100">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsEditOpen(false)}
|
|
className="px-4 py-2 bg-slate-100 text-slate-600 rounded-xl text-xs font-bold hover:bg-slate-200"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-5 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-black uppercase tracking-wider"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</AdminLayout>
|
|
);
|
|
}
|