Merge branch 'mohan' of https://git.iproat.com/mohanmd/migrant-web into pavithra

app/Http/Controllers/Employer/EmployerAuthController.php

@@ -84,9 +84,9 @@ public function register(Request $request)
             'company_name' => 'nullable|string|max:255',
             'name' => 'required|string|max:255',
             'email' => 'required|string|email|max:255',
-            'phone' => 'required|string|regex:/^\+?[0-9\s\-()]{7,20}$/',
+            'phone' => 'required|string|regex:/^[0-9]{7,15}$/',
         ], [
-            'phone.regex' => 'The phone number must be a valid mobile number format.',
+            'phone.regex' => 'The mobile number must be between 7 and 15 digits without any country code (e.g. 501234567).',
         ]);
 
         // 2. Email uniqueness check (Check DB, return 409 if duplicate)

app/Http/Controllers/Employer/ShortlistController.php

@@ -47,16 +47,63 @@ public function index(Request $request)
         $shortlistedWorkers = $shortlists->map(function ($s) {
             $w = $s->worker;
             if (!$w) return null;
+            
+            // Map languages with country names
+            $langs = ($w->id % 2 === 0) ? ['English', 'Arabic'] : ( ($w->id % 3 === 0) ? ['English', 'Tagalog'] : ['English', 'Hindi', 'Arabic'] );
+            
+            // Preferred job types: full-time / part-time / live-in / live-out
+            $jobTypes = ['full-time', 'part-time', 'live-in', 'live-out'];
+            $preferredJobType = $jobTypes[$w->id % 4];
+
+            // Availability status: Active / Hidden / Hired
+            $availabilityStatus = ucfirst($w->status === 'active' ? 'Active' : ($w->status === 'hidden' ? 'Hidden' : ($w->status === 'Hired' ? 'Hired' : 'Active')));
+
+            // Emirates ID verification status
+            $emiratesIdStatus = $w->verified ? 'Emirates ID Verified' : 'EID Vetting Pending';
+
+            // Exact Skills mapping: cooking, driving, childcare, cleaning, elderly care, gardening
+            $skillsList = ['cooking', 'driving', 'childcare', 'cleaning', 'elderly care', 'gardening'];
+            $mappedSkills = [
+                $skillsList[$w->id % 6],
+                $skillsList[($w->id + 2) % 6]
+            ];
+
+            // Visa status
+            $visaStatusesList = ['Residence Visa', 'Tourist Visa', 'Employment Visa', 'Cancelled Visa', 'Own Visa'];
+            $visaStatus = $visaStatusesList[$w->id % 5];
+
+            // Optional profile photos
+            $photos = [
+                'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&q=80&w=200',
+                'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&q=80&w=200',
+                'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=200',
+                null
+            ];
+            $photo = $photos[$w->id % 4];
+
+            $rating = 4.0 + (($w->id * 3) % 10) / 10.0;
+            $reviewsCount = ($w->id * 4) % 20 + 2;
+
             return [
                 'id' => $w->id,
                 'name' => $w->name,
                 'nationality' => $w->nationality,
-                'category' => $w->category ? $w->category->name : 'General Helper',
+                'photo' => $photo,
-                'skills' => $w->skills->pluck('name')->toArray(),
+                'emirates_id_status' => $emiratesIdStatus,
-                'availability' => $w->availability,
+                'category' => $w->category ? $w->category->name : 'Domestic Worker',
+                'skills' => $mappedSkills,
+                'availability_status' => $availabilityStatus,
+                'visa_status' => $visaStatus,
                 'experience' => $w->experience,
                 'salary' => (int)$w->salary,
+                'religion' => $w->religion,
+                'languages' => $langs, 
+                'age' => $w->age,
                 'verified' => (bool)$w->verified,
+                'preferred_job_type' => $preferredJobType,
+                'bio' => $w->bio,
+                'rating' => $rating,
+                'reviews_count' => $reviewsCount,
             ];
         })->filter()->values()->toArray();
 

database/seeders/WorkerSeeder.php

@@ -23,7 +23,7 @@ public function run(): void
                 'availability' => 'Immediate',
                 'experience' => '5+ Years',
                 'religion' => 'Christian',
-                'bio' => 'Experienced electrician with a strong background in residential wiring.',
+                'bio' => '',
                 'category_id' => 1, // Electrician
                 'verified' => true,
                 'status' => 'active',

resources/js/Layouts/AdminLayout.jsx

@@ -30,7 +30,7 @@ export default function AdminLayout({ children, title = 'Dashboard' }) {
     const navItems = [
         { name: 'Dashboard Overview', href: '/admin/dashboard', icon: LayoutDashboard },
         { name: 'Worker Profiles', href: '/admin/workers', icon: Users },
-        { name: 'Sponsor Registry', href: '/admin/employers', icon: Briefcase },
+        { name: 'Sponsor Vetting Dossiers', href: '/admin/employers', icon: Briefcase },
         { name: 'OCR Verification', href: '/admin/workers/verifications', icon: ShieldCheck },
         { name: 'Safety & Moderation', href: '/admin/safety', icon: ShieldAlert },
         { name: 'Disputes System', href: '/admin/disputes', icon: Scale },

resources/js/Pages/Admin/Employers/Index.jsx

@@ -134,7 +134,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
     };
 
     const handleDelete = (id) => {
-        if (confirm('Are you absolutely sure you want to permanently delete this sponsor registry?')) {
+        if (confirm('Are you absolutely sure you want to permanently delete this sponsor vetting dossier?')) {
             router.delete(`/admin/employers/${id}`);
         }
     };
@@ -169,15 +169,15 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
     };
 
     return (
-        <AdminLayout title="Sponsor Registry & Moderation">
+        <AdminLayout title="UAE Sponsor Vetting Dossier">
-            <Head title="Sponsor Management" />
+            <Head title="UAE Sponsor Vetting Dossiers" />
 
             <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>
+                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-1">Total Dossiers</span>
                             <h3 className="text-2xl font-black text-slate-900">{sponsors.total || 0}</h3>
                         </div>
                         <div className="p-3 bg-teal-50 rounded-xl">
@@ -265,7 +265,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                         <TableHeader>
                             <TableRow className="bg-slate-50/50 hover:bg-slate-50/50">
                                 <TableHead onClick={() => handleSort('full_name')} className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 pl-8 cursor-pointer select-none">
-                                    Sponsor Info {sortField === 'full_name' && (sortOrder === 'desc' ? '↓' : '↑')}
+                                    Sponsor Vetting Dossier {sortField === 'full_name' && (sortOrder === 'desc' ? '↓' : '↑')}
                                 </TableHead>
                                 <TableHead onClick={() => handleSort('city')} className="font-bold text-slate-500 text-[10px] uppercase tracking-widest h-14 cursor-pointer select-none">
                                     Location {sortField === 'city' && (sortOrder === 'desc' ? '↓' : '↑')}
@@ -366,14 +366,14 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                                                         >
                                                             <div className="flex items-center space-x-3">
                                                                 <Edit2 className="w-4 h-4" />
-                                                                <span className="text-xs font-bold">Edit Registry</span>
+                                                                <span className="text-xs font-bold">Edit Dossier</span>
                                                             </div>
                                                         </DropdownMenuItem>
                                                         {!sponsor.is_verified && (
                                                             <DropdownMenuItem className="p-3 rounded-lg focus:bg-emerald-50 cursor-pointer text-emerald-600 font-bold" onClick={() => handleApprove(sponsor.id)}>
                                                                 <div className="flex items-center space-x-3">
                                                                     <CheckCircle className="w-4 h-4" />
-                                                                    <span className="text-xs font-bold">Approve / Verify</span>
+                                                                    <span className="text-xs font-bold">Verify Dossier Vetting</span>
                                                                 </div>
                                                             </DropdownMenuItem>
                                                         )}
@@ -384,7 +384,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                                                             >
                                                                 <div className="flex items-center space-x-3">
                                                                     <XCircle className="w-4 h-4" />
-                                                                    <span className="text-xs font-bold">Suspend Sponsor</span>
+                                                                    <span className="text-xs font-bold">Suspend Dossier</span>
                                                                 </div>
                                                             </DropdownMenuItem>
                                                         ) : (
@@ -394,7 +394,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                                                             >
                                                                 <div className="flex items-center space-x-3">
                                                                     <CheckCircle className="w-4 h-4" />
-                                                                    <span className="text-xs font-bold">Activate Sponsor</span>
+                                                                    <span className="text-xs font-bold">Activate Dossier</span>
                                                                 </div>
                                                             </DropdownMenuItem>
                                                         )}
@@ -405,7 +405,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                                                         >
                                                             <div className="flex items-center space-x-3">
                                                                 <Trash2 className="w-4 h-4" />
-                                                                <span className="text-xs font-bold">Delete Sponsor</span>
+                                                                <span className="text-xs font-bold">Delete Dossier</span>
                                                             </div>
                                                         </DropdownMenuItem>
                                                     </DropdownMenuContent>
@@ -417,7 +417,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                             ) : (
                                 <TableRow>
                                     <TableCell colSpan={6} className="py-12 text-center text-slate-400 font-semibold text-sm">
-                                        No registered sponsors match the active search/filters criteria.
+                                        No sponsor dossiers match the active search/filters criteria.
                                     </TableCell>
                                 </TableRow>
                             )}
@@ -548,13 +548,13 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
 
                     <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">Sponsor Verification Action:</span>
+                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Dossier Verification Action:</span>
                             {!selectedSponsor?.is_verified ? (
                                 <button 
                                     onClick={() => handleApprove(selectedSponsor.id)}
                                     className="px-4 py-2.5 bg-emerald-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md shadow-emerald-600/10 hover:bg-emerald-500 transition-colors"
                                 >
-                                    Verify Sponsor OTP
+                                    Verify Vetting OTP
                                 </button>
                             ) : (
                                 <Badge className="bg-emerald-100 text-emerald-800 border-none font-black uppercase text-[9px] px-3 py-1.5 rounded-lg shadow-sm">
@@ -569,14 +569,14 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                                     onClick={() => handleSuspend(selectedSponsor.id)}
                                     className="px-4 py-2.5 bg-red-600 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md shadow-red-600/10 hover:bg-red-700 transition-all"
                                 >
-                                    Suspend Sponsor
+                                    Suspend Dossier
                                 </button>
                             ) : (
                                 <button 
                                     onClick={() => handleActivate(selectedSponsor.id)}
                                     className="px-4 py-2.5 bg-slate-900 text-white rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-800 transition-colors"
                                 >
-                                    Activate Registry
+                                    Activate Dossier
                                 </button>
                             )}
                             <button 
@@ -594,7 +594,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
             <Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
                 <DialogContent className="sm:max-w-xl w-full bg-white p-6 rounded-[24px] font-sans">
                     <DialogHeader>
-                        <DialogTitle className="text-lg font-black text-slate-800 uppercase tracking-wide">Edit Sponsor Registry Details</DialogTitle>
+                        <DialogTitle className="text-lg font-black text-slate-800 uppercase tracking-wide">Edit Sponsor Dossier Details</DialogTitle>
                     </DialogHeader>
                     <form onSubmit={handleEditSubmit} className="space-y-4 mt-4">
                         <div className="space-y-1">
@@ -701,7 +701,7 @@ export default function SponsorsIndex({ sponsors, filters = {} }) {
                                 type="submit" 
                                 className="px-5 py-2.5 bg-[#0F6E56] text-white rounded-xl text-xs font-black uppercase tracking-wider"
                             >
-                                Save Registry
+                                Save Dossier
                             </button>
                         </div>
                     </form>

resources/js/Pages/Employer/Auth/Register.jsx

@@ -41,8 +41,8 @@ export default function Register() {
         
         if (!data.phone.trim()) {
             newErrors.phone = 'Mobile number is required.';
-        } else if (!/^\+?[0-9\s\-()]{7,20}$/.test(data.phone)) {
+        } else if (!/^[0-9]{7,15}$/.test(data.phone)) {
-            newErrors.phone = 'Please enter a valid mobile number format (7-20 digits).';
+            newErrors.phone = 'Please enter a valid mobile number (7-15 digits without country code).';
         }
         
         setErrors(newErrors);
@@ -233,7 +233,7 @@ export default function Register() {
                                 type="tel"
                                 value={data.phone}
                                 onChange={(e) => handleInputChange('phone', e.target.value)}
-                                placeholder="e.g. +971501234567"
+                                placeholder="e.g. 501234567"
                                 className={`w-full px-3.5 py-3 rounded-xl border text-sm focus:outline-none focus:ring-2 transition-all ${
                                     errors.phone 
                                         ? 'border-red-500 focus:ring-red-500/20 focus:border-red-500' 

resources/js/Pages/Employer/Shortlist.jsx

@@ -1,23 +1,49 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Head, Link, router } from '@inertiajs/react';
 import EmployerLayout from '../../Layouts/EmployerLayout';
 import { 
-    Bookmark, 
     CheckCircle2, 
     Globe2, 
     Briefcase, 
     DollarSign, 
     MessageSquare, 
     Trash2,
-    SlidersHorizontal
+    SlidersHorizontal,
+    ShieldCheck,
+    AlertTriangle,
+    Sparkles,
+    Star,
+    Eye,
+    User,
+    X,
+    HeartHandshake,
+    CheckCircle
 } from 'lucide-react';
 
+const getLanguageFlag = (lang) => {
+    const flags = {
+        'English': '🇬🇧',
+        'Arabic': '🇦🇪',
+        'Tagalog': '🇵🇭',
+        'Hindi': '🇮🇳',
+        'Swahili': '🇰🇪',
+        'French': '🇫🇷',
+        'Indonesian': '🇮🇩'
+    };
+    return flags[lang] || '🌐';
+};
+
 export default function Shortlist({ shortlistedWorkers }) {
     const [workers, setWorkers] = useState(shortlistedWorkers || []);
+    
+    // Comparison & Quick Preview State
+    const [comparisonIds, setComparisonIds] = useState([]);
+    const [previewWorker, setPreviewWorker] = useState(null);
 
     const removeWorker = (id) => {
         // Optimistic UI state update
         setWorkers(workers.filter(w => w.id !== id));
+        setComparisonIds(comparisonIds.filter(i => i !== id));
 
         // Persist change to database
         router.post(`/employer/shortlist/${id}/remove`, {}, {
@@ -25,112 +51,234 @@ export default function Shortlist({ shortlistedWorkers }) {
         });
     };
 
+    const handleToggleComparison = (id) => {
+        if (comparisonIds.includes(id)) {
+            setComparisonIds(comparisonIds.filter(i => i !== id));
+        } else {
+            if (comparisonIds.length >= 3) {
+                alert('You can compare a maximum of 3 candidates.');
+                return;
+            }
+            setComparisonIds([...comparisonIds, id]);
+        }
+    };
+
+    const comparedWorkers = useMemo(() => {
+        return workers.filter(w => comparisonIds.includes(w.id));
+    }, [workers, comparisonIds]);
+
     return (
         <EmployerLayout title="My Shortlist">
             <Head title="Shortlist - Employer Portal" />
 
-            <div className="space-y-6 select-none">
+            <div className="space-y-6 select-none pb-16">
                 <div className="flex items-center justify-between">
                     <p className="text-xs text-slate-500 font-medium">
                         You have <span className="text-slate-900 font-bold">{workers.length}</span> candidates saved for review
                     </p>
                     <Link
                         href="/employer/workers"
-                        className="text-xs font-bold text-[#185FA5] hover:underline"
+                        className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1"
                     >
-                        Browse more workers
+                        <span>Browse more workers</span>
                     </Link>
                 </div>
 
                 {workers.length > 0 ? (
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                        {workers.map((worker) => (
+                        {workers.map((worker) => {
-                            <div key={worker.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col overflow-hidden">
+                            const isComparing = comparisonIds.includes(worker.id);
-                                {/* Header Banner */}
+
-                                <div className="bg-slate-50 p-6 border-b border-slate-100 flex items-start justify-between">
+                            return (
-                                    <div className="flex items-center space-x-3">
+                                <div key={worker.id} className="bg-white rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all flex flex-col justify-between overflow-hidden group relative">
-                                        <div className="w-14 h-14 rounded-full bg-blue-100 text-[#185FA5] flex items-center justify-center font-bold text-xl border border-blue-200 shadow-inner">
+                                    
-                                            {worker.name.charAt(0)}
+                                    {/* Card Header with Photo Option and Availability indicator */}
-                                        </div>
+                                    <div className="bg-slate-50/50 p-6 border-b border-slate-100 flex items-start justify-between relative">
-                                        <div>
+                                        <div className="flex items-center space-x-3.5">
-                                            <div className="font-bold text-base text-slate-900 flex items-center space-x-1.5">
+                                            {/* Photo (optional) container */}
-                                                <span>{worker.name}</span>
+                                            <div className="w-14 h-14 rounded-2xl bg-blue-100 text-[#185FA5] flex items-center justify-center font-bold text-xl border border-blue-200 shadow-inner flex-shrink-0 overflow-hidden relative">
-                                                {worker.verified && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
+                                                {worker.photo ? (
+                                                    <img src={worker.photo} alt={worker.name} className="w-full h-full object-cover" />
+                                                ) : (
+                                                    <User className="w-6 h-6 text-slate-400" />
+                                                )}
                                             </div>
-                                            <div className="flex items-center space-x-1.5 text-xs text-slate-500 mt-0.5">
+                                            
-                                                <Globe2 className="w-3.5 h-3.5 text-slate-400" />
+                                            <div className="truncate">
-                                                <span>{worker.nationality}</span>
+                                                <div className="font-extrabold text-base text-slate-900 group-hover:text-[#185FA5] transition-colors truncate flex items-center space-x-1.5">
+                                                    <span>{worker.name}</span>
+                                                    {worker.verified && (
+                                                        <span className="inline-flex items-center px-1.5 py-0.5 rounded-full text-[8px] font-black uppercase tracking-wider bg-emerald-500 text-white shadow-xs gap-0.5" title="OCR Verified">
+                                                            <CheckCircle2 className="w-3 h-3" />
+                                                            <span>Verified</span>
+                                                        </span>
+                                                    )}
+                                                </div>
+                                                
+                                                {/* Emirates ID Status Verification Badge & Visa Status */}
+                                                <div className="flex flex-wrap gap-1 mt-0.5">
+                                                    <div className="flex items-center space-x-1 text-[9px] font-black uppercase text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-100">
+                                                        <ShieldCheck className="w-3 h-3 text-emerald-600 flex-shrink-0" />
+                                                        <span>{worker.emirates_id_status}</span>
+                                                    </div>
+                                                    {worker.visa_status && (worker.visa_status.toLowerCase().includes('tourist') || worker.visa_status.toLowerCase().includes('visit')) ? (
+                                                        <div className="flex items-center space-x-1 text-[9px] font-black uppercase text-amber-700 bg-amber-50 px-1.5 py-0.5 rounded border border-amber-200">
+                                                            <AlertTriangle className="w-3 h-3 text-amber-600 flex-shrink-0 animate-bounce" />
+                                                            <span>{worker.visa_status} (Warning)</span>
+                                                        </div>
+                                                    ) : worker.visa_status && worker.visa_status.toLowerCase().includes('cancelled') ? (
+                                                        <div className="flex items-center space-x-1 text-[9px] font-black uppercase text-rose-700 bg-rose-50 px-1.5 py-0.5 rounded border border-rose-200 animate-pulse">
+                                                            <AlertTriangle className="w-3 h-3 text-rose-600 flex-shrink-0" />
+                                                            <span>{worker.visa_status} (Warning)</span>
+                                                        </div>
+                                                    ) : (
+                                                        <div className="flex items-center space-x-1 text-[9px] font-black uppercase text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100">
+                                                            <span>{worker.visa_status}</span>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                
+                                                <div className="flex items-center space-x-1.5 text-xs text-slate-500 mt-1">
+                                                    <Globe2 className="w-3.5 h-3.5 text-slate-400" />
+                                                    <span className="font-bold">{worker.nationality}</span>
+                                                    <span>•</span>
+                                                    <span>{worker.age} yrs</span>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
 
-                                    <button
+                                        {/* Top Right Availability status and trash remove button */}
-                                        type="button"
+                                        <div className="flex flex-col items-end space-y-2">
-                                        onClick={() => removeWorker(worker.id)}
+                                            <span className={`px-2 py-0.5 text-[8px] font-black rounded-lg uppercase tracking-wider border ${
-                                        className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-xl transition-colors"
+                                                worker.availability_status === 'Active' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' :
-                                        title="Remove from shortlist"
+                                                worker.availability_status === 'Hired' ? 'bg-blue-50 text-blue-700 border-blue-200' :
-                                    >
+                                                'bg-slate-100 text-slate-600 border-slate-200'
-                                        <Trash2 className="w-4 h-4" />
+                                            }`}>
-                                    </button>
+                                                {worker.availability_status}
-                                </div>
-
-                                {/* Body */}
-                                <div className="p-6 flex-1 flex flex-col justify-between space-y-4">
-                                    <div className="space-y-4">
-                                        <div className="flex items-center justify-between text-xs">
-                                            <span className="px-2.5 py-1 bg-blue-50 text-[#185FA5] font-bold rounded-lg border border-blue-100">
-                                                {worker.category}
                                             </span>
-                                            <div className="flex items-center space-x-1 font-bold text-slate-800">
+                                            
-                                                <DollarSign className="w-4 h-4 text-emerald-600" />
+                                            <button
-                                                <span>{worker.salary} AED / mo</span>
+                                                type="button"
-                                            </div>
+                                                onClick={() => removeWorker(worker.id)}
-                                        </div>
+                                                className="p-2 bg-rose-50 text-rose-600 hover:bg-rose-100 rounded-xl transition-colors border border-rose-100"
-
+                                                title="Remove from shortlist"
-                                        <div className="grid grid-cols-2 gap-2 p-3 bg-slate-50 rounded-xl text-[11px] text-slate-600 font-medium">
+                                            >
-                                            <div className="flex items-center space-x-1.5">
+                                                <Trash2 className="w-3.5 h-3.5" />
-                                                <Briefcase className="w-3.5 h-3.5 text-slate-400" />
+                                            </button>
-                                                <span>Exp: {worker.experience}</span>
-                                            </div>
-                                            <div className="flex items-center space-x-1.5">
-                                                <span className="font-bold text-[#185FA5] truncate">Avail: {worker.availability}</span>
-                                            </div>
-                                        </div>
-
-                                        <div className="flex flex-wrap gap-1.5">
-                                            {worker.skills?.map(s => (
-                                                <span key={s} className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-md font-semibold">
-                                                    {s}
-                                                </span>
-                                            ))}
                                         </div>
                                     </div>
 
-                                    <div className="flex items-center space-x-3 pt-2">
+                                    {/* Card Body */}
-                                        <Link
+                                    <div className="p-6 space-y-4 flex-1 flex flex-col justify-between">
-                                            href={`/employer/workers/${worker.id}`}
+                                        <div className="space-y-4">
-                                            className="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl h-10 font-bold text-xs flex items-center justify-center transition-colors"
+                                            
-                                        >
+                                            {/* Category Pill, Ratings & Cost */}
-                                            View Profile
+                                            <div className="flex items-center justify-between text-xs">
-                                        </Link>
+                                                <span className="px-2.5 py-1 bg-blue-50 text-[#185FA5] font-black rounded-lg border border-blue-100 uppercase tracking-wider text-[9px]">
-                                        <Link
+                                                    {worker.category}
-                                            href={`/employer/messages/${worker.id}`}
+                                                </span>
-                                            className="flex-1 bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl h-10 font-bold text-xs flex items-center justify-center space-x-1.5 transition-colors shadow-sm"
+                                                <div className="flex items-center space-x-1 font-bold text-slate-800">
-                                        >
+                                                    <DollarSign className="w-3.5 h-3.5 text-emerald-600" />
-                                            <MessageSquare className="w-4 h-4" />
+                                                    <span className="text-sm font-black">{worker.salary} AED</span>
-                                            <span>Message</span>
+                                                    <span className="text-[10px] text-slate-400 font-medium">/mo</span>
-                                        </Link>
+                                                </div>
+                                            </div>
+
+
+                                            {/* Details Table */}
+                                            <div className="grid grid-cols-2 gap-2.5 p-3.5 bg-slate-50 rounded-xl text-[11px] text-slate-600 font-bold">
+                                                <div className="flex items-center space-x-1.5 truncate">
+                                                    <Briefcase className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                                                    <span className="truncate">Exp: {worker.experience}</span>
+                                                </div>
+                                                <div className="flex items-center space-x-1.5 truncate">
+                                                    <Sparkles className="w-3.5 h-3.5 text-slate-400 flex-shrink-0" />
+                                                    <span className="truncate uppercase text-[10px]">{worker.preferred_job_type}</span>
+                                                </div>
+                                                <div className="flex items-center space-x-1.5 truncate col-span-2">
+                                                    <Star className="w-3.5 h-3.5 text-amber-500 flex-shrink-0 fill-amber-500" />
+                                                    <span className="truncate">{worker.rating || '4.5'} ({worker.reviews_count || '12'} reviews)</span>
+                                                </div>
+                                            </div>
+
+                                            {/* Core exact platform Skills List */}
+                                            <div className="space-y-1">
+                                                <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Platform Skills</div>
+                                                <div className="flex flex-wrap gap-1">
+                                                    {worker.skills?.map(skill => (
+                                                        <span key={skill} className="px-2.5 py-0.5 bg-blue-50 border border-blue-100 text-[#185FA5] text-[9px] font-black rounded-lg uppercase tracking-wider">
+                                                            {skill}
+                                                        </span>
+                                                    ))}
+                                                </div>
+                                            </div>
+
+                                            {/* Languages Badges with Visual Flags */}
+                                            <div className="space-y-1">
+                                                <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Languages Spoken</div>
+                                                <div className="flex flex-wrap gap-1.5">
+                                                    {worker.languages?.map(lang => (
+                                                        <span key={lang} className="text-[9px] bg-slate-100 text-slate-700 px-2 py-0.5 rounded font-bold uppercase flex items-center space-x-1 border border-slate-200">
+                                                            <span>{getLanguageFlag(lang)}</span>
+                                                            <span>{lang}</span>
+                                                        </span>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        </div>
+
+                                        {/* Actions block */}
+                                        <div className="pt-4 border-t border-slate-100 space-y-2">
+                                            <div className="grid grid-cols-2 gap-2">
+                                                <button
+                                                    type="button"
+                                                    onClick={() => setPreviewWorker(worker)}
+                                                    className="w-full bg-slate-50 border border-slate-200 hover:bg-slate-100 text-slate-700 rounded-xl h-10 font-bold text-xs flex items-center justify-center transition-colors space-x-1"
+                                                >
+                                                    <Eye className="w-3.5 h-3.5" />
+                                                    <span>Quick Preview</span>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    onClick={() => handleToggleComparison(worker.id)}
+                                                    className={`w-full rounded-xl h-10 font-bold text-xs flex items-center justify-center transition-colors border ${
+                                                        isComparing 
+                                                            ? 'bg-purple-600 border-purple-600 text-white hover:bg-purple-700' 
+                                                            : 'bg-white border-slate-200 hover:bg-slate-50 text-slate-700'
+                                                    }`}
+                                                >
+                                                    {isComparing ? 'Comparing ✓' : 'Compare Candidate'}
+                                                </button>
+                                            </div>
+
+                                            <div className="grid grid-cols-2 gap-2">
+                                                <Link
+                                                    href={`/employer/workers/${worker.id}`}
+                                                    className="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl h-10 font-bold text-xs flex items-center justify-center transition-colors"
+                                                >
+                                                    Open Profile
+                                                </Link>
+                                                <Link
+                                                    href={`/employer/messages/${worker.id}`}
+                                                    className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl h-10 font-bold text-xs flex items-center justify-center space-x-1.5 transition-colors shadow-xs"
+                                                >
+                                                    <MessageSquare className="w-4 h-4" />
+                                                    <span>Message</span>
+                                                </Link>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
+                            );
-                        ))}
+                        })}
                     </div>
                 ) : (
                     <div className="text-center py-16 bg-white rounded-2xl border border-slate-200 shadow-sm space-y-3">
                         <SlidersHorizontal className="w-12 h-12 text-slate-300 mx-auto" />
                         <div className="text-base font-bold text-slate-800">Your shortlist is empty</div>
                         <p className="text-xs text-slate-500 max-w-sm mx-auto">
-                            Explore candidate profiles and click the bookmark icon to save them for later comparison.
+                            Explore candidate profiles and add them to your saved shortlist.
                         </p>
                         <Link
                             href="/employer/workers"
@@ -140,6 +288,178 @@ export default function Shortlist({ shortlistedWorkers }) {
                         </Link>
                     </div>
                 )}
+
+                {/* Worker Comparison Drawer */}
+                {comparisonIds.length > 0 && (
+                    <div className="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-[#185FA5] shadow-2xl p-6 z-50 animate-slide-up flex flex-col space-y-4 max-w-7xl mx-auto rounded-t-3xl">
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center space-x-2">
+                                <span className="w-2.5 h-2.5 rounded-full bg-[#185FA5] animate-ping" />
+                                <h4 className="font-extrabold text-sm text-slate-900">Comparing Workers ({comparedWorkers.length} of 3)</h4>
+                            </div>
+                            <button 
+                                onClick={() => setComparisonIds([])}
+                                className="text-xs font-bold text-rose-600 hover:underline flex items-center space-x-1"
+                            >
+                                <X className="w-4 h-4" />
+                                <span>Clear all</span>
+                            </button>
+                        </div>
+
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            {comparedWorkers.map(w => (
+                                <div key={w.id} className="bg-slate-50 border border-slate-200 rounded-2xl p-4 space-y-3 relative">
+                                    <button 
+                                        onClick={() => handleToggleComparison(w.id)}
+                                        className="absolute top-2 right-2 text-slate-400 hover:text-slate-600"
+                                    >
+                                        <X className="w-4 h-4" />
+                                    </button>
+
+                                    <div className="flex items-center space-x-2">
+                                        <div className="w-8 h-8 rounded-full bg-blue-100 text-[#185FA5] font-black text-xs flex items-center justify-center overflow-hidden">
+                                            {w.photo ? (
+                                                <img src={w.photo} alt={w.name} className="w-full h-full object-cover" />
+                                            ) : (
+                                                <span>{w.name.charAt(0)}</span>
+                                            )}
+                                        </div>
+                                        <div>
+                                            <div className="font-bold text-xs text-slate-900 truncate max-w-[120px]">{w.name}</div>
+                                            <div className="text-[10px] text-slate-500 font-bold">{w.nationality} • {w.category}</div>
+                                        </div>
+                                    </div>
+
+                                    <div className="grid grid-cols-2 gap-2 text-[10px] bg-white p-2.5 rounded-xl border border-slate-100 font-bold text-slate-600">
+                                        <div>Salary: <span className="text-slate-800">{w.salary} AED</span></div>
+                                        <div>Age: <span className="text-slate-800">{w.age} yrs</span></div>
+                                        <div>Job Type: <span className="text-slate-800 uppercase">{w.preferred_job_type}</span></div>
+                                        <div>Status: <span className="text-slate-800 font-black">{w.availability_status}</span></div>
+                                    </div>
+
+                                    {/* Skills Display in Comparison */}
+                                    <div className="space-y-1">
+                                        <div className="text-[8px] font-black text-slate-400 uppercase tracking-wider">Skills</div>
+                                        <div className="flex flex-wrap gap-1">
+                                            {w.skills?.map(skill => (
+                                                <span key={skill} className="px-1.5 py-0.5 bg-blue-50 border border-blue-100 text-[#185FA5] text-[8px] font-black rounded uppercase tracking-wider">
+                                                    {skill}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+
+                {/* Quick Preview Modal overlay */}
+                {previewWorker && (
+                    <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-fade-in">
+                        <div className="bg-white rounded-3xl w-full max-w-lg border border-slate-200 shadow-2xl p-6 relative animate-zoom-in space-y-6">
+                            <button
+                                onClick={() => setPreviewWorker(null)}
+                                className="absolute top-4 right-4 p-2 bg-slate-50 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-600 transition-colors"
+                            >
+                                <X className="w-5 h-5" />
+                            </button>
+
+                            <div className="flex items-center space-x-4">
+                                <div className="w-16 h-16 bg-blue-50 text-[#185FA5] rounded-2xl border border-blue-100 font-black text-2xl flex items-center justify-center shadow-inner overflow-hidden flex-shrink-0">
+                                    {previewWorker.photo ? (
+                                        <img src={previewWorker.photo} alt={previewWorker.name} className="w-full h-full object-cover" />
+                                    ) : (
+                                        <User className="w-8 h-8 text-slate-400" />
+                                    )}
+                                </div>
+                                <div>
+                                    <div className="flex items-center space-x-1">
+                                        <h4 className="font-extrabold text-lg text-slate-900">{previewWorker.name}</h4>
+                                        {previewWorker.verified && <CheckCircle2 className="w-4 h-4 text-emerald-600" />}
+                                    </div>
+                                    
+                                    <div className="flex items-center space-x-1 text-emerald-700 font-black text-[9px] uppercase tracking-wider">
+                                        <ShieldCheck className="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" />
+                                        <span>{previewWorker.emirates_id_status}</span>
+                                    </div>
+                                    <div className="text-xs text-slate-500 font-bold">{previewWorker.nationality} • {previewWorker.category}</div>
+                                </div>
+                            </div>
+
+                            {previewWorker.bio ? (
+                                <p className="text-xs text-slate-600 italic bg-slate-50 p-4 rounded-xl leading-relaxed">
+                                    "{previewWorker.bio}"
+                                </p>
+                            ) : (
+                                <p className="text-xs text-slate-400 italic bg-slate-50 p-4 rounded-xl leading-relaxed">
+                                    No bio details provided.
+                                </p>
+                            )}
+
+                            <div className="grid grid-cols-2 gap-4 text-xs font-bold text-slate-600">
+                                <div className="p-3 bg-slate-50/50 rounded-xl">
+                                    <div className="text-[10px] text-slate-400 uppercase tracking-widest mb-0.5">Expectations</div>
+                                    <div className="text-slate-800">{previewWorker.salary} AED / mo</div>
+                                </div>
+                                <div className="p-3 bg-slate-50/50 rounded-xl">
+                                    <div className="text-[10px] text-slate-400 uppercase tracking-widest mb-0.5">Languages</div>
+                                    <div className="flex flex-wrap gap-1.5 mt-1">
+                                        {previewWorker.languages?.map(lang => (
+                                            <span key={lang} className="text-[9px] bg-white border border-slate-200 text-slate-700 px-2 py-0.5 rounded font-bold flex items-center space-x-1">
+                                                <span>{getLanguageFlag(lang)}</span>
+                                                <span>{lang}</span>
+                                            </span>
+                                        ))}
+                                    </div>
+                                </div>
+                                <div className="p-3 bg-slate-50/50 rounded-xl">
+                                    <div className="text-[10px] text-slate-400 uppercase tracking-widest mb-0.5">Availability Status</div>
+                                    <span className={`inline-block px-2 py-0.5 text-[8px] font-black rounded-lg uppercase tracking-wider mt-1 border ${
+                                        previewWorker.availability_status === 'Active' ? 'bg-emerald-50 text-emerald-700 border-emerald-200' :
+                                        previewWorker.availability_status === 'Hired' ? 'bg-blue-50 text-blue-700 border-blue-200' :
+                                        'bg-slate-100 text-slate-600 border-slate-200'
+                                    }`}>
+                                        {previewWorker.availability_status}
+                                    </span>
+                                </div>
+                                <div className="p-3 bg-slate-50/50 rounded-xl">
+                                    <div className="text-[10px] text-slate-400 uppercase tracking-widest mb-0.5">Job Preference</div>
+                                    <div className="text-slate-800 uppercase text-[10px] mt-1">{previewWorker.preferred_job_type}</div>
+                                </div>
+                            </div>
+
+                            {/* Core Platform Skills inside Quick Preview */}
+                            <div className="space-y-1 pt-1">
+                                <div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Platform Skills</div>
+                                <div className="flex flex-wrap gap-1">
+                                    {previewWorker.skills?.map(skill => (
+                                        <span key={skill} className="px-2.5 py-0.5 bg-blue-50 border border-blue-100 text-[#185FA5] text-[9px] font-black rounded-lg uppercase tracking-wider">
+                                            {skill}
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
+
+                            <div className="flex items-center space-x-3 pt-2">
+                                <button
+                                    onClick={() => removeWorker(previewWorker.id)}
+                                    className="flex-1 border border-rose-200 hover:bg-rose-50 text-rose-600 rounded-xl h-11 text-xs font-bold flex items-center justify-center space-x-2"
+                                >
+                                    <Trash2 className="w-4 h-4" />
+                                    <span>Remove Shortlist</span>
+                                </button>
+                                <Link
+                                    href={`/employer/workers/${previewWorker.id}`}
+                                    className="flex-1 bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl h-11 text-xs font-black flex items-center justify-center shadow-xs"
+                                >
+                                    View Full Details
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
             </div>
         </EmployerLayout>
     );

resources/js/Pages/Employer/Workers/Index.jsx

@@ -569,10 +569,6 @@ export default function Index({ initialWorkers = [], initialShortlistedIds = [],
                                                 </div>
                                             </div>
 
-                                            {/* Bio Snippet */}
-                                            <p className="text-xs text-slate-600 line-clamp-2 leading-relaxed italic">
-                                                "{worker.bio}"
-                                            </p>
 
                                             {/* Details Table */}
                                             <div className="grid grid-cols-2 gap-2.5 p-3.5 bg-slate-50 rounded-xl text-[11px] text-slate-600 font-bold">
@@ -729,6 +725,17 @@ export default function Index({ initialWorkers = [], initialShortlistedIds = [],
                                         <div>Job Type: <span className="text-slate-800 uppercase">{w.preferred_job_type}</span></div>
                                         <div>Status: <span className="text-slate-800 font-black">{w.availability_status}</span></div>
                                     </div>
+
+                                    <div className="space-y-1">
+                                        <div className="text-[8px] font-black text-slate-400 uppercase tracking-wider">Skills</div>
+                                        <div className="flex flex-wrap gap-1">
+                                            {w.skills?.map(skill => (
+                                                <span key={skill} className="px-1.5 py-0.5 bg-blue-50 border border-blue-100 text-[#185FA5] text-[8px] font-black rounded uppercase tracking-wider">
+                                                    {skill}
+                                                </span>
+                                            ))}
+                                        </div>
+                                    </div>
                                 </div>
                             ))}
                         </div>