367 lines
26 KiB
JavaScript
367 lines
26 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head } from '@inertiajs/react';
|
|
import EmployerLayout from '../../Layouts/EmployerLayout';
|
|
import {
|
|
User,
|
|
CheckCircle2,
|
|
Save,
|
|
Building2,
|
|
Lock,
|
|
Bell,
|
|
ShieldCheck,
|
|
Mail,
|
|
Phone,
|
|
Globe,
|
|
CreditCard,
|
|
ChevronRight,
|
|
Camera
|
|
} from 'lucide-react';
|
|
|
|
export default function Profile({ employerProfile }) {
|
|
const [profile, setProfile] = useState(employerProfile || {
|
|
name: 'John Doe',
|
|
company_name: 'Al Mansoor Household',
|
|
email: 'employer@example.com',
|
|
phone: '+971 50 123 4567',
|
|
language: 'English',
|
|
notifications: true
|
|
});
|
|
const [activeTab, setActiveTab] = useState('personal');
|
|
const [saved, setSaved] = useState(false);
|
|
|
|
const handleSave = (e) => {
|
|
e.preventDefault();
|
|
setSaved(true);
|
|
setTimeout(() => setSaved(false), 3000);
|
|
};
|
|
|
|
const tabs = [
|
|
{ id: 'personal', label: 'Personal Information', icon: User },
|
|
{ id: 'company', label: 'Company & Verification', icon: Building2 },
|
|
{ id: 'security', label: 'Security & Password', icon: Lock },
|
|
{ id: 'billing', label: 'Billing & History', icon: CreditCard },
|
|
{ id: 'notifications', label: 'Notification Settings', icon: Bell },
|
|
];
|
|
|
|
return (
|
|
<EmployerLayout title="Account Settings">
|
|
<Head title="Profile - Employer Portal" />
|
|
|
|
<div className="flex flex-col lg:flex-row gap-8 select-none">
|
|
{/* Left Side: Navigation Tabs */}
|
|
<aside className="w-full lg:w-72 space-y-2">
|
|
{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-sm font-bold transition-all ${
|
|
activeTab === tab.id
|
|
? 'bg-[#185FA5] text-white shadow-lg shadow-blue-200'
|
|
: '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" />
|
|
|
|
<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-24 h-24 rounded-full bg-blue-100 text-[#185FA5] flex items-center justify-center font-black text-3xl border-4 border-white shadow-xl">
|
|
{profile.name?.charAt(0)}
|
|
</div>
|
|
<button className="absolute bottom-0 right-0 p-2 bg-white rounded-full shadow-lg border border-slate-100 text-slate-600 hover:text-[#185FA5] transition-colors">
|
|
<Camera className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h2 className="text-2xl font-black text-slate-900 leading-tight">{profile.name}</h2>
|
|
<p className="text-slate-500 font-bold text-sm mt-1">{profile.company_name}</p>
|
|
|
|
<div className="flex flex-wrap justify-center md:justify-start gap-3 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>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>Verified Employer</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">Personal Information</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Manage your basic account details</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">Full 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) => setProfile({ ...profile, name: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Email Address</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) => setProfile({ ...profile, email: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Phone Number</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) => setProfile({ ...profile, phone: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Preferred Language</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.language}
|
|
onChange={(e) => setProfile({ ...profile, language: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 appearance-none transition-all"
|
|
>
|
|
<option>English</option>
|
|
<option>Arabic</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'company' && (
|
|
<div className="space-y-6">
|
|
<div className="border-b border-slate-100 pb-4">
|
|
<h3 className="text-lg font-black text-slate-900">Company & Verification</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Manage your professional credentials</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Company / Household Name</label>
|
|
<div className="relative">
|
|
<Building2 className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
value={profile.company_name}
|
|
onChange={(e) => setProfile({ ...profile, company_name: e.target.value })}
|
|
className="w-full pl-12 pr-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 bg-slate-50 rounded-3xl border border-slate-100 flex items-start space-x-4">
|
|
<div className="p-3 bg-emerald-100 rounded-2xl">
|
|
<ShieldCheck className="w-6 h-6 text-emerald-600" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-black text-slate-900">Emirates ID Verification</h4>
|
|
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mt-0.5">Reference: EID-9182-XJ</p>
|
|
<p className="text-xs text-slate-600 mt-2 font-medium leading-relaxed">
|
|
Your Emirates ID has been successfully vetted and matched with our internal records. This allows you to initiate direct contact with all verified workers.
|
|
</p>
|
|
<div className="flex items-center space-x-2 mt-4 text-emerald-600">
|
|
<CheckCircle2 className="w-4 h-4" />
|
|
<span className="text-[10px] font-black uppercase">Verified on Jan 15, 2026</span>
|
|
</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">Security & Password</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Keep your account protected</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">Current Password</label>
|
|
<input type="password" placeholder="••••••••" className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">New Password</label>
|
|
<input type="password" placeholder="••••••••" className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs font-black text-slate-500 uppercase tracking-tighter ml-1">Confirm New Password</label>
|
|
<input type="password" placeholder="••••••••" className="w-full px-4 py-3 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-2 focus:ring-blue-100 transition-all" />
|
|
</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">Billing & History</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Manage your subscriptions and payments</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" />
|
|
<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">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">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">Next Payment</div>
|
|
<div className="text-sm font-bold italic">Dec 15, 2026</div>
|
|
</div>
|
|
<div className="text-3xl font-black tracking-tighter">
|
|
499 <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">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">Date</th>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">Description</th>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter">Amount</th>
|
|
<th className="px-4 py-3 text-[10px] font-black text-slate-400 uppercase tracking-tighter text-right">Receipt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{[
|
|
{ date: 'Nov 15, 2026', desc: 'Premium Monthly Subscription', amount: '499 AED' },
|
|
{ date: 'Oct 15, 2026', desc: 'Premium Monthly Subscription', amount: '499 AED' }
|
|
].map((t, i) => (
|
|
<tr key={i}>
|
|
<td className="px-4 py-4 text-xs font-bold text-slate-600">{t.date}</td>
|
|
<td className="px-4 py-4 text-xs font-bold text-slate-900">{t.desc}</td>
|
|
<td className="px-4 py-4 text-xs font-black text-slate-900">{t.amount}</td>
|
|
<td className="px-4 py-4 text-right">
|
|
<button 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">Notification Settings</h3>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Choose how you want to be notified</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{[
|
|
{ title: 'Email Notifications', desc: 'Receive daily updates and recruitment alerts via email.' },
|
|
{ title: 'SMS Alerts', desc: 'Get instant text messages for direct message replies.' },
|
|
{ title: 'Browser Notifications', desc: 'Real-time alerts while using the portal.' },
|
|
{ title: 'Marketing Updates', desc: 'Receive news about new features and promotions.' }
|
|
].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-sm 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={() => setProfile({ ...profile, 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">Changes saved successfully</span>
|
|
</div>
|
|
) : (
|
|
<p className="text-[10px] font-bold text-slate-400 max-w-xs text-center sm:text-left">
|
|
Some updates may require additional verification before taking effect.
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
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-lg shadow-blue-200/50"
|
|
>
|
|
<Save className="w-4 h-4" />
|
|
<span>Update Settings</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerLayout>
|
|
);
|
|
}
|