root
445 lines
16 KiB
TypeScript
445 lines
16 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import type { ReactNode } from 'react'
|
|
import { useEffect, useLayoutEffect, 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, 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 CompanySummary {
|
|
name: string
|
|
brand?: {
|
|
displayName?: string | null
|
|
logoUrl?: string | null
|
|
} | null
|
|
}
|
|
|
|
interface SidebarUser {
|
|
displayName: string
|
|
subtitle: string
|
|
initials: string
|
|
}
|
|
interface EmployeeProfile {
|
|
email: string
|
|
firstName: string
|
|
lastName: string
|
|
role: string
|
|
preferredLanguage?: string
|
|
}
|
|
|
|
interface GeneratedMenuItem {
|
|
id: string
|
|
systemKey: string | null
|
|
label: string
|
|
itemType: 'INTERNAL_PAGE' | 'EXTERNAL_LINK' | 'PARENT_MENU' | 'SECTION_LABEL' | 'DIVIDER'
|
|
routeOrUrl: string | null
|
|
icon: string | null
|
|
parentId: string | null
|
|
openInNewTab: boolean
|
|
displayOrder: number
|
|
children: GeneratedMenuItem[]
|
|
}
|
|
|
|
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 ICON_MAP = {
|
|
LayoutDashboard,
|
|
Car,
|
|
Calendar,
|
|
Globe,
|
|
Users,
|
|
Tag,
|
|
UserPlus,
|
|
BarChart2,
|
|
CreditCard,
|
|
Bell,
|
|
Settings,
|
|
FileText,
|
|
Star,
|
|
AlertTriangle,
|
|
} as const
|
|
|
|
const SIDEBAR_BRAND_KEY = 'dashboard_brand'
|
|
|
|
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, theme } = useDashboardI18n()
|
|
const isRtl = language === 'ar'
|
|
const pathname = usePathname()
|
|
const appPath = toDashboardAppPath(pathname)
|
|
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 [menuItems, setMenuItems] = useState<GeneratedMenuItem[] | null>(null)
|
|
const [open, setOpen] = useState(false)
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => { setMounted(true) }, [])
|
|
|
|
useLayoutEffect(() => {
|
|
try {
|
|
const cached = window.localStorage.getItem(SIDEBAR_BRAND_KEY)
|
|
if (!cached) return
|
|
const parsed = JSON.parse(cached) as Partial<BrandSettings>
|
|
if (typeof parsed.displayName === 'string' && parsed.displayName.trim()) {
|
|
setBrand({
|
|
displayName: parsed.displayName,
|
|
logoUrl: typeof parsed.logoUrl === 'string' ? parsed.logoUrl : null,
|
|
})
|
|
}
|
|
} catch {}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
async function loadBrand() {
|
|
try {
|
|
const brandData = await apiFetch<BrandSettings | null>('/companies/me/brand')
|
|
if (cancelled) return
|
|
if (brandData?.displayName?.trim()) {
|
|
setBrand(brandData)
|
|
window.localStorage.setItem(SIDEBAR_BRAND_KEY, JSON.stringify(brandData))
|
|
return
|
|
}
|
|
} catch {}
|
|
|
|
try {
|
|
const company = await apiFetch<CompanySummary>('/companies/me')
|
|
if (cancelled) return
|
|
|
|
const resolvedBrand: BrandSettings = {
|
|
displayName: company.brand?.displayName?.trim() || company.name,
|
|
logoUrl: company.brand?.logoUrl ?? null,
|
|
}
|
|
|
|
setBrand(resolvedBrand)
|
|
window.localStorage.setItem(SIDEBAR_BRAND_KEY, JSON.stringify(resolvedBrand))
|
|
} catch {}
|
|
}
|
|
|
|
loadBrand()
|
|
|
|
return () => { cancelled = true }
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
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
|
|
|
|
Promise.all([
|
|
apiFetch<{ employee: EmployeeProfile }>('/auth/employee/me'),
|
|
apiFetch<{ items: GeneratedMenuItem[] }>('/auth/employee/menu').catch(() => null),
|
|
])
|
|
.then(([{ employee }, menu]) => {
|
|
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 (menu?.items) setMenuItems(menu.items)
|
|
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)
|
|
}
|
|
|
|
const isGeneratedItemActive = (item: GeneratedMenuItem) => {
|
|
if (!item.routeOrUrl || item.itemType !== 'INTERNAL_PAGE') return false
|
|
if (item.routeOrUrl === '/') return appPath === '/'
|
|
return appPath.startsWith(item.routeOrUrl)
|
|
}
|
|
|
|
const fallbackMenuItems = NAV_ITEMS
|
|
.filter((item) => !mounted || hasMinRole(role, item.minRole))
|
|
.map((item) => ({
|
|
id: item.href,
|
|
systemKey: item.key,
|
|
label: dict.nav[item.key] ?? item.key,
|
|
itemType: 'INTERNAL_PAGE' as const,
|
|
routeOrUrl: item.href,
|
|
icon: item.icon.name,
|
|
parentId: null,
|
|
openInNewTab: false,
|
|
displayOrder: 0,
|
|
children: [],
|
|
}))
|
|
|
|
const resolvedMenuItems = menuItems ?? fallbackMenuItems
|
|
|
|
function renderGeneratedMenu(items: GeneratedMenuItem[], depth = 0): ReactNode {
|
|
return items.map((item) => {
|
|
const label = item.systemKey ? (dict.nav[item.systemKey] ?? item.label) : item.label
|
|
const paddingClass = depth > 0 ? 'pl-6' : ''
|
|
const Icon = item.icon && item.icon in ICON_MAP ? ICON_MAP[item.icon as keyof typeof ICON_MAP] : null
|
|
|
|
if (item.itemType === 'DIVIDER') {
|
|
return <div key={item.id} className="my-3 border-t border-blue-900/50" />
|
|
}
|
|
|
|
if (item.itemType === 'SECTION_LABEL') {
|
|
return (
|
|
<p key={item.id} className="px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">
|
|
{label}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
if (item.itemType === 'PARENT_MENU') {
|
|
return (
|
|
<div key={item.id} className="space-y-1">
|
|
<div className={`flex items-center gap-3 rounded-2xl px-3 py-2 text-sm font-medium text-slate-300 ${paddingClass}`}>
|
|
{Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null}
|
|
{label}
|
|
</div>
|
|
<div className="space-y-0.5">{renderGeneratedMenu(item.children, depth + 1)}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const active = mounted && isGeneratedItemActive(item)
|
|
const className = [
|
|
'flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm font-medium transition-colors',
|
|
paddingClass,
|
|
active ? 'bg-orange-500 text-white' : 'text-slate-400 hover:bg-blue-900/40 hover:text-white',
|
|
].join(' ')
|
|
|
|
if (item.itemType === 'EXTERNAL_LINK' && item.routeOrUrl) {
|
|
return (
|
|
<a
|
|
key={item.id}
|
|
href={item.routeOrUrl}
|
|
target={item.openInNewTab ? '_blank' : '_self'}
|
|
rel={item.openInNewTab ? 'noreferrer noopener' : undefined}
|
|
className={className}
|
|
>
|
|
{Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null}
|
|
{label}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Link key={item.id} href={item.routeOrUrl || '/'} className={className}>
|
|
{Icon ? <Icon className="h-4 w-4 flex-shrink-0" /> : null}
|
|
{label}
|
|
</Link>
|
|
)
|
|
})
|
|
}
|
|
|
|
function signOut() {
|
|
localStorage.removeItem(EMPLOYEE_PROFILE_KEY)
|
|
void fetch('/dashboard/api/v1/auth/employee/logout', { method: 'POST', credentials: 'include' })
|
|
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 ${theme === 'light' ? 'text-blue-600' : 'text-white'}`}>
|
|
{brand?.displayName ?? 'RentalDriveGo'}
|
|
</span>
|
|
</a>
|
|
|
|
<nav className="flex-1 space-y-0.5 overflow-y-auto px-3 py-4">
|
|
{menuItems ? renderGeneratedMenu(resolvedMenuItems) : 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>
|
|
</>
|
|
)
|
|
}
|