227 lines
12 KiB
JavaScript
227 lines
12 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ChevronLeft,
|
|
Share2,
|
|
CheckCircle2,
|
|
Globe,
|
|
Briefcase,
|
|
Calendar,
|
|
Heart,
|
|
Sparkles,
|
|
DollarSign,
|
|
MessageSquare,
|
|
Bookmark,
|
|
Phone,
|
|
FileText,
|
|
ShieldCheck,
|
|
Languages,
|
|
Info,
|
|
ArrowRight
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerDetail({ id }) {
|
|
// Mock data for the worker detail
|
|
const worker = {
|
|
id: id,
|
|
name: 'Maria Santos',
|
|
role: 'Childcare / Nanny',
|
|
salary: '1800 AED / mo',
|
|
nationality: 'Philippines',
|
|
initial: 'M',
|
|
online: true,
|
|
bio: 'Experienced and dedicated nanny with over 6 years of experience working with expatriate families in Dubai. Certified in pediatric first aid and CPR. I love working with children and I am skilled in early childhood development activities, meal preparation, and maintaining a clean environment for the kids.',
|
|
exp: '6 Years',
|
|
avail: 'Immediate',
|
|
religion: 'Christian',
|
|
age: '32 Years',
|
|
languages: ['English (Fluent)', 'Tagalog (Native)'],
|
|
education: 'Bachelors in Education',
|
|
status: 'Verified',
|
|
skills: ['Pediatric First Aid', 'Newborn Care', 'Cooking', 'Housekeeping', 'Storytelling'],
|
|
documents: [
|
|
{ name: 'Emirates ID', status: 'Verified' },
|
|
{ name: 'Medical Certificate', status: 'Vetted' },
|
|
{ name: 'Criminal Record Check', status: 'Clean' }
|
|
]
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC] flex flex-col max-w-md mx-auto relative font-sans text-slate-900 overflow-x-hidden">
|
|
<Head title={`${worker.name} - Profile`} />
|
|
|
|
{/* Header */}
|
|
<div className="fixed top-0 left-0 right-0 max-w-md mx-auto z-50 px-6 py-12 flex items-center justify-between pointer-events-none">
|
|
<Link
|
|
href="/mobile/employer/workers"
|
|
className="p-3 bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl text-slate-400 pointer-events-auto shadow-sm active:scale-95 transition-all"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</Link>
|
|
<div className="flex space-x-2 pointer-events-auto">
|
|
<button className="p-3 bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl text-slate-400 shadow-sm active:scale-95 transition-all">
|
|
<Bookmark className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Hero */}
|
|
<div className="bg-white pt-32 pb-10 px-6 rounded-b-[48px] shadow-sm relative">
|
|
<div className="flex flex-col items-center text-center space-y-4">
|
|
<div className="relative">
|
|
<div className="w-32 h-32 rounded-full bg-[#D8F3FF] flex items-center justify-center text-[#185FA5] font-black text-4xl shadow-inner border-4 border-white">
|
|
{worker.initial}
|
|
</div>
|
|
<div className="absolute bottom-1 right-1 w-8 h-8 bg-emerald-500 border-4 border-white rounded-full flex items-center justify-center text-white">
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-bold tracking-tight">{worker.name}</h1>
|
|
<div className="flex items-center justify-center space-x-2 text-slate-400 font-bold text-xs uppercase tracking-widest">
|
|
<Globe className="w-3.5 h-3.5 text-[#185FA5]" />
|
|
<span>{worker.nationality}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-2 pt-2">
|
|
<div className="px-4 py-2 bg-[#F0F7FF] text-[#185FA5] rounded-xl text-[10px] font-black uppercase tracking-widest border border-[#E1EFFF]">
|
|
{worker.role}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Stats Grid */}
|
|
<div className="grid grid-cols-2 gap-3 mt-10">
|
|
<div className="bg-slate-50/50 p-4 rounded-3xl border border-slate-50 flex items-center space-x-3">
|
|
<div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-[#185FA5] shadow-sm">
|
|
<DollarSign className="w-5 h-5" />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<div className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Salary</div>
|
|
<div className="text-[13px] font-black">{worker.salary}</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50/50 p-4 rounded-3xl border border-slate-50 flex items-center space-x-3">
|
|
<div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-emerald-500 shadow-sm">
|
|
<Briefcase className="w-5 h-5" />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<div className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Experience</div>
|
|
<div className="text-[13px] font-black">{worker.exp}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Profile Content */}
|
|
<div className="p-6 space-y-10 pb-32">
|
|
{/* About Section */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
|
|
<h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Professional Bio</h3>
|
|
</div>
|
|
<div className="bg-white p-6 rounded-[32px] border border-slate-50 shadow-sm">
|
|
<p className="text-[14px] text-slate-600 font-medium leading-relaxed italic">
|
|
{worker.bio}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detailed Information */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
|
|
<h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Candidate Overview</h3>
|
|
</div>
|
|
<div className="bg-white rounded-[32px] border border-slate-50 shadow-sm overflow-hidden divide-y divide-slate-50">
|
|
<div className="flex items-center justify-between p-5">
|
|
<div className="flex items-center space-x-3">
|
|
<Calendar className="w-5 h-5 text-slate-300" />
|
|
<span className="text-xs font-bold text-slate-500">Availability</span>
|
|
</div>
|
|
<span className="text-xs font-black text-[#185FA5] uppercase tracking-widest">{worker.avail}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-5">
|
|
<div className="flex items-center space-x-3">
|
|
<Heart className="w-5 h-5 text-slate-300" />
|
|
<span className="text-xs font-bold text-slate-500">Religion</span>
|
|
</div>
|
|
<span className="text-xs font-black text-slate-700 uppercase tracking-widest">{worker.religion}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-5">
|
|
<div className="flex items-center space-x-3">
|
|
<Sparkles className="w-5 h-5 text-slate-300" />
|
|
<span className="text-xs font-bold text-slate-500">Age</span>
|
|
</div>
|
|
<span className="text-xs font-black text-slate-700 uppercase tracking-widest">{worker.age}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-5">
|
|
<div className="flex items-center space-x-3">
|
|
<Languages className="w-5 h-5 text-slate-300" />
|
|
<span className="text-xs font-bold text-slate-500">Languages</span>
|
|
</div>
|
|
<span className="text-[10px] font-black text-slate-700 uppercase tracking-widest">{worker.languages.join(' · ')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vetted Documents */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
|
|
<h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Identity & Verification</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-3">
|
|
{worker.documents.map((doc, idx) => (
|
|
<div key={idx} className="bg-white p-5 rounded-[24px] border border-slate-50 shadow-sm flex items-center justify-between group active:bg-slate-50 transition-colors">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-10 h-10 bg-slate-50 rounded-xl flex items-center justify-center text-slate-300 group-active:text-[#185FA5] transition-colors">
|
|
<FileText className="w-5 h-5" />
|
|
</div>
|
|
<span className="text-xs font-bold text-slate-700">{doc.name}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-1.5 text-[9px] font-black text-emerald-500 uppercase tracking-widest bg-emerald-50 px-2.5 py-1 rounded-lg">
|
|
<ShieldCheck className="w-3 h-3" />
|
|
<span>{doc.status}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Skills Section */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
|
|
<h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Skills & Expertise</h3>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2.5">
|
|
{worker.skills.map((skill) => (
|
|
<span key={skill} className="px-4 py-2 bg-white text-slate-500 text-[11px] font-bold rounded-xl border border-slate-50 shadow-sm">
|
|
{skill}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Action Bar */}
|
|
<div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-6 bg-white/80 backdrop-blur-xl border-t border-slate-100 flex items-center space-x-4 z-50">
|
|
<Link
|
|
href={`/mobile/employer/chat/${worker.id}`}
|
|
className="w-16 h-16 bg-slate-50 text-[#185FA5] rounded-[24px] flex items-center justify-center border border-slate-100 shadow-sm active:scale-95 transition-all"
|
|
>
|
|
<MessageSquare className="w-6 h-6" />
|
|
</Link>
|
|
<button className="flex-1 h-16 bg-[#185FA5] text-white rounded-[24px] font-black text-xs uppercase tracking-[0.2em] shadow-xl shadow-blue-500/30 active:scale-[0.98] transition-all flex items-center justify-center space-x-3">
|
|
<span>Initiate Hiring</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|