136 lines
7.3 KiB
JavaScript
136 lines
7.3 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
|
|
import {
|
|
User,
|
|
Settings,
|
|
CreditCard,
|
|
Shield,
|
|
Bell,
|
|
HelpCircle,
|
|
LogOut,
|
|
ChevronRight,
|
|
Camera,
|
|
CheckCircle2,
|
|
Briefcase,
|
|
Building2,
|
|
Smartphone,
|
|
Globe
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerProfile() {
|
|
const sections = [
|
|
{
|
|
title: 'Account Settings',
|
|
items: [
|
|
{ label: 'Personal Information', icon: User, href: '/mobile/employer/profile/edit', color: 'text-blue-500 bg-blue-50' },
|
|
{ label: 'Subscription Plan', icon: CreditCard, href: '/mobile/employer/subscription', badge: 'Premium', color: 'text-indigo-500 bg-indigo-50' },
|
|
{ label: 'Security & Password', icon: Shield, href: '/mobile/employer/profile/security', color: 'text-emerald-500 bg-emerald-50' },
|
|
]
|
|
},
|
|
{
|
|
title: 'Preferences',
|
|
items: [
|
|
{ label: 'Notification Settings', icon: Bell, href: '/mobile/employer/profile/notifications', color: 'text-orange-500 bg-orange-50' },
|
|
{ label: 'Language', icon: Globe, href: '#', detail: 'English (US)', color: 'text-purple-500 bg-purple-50' },
|
|
]
|
|
},
|
|
{
|
|
title: 'Support',
|
|
items: [
|
|
{ label: 'Help & Support', icon: HelpCircle, href: '/mobile/employer/support', color: 'text-slate-500 bg-slate-50' },
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<EmployerMobileLayout>
|
|
<Head title="My Profile" />
|
|
|
|
<div className="flex flex-col h-full bg-[#F8F9FA]">
|
|
{/* Profile Hero Card */}
|
|
<div className="bg-white px-6 pt-10 pb-8 flex flex-col items-center text-center space-y-5 border-b border-slate-100 relative shadow-sm">
|
|
<div className="absolute top-0 left-0 w-full h-32 bg-[#141B34] -z-10" />
|
|
|
|
<div className="relative">
|
|
<div className="w-32 h-32 rounded-full bg-slate-100 border-4 border-white flex items-center justify-center text-[#141B34] font-black text-4xl shadow-xl overflow-hidden">
|
|
JD
|
|
</div>
|
|
<button className="absolute bottom-1 right-1 w-10 h-10 bg-[#141B34] text-white rounded-full flex items-center justify-center border-4 border-white shadow-lg active:scale-95 transition-all">
|
|
<Camera className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-center space-x-1.5">
|
|
<h2 className="text-2xl font-black text-slate-900 uppercase tracking-tight">John Doe</h2>
|
|
<CheckCircle2 className="w-5 h-5 text-blue-500 fill-blue-50" />
|
|
</div>
|
|
<div className="flex items-center justify-center space-x-2 text-slate-400 font-bold text-xs uppercase tracking-widest">
|
|
<Building2 className="w-3.5 h-3.5" />
|
|
<span>Al Mansoor Household</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-3 w-full max-w-[300px] pt-2">
|
|
<div className="flex-1 bg-slate-50 p-3 rounded-2xl border border-slate-100">
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Plan</div>
|
|
<div className="text-[11px] font-black text-[#141B34] uppercase tracking-widest">Premium</div>
|
|
</div>
|
|
<div className="flex-1 bg-slate-50 p-3 rounded-2xl border border-slate-100">
|
|
<div className="text-[9px] font-black text-slate-400 uppercase tracking-widest">Verified</div>
|
|
<div className="text-[11px] font-black text-emerald-500 uppercase tracking-widest">Yes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Settings Menu Sections */}
|
|
<div className="p-6 space-y-8 pb-32">
|
|
{sections.map((section, idx) => (
|
|
<div key={idx} className="space-y-4">
|
|
<h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em] ml-2">{section.title}</h3>
|
|
<div className="bg-white rounded-[32px] border border-slate-100 shadow-sm overflow-hidden">
|
|
{section.items.map((item, i) => (
|
|
<Link
|
|
key={i}
|
|
href={item.href}
|
|
className={`flex items-center justify-between p-5 hover:bg-slate-50 transition-all ${i !== section.items.length - 1 ? 'border-b border-slate-50' : ''
|
|
}`}
|
|
>
|
|
<div className="flex items-center space-x-4">
|
|
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${item.color} shadow-sm`}>
|
|
<item.icon className="w-5 h-5" />
|
|
</div>
|
|
<span className="text-[13px] font-bold text-slate-900 uppercase tracking-tight">{item.label}</span>
|
|
</div>
|
|
<div className="flex items-center space-x-3">
|
|
{item.badge && (
|
|
<span className="px-3 py-1 bg-blue-50 text-blue-600 text-[9px] font-black uppercase tracking-widest rounded-lg border border-blue-100">
|
|
{item.badge}
|
|
</span>
|
|
)}
|
|
{item.detail && (
|
|
<span className="text-[11px] font-bold text-slate-400">{item.detail}</span>
|
|
)}
|
|
<ChevronRight className="w-4 h-4 text-slate-300" />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<button className="w-full p-6 bg-white text-rose-500 rounded-[32px] font-black text-xs uppercase tracking-[0.2em] flex items-center justify-center space-x-3 active:scale-[0.98] transition-all border border-rose-100 shadow-sm mt-4">
|
|
<LogOut className="w-5 h-5" />
|
|
<span>Sign Out Account</span>
|
|
</button>
|
|
|
|
<div className="text-center pt-4">
|
|
<p className="text-[9px] font-black text-slate-300 uppercase tracking-[0.3em]">Version 2.4.1 (Stable Build)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|