1093 lines
81 KiB
JavaScript
1093 lines
81 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import EmployerLayout from '../../../Layouts/EmployerLayout';
|
|
import { useTranslation } from '../../../lib/LanguageContext';
|
|
import {
|
|
CheckCircle2,
|
|
Globe2,
|
|
Briefcase,
|
|
DollarSign,
|
|
Calendar,
|
|
HeartHandshake,
|
|
Languages,
|
|
MessageSquare,
|
|
Bookmark,
|
|
ArrowLeft,
|
|
Sparkles,
|
|
FileText,
|
|
ShieldCheck,
|
|
Search,
|
|
Star,
|
|
Share2,
|
|
Flag,
|
|
X,
|
|
UserCheck,
|
|
AlertTriangle,
|
|
User,
|
|
Phone,
|
|
MapPin
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
const getLanguageFlag = (lang) => {
|
|
const flags = {
|
|
'English': '🇬🇧',
|
|
'Arabic': '🇦🇪',
|
|
'Tagalog': '🇵🇭',
|
|
'Hindi': '🇮🇳',
|
|
'Swahili': '🇰🇪',
|
|
'French': '🇫🇷',
|
|
'Indonesian': '🇮🇩'
|
|
};
|
|
return flags[lang] || '🌐';
|
|
};
|
|
|
|
const getExpiryStatus = (expiryDate) => {
|
|
if (!expiryDate) return { text: 'Expiry Pending', color: 'text-slate-500 bg-slate-50 border-slate-200' };
|
|
const expiry = new Date(expiryDate);
|
|
const today = new Date();
|
|
expiry.setHours(0,0,0,0);
|
|
today.setHours(0,0,0,0);
|
|
|
|
const diffTime = expiry.getTime() - today.getTime();
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffDays < 0) {
|
|
return {
|
|
text: 'Expired',
|
|
color: 'text-rose-700 bg-rose-50 border-rose-200 font-black'
|
|
};
|
|
} else if (diffDays === 0) {
|
|
return {
|
|
text: 'Expires today',
|
|
color: 'text-amber-700 bg-amber-50 border-amber-200 font-black'
|
|
};
|
|
} else {
|
|
return {
|
|
text: `Valid until ${expiryDate}`,
|
|
color: 'text-emerald-700 bg-emerald-50 border-emerald-150 font-black'
|
|
};
|
|
}
|
|
};
|
|
|
|
const safeRender = (value) => {
|
|
if (value === null || value === undefined) return 'N/A';
|
|
if (typeof value === 'object') {
|
|
if (value.name) return String(value.name);
|
|
if (value.full_name) return String(value.full_name);
|
|
return JSON.stringify(value);
|
|
}
|
|
return String(value);
|
|
};
|
|
|
|
export default function Show({ worker }) {
|
|
const { t } = useTranslation();
|
|
const passportDoc = worker.documents?.find(d => d.type === 'passport');
|
|
const emiratesIdDoc = worker.documents?.find(d => d.type === 'emirates_id' || d.type === 'eid');
|
|
const visaDoc = worker.documents?.find(d => d.type === 'visa');
|
|
|
|
const [showReportModal, setShowReportModal] = useState(false);
|
|
const [reportReason, setReportReason] = useState('');
|
|
const [reportDetails, setReportDetails] = useState('');
|
|
const [isShortlisted, setIsShortlisted] = useState(false);
|
|
|
|
// Hiring flow states
|
|
const [availabilityStatus, setAvailabilityStatus] = useState(worker.availability_status);
|
|
const [showHiredModal, setShowHiredModal] = useState(false);
|
|
const [showHireConfirmModal, setShowHireConfirmModal] = useState(false);
|
|
|
|
// Reviews state
|
|
const [showReviewModal, setShowReviewModal] = useState(false);
|
|
const [newRating, setNewRating] = useState(5);
|
|
const [newComment, setNewComment] = useState('');
|
|
const [workerReviews, setWorkerReviews] = useState(worker.reviews || []);
|
|
|
|
const handleShare = () => {
|
|
navigator.clipboard.writeText(window.location.href);
|
|
toast.success(t('profile_link_copied', 'Profile link copied to clipboard!'), {
|
|
description: t('profile_link_copied_desc', 'You can now share this URL with your family or sponsor contacts.')
|
|
});
|
|
};
|
|
|
|
const handleReportSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (!reportReason) {
|
|
toast.error(t('select_report_reason', 'Please select a reason for reporting.'));
|
|
return;
|
|
}
|
|
|
|
toast.success(t('report_submitted', 'Worker report submitted successfully'), {
|
|
description: t('report_submitted_desc', "Our admin compliance team will investigate this worker's credentials within 24 hours.")
|
|
});
|
|
setShowReportModal(false);
|
|
setReportReason('');
|
|
setReportDetails('');
|
|
};
|
|
|
|
const handleReviewSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (!newComment.trim()) {
|
|
toast.error(t('add_comment', 'Please add a comment.'));
|
|
return;
|
|
}
|
|
|
|
const newReview = {
|
|
id: Date.now(),
|
|
employer_name: t('you_verified_sponsor', 'You (Verified Sponsor)'),
|
|
rating: newRating,
|
|
date: t('today', 'Today'),
|
|
comment: newComment,
|
|
};
|
|
|
|
setWorkerReviews([newReview, ...workerReviews]);
|
|
toast.success(t('review_posted', 'Review posted successfully!'), {
|
|
description: t('review_posted_desc', 'Your trust feedback is live and helps other sponsors hire securely.')
|
|
});
|
|
setShowReviewModal(false);
|
|
setNewComment('');
|
|
};
|
|
|
|
const handleToggleShortlist = () => {
|
|
setIsShortlisted(!isShortlisted);
|
|
router.post('/employer/shortlist/toggle', { worker_id: worker.id }, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
toast.success(isShortlisted ? t('removed_from_shortlist', 'Removed from Shortlist') : t('added_to_shortlist', 'Added to Shortlist'));
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleMarkHired = () => {
|
|
router.post(`/employer/workers/${worker.id}/mark-hired`, {}, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
setAvailabilityStatus('Hired');
|
|
setShowHiredModal(true);
|
|
toast.success(t('marked_hired', 'Worker successfully marked as Hired!'), {
|
|
description: t('marked_hired_desc', 'Sponsorship direct match finalized. Please leave an anonymous trust review!')
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<EmployerLayout title={t('candidate_profile_detail', 'Candidate Profile Detail')}>
|
|
<Head title={`${worker.name} Profile`} />
|
|
|
|
<div className="space-y-6 select-none w-full pb-16">
|
|
|
|
{/* Back Link */}
|
|
<div className="flex items-center justify-between">
|
|
<Link
|
|
href="/employer/workers"
|
|
className="inline-flex items-center space-x-2 text-xs font-black text-slate-500 hover:text-[#185FA5] transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>{t('back_to_find_workers', 'BACK TO FIND WORKERS')}</span>
|
|
</Link>
|
|
|
|
|
|
</div>
|
|
|
|
<div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
|
{/* Header Card with Clean Premium White BG */}
|
|
<div className="bg-white p-8 text-slate-900 border-b border-slate-200 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 relative overflow-hidden">
|
|
<div className="absolute -right-10 -bottom-10 w-48 h-48 bg-slate-50 rounded-full blur-2xl pointer-events-none" />
|
|
|
|
<div className="flex items-center space-x-5 z-10">
|
|
<div className="w-20 h-20 rounded-2xl bg-slate-50 text-[#185FA5] flex items-center justify-center font-black text-3xl shadow-sm border border-slate-200 flex-shrink-0 overflow-hidden relative">
|
|
{worker.photo ? (
|
|
<img src={worker.photo} alt={worker.name} className="w-full h-full object-cover" />
|
|
) : (
|
|
<User className="w-10 h-10 text-slate-400" />
|
|
)}
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<div className="flex items-center space-x-2">
|
|
<h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-slate-900">{worker.name}</h1>
|
|
|
|
</div>
|
|
|
|
{/* Passport verification status bar & Visa Status */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{worker.visa_expiry_date ? (
|
|
<div className={`flex items-center space-x-1.5 px-2.5 py-1 rounded-lg border text-[9px] font-black uppercase tracking-wider w-fit ${
|
|
worker.document_expiry_days !== null && worker.document_expiry_days <= 30
|
|
? 'bg-rose-50 text-rose-700 border-rose-200 animate-pulse'
|
|
: worker.document_expiry_days !== null && worker.document_expiry_days <= 90
|
|
? 'bg-amber-50 text-amber-700 border-amber-200'
|
|
: 'bg-blue-50 text-[#185FA5] border-blue-100'
|
|
}`}>
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
<span>Visa Exp: {worker.visa_expiry_date}</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center space-x-1.5 px-2.5 py-1 rounded-lg border text-[9px] font-black uppercase tracking-wider w-fit bg-amber-50 text-amber-700 border-amber-200">
|
|
<Calendar className="w-3.5 h-3.5 text-amber-600" />
|
|
<span>Visa Expiry Pending</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.5 bg-amber-50 px-2.5 py-1 rounded-lg text-amber-800 border border-amber-200 text-[9px] font-black uppercase tracking-wider w-fit shadow-xs">
|
|
<AlertTriangle className="w-3.5 h-3.5 text-amber-600 animate-bounce" />
|
|
<span>{worker.visa_status} ({t('warning', 'Warning')}: {t('visit_visa', 'Visit Visa')})</span>
|
|
</div>
|
|
) : worker.visa_status && worker.visa_status.toLowerCase().includes('cancelled') ? (
|
|
<div className="flex items-center space-x-1.5 bg-rose-50 px-2.5 py-1 rounded-lg text-rose-800 border border-rose-200 text-[9px] font-black uppercase tracking-wider w-fit shadow-xs animate-pulse">
|
|
<AlertTriangle className="w-3.5 h-3.5 text-rose-600" />
|
|
<span>{worker.visa_status} ({t('warning', 'Warning')}: {t('cancelled', 'Cancelled')})</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center space-x-1.5 bg-blue-50 px-2.5 py-1 rounded-lg text-blue-700 border border-blue-100 text-[9px] font-black uppercase tracking-wider w-fit">
|
|
<span>{worker.visa_status}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-2.5 text-slate-500 text-xs font-bold">
|
|
<span className="flex items-center space-x-1">
|
|
<Globe2 className="w-3.5 h-3.5 text-slate-400" />
|
|
<span>{worker.nationality}</span>
|
|
</span>
|
|
<span>•</span>
|
|
<span>{worker.age} {t('years_old', 'Years Old')}</span>
|
|
</div>
|
|
{workerReviews.length > 0 && (
|
|
<div className="flex items-center space-x-1 text-amber-500 font-bold text-xs">
|
|
<Star className="w-3.5 h-3.5 fill-amber-500 text-amber-500" />
|
|
<span className="text-slate-700">{worker.rating} / 5.0 ({workerReviews.length} {t('reviews', 'reviews')})</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sponsor Actions Block */}
|
|
<div className="flex flex-wrap items-center gap-3 z-10 w-full sm:w-auto justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={handleToggleShortlist}
|
|
className={`p-3 rounded-xl transition-all border ${
|
|
isShortlisted
|
|
? 'bg-blue-50 border-blue-200 text-[#185FA5]'
|
|
: 'bg-white hover:bg-slate-50 border-slate-200 text-slate-400 hover:text-[#185FA5]'
|
|
}`}
|
|
title="Shortlist Worker"
|
|
>
|
|
<Bookmark className={`w-5 h-5 ${isShortlisted ? 'fill-[#185FA5]' : ''}`} />
|
|
</button>
|
|
|
|
{/* Stage 3 Connect: Start In-App Chat */}
|
|
<Link
|
|
href={`/employer/messages/start/${worker.id}`}
|
|
className="bg-white border border-slate-250 hover:bg-slate-50 px-6 py-3 rounded-xl font-bold text-sm shadow-xs transition-colors flex items-center justify-center space-x-2 text-slate-700 flex-1 sm:flex-initial"
|
|
>
|
|
<MessageSquare className="w-4 h-4 text-slate-500" />
|
|
<span>{t('start_direct_chat', 'Start Direct Chat')}</span>
|
|
</Link>
|
|
|
|
{/* Stage 4 Hire: Mark Hired (Finalize Hiring Direct Flow) */}
|
|
{availabilityStatus !== 'Hired' && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowHireConfirmModal(true)}
|
|
className="bg-emerald-600 hover:bg-emerald-700 text-white border border-emerald-700 px-8 py-3 rounded-xl font-black text-sm shadow-md transition-all flex items-center justify-center space-x-2 flex-1 sm:flex-initial scale-105 active:scale-100"
|
|
>
|
|
<CheckCircle2 className="w-4 h-4 text-white" />
|
|
<span>{t('mark_hired_action', 'Mark Hired')}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Details Grid */}
|
|
<div className="p-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
{/* Left Column: Quick Stats */}
|
|
<div className="space-y-6">
|
|
<div className="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-4">
|
|
<h3 className="font-black text-xs text-slate-500 uppercase tracking-widest">{t('worker_details_title', 'Worker Details')}</h3>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<User className="w-4 h-4 text-slate-500" />
|
|
<span>{t('name', 'Name')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-xs">{worker.name}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<Phone className="w-4 h-4 text-slate-500" />
|
|
<span>{t('mobile', 'Mobile')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-xs">{worker.phone}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<User className="w-4 h-4 text-slate-500" />
|
|
<span>{t('gender', 'Gender')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-xs capitalize">{worker.gender}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<DollarSign className="w-4 h-4 text-slate-500" />
|
|
<span>{t('salary_expectations', 'Salary Expectations')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-sm">{worker.salary} {t('aed', 'AED')} / {t('mo', 'mo')}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<Briefcase className="w-4 h-4 text-slate-500" />
|
|
<span>{t('work_experience', 'Work Experience')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-xs">{worker.experience}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<Sparkles className="w-4 h-4 text-slate-500" />
|
|
<span>{t('job_type', 'Job Type')}</span>
|
|
</div>
|
|
<span className="font-black text-slate-900 text-xs uppercase">{worker.preferred_job_type}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<HeartHandshake className="w-4 h-4 text-slate-500" />
|
|
<span>{t('accommodation_preference', 'Accommodation Preference')}</span>
|
|
</div>
|
|
<span className="font-black text-slate-900 text-xs uppercase">{worker.live_in_out}</span>
|
|
</div>
|
|
|
|
|
|
<div className="flex items-center justify-between pb-3 border-b border-slate-200">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<Globe2 className="w-4 h-4 text-slate-500" />
|
|
<span>{t('current_location_status', 'Current Location')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-xs capitalize">
|
|
{worker.in_country ? t('in_country', 'In-Country') : t('out_country', 'Out-of-Country')}
|
|
</span>
|
|
</div>
|
|
|
|
{worker.in_country && (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-bold">
|
|
<FileText className="w-4 h-4 text-slate-500" />
|
|
<span>{t('visa_type', 'Visa Type')}</span>
|
|
</div>
|
|
<span className="font-extrabold text-slate-900 text-xs capitalize">{worker.visa_status || t('pending', 'Pending')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Languages Spoken with visual flags */}
|
|
<div className="bg-slate-50 p-6 rounded-2xl border border-slate-200 space-y-3">
|
|
<div className="flex items-center space-x-2 font-bold text-sm text-slate-800">
|
|
<Languages className="w-4 h-4 text-[#185FA5]" />
|
|
<span>{t('languages_spoken', 'Languages Spoken')}</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{worker.languages?.map(lang => (
|
|
<span key={lang} className="bg-white border border-slate-200 text-slate-800 px-3 py-1 rounded-xl text-xs font-extrabold shadow-xs uppercase flex items-center space-x-1.5">
|
|
<span>{getLanguageFlag(lang)}</span>
|
|
<span>{lang}</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Bio & Skills */}
|
|
<div className="lg:col-span-2 space-y-8">
|
|
|
|
|
|
{/* Verified Skills & Competencies */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-extrabold text-base text-slate-900">{t('verified_skills_competencies', 'Verified Skills & Competencies')}</h3>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
{worker.skills?.map(skill => (
|
|
<div key={skill} className="flex items-center space-x-3 p-3.5 bg-white border border-slate-200 rounded-xl shadow-xs">
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-600 flex-shrink-0" />
|
|
<span className="font-bold text-xs text-slate-800 uppercase tracking-wide">{skill}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verified Documents Section */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-extrabold text-base text-slate-900 flex items-center space-x-2">
|
|
<ShieldCheck className="w-5 h-5 text-emerald-600" />
|
|
<span>{t('verified_legal_docs', 'Verified Legal Documents (UAE MOHRE Vetted)')}</span>
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Document Card: Passport */}
|
|
{passportDoc ? (
|
|
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-xs hover:shadow-sm lg:col-span-2">
|
|
<div className="bg-slate-50 px-5 py-3.5 border-b border-slate-100 flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-[11px] font-black text-slate-800 uppercase tracking-wider">{t('passport_details', 'Passport Details')}</span>
|
|
{(() => {
|
|
const expiryStatus = getExpiryStatus(passportDoc.expiry_date);
|
|
return (
|
|
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[8px] font-black border uppercase tracking-wider ${expiryStatus.color}`}>
|
|
{expiryStatus.text}
|
|
</span>
|
|
);
|
|
})()}
|
|
</div>
|
|
{passportDoc.ocr_accuracy && (
|
|
<span className="text-[9px] font-bold text-emerald-600 bg-emerald-50/50 border border-emerald-100 px-2 py-0.5 rounded-full">
|
|
{passportDoc.ocr_accuracy}% Match
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{passportDoc.ocr_data ? (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('given_names', 'Given Names')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.given_names)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('surname', 'Surname')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.surname)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('passport_number', 'Passport Number')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.passport_number || passportDoc.number)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('sex', 'Sex')}</div>
|
|
<div className="text-xs font-bold text-slate-800 uppercase">{safeRender(passportDoc.ocr_data.sex)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('date_of_birth', 'Date of Birth')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.date_of_birth)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('place_of_birth', 'Place of Birth')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.place_of_birth)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('nationality', 'Nationality')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.nationality || worker.nationality)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issuing_country', 'Issuing Country')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.issuing_country)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issue_date', 'Date of Issue')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.date_of_issue || passportDoc.issue_date)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('expiry_date', 'Date of Expiry')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{safeRender(passportDoc.ocr_data.date_of_expiry || passportDoc.expiry_date)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('authority', 'Authority')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.authority)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('document_type', 'Document Type')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(passportDoc.ocr_data.document_type || passportDoc.type || 'passport')}</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('document_id', 'Document ID')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{passportDoc.number}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issue_date', 'Issue')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{passportDoc.issue_date || 'N/A'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('expiry_date', 'Expiry')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{passportDoc.expiry_date || 'N/A'}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500 font-medium">
|
|
<span className="flex items-center space-x-1.5">
|
|
<ShieldCheck className="w-4 h-4 text-emerald-600" />
|
|
<span>UAE PDPL Compliant Scan Storage (Permanently Purged)</span>
|
|
</span>
|
|
{passportDoc.file_path && (
|
|
<a
|
|
href={passportDoc.file_path}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center space-x-1 text-[9px] font-black text-blue-600 hover:text-blue-700 bg-blue-50 px-2.5 py-1.5 rounded-lg border border-blue-155 transition-colors uppercase tracking-wider"
|
|
>
|
|
<FileText className="w-3.5 h-3.5" />
|
|
<span>View Passport Scan</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white border border-slate-200 border-dashed rounded-2xl p-6 flex flex-col items-center justify-center text-center space-y-3 min-h-[170px] lg:col-span-2">
|
|
<div className="w-12 h-12 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center text-slate-400">
|
|
<FileText className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-black text-slate-800 uppercase tracking-wider">{t('passport_pending', 'Passport Pending')}</div>
|
|
<p className="text-[10px] text-slate-500 font-medium mt-1 leading-normal max-w-[200px]">
|
|
{t('passport_pending_desc', 'Candidate has not uploaded a passport document yet.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Document Card: Emirates ID */}
|
|
{emiratesIdDoc && (
|
|
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-xs hover:shadow-sm lg:col-span-2">
|
|
<div className="bg-slate-50 px-5 py-3.5 border-b border-slate-100 flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-[11px] font-black text-slate-800 uppercase tracking-wider">{t('emirates_id_details', 'Emirates ID Details')}</span>
|
|
{(() => {
|
|
const expiryStatus = getExpiryStatus(emiratesIdDoc.expiry_date);
|
|
return (
|
|
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[8px] font-black border uppercase tracking-wider ${expiryStatus.color}`}>
|
|
{expiryStatus.text}
|
|
</span>
|
|
);
|
|
})()}
|
|
</div>
|
|
{emiratesIdDoc.ocr_accuracy && (
|
|
<span className="text-[9px] font-bold text-emerald-600 bg-emerald-50/50 border border-emerald-100 px-2 py-0.5 rounded-full">
|
|
{emiratesIdDoc.ocr_accuracy}% Match
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{emiratesIdDoc.ocr_data ? (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('emirates_id_number', 'Emirates ID Number')}</div>
|
|
<div className="text-xs font-mono font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.emirates_id_number || emiratesIdDoc.number)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('full_name', 'Full Name')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.name || emiratesIdDoc.ocr_data.full_name)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('nationality', 'Nationality')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.nationality)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('date_of_birth', 'Date of Birth')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.date_of_birth || emiratesIdDoc.ocr_data.dob)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('gender', 'Gender')}</div>
|
|
<div className="text-xs font-bold text-slate-800 uppercase">{safeRender(emiratesIdDoc.ocr_data.gender || emiratesIdDoc.ocr_data.sex)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('occupation', 'Occupation')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.occupation || emiratesIdDoc.ocr_data.profession)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('employer', 'Employer')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.employer)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issue_date', 'Issue Date')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(emiratesIdDoc.ocr_data.issue_date || emiratesIdDoc.issue_date)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('expiry_date', 'Expiry Date')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{safeRender(emiratesIdDoc.ocr_data.expiry_date || emiratesIdDoc.expiry_date)}</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('document_id', 'Document ID')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{emiratesIdDoc.number}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issue_date', 'Issue')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{emiratesIdDoc.issue_date || 'N/A'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('expiry_date', 'Expiry')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{emiratesIdDoc.expiry_date || 'N/A'}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500 font-medium">
|
|
<span className="flex items-center space-x-1.5">
|
|
<ShieldCheck className="w-4 h-4 text-emerald-600" />
|
|
<span>UAE PDPL Compliant Scan Storage (Permanently Purged)</span>
|
|
</span>
|
|
{emiratesIdDoc.file_path && (
|
|
<a
|
|
href={emiratesIdDoc.file_path}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center space-x-1 text-[9px] font-black text-blue-600 hover:text-blue-700 bg-blue-50 px-2.5 py-1.5 rounded-lg border border-blue-155 transition-colors uppercase tracking-wider"
|
|
>
|
|
<FileText className="w-3.5 h-3.5" />
|
|
<span>View Emirates ID Scan</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Document Card: Visa */}
|
|
{visaDoc ? (
|
|
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-xs hover:shadow-sm lg:col-span-2">
|
|
<div className="bg-slate-50 px-5 py-3.5 border-b border-slate-100 flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-[11px] font-black text-slate-800 uppercase tracking-wider">{t('visa_details', 'Entry Visa Details')}</span>
|
|
{(() => {
|
|
const expiryStatus = getExpiryStatus(visaDoc.expiry_date || worker.visa_expiry_date);
|
|
return (
|
|
<span className={`inline-flex items-center px-2 py-0.5 rounded text-[8px] font-black border uppercase tracking-wider ${expiryStatus.color}`}>
|
|
{expiryStatus.text}
|
|
</span>
|
|
);
|
|
})()}
|
|
</div>
|
|
{worker.visa_status && (worker.visa_status.toLowerCase().includes('tourist') || worker.visa_status.toLowerCase().includes('visit') || worker.visa_status.toLowerCase().includes('cancelled')) ? (
|
|
<span className="inline-flex items-center bg-amber-50 border border-amber-200 text-[9px] font-black uppercase text-amber-700 px-2 py-0.5 rounded-full tracking-wide">
|
|
{t('transfer_required', 'Transfer Required')}
|
|
</span>
|
|
) : (
|
|
<span className="inline-flex items-center bg-emerald-50 border border-emerald-250 text-[9px] font-black uppercase text-emerald-700 px-2 py-0.5 rounded-full tracking-wide">
|
|
{t('clear_records', 'Clear Records')}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{visaDoc.ocr_data ? (() => {
|
|
const sponsorObj = visaDoc.ocr_data?.sponsor;
|
|
const isSponsorObj = sponsorObj && typeof sponsorObj === 'object' && !Array.isArray(sponsorObj);
|
|
const sponsorName = isSponsorObj
|
|
? (sponsorObj.name || sponsorObj.sponsor_name)
|
|
: (visaDoc.ocr_data?.sponsor_name || (typeof sponsorObj === 'string' ? sponsorObj : ''));
|
|
const sponsorPhone = isSponsorObj
|
|
? (sponsorObj.phone || sponsorObj.mobile || sponsorObj.mobile_number)
|
|
: '';
|
|
const sponsorAddress = isSponsorObj
|
|
? (sponsorObj.address || '')
|
|
: '';
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('full_name', 'Full Name')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.full_name || worker.name)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('entry_permit_no', 'Entry Permit No')}</div>
|
|
<div className="text-xs font-mono font-bold text-slate-800">{safeRender(visaDoc.ocr_data.entry_permit_no || visaDoc.number)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('uid_no', 'UID No')}</div>
|
|
<div className="text-xs font-mono font-bold text-slate-800">{safeRender(visaDoc.ocr_data.uid_no)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('visa_type', 'Visa Type')}</div>
|
|
<div className="text-xs font-bold text-slate-800 uppercase">{safeRender(visaDoc.ocr_data.visa_type || 'ENTRY PERMIT')}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('passport_no', 'Passport No')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.passport_no || visaDoc.ocr_data.passport_number)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('profession', 'Profession')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.profession || worker.visa_status)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('sponsor_name', 'Sponsor Name')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(sponsorName || visaDoc.ocr_data.sponsor_name)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('sponsor_phone', 'Sponsor Phone')}</div>
|
|
<div className="text-xs font-mono font-bold text-slate-800">{safeRender(sponsorPhone)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('sponsor_address', 'Sponsor Address')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(sponsorAddress)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('nationality', 'Nationality')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.nationality || worker.nationality)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('country', 'Country')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.country || 'United Arab Emirates')}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('date_of_birth', 'Date of Birth')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.date_of_birth || visaDoc.ocr_data.dob)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('place_of_birth', 'Place of Birth')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.place_of_birth)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issue_date', 'Issue Date')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.issue_date || visaDoc.issue_date)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('valid_until', 'Valid Until')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{safeRender(visaDoc.ocr_data.valid_until || visaDoc.ocr_data.expiry_date || visaDoc.expiry_date)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('document_type', 'Document Type')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{safeRender(visaDoc.ocr_data.document_type || visaDoc.type || 'uae_visa')}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('ocr_accuracy', 'OCR Accuracy')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{(visaDoc.ocr_accuracy || visaDoc.ocr_data?.ocr_accuracy || 99)}%</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})() : (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-6">
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('document_id', 'Document ID')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{visaDoc.number}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('issue_date', 'Issue')}</div>
|
|
<div className="text-xs font-bold text-slate-800">{visaDoc.issue_date || 'N/A'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[8px] font-black text-slate-400 uppercase tracking-tighter">{t('expiry_date', 'Expiry')}</div>
|
|
<div className="text-xs font-bold text-emerald-600">{visaDoc.expiry_date || 'N/A'}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between text-xs text-slate-500 font-medium">
|
|
<span className="flex items-center space-x-1.5">
|
|
<ShieldCheck className="w-4 h-4 text-emerald-600" />
|
|
<span>UAE PDPL Compliant Scan Storage (Permanently Purged)</span>
|
|
</span>
|
|
{visaDoc.file_path && (
|
|
<a
|
|
href={visaDoc.file_path}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center space-x-1 text-[9px] font-black text-blue-600 hover:text-blue-700 bg-blue-50 px-2.5 py-1.5 rounded-lg border border-blue-155 transition-colors uppercase tracking-wider"
|
|
>
|
|
<FileText className="w-3.5 h-3.5" />
|
|
<span>View Visa Scan</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white border border-slate-200 border-dashed rounded-2xl p-6 flex flex-col items-center justify-center text-center space-y-3 min-h-[170px] lg:col-span-2">
|
|
<div className="w-12 h-12 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center text-slate-400">
|
|
<FileText className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-black text-slate-800 uppercase tracking-wider">{t('visa_pending', 'Visa Pending')}</div>
|
|
<p className="text-[10px] text-slate-500 font-medium mt-1 leading-normal max-w-[200px]">
|
|
{t('visa_pending_desc', 'Candidate has not uploaded a visa document yet.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Star Ratings & Trust Review logs */}
|
|
<div className="bg-white p-8 rounded-3xl border border-slate-200 shadow-sm space-y-6">
|
|
<div className="flex items-center justify-between border-b border-slate-150 pb-4">
|
|
<div className="space-y-1">
|
|
<h3 className="font-extrabold text-base text-slate-900">{t('sponsor_reviews_star_ratings', 'Sponsor Reviews & Star Ratings')}</h3>
|
|
<p className="text-xs text-slate-500 font-medium">{t('reviews_posted_by_sponsors_desc', 'Ratings can only be posted by verified sponsors who completed verified direct hiring.')}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowReviewModal(true)}
|
|
className="bg-[#185FA5] hover:bg-[#144f8a] text-white px-5 py-2.5 rounded-xl text-xs font-bold shadow-xs transition-colors"
|
|
>
|
|
{t('post_trust_review', 'Post a Trust Review')}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Reviews List */}
|
|
<div className="space-y-4">
|
|
{workerReviews.map((review) => (
|
|
<div key={review.id} className="p-6 bg-slate-50 rounded-2xl border border-slate-150 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<span className="font-extrabold text-slate-900 text-xs block">{review.employer_name}</span>
|
|
<span className="text-[10px] text-slate-400 font-bold block mt-0.5">{review.date}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className={`w-3.5 h-3.5 ${i < review.rating ? 'text-amber-550 fill-amber-400 text-amber-500' : 'text-slate-200'}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-slate-650 leading-relaxed italic">
|
|
"{review.comment}"
|
|
</p>
|
|
</div>
|
|
))}
|
|
{workerReviews.length === 0 && (
|
|
<div className="p-8 text-center text-xs text-slate-400 font-bold bg-slate-50 rounded-2xl border border-slate-150">
|
|
{t('no_reviews_yet', 'No reviews posted yet.')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* Stage 4/5 Hired Flow Success Modal Overlay */}
|
|
{showHiredModal && (
|
|
<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-md p-6 relative animate-zoom-in space-y-6 border border-slate-200 shadow-2xl">
|
|
|
|
<div className="text-center space-y-3">
|
|
<div className="w-16 h-16 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mx-auto shadow-inner">
|
|
<CheckCircle2 className="w-8 h-8" />
|
|
</div>
|
|
<h4 className="font-extrabold text-lg text-slate-900">{t('direct_sponsoring_finalized', 'Direct Sponsoring Finalized!')}</h4>
|
|
<p className="text-xs text-slate-500 leading-relaxed">
|
|
{t('hired_under_sponsorship_desc', '{name} is successfully marked as Hired under your sponsorship! This direct matching conforms exactly with Stage 4 of our UAE MOHRE zero-middlemen flow.').replace('{name}', worker.name)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-blue-50/50 rounded-2xl border border-blue-100/50 space-y-2">
|
|
<span className="text-[9px] font-black text-[#185FA5] uppercase tracking-widest block">{t('next_step_post_hire_review', 'Next Step: Stage 5 Post-Hire Review')}</span>
|
|
<p className="text-[11px] text-slate-700 leading-relaxed font-bold">
|
|
{t('help_community_post_review', "Help the UAE community hire safely by posting an anonymous review describing {name}'s childcare, cooking, driving, or domestic skills.").replace('{name}', worker.name)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-2 text-xs font-bold">
|
|
<button
|
|
onClick={() => {
|
|
setShowHiredModal(false);
|
|
setShowReviewModal(true);
|
|
}}
|
|
className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white py-3 rounded-xl flex items-center justify-center space-x-2"
|
|
>
|
|
<Star className="w-4 h-4 fill-white" />
|
|
<span>{t('leave_trust_review', 'Leave a Trust Review')}</span>
|
|
</button>
|
|
<Link
|
|
href="/employer/workers"
|
|
className="w-full bg-slate-50 border border-slate-200 hover:bg-slate-100 text-slate-700 py-3 rounded-xl flex items-center justify-center"
|
|
>
|
|
{t('back_to_worker_directory', 'Back to Worker Directory')}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Report Abuse Modal Overlay */}
|
|
{showReportModal && (
|
|
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-fade-in">
|
|
<form onSubmit={handleReportSubmit} className="bg-white rounded-3xl w-full max-w-md p-6 relative animate-zoom-in space-y-4 border border-slate-200 shadow-2xl">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowReportModal(false)}
|
|
className="absolute top-4 right-4 text-slate-400 hover:text-slate-600"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex items-center space-x-2 text-rose-600">
|
|
<AlertTriangle className="w-5 h-5" />
|
|
<h4 className="font-black text-sm uppercase">{t('report_abuse_violation', 'Report Verification Abuse / Terms Violation')}</h4>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-500 leading-relaxed">
|
|
{t('zero_tolerance_abuse_desc', 'We maintain zero-tolerance for fake documentation, independent recruiters trading cash, or incorrect contact details.')}
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('reason', 'Reason')}</label>
|
|
<select
|
|
value={reportReason}
|
|
onChange={(e) => setReportReason(e.target.value)}
|
|
className="w-full p-2.5 border border-slate-300 rounded-xl text-xs font-bold text-slate-700 bg-slate-50 focus:outline-none"
|
|
>
|
|
<option value="">{t('select_reason', 'Select a reason...')}</option>
|
|
<option value="fees">{t('reason_fees', 'Worker / agent requested hiring commission fees')}</option>
|
|
<option value="profile">{t('reason_profile', 'Profile details / passport did not match actual person')}</option>
|
|
<option value="contact">{t('reason_contact', 'Invalid phone number / unreachable')}</option>
|
|
<option value="other">{t('reason_other', 'Other compliance violations')}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('additional_context_details', 'Additional context details')}</label>
|
|
<textarea
|
|
rows="3"
|
|
value={reportDetails}
|
|
onChange={(e) => setReportDetails(e.target.value)}
|
|
placeholder={t('provide_specifics_placeholder', 'Provide detailed specifics of what happened...')}
|
|
className="w-full p-2.5 border border-slate-300 rounded-xl text-xs focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2 pt-2 text-xs font-bold">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowReportModal(false)}
|
|
className="px-4 py-2 border border-slate-200 hover:bg-slate-50 rounded-lg"
|
|
>
|
|
{t('cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-rose-600 text-white hover:bg-rose-700 rounded-lg shadow-sm"
|
|
>
|
|
{t('submit_compliance_report', 'Submit Compliance Report')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* Trust Review Modal Overlay */}
|
|
{showReviewModal && (
|
|
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 z-50 animate-fade-in">
|
|
<form onSubmit={handleReviewSubmit} className="bg-white rounded-3xl w-full max-w-md p-6 relative animate-zoom-in space-y-4 border border-slate-200 shadow-2xl">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowReviewModal(false)}
|
|
className="absolute top-4 right-4 text-slate-400 hover:text-slate-600"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex items-center space-x-2 text-[#185FA5]">
|
|
<Star className="w-5 h-5 text-amber-500 fill-amber-500" />
|
|
<h4 className="font-black text-sm uppercase">{t('submit_performance_review', 'Submit a Verified Performance Review')}</h4>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-500 leading-relaxed">
|
|
{t('feedback_helps_sponsors_desc', 'Your feedback helps other sponsors make secure and direct hiring choices.')}
|
|
</p>
|
|
|
|
<div className="space-y-3">
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest block">{t('star_rating', 'Star Rating')}</label>
|
|
<div className="flex items-center space-x-1.5">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
type="button"
|
|
onClick={() => setNewRating(star)}
|
|
className="p-1 hover:scale-110 transition-transform"
|
|
>
|
|
<Star
|
|
className={`w-8 h-8 ${star <= newRating ? 'text-amber-500 fill-amber-500' : 'text-slate-200'}`}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('share_your_experience', 'Share Your Experience')}</label>
|
|
<textarea
|
|
rows="3"
|
|
value={newComment}
|
|
onChange={(e) => setNewComment(e.target.value)}
|
|
placeholder={t('share_experience_placeholder', 'Tell other sponsors about childcare skills, cleaning, cooking style, driving safety, etc...')}
|
|
className="w-full p-2.5 border border-slate-300 rounded-xl text-xs focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2 pt-2 text-xs font-bold">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowReviewModal(false)}
|
|
className="px-4 py-2 border border-slate-200 hover:bg-slate-50 rounded-lg"
|
|
>
|
|
{t('cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
className="px-4 py-2 bg-[#185FA5] text-white hover:bg-[#144f8a] rounded-lg shadow-sm"
|
|
>
|
|
{t('post_trust_review_action', 'Post Trust Review')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)}
|
|
|
|
{/* Hired Confirmation Modal */}
|
|
{showHireConfirmModal && (
|
|
<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-md p-6 relative animate-zoom-in text-center space-y-4 border border-slate-200 shadow-2xl">
|
|
<div className="mx-auto w-16 h-16 rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center text-blue-600">
|
|
<CheckCircle2 className="w-8 h-8" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<h4 className="font-extrabold text-lg text-slate-900">{t('confirm_hire_title', 'Confirm Hiring')}</h4>
|
|
<p className="text-xs text-slate-600 leading-normal px-2">
|
|
{t('confirm_hire_desc', 'Verify this worker with your needs and make sure to hire this worker. If hired, you can view this worker in the Hired Workers page.')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex space-x-3 pt-2 text-xs font-bold">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowHireConfirmModal(false)}
|
|
className="flex-1 py-3 border border-slate-200 hover:bg-slate-50 rounded-xl transition-colors"
|
|
>
|
|
{t('cancel', 'Cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setShowHireConfirmModal(false);
|
|
handleMarkHired();
|
|
}}
|
|
className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-xl shadow-sm transition-colors"
|
|
>
|
|
{t('confirm_hire_action', 'Confirm Hire')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</EmployerLayout>
|
|
);
|
|
}
|