283 lines
19 KiB
JavaScript
283 lines
19 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerLayout from '../../../Layouts/EmployerLayout';
|
|
import {
|
|
CheckCircle2,
|
|
Globe2,
|
|
Briefcase,
|
|
DollarSign,
|
|
Calendar,
|
|
HeartHandshake,
|
|
Languages,
|
|
MessageSquare,
|
|
Bookmark,
|
|
ArrowLeft,
|
|
Sparkles,
|
|
FileText,
|
|
ShieldCheck,
|
|
Search
|
|
} from 'lucide-react';
|
|
|
|
export default function Show({ worker }) {
|
|
return (
|
|
<EmployerLayout title="Worker Profile">
|
|
<Head title={`${worker.name} - Worker Profile`} />
|
|
|
|
<div className="space-y-6 select-none w-full">
|
|
<Link
|
|
href="/employer/workers"
|
|
className="inline-flex items-center space-x-2 text-xs font-bold text-slate-600 hover:text-[#185FA5] transition-colors"
|
|
>
|
|
<ArrowLeft className="w-4 h-4" />
|
|
<span>Back to Find Workers</span>
|
|
</Link>
|
|
|
|
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|
{/* Header Card */}
|
|
<div className="bg-gradient-to-r from-[#185FA5] to-blue-700 p-8 text-white 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-white/10 rounded-full blur-2xl pointer-events-none" />
|
|
|
|
<div className="flex items-center space-x-5 z-10">
|
|
<div className="w-20 h-20 rounded-full bg-white text-[#185FA5] flex items-center justify-center font-bold text-3xl shadow-md border-2 border-white flex-shrink-0">
|
|
{worker.name.charAt(0)}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<div className="flex items-center space-x-2">
|
|
<h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight">{worker.name}</h1>
|
|
{worker.verified && (
|
|
<span className="bg-emerald-500 text-white p-0.5 rounded-full shadow-sm" title="OCR Verified">
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center space-x-2 text-blue-100 text-sm font-medium">
|
|
<Globe2 className="w-4 h-4" />
|
|
<span>{worker.nationality}</span>
|
|
<span>•</span>
|
|
<span>{worker.age} Years Old</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3 z-10 w-full sm:w-auto justify-end">
|
|
<button
|
|
type="button"
|
|
className="bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 text-white p-3 rounded-xl shadow-sm transition-colors"
|
|
title="Shortlist Worker"
|
|
>
|
|
<Bookmark className="w-5 h-5" />
|
|
</button>
|
|
<Link
|
|
href={`/employer/workers/${worker.id}/hire`}
|
|
className="bg-[#185FA5] text-white hover:bg-[#144f8a] px-8 py-3 rounded-xl font-bold text-sm shadow-lg shadow-blue-500/20 transition-all flex items-center justify-center space-x-2 flex-1 sm:flex-initial scale-105 active:scale-100"
|
|
>
|
|
<Sparkles className="w-4 h-4" />
|
|
<span>Hire Now</span>
|
|
</Link>
|
|
<Link
|
|
href="/employer/messages"
|
|
className="bg-white text-slate-600 border border-slate-200 hover:bg-slate-50 px-6 py-3 rounded-xl font-bold text-sm shadow-sm transition-colors flex items-center justify-center space-x-2 flex-1 sm:flex-initial"
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
<span>Message</span>
|
|
</Link>
|
|
</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-bold text-sm text-slate-800 uppercase tracking-wider">Verification & Cost</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-medium">
|
|
<DollarSign className="w-4 h-4 text-emerald-600" />
|
|
<span>Monthly Salary</span>
|
|
</div>
|
|
<span className="font-bold text-slate-900 text-sm">{worker.salary} AED</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-medium">
|
|
<Calendar className="w-4 h-4 text-[#185FA5]" />
|
|
<span>Availability</span>
|
|
</div>
|
|
<span className="font-bold text-[#185FA5] bg-blue-50 px-2 py-0.5 rounded text-xs">
|
|
{worker.availability}
|
|
</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-medium">
|
|
<Briefcase className="w-4 h-4 text-amber-600" />
|
|
<span>Experience</span>
|
|
</div>
|
|
<span className="font-bold 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-medium">
|
|
<HeartHandshake className="w-4 h-4 text-purple-600" />
|
|
<span>Religion</span>
|
|
</div>
|
|
<span className="font-bold text-slate-900 text-xs">{worker.religion}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2 text-xs text-slate-600 font-medium">
|
|
<ShieldCheck className="w-4 h-4 text-emerald-600" />
|
|
<span>Medical Cert</span>
|
|
</div>
|
|
<span className="font-bold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded text-xs">
|
|
Passed
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Languages Spoken */}
|
|
<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>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-bold shadow-sm">
|
|
{lang}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Column: Bio & Skills */}
|
|
<div className="lg:col-span-2 space-y-8">
|
|
{/* Professional Summary */}
|
|
<div className="space-y-3">
|
|
<h3 className="font-bold text-base text-slate-900">Professional Summary</h3>
|
|
<p className="text-sm text-slate-600 leading-relaxed bg-slate-50 p-6 rounded-2xl border border-slate-200 italic">
|
|
"{worker.bio}"
|
|
</p>
|
|
</div>
|
|
|
|
{/* Verified Skills & Competencies */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-bold text-base text-slate-900">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-sm">
|
|
<CheckCircle2 className="w-5 h-5 text-emerald-600 flex-shrink-0" />
|
|
<span className="font-bold text-xs text-slate-800">{skill}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verified Documents Section */}
|
|
<div className="space-y-4">
|
|
<h3 className="font-bold text-base text-slate-900 flex items-center space-x-2">
|
|
<ShieldCheck className="w-5 h-5 text-emerald-600" />
|
|
<span>Verified Legal Documents</span>
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{/* Document Card: Passport */}
|
|
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="bg-slate-50 px-4 py-3 border-b border-slate-100 flex items-center justify-between">
|
|
<span className="text-[11px] font-black text-slate-500 uppercase tracking-widest">Passport (Verified)</span>
|
|
<FileText className="w-4 h-4 text-slate-400" />
|
|
</div>
|
|
<div className="p-4 flex space-x-4">
|
|
{/* Document Thumbnail Placeholder */}
|
|
<div className="w-24 h-32 bg-slate-100 rounded-lg flex-shrink-0 border border-slate-200 flex flex-col items-center justify-center p-2 relative group cursor-zoom-in">
|
|
<div className="w-full h-full bg-blue-50/50 rounded flex items-center justify-center">
|
|
<Search className="w-6 h-6 text-blue-200 group-hover:text-blue-400 transition-colors" />
|
|
</div>
|
|
<div className="absolute inset-0 bg-slate-900/0 group-hover:bg-slate-900/5 transition-colors" />
|
|
<span className="absolute bottom-2 text-[8px] font-bold text-slate-400 uppercase">Click to view</span>
|
|
</div>
|
|
|
|
{/* Extracted Data */}
|
|
<div className="flex-1 space-y-3">
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Document Number</div>
|
|
<div className="text-xs font-bold text-slate-800">L82739102-UAE</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Issue Date</div>
|
|
<div className="text-xs font-bold text-slate-800">12 Jan 2021</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Expiry Date</div>
|
|
<div className="text-xs font-bold text-emerald-600">11 Jan 2031</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">OCR Match Accuracy</div>
|
|
<div className="flex items-center space-x-2 mt-1">
|
|
<div className="flex-1 h-1 bg-slate-100 rounded-full overflow-hidden">
|
|
<div className="h-full bg-emerald-500 w-[98%]" />
|
|
</div>
|
|
<span className="text-[10px] font-black text-emerald-600">98%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Document Card: Visa */}
|
|
<div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="bg-slate-50 px-4 py-3 border-b border-slate-100 flex items-center justify-between">
|
|
<span className="text-[11px] font-black text-slate-500 uppercase tracking-widest">Entry Visa (Verified)</span>
|
|
<ShieldCheck className="w-4 h-4 text-emerald-500" />
|
|
</div>
|
|
<div className="p-4 flex space-x-4">
|
|
{/* Document Thumbnail Placeholder */}
|
|
<div className="w-24 h-32 bg-slate-100 rounded-lg flex-shrink-0 border border-slate-200 flex flex-col items-center justify-center p-2 relative group cursor-zoom-in">
|
|
<div className="w-full h-full bg-blue-50/50 rounded flex items-center justify-center">
|
|
<Search className="w-6 h-6 text-blue-200 group-hover:text-blue-400 transition-colors" />
|
|
</div>
|
|
<div className="absolute inset-0 bg-slate-900/0 group-hover:bg-slate-900/5 transition-colors" />
|
|
<span className="absolute bottom-2 text-[8px] font-bold text-slate-400 uppercase">Click to view</span>
|
|
</div>
|
|
|
|
{/* Extracted Data */}
|
|
<div className="flex-1 space-y-3">
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Visa Reference</div>
|
|
<div className="text-xs font-bold text-slate-800">UAE-2024-918273</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Visa Type</div>
|
|
<div className="text-xs font-bold text-slate-800">Employment</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Expiry Date</div>
|
|
<div className="text-xs font-bold text-amber-600">30 Dec 2026</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-tighter">Background Check</div>
|
|
<div className="flex items-center space-x-1.5 mt-1">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
|
|
<span className="text-[10px] font-bold text-slate-700">No Criminal Record Found</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|