root
284 lines
11 KiB
TypeScript
284 lines
11 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import { useEffect, useState } from 'react'
|
|
import {
|
|
LayoutDashboard,
|
|
Car,
|
|
Calendar,
|
|
Globe,
|
|
Users,
|
|
Tag,
|
|
UserPlus,
|
|
BarChart2,
|
|
CreditCard,
|
|
Bell,
|
|
Settings,
|
|
LogOut,
|
|
FileText,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Star,
|
|
AlertTriangle,
|
|
} from 'lucide-react'
|
|
import { DashboardLanguageSwitcher, DashboardThemeSwitcher, useDashboardI18n } from '@/components/I18nProvider'
|
|
import { marketplaceUrl } from '@/lib/urls'
|
|
import { EMPLOYEE_PROFILE_KEY, EMPLOYEE_TOKEN_KEY, apiFetch } from '@/lib/api'
|
|
import { toDashboardAppPath } from '@/lib/dashboardPaths'
|
|
import { SHARED_LANGUAGE_KEY, readCurrentUserScopedPreference } from '@/lib/preferences'
|
|
|
|
interface BrandSettings {
|
|
displayName: string
|
|
logoUrl: string | null
|
|
}
|
|
|
|
interface SidebarUser {
|
|
displayName: string
|
|
subtitle: string
|
|
initials: string
|
|
}
|
|
interface EmployeeProfile {
|
|
email: string
|
|
firstName: string
|
|
lastName: string
|
|
role: string
|
|
preferredLanguage?: string
|
|
}
|
|
|
|
function computeInitials(name: string): string {
|
|
const parts = name.trim().split(/\s+/).filter(Boolean)
|
|
if (parts.length === 0) return 'U'
|
|
if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase()
|
|
return `${parts[0].slice(0, 1)}${parts[1].slice(0, 1)}`.toUpperCase()
|
|
}
|
|
|
|
function toSidebarUser(profile: Partial<EmployeeProfile>, fallbackName: string, fallbackSubtitle: string): SidebarUser {
|
|
const fullName = `${profile.firstName ?? ''} ${profile.lastName ?? ''}`.trim()
|
|
const email = profile.email ?? ''
|
|
const role = profile.role ?? ''
|
|
const displayName = fullName || (email ? email.split('@')[0] : fallbackName)
|
|
const subtitle = email || role || fallbackSubtitle
|
|
const initials = computeInitials(fullName || email || fallbackName)
|
|
return { displayName, subtitle, initials }
|
|
}
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: '/', key: 'dashboard', icon: LayoutDashboard, exact: true, minRole: 'AGENT' },
|
|
{ href: '/fleet', key: 'fleet', icon: Car, minRole: 'AGENT' },
|
|
{ href: '/reservations', key: 'reservations', icon: Calendar, minRole: 'AGENT' },
|
|
{ href: '/online-reservations', key: 'onlineReservations', icon: Globe, minRole: 'AGENT' },
|
|
{ href: '/customers', key: 'customers', icon: Users, minRole: 'AGENT' },
|
|
{ href: '/offers', key: 'offers', icon: Tag, minRole: 'MANAGER' },
|
|
{ href: '/team', key: 'team', icon: UserPlus, minRole: 'AGENT' },
|
|
{ href: '/reports', key: 'reports', icon: BarChart2, minRole: 'MANAGER' },
|
|
{ href: '/subscription', key: 'subscription', icon: CreditCard, minRole: 'OWNER' },
|
|
{ href: '/billing', key: 'billing', icon: CreditCard, minRole: 'MANAGER' },
|
|
{ href: '/contracts', key: 'contracts', icon: FileText, minRole: 'AGENT' },
|
|
{ href: '/reviews', key: 'reviews', icon: Star, minRole: 'AGENT' },
|
|
{ href: '/complaints', key: 'complaints', icon: AlertTriangle, minRole: 'AGENT' },
|
|
{ href: '/notifications', key: 'notifications', icon: Bell, minRole: 'AGENT' },
|
|
{ href: '/settings', key: 'settings', icon: Settings, minRole: 'OWNER' },
|
|
] as const
|
|
|
|
const ROLE_RANK: Record<string, number> = { OWNER: 3, MANAGER: 2, AGENT: 1 }
|
|
|
|
function hasMinRole(employeeRole: string, minRole: string): boolean {
|
|
return (ROLE_RANK[employeeRole] ?? 0) >= (ROLE_RANK[minRole] ?? 0)
|
|
}
|
|
|
|
function notifyParent(message: Record<string, unknown>) {
|
|
if (typeof window === 'undefined' || window.parent === window) return
|
|
window.parent.postMessage(message, '*')
|
|
}
|
|
|
|
export default function Sidebar() {
|
|
const { dict, language, setLanguage } = useDashboardI18n()
|
|
const isRtl = language === 'ar'
|
|
const pathname = usePathname()
|
|
const appPath = toDashboardAppPath(pathname)
|
|
const router = useRouter()
|
|
const [brand, setBrand] = useState<BrandSettings | null>(null)
|
|
const [user, setUser] = useState<SidebarUser>({
|
|
displayName: dict.workspaceUser,
|
|
subtitle: dict.localAuth,
|
|
initials: 'W',
|
|
})
|
|
const [role, setRole] = useState<string>('AGENT')
|
|
const [open, setOpen] = useState(false)
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => { setMounted(true) }, [])
|
|
|
|
useEffect(() => {
|
|
apiFetch<BrandSettings>('/companies/me/brand').then(setBrand).catch(() => {})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
const token = window.localStorage.getItem(EMPLOYEE_TOKEN_KEY)
|
|
if (!token) {
|
|
setUser({
|
|
displayName: dict.workspaceUser,
|
|
subtitle: dict.localAuth,
|
|
initials: 'W',
|
|
})
|
|
return
|
|
}
|
|
|
|
const cached = window.localStorage.getItem(EMPLOYEE_PROFILE_KEY)
|
|
if (cached) {
|
|
try {
|
|
const profile = JSON.parse(cached) as Partial<EmployeeProfile>
|
|
setUser(toSidebarUser(profile, dict.workspaceUser, dict.localAuth))
|
|
if (profile.role) setRole(profile.role)
|
|
} catch {}
|
|
}
|
|
|
|
let cancelled = false
|
|
|
|
apiFetch<{ employee: EmployeeProfile }>('/auth/employee/me')
|
|
.then(({ employee }) => {
|
|
if (cancelled) return
|
|
window.localStorage.setItem(EMPLOYEE_PROFILE_KEY, JSON.stringify(employee))
|
|
setUser(toSidebarUser(employee, dict.workspaceUser, dict.localAuth))
|
|
if (employee.role) setRole(employee.role)
|
|
if (employee.preferredLanguage === 'en' || employee.preferredLanguage === 'fr' || employee.preferredLanguage === 'ar') {
|
|
// Only apply the server-side preference when the employee has no local preference
|
|
// stored yet — avoids overriding a language the user manually switched to.
|
|
const existingPref = readCurrentUserScopedPreference(SHARED_LANGUAGE_KEY)
|
|
if (!existingPref) {
|
|
setLanguage(employee.preferredLanguage)
|
|
document.cookie = `rentaldrivego-language=${employee.preferredLanguage}; path=/; max-age=31536000; samesite=lax`
|
|
}
|
|
}
|
|
})
|
|
.catch(() => {
|
|
if (cancelled) return
|
|
if (!cached) setUser(toSidebarUser({}, dict.workspaceUser, dict.localAuth))
|
|
})
|
|
|
|
return () => { cancelled = true }
|
|
}, [dict.localAuth, dict.workspaceUser])
|
|
|
|
// Close sidebar when navigating on mobile
|
|
useEffect(() => { setOpen(false) }, [pathname])
|
|
|
|
const isActive = (item: typeof NAV_ITEMS[number]) => {
|
|
if ('exact' in item && item.exact) return appPath === item.href
|
|
return appPath.startsWith(item.href)
|
|
}
|
|
|
|
function signOut() {
|
|
localStorage.removeItem(EMPLOYEE_TOKEN_KEY)
|
|
localStorage.removeItem(EMPLOYEE_PROFILE_KEY)
|
|
document.cookie = 'employee_token=; path=/; max-age=0; samesite=lax'
|
|
window.dispatchEvent(new CustomEvent('rentaldrivego:auth-changed'))
|
|
notifyParent({ type: 'rentaldrivego:employee-logout' })
|
|
window.location.href = marketplaceUrl
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile backdrop */}
|
|
{open && (
|
|
<div
|
|
className="fixed inset-0 z-30 bg-blue-950/50 lg:hidden"
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Tab to open sidebar — only visible when sidebar is closed on mobile */}
|
|
{!open && (
|
|
<button
|
|
onClick={() => setOpen(true)}
|
|
aria-label="Open sidebar"
|
|
className={[
|
|
'fixed top-1/2 z-50 flex h-14 w-6 -translate-y-1/2 items-center justify-center bg-[#0a1128] 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 border-r border-blue-900/50 bg-[#0a1128]/94 backdrop-blur-xl 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(' ')}
|
|
>
|
|
<a href={marketplaceUrl} target="_top" 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 overflow-hidden rounded-lg bg-orange-400">
|
|
{brand?.logoUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={brand.logoUrl} alt={brand.displayName} className="h-8 w-8 object-cover" />
|
|
) : (
|
|
<Car className="h-4 w-4 text-blue-950" />
|
|
)}
|
|
</div>
|
|
<span className="truncate text-sm font-bold tracking-wide text-white">
|
|
{brand?.displayName ?? 'RentalDriveGo'}
|
|
</span>
|
|
</a>
|
|
|
|
<nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
|
|
{NAV_ITEMS.filter((item) => !mounted || hasMinRole(role, item.minRole)).map((item) => {
|
|
const Icon = item.icon
|
|
const active = mounted && isActive(item)
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={[
|
|
'flex items-center gap-3 rounded-2xl 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.nav[item.key]}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
|
|
<div className="border-t border-blue-900/50 px-3 py-4">
|
|
<div className="flex items-center gap-3 rounded-2xl 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">
|
|
{user.initials}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-white">{user.displayName}</p>
|
|
<p className="truncate text-xs text-slate-400">{user.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={signOut}
|
|
className="mt-2 flex w-full items-center gap-3 rounded-2xl 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 className="mt-3 flex items-center gap-2 border-t border-blue-900/50 pt-3">
|
|
<DashboardLanguageSwitcher />
|
|
<DashboardThemeSwitcher />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Arrow tab to collapse sidebar (mobile only, sticks to outer edge) */}
|
|
<button
|
|
onClick={() => setOpen(false)}
|
|
aria-label="Close sidebar"
|
|
className={[
|
|
'absolute top-1/2 z-10 flex h-14 w-5 -translate-y-1/2 items-center justify-center bg-[#0a1128] 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>
|
|
</>
|
|
)
|
|
}
|