553 lines
44 KiB
JavaScript
553 lines
44 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, useForm } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import { useTranslation } from '../../lib/LanguageContext';
|
|
import {
|
|
User,
|
|
CheckCircle2,
|
|
Save,
|
|
Building2,
|
|
Lock,
|
|
Bell,
|
|
ShieldCheck,
|
|
Mail,
|
|
Phone,
|
|
Globe,
|
|
CreditCard,
|
|
ChevronRight,
|
|
Camera,
|
|
Home,
|
|
Users,
|
|
MapPin,
|
|
History,
|
|
Sparkles
|
|
} from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
export default function Profile({ employerProfile }) {
|
|
const { t } = useTranslation();
|
|
const { data: profile, setData, post, processing, errors } = useForm({
|
|
name: employerProfile?.name || '',
|
|
company_name: employerProfile?.company_name || '',
|
|
email: employerProfile?.email || '',
|
|
phone: employerProfile?.phone || '',
|
|
language: employerProfile?.language || 'English',
|
|
nationality: employerProfile?.nationality || '',
|
|
family_size: employerProfile?.family_size || '',
|
|
accommodation: employerProfile?.accommodation || '',
|
|
district: employerProfile?.district || '',
|
|
notifications: employerProfile?.notifications ?? true,
|
|
emirates_id_front: null,
|
|
emirates_id_back: null,
|
|
current_password: '',
|
|
new_password: '',
|
|
new_password_confirmation: '',
|
|
});
|
|
|
|
const [activeTab, setActiveTab] = useState('personal');
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
const handleSave = (e) => {
|
|
e.preventDefault();
|
|
post('/employer/profile/update', {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
setSaved(true);
|
|
toast.success(`🛡️ ${t('profile_updated_successfully', 'Profile updated successfully')}`, {
|
|
description: t('profile_updated_successfully_desc', 'Household sponsor preferences and vetted credentials synchronized successfully.')
|
|
});
|
|
setTimeout(() => setSaved(false), 3000);
|
|
},
|
|
onError: (errs) => {
|
|
toast.error(t('profile_update_failed', 'Failed to update profile'), {
|
|
description: Object.values(errs)[0] || t('check_form_fields', 'Please check the form fields.')
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: 'personal', label: t('tab_personal', 'Personal'), icon: User },
|
|
{ id: 'security', label: t('tab_security', 'Security & Password'), icon: Lock },
|
|
{ id: 'billing', label: t('tab_billing', 'Billing & Receipts'), icon: CreditCard },
|
|
{ id: 'notifications', label: t('tab_notifications', 'Notifications Hub'), icon: Bell },
|
|
];
|
|
|
|
return (
|
|
<EmployerLayout title={t('account_settings', 'Account Settings')}>
|
|
<Head title={`${t('profile', 'Profile')} - ${t('employer_portal', 'Employer Portal')}`} />
|
|
|
|
<div className="flex flex-col lg:flex-row gap-8 select-none w-full pb-16">
|
|
{/* Left Side: Navigation Tabs */}
|
|
<aside className="w-full lg:w-72 space-y-2 flex-shrink-0">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`w-full flex items-center justify-between p-4 rounded-2xl text-xs font-black uppercase tracking-wider transition-all ${
|
|
activeTab === tab.id
|
|
? 'bg-[#185FA5] text-white shadow-md shadow-blue-900/10'
|
|
: 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-100'
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-3">
|
|
<Icon className="w-5 h-5" />
|
|
<span>{tab.label}</span>
|
|
</div>
|
|
<ChevronRight className={`w-4 h-4 transition-transform ${activeTab === tab.id ? 'rotate-90' : ''}`} />
|
|
</button>
|
|
);
|
|
})}
|
|
</aside>
|
|
|
|
{/* Right Side: Content Area */}
|
|
<div className="flex-1 space-y-6">
|
|
{/* Header Info Card */}
|
|
<div className="bg-white rounded-3xl border border-slate-200 p-8 shadow-sm relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-16 -mt-16 opacity-50 pointer-events-none" />
|
|
|
|
<div className="flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8 relative z-10">
|
|
<div className="relative group">
|
|
<div className="w-20 h-20 rounded-2xl bg-blue-100 text-[#185FA5] flex items-center justify-center font-black text-3xl border-2 border-blue-200 shadow-md">
|
|
{profile.name?.charAt(0)}
|
|
</div>
|
|
<button type="button" className="absolute -bottom-1 -right-1 p-1.5 bg-white rounded-lg shadow-sm border border-slate-100 text-slate-600 hover:text-[#185FA5] transition-colors">
|
|
<Camera className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h2 className="text-xl font-black text-slate-900 leading-tight">{profile.name}</h2>
|
|
<p className="text-slate-500 font-bold text-xs mt-1">{profile.company_name}</p>
|
|
|
|
<div className="flex flex-wrap justify-center md:justify-start gap-2.5 mt-4">
|
|
<span className="bg-emerald-50 text-emerald-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center space-x-1.5 border border-emerald-100">
|
|
<ShieldCheck className="w-3.5 h-3.5" />
|
|
<span>{t('emirates_id_vetted', 'Emirates ID Vetted')}</span>
|
|
</span>
|
|
<span className="bg-blue-50 text-blue-700 px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest flex items-center space-x-1.5 border border-blue-100">
|
|
<CheckCircle2 className="w-3.5 h-3.5" />
|
|
<span>{t('direct_sponsor_portal', 'Direct Sponsor Portal')}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab Specific Content */}
|
|
<div className="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<form onSubmit={handleSave} className="p-8 space-y-8">
|
|
{activeTab === 'personal' && (
|
|
<div className="space-y-6">
|
|
<div className="border-b border-slate-100 pb-4">
|
|
<h3 className="text-lg font-black text-slate-900">{t('personal_details_header', 'Personal details')}</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('personal_details_desc', 'Manage sponsor bio and credentials')}</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('full_sponsor_name', 'Full Sponsor Name')}</label>
|
|
<div className="relative">
|
|
<User className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
value={profile.name}
|
|
onChange={(e) => setData('name', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('invoicing_email', 'Invoicing Email')}</label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<input
|
|
type="email"
|
|
value={profile.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('uae_mobile_contact', 'UAE Mobile Contact')}</label>
|
|
<div className="relative">
|
|
<Phone className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
value={profile.phone}
|
|
onChange={(e) => setData('phone', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('sponsor_nationality', 'Sponsor Nationality')}</label>
|
|
<div className="relative">
|
|
<Globe className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<select
|
|
value={profile.nationality}
|
|
onChange={(e) => setData('nationality', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
|
|
>
|
|
<option value="">{t('select_nationality', 'Select Nationality')}</option>
|
|
<option value="UAE National">{t('uae_national', 'UAE National')}</option>
|
|
<option value="Expat (UK / Europe)">{t('expat_uk_europe', 'Expat (UK / Europe)')}</option>
|
|
<option value="Expat (USA / Canada)">{t('expat_usa_canada', 'Expat (USA / Canada)')}</option>
|
|
<option value="Expat (Asia / GCC)">{t('expat_asia_gcc', 'Expat (Asia / GCC)')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('family_members_size', 'Family Members Size')}</label>
|
|
<div className="relative">
|
|
<Users className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<select
|
|
value={profile.family_size}
|
|
onChange={(e) => setData('family_size', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
|
|
>
|
|
<option value="">{t('select_family_size', 'Select Family Size')}</option>
|
|
<option value="1-2 Members">{t('family_1_2', '1-2 Members')}</option>
|
|
<option value="3-4 Members">{t('family_3_4', '3-4 Members')}</option>
|
|
<option value="5+ Members">{t('family_5_plus', '5+ Members')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('accommodation_residence', 'Accommodation Residence')}</label>
|
|
<div className="relative">
|
|
<Home className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<select
|
|
value={profile.accommodation}
|
|
onChange={(e) => setData('accommodation', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none cursor-pointer"
|
|
>
|
|
<option value="">{t('select_accommodation', 'Select Accommodation')}</option>
|
|
<option value="Villa">{t('villa', 'Villa')}</option>
|
|
<option value="Apartment (Penthouse)">{t('penthouse', 'Apartment (Penthouse)')}</option>
|
|
<option value="Apartment (1-3 Bed)">{t('apartment_1_3', 'Apartment (1-3 Bed)')}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2 md:col-span-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('city_district_area', 'City District / Area')}</label>
|
|
<div className="relative">
|
|
<MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
value={profile.district}
|
|
onChange={(e) => setData('district', e.target.value)}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Emirates ID Verification */}
|
|
<div className="space-y-6 pt-6 border-t border-slate-100">
|
|
<div className="border-b border-slate-100 pb-4">
|
|
<h3 className="text-lg font-black text-slate-900">{t('emirates_id_verification_header', 'Emirates ID Verification')}</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('emirates_id_verification_desc', 'Regulatory compliance credentials')}</p>
|
|
</div>
|
|
|
|
{employerProfile?.verification_status === 'approved' && employerProfile?.emirates_id_front && employerProfile?.emirates_id_back ? (
|
|
<div className="p-6 bg-emerald-50 rounded-3xl border border-emerald-200 flex items-start space-x-4">
|
|
<div className="p-3 bg-emerald-100 text-emerald-600 rounded-2xl">
|
|
<ShieldCheck className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-extrabold text-slate-900">{t('emirates_id_verified_status', 'Emirates ID Verified')}</h4>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">{t('mohre_guidelines', 'Vetted under MOHRE Guidelines')}</p>
|
|
<p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
|
|
{t('emirates_id_verified_desc', 'Your Emirates ID has been verified successfully. Your account is active for direct hiring.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : employerProfile?.verification_status === 'pending' && (employerProfile?.emirates_id_front || employerProfile?.emirates_id_back) ? (
|
|
<div className="p-6 bg-amber-50 rounded-3xl border border-amber-200 flex items-start space-x-4">
|
|
<div className="p-3 bg-amber-100 text-amber-600 rounded-2xl animate-pulse">
|
|
<ShieldCheck className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-extrabold text-slate-900">{t('verification_pending_status', 'Verification Pending Audit')}</h4>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">{t('audit_queue', 'Audit Queue')}</p>
|
|
<p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
|
|
{t('verification_pending_desc', 'Your Emirates ID document uploads are currently under review. Audits are typically completed within 24 hours.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="p-6 bg-rose-50 rounded-3xl border border-rose-200 flex items-start space-x-4">
|
|
<div className="p-3 bg-rose-100 text-rose-600 rounded-2xl">
|
|
<ShieldCheck className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-extrabold text-slate-900">{t('verification_required_status', 'Emirates ID Verification Required')}</h4>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest mt-0.5">{t('action_needed', 'Action Needed')}</p>
|
|
<p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
|
|
{t('verification_required_desc', 'Please upload high-resolution color scans of your Emirates ID to verify your identity and activate full hiring features.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* File Upload Fields */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-slate-50 p-6 rounded-3xl border border-slate-200">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-600 uppercase tracking-tight ml-1">{t('emirates_id_front_side', 'Emirates ID (Front Side)')}</label>
|
|
<input
|
|
type="file"
|
|
onChange={(e) => setData('emirates_id_front', e.target.files[0])}
|
|
className="w-full text-xs font-semibold text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-black file:bg-[#185FA5]/10 file:text-[#185FA5] hover:file:bg-[#185FA5]/20 cursor-pointer"
|
|
/>
|
|
{errors.emirates_id_front && <p className="text-xs text-red-500 mt-1">{errors.emirates_id_front}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-600 uppercase tracking-tight ml-1">{t('emirates_id_back_side', 'Emirates ID (Back Side)')}</label>
|
|
<input
|
|
type="file"
|
|
onChange={(e) => setData('emirates_id_back', e.target.files[0])}
|
|
className="w-full text-xs font-semibold text-slate-500 file:mr-4 file:py-2.5 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-black file:bg-[#185FA5]/10 file:text-[#185FA5] hover:file:bg-[#185FA5]/20 cursor-pointer"
|
|
/>
|
|
{errors.emirates_id_back && <p className="text-xs text-red-500 mt-1">{errors.emirates_id_back}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Uploaded Documents Details */}
|
|
{(employerProfile?.emirates_id_front || employerProfile?.emirates_id_back) && (
|
|
<div className="space-y-4 pt-4 border-t border-slate-100">
|
|
<h4 className="text-xs font-black text-slate-600 uppercase tracking-wider ml-1">{t('uploaded_credentials_scans', 'Uploaded Credentials Scans')}</h4>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{employerProfile?.emirates_id_front && (
|
|
<div className="p-4 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-between">
|
|
<div className="flex items-center space-x-3 min-w-0">
|
|
<div className="w-10 h-10 bg-blue-100 text-[#185FA5] rounded-xl flex items-center justify-center font-bold text-xs flex-shrink-0">
|
|
ID
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-black text-slate-800">{t('emirates_id_front_side', 'Emirates ID (Front Side)')}</div>
|
|
<div className="text-[10px] text-slate-400 font-bold truncate">{employerProfile.emirates_id_front.split('/').pop()}</div>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href={`/storage/${employerProfile.emirates_id_front}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="px-3 py-1.5 bg-white border border-slate-200 text-xs font-bold text-slate-600 rounded-lg hover:text-[#185FA5] transition-colors shadow-sm flex-shrink-0"
|
|
>
|
|
{t('view_scan', 'View Scan')}
|
|
</a>
|
|
</div>
|
|
)}
|
|
{employerProfile?.emirates_id_back && (
|
|
<div className="p-4 bg-slate-50 border border-slate-200 rounded-2xl flex items-center justify-between">
|
|
<div className="flex items-center space-x-3 min-w-0">
|
|
<div className="w-10 h-10 bg-blue-100 text-[#185FA5] rounded-xl flex items-center justify-center font-bold text-xs flex-shrink-0">
|
|
ID
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-black text-slate-800">{t('emirates_id_back_side', 'Emirates ID (Back Side)')}</div>
|
|
<div className="text-[10px] text-slate-400 font-bold truncate">{employerProfile.emirates_id_back.split('/').pop()}</div>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href={`/storage/${employerProfile.emirates_id_back}`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="px-3 py-1.5 bg-white border border-slate-200 text-xs font-bold text-slate-600 rounded-lg hover:text-[#185FA5] transition-colors shadow-sm flex-shrink-0"
|
|
>
|
|
{t('view_scan', 'View Scan')}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'security' && (
|
|
<div className="space-y-6">
|
|
<div className="border-b border-slate-100 pb-4">
|
|
<h3 className="text-lg font-black text-slate-900">{t('security_password_header', 'Security & Password')}</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('security_password_desc', 'Keep your sponsor account secure')}</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 max-w-md">
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('current_password', 'Current Password')}</label>
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={profile.current_password}
|
|
onChange={(e) => setData('current_password', e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('new_password', 'New Password')}</label>
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={profile.new_password}
|
|
onChange={(e) => setData('new_password', e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">{t('confirm_new_password', 'Confirm New Password')}</label>
|
|
<input
|
|
type="password"
|
|
placeholder="••••••••"
|
|
value={profile.new_password_confirmation}
|
|
onChange={(e) => setData('new_password_confirmation', e.target.value)}
|
|
className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-xs font-bold focus:ring-2 focus:ring-blue-100 transition-all outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'billing' && (
|
|
<div className="space-y-8">
|
|
<div className="border-b border-slate-100 pb-4">
|
|
<h3 className="text-lg font-black text-slate-900">{t('tab_billing', 'Billing & Receipts')}</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('available_subscription_tiers_desc', 'Upgrade or cancel anytime. All contracts compliant with UAE Tadbeer MOHRE guides.')}</p>
|
|
</div>
|
|
|
|
{/* Current Plan Card */}
|
|
<div className="p-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-3xl text-white shadow-xl relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-48 h-48 bg-blue-500/10 rounded-full -mr-24 -mt-24 blur-3xl pointer-events-none" />
|
|
<div className="relative z-10">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-slate-400">{t('current_plan', 'Current Plan')}</span>
|
|
<h4 className="text-2xl font-black mt-1">Premium Employer</h4>
|
|
</div>
|
|
<div className="bg-white/10 backdrop-blur-md px-4 py-2 rounded-xl border border-white/10">
|
|
<span className="text-sm font-black">{t('active_status', 'Active')}</span>
|
|
</div>
|
|
</div>
|
|
<div className="mt-8 flex items-end justify-between">
|
|
<div className="space-y-1">
|
|
<div className="text-[10px] font-bold text-slate-400 uppercase">{t('next_payment', 'Next Payment')}</div>
|
|
<div className="text-sm font-bold italic">Jun 15, 2026</div>
|
|
</div>
|
|
<div className="text-3xl font-black tracking-tighter">
|
|
199 <span className="text-sm font-bold text-slate-400">AED/mo</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Transaction History */}
|
|
<div className="space-y-4">
|
|
<h4 className="text-xs font-black text-slate-400 uppercase tracking-widest">{t('recent_transactions', 'Recent Transactions')}</h4>
|
|
<div className="bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden">
|
|
<table className="w-full text-left">
|
|
<thead className="bg-slate-100/50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">{t('date_header', 'Date')}</th>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">{t('description_header', 'Description')}</th>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">{t('amount_header', 'Amount')}</th>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter text-right">{t('receipt_header', 'Receipt')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{[
|
|
{ date: 'May 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' },
|
|
{ date: 'Apr 01, 2026', desc: 'Premium Monthly Subscription', amount: '199 AED' }
|
|
].map((transaction, i) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-4 text-xs font-bold text-slate-600">{transaction.date}</td>
|
|
<td className="px-4 py-4 text-xs font-bold text-slate-900">{transaction.desc}</td>
|
|
<td className="px-4 py-4 text-xs font-black text-slate-900">{transaction.amount}</td>
|
|
<td className="px-4 py-4 text-right">
|
|
<button
|
|
type="button"
|
|
onClick={() => toast.success("PDF Tax invoice receipt downloaded successfully")}
|
|
className="p-2 text-slate-400 hover:text-[#185FA5] transition-colors"
|
|
>
|
|
<CreditCard className="w-4 h-4" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'notifications' && (
|
|
<div className="space-y-6">
|
|
<div className="border-b border-slate-100 pb-4">
|
|
<h3 className="text-lg font-black text-slate-900">{t('notification_settings_hub', 'Notification Settings Hub')}</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{t('notification_settings_desc', 'Choose how you want to receive alerts')}</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{ title: t('email_alerts', 'Email Alerts'), desc: t('email_alerts_desc', 'Receive vetted worker recommendations and visa updates.') },
|
|
{ title: t('sms_alerts', 'SMS Instant Receipts'), desc: t('sms_alerts_desc', 'Get SMS notifications for interview schedules.') },
|
|
{ title: t('push_alerts', 'Push Notifications'), desc: t('push_alerts_desc', 'Get desktop sound alerts for new direct messages.') }
|
|
].map((n, i) => (
|
|
<div key={i} className="flex items-center justify-between p-4 bg-slate-50 rounded-2xl border border-slate-100">
|
|
<div className="space-y-0.5">
|
|
<div className="text-xs font-black text-slate-900">{n.title}</div>
|
|
<div className="text-[10px] font-bold text-slate-400 leading-tight">{n.desc}</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => setData('notifications', !profile.notifications)}
|
|
className={`w-10 h-6 rounded-full p-1 transition-all ${profile.notifications ? 'bg-[#185FA5]' : 'bg-slate-200'}`}
|
|
>
|
|
<div className={`w-4 h-4 bg-white rounded-full transition-transform ${profile.notifications ? 'translate-x-4' : 'translate-x-0'}`} />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="pt-8 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
{saved ? (
|
|
<div className="flex items-center space-x-2 text-emerald-600 animate-in fade-in slide-in-from-left-4">
|
|
<CheckCircle2 className="w-5 h-5" />
|
|
<span className="text-xs font-black uppercase">{t('changes_saved', 'Changes saved successfully')}</span>
|
|
</div>
|
|
) : (
|
|
<p className="text-[10px] font-bold text-slate-400 max-w-xs text-center sm:text-left">
|
|
{t('emirates_id_reverification_notice', 'Some updates may require Emirates ID re-verification.')}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full sm:w-auto bg-[#185FA5] hover:bg-[#144f8a] text-white px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center space-x-2 transition-all shadow-md shadow-blue-200/50"
|
|
>
|
|
<Save className="w-4 h-4" />
|
|
<span>{t('update_settings', 'Update Settings')}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|