root
224 lines
7.9 KiB
TypeScript
224 lines
7.9 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import {
|
|
LayoutDashboard,
|
|
User,
|
|
Bookmark,
|
|
Bell,
|
|
LogOut,
|
|
ChevronRight,
|
|
ChevronLeft,
|
|
Car,
|
|
} from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import { useMarketplacePreferences } from '@/components/MarketplaceShell'
|
|
import { clearRenterSession, loadRenterProfile } from '@/lib/renter'
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: '/renter/dashboard', key: 'dashboard', icon: LayoutDashboard, exact: true },
|
|
{ href: '/renter/profile', key: 'profile', icon: User },
|
|
{ href: '/renter/saved-companies', key: 'savedCompanies', icon: Bookmark },
|
|
{ href: '/renter/notifications', key: 'notifications', icon: Bell },
|
|
] as const
|
|
|
|
const dicts = {
|
|
en: {
|
|
dashboard: 'Dashboard',
|
|
profile: 'Profile',
|
|
savedCompanies: 'Saved companies',
|
|
notifications: 'Notifications',
|
|
signOut: 'Sign out',
|
|
renterPortal: 'Renter Portal',
|
|
rights: 'All rights reserved.',
|
|
},
|
|
fr: {
|
|
dashboard: 'Tableau de bord',
|
|
profile: 'Profil',
|
|
savedCompanies: 'Entreprises sauvegardées',
|
|
notifications: 'Notifications',
|
|
signOut: 'Déconnexion',
|
|
renterPortal: 'Espace client',
|
|
rights: 'Tous droits réservés.',
|
|
},
|
|
ar: {
|
|
dashboard: 'لوحة التحكم',
|
|
profile: 'الملف الشخصي',
|
|
savedCompanies: 'الشركات المحفوظة',
|
|
notifications: 'الإشعارات',
|
|
signOut: 'تسجيل الخروج',
|
|
renterPortal: 'بوابة المستأجر',
|
|
rights: 'جميع الحقوق محفوظة.',
|
|
},
|
|
} as const
|
|
|
|
function computeInitials(name: string): string {
|
|
const parts = name.trim().split(/\s+/).filter(Boolean)
|
|
if (parts.length === 0) return 'R'
|
|
if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
|
|
return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
|
|
}
|
|
|
|
export default function RenterShell({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const { language } = useMarketplacePreferences()
|
|
const dict = dicts[language]
|
|
const isRtl = language === 'ar'
|
|
const [open, setOpen] = useState(false)
|
|
const [userInitials, setUserInitials] = useState('R')
|
|
const [userName, setUserName] = useState<string | null>(null)
|
|
const [userEmail, setUserEmail] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
loadRenterProfile()
|
|
.then((profile) => {
|
|
const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
|
|
setUserName(fullName || profile.email.split('@')[0])
|
|
setUserEmail(profile.email)
|
|
setUserInitials(computeInitials(fullName || profile.email))
|
|
})
|
|
.catch(() => {})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
setOpen(false)
|
|
}, [pathname])
|
|
|
|
function signOut() {
|
|
clearRenterSession()
|
|
router.push('/')
|
|
}
|
|
|
|
const isActive = (item: (typeof NAV_ITEMS)[number]) => {
|
|
if ('exact' in item && item.exact) return pathname === item.href
|
|
return pathname.startsWith(item.href)
|
|
}
|
|
|
|
const activeNav = NAV_ITEMS.find((item) => isActive(item))
|
|
const pageTitle = activeNav ? (dict[activeNav.key as keyof typeof dict] as string) : dict.dashboard
|
|
|
|
return (
|
|
<div className="site-page flex min-h-screen">
|
|
{open && (
|
|
<div
|
|
className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{!open && (
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
aria-label="Open sidebar"
|
|
className={[
|
|
'fixed top-1/2 z-50 -translate-y-1/2 flex items-center justify-center w-6 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
|
|
isRtl ? 'right-0 rounded-l-lg' : 'left-0 rounded-r-lg',
|
|
].join(' ')}
|
|
>
|
|
{isRtl ? <ChevronLeft className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
|
|
</button>
|
|
)}
|
|
|
|
<aside
|
|
className={[
|
|
'fixed inset-y-0 z-40 flex w-64 flex-col bg-blue-950 transition-transform duration-300',
|
|
isRtl ? 'right-0' : 'left-0',
|
|
'lg:translate-x-0',
|
|
open ? 'translate-x-0' : isRtl ? 'translate-x-full' : '-translate-x-full',
|
|
].join(' ')}
|
|
>
|
|
<div className="flex items-center gap-3 border-b border-blue-900/50 px-6 py-5">
|
|
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-orange-500 overflow-hidden">
|
|
<Car className="h-4 w-4 text-white" />
|
|
</div>
|
|
<span className="truncate text-sm font-bold tracking-wide text-white">
|
|
{dict.renterPortal}
|
|
</span>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
|
|
{NAV_ITEMS.map((item) => {
|
|
const Icon = item.icon
|
|
const active = isActive(item)
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={[
|
|
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
|
|
active
|
|
? 'bg-orange-500 text-white'
|
|
: 'text-slate-400 hover:bg-blue-900/40 hover:text-white',
|
|
].join(' ')}
|
|
>
|
|
<Icon className="h-4 w-4 flex-shrink-0" />
|
|
{dict[item.key as keyof typeof dict] as string}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
<div className="border-t border-stone-800 px-3 py-4">
|
|
<div className="flex items-center gap-3 rounded-lg px-3 py-2">
|
|
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
|
|
{userInitials}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
{userName && (
|
|
<p className="truncate text-sm font-medium text-white">{userName}</p>
|
|
)}
|
|
{userEmail && (
|
|
<p className="truncate text-xs text-stone-400">{userEmail}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={signOut}
|
|
className="mt-2 flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-blue-900/40 hover:text-white"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
{dict.signOut}
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setOpen(false)}
|
|
aria-label="Close sidebar"
|
|
className={[
|
|
'absolute top-1/2 z-10 -translate-y-1/2 flex items-center justify-center w-5 h-14 bg-blue-950 text-white shadow-lg lg:hidden',
|
|
isRtl ? '-left-5 rounded-l-lg' : '-right-5 rounded-r-lg',
|
|
].join(' ')}
|
|
>
|
|
{isRtl ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronLeft className="h-3.5 w-3.5" />}
|
|
</button>
|
|
</aside>
|
|
|
|
<div
|
|
className={[
|
|
'flex min-h-screen min-w-0 flex-1 flex-col',
|
|
isRtl ? 'lg:mr-64' : 'lg:ml-64',
|
|
].join(' ')}
|
|
>
|
|
<header className="flex h-16 items-center justify-between border-b border-stone-200/80 bg-white/80 px-6 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
|
|
<h1 className="text-lg font-semibold text-stone-900 dark:text-stone-100">{pageTitle}</h1>
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-500 text-xs font-semibold text-white">
|
|
{userInitials}
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex-1 overflow-y-auto py-8">
|
|
{children}
|
|
</main>
|
|
|
|
<footer className="border-t border-stone-200/80 bg-white/80 px-6 py-4 backdrop-blur transition-colors dark:border-blue-900 dark:bg-blue-950/70">
|
|
<p className="text-center text-xs text-stone-400 dark:text-stone-500">
|
|
© {new Date().getFullYear()} RentalDriveGo. {dict.rights}
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|