234 lines
15 KiB
JavaScript
234 lines
15 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
|
|
} 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';
|
|
|
|
export default function WorkerManagement({ workers }) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('all');
|
|
|
|
const handleToggleStatus = (id, currentStatus) => {
|
|
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
|
|
router.post(`/admin/workers/${id}/toggle-status`, { status: newStatus });
|
|
};
|
|
|
|
const filteredWorkers = workers.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">Worker Management</h1>
|
|
<p className="text-sm text-gray-500 mt-1">View and manage worker availability and account status.</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button className="inline-flex items-center px-4 py-2 bg-white border border-gray-200 text-[#0F6E56] rounded-xl text-sm font-bold hover:bg-gray-50 transition-colors shadow-sm space-x-2">
|
|
<Download className="w-4 h-4" />
|
|
<span>Export Data</span>
|
|
</button>
|
|
<Link
|
|
href="/admin/workers/verifications"
|
|
className="inline-flex items-center px-4 py-2 bg-[#0F6E56] text-white rounded-xl text-sm font-bold hover:bg-[#085041] transition-colors shadow-sm"
|
|
>
|
|
View Verifications
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters & Search */}
|
|
<div className="bg-white p-4 rounded-2xl border border-gray-100 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 or email..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full pl-10 pr-4 py-2.5 bg-gray-50 border-transparent rounded-xl text-sm focus:bg-white focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] transition-all"
|
|
/>
|
|
</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">Status:</span>
|
|
<div className="flex bg-gray-100 p-1 rounded-xl">
|
|
{['all', 'active', 'inactive'].map((f) => (
|
|
<button
|
|
key={f}
|
|
onClick={() => setStatusFilter(f)}
|
|
className={`px-4 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-gray-100 shadow-sm overflow-hidden">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-gray-50/50 hover:bg-gray-50/50">
|
|
<TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4 pl-8">Worker Information</TableHead>
|
|
<TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Contact Info</TableHead>
|
|
<TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Category & Exp</TableHead>
|
|
<TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Documents</TableHead>
|
|
<TableHead className="font-black text-gray-400 text-[10px] uppercase tracking-widest py-4">Status</TableHead>
|
|
<TableHead className="font-black text-gray-400 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-gray-50/50 transition-colors">
|
|
<TableCell className="py-4">
|
|
<div className="flex items-center gap-3 pl-4">
|
|
<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">{worker.name}</div>
|
|
<div className="text-xs text-gray-400 font-medium mt-0.5">{worker.email}</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center space-x-2 text-slate-600">
|
|
<Phone className="w-3.5 h-3.5 text-slate-400" />
|
|
<span className="text-xs font-bold">{worker.phone || '+971 50 000 0000'}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="space-y-1">
|
|
<div className="text-sm font-medium text-gray-700 flex items-center gap-1.5">
|
|
<Briefcase className="w-3.5 h-3.5 text-gray-400" /> {worker.category}
|
|
</div>
|
|
<div className="text-xs text-gray-500 flex items-center gap-1.5">
|
|
<Globe className="w-3.5 h-3.5 text-gray-400" /> {worker.nationality} • {worker.experience}
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center space-x-1.5">
|
|
<div className="p-1.5 bg-emerald-50 rounded-lg">
|
|
<FileText className="w-4 h-4 text-emerald-500" />
|
|
</div>
|
|
<span className="text-[10px] font-black text-emerald-600 uppercase">Verified</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge
|
|
variant="outline"
|
|
className={`px-3 py-1 rounded-full font-bold text-[10px] uppercase tracking-wider ${
|
|
worker.status === 'active'
|
|
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
|
: 'bg-red-50 text-red-700 border-red-200'
|
|
}`}
|
|
>
|
|
{worker.status === 'active' ? (
|
|
<CheckCircle2 className="w-3 h-3 mr-1" />
|
|
) : (
|
|
<XCircle className="w-3 h-3 mr-1" />
|
|
)}
|
|
{worker.status}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right pr-8">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="p-2 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none">
|
|
<MoreHorizontal className="w-5 h-5 text-gray-400" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48 p-2 rounded-xl shadow-xl border-gray-100">
|
|
<DropdownMenuLabel className="text-[10px] font-bold text-gray-400 uppercase px-2 mb-1">Account Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => handleToggleStatus(worker.id, worker.status)}
|
|
className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs ${
|
|
worker.status === 'active'
|
|
? 'text-red-600 hover:bg-red-50'
|
|
: 'text-emerald-600 hover:bg-emerald-50'
|
|
}`}
|
|
>
|
|
{worker.status === 'active' ? (
|
|
<><UserX className="w-4 h-4" /> Deactivate Account</>
|
|
) : (
|
|
<><UserCheck className="w-4 h-4" /> Activate Account</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className="my-1" />
|
|
<DropdownMenuItem className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs text-gray-600 hover:bg-gray-50">
|
|
<Mail className="w-4 h-4" /> Send Message
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="flex items-center gap-2 p-2 rounded-lg cursor-pointer font-semibold text-xs text-gray-600 hover:bg-gray-50">
|
|
<Users className="w-4 h-4" /> View Full Profile
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="py-20 text-center">
|
|
<Users className="w-12 h-12 text-gray-200 mx-auto mb-3" />
|
|
<div className="font-bold text-gray-400">No workers found matching your criteria.</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
);
|
|
}
|