238 lines
8.8 KiB
TypeScript
238 lines
8.8 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useState, useEffect } from 'react';
|
|
import {
|
|
Bike,
|
|
Settings,
|
|
Wallet,
|
|
Store,
|
|
Zap,
|
|
Battery,
|
|
Menu,
|
|
X,
|
|
Users,
|
|
FileText,
|
|
BarChart3,
|
|
CreditCard,
|
|
MapPin,
|
|
Shield,
|
|
Truck,
|
|
ChevronDown,
|
|
LogOut,
|
|
Calculator,
|
|
Wrench,
|
|
Target, User, History
|
|
} from 'lucide-react';
|
|
import { getUserName, getUserRole, logout } from '@/lib/auth';
|
|
|
|
const ROLE_LABELS: Record<string, string> = {
|
|
super_admin: 'Super Admin',
|
|
admin_manager: 'Admin Manager',
|
|
staff: 'Front Desk',
|
|
accountant: 'Accountant',
|
|
investor: 'Investor',
|
|
biker: 'Biker',
|
|
'swap-station': 'Swap Station',
|
|
merchant: 'Merchant',
|
|
};
|
|
|
|
const adminNavItems = [
|
|
{ label: 'Dashboard', href: '/admin', icon: BarChart3 },
|
|
{ label: 'KYC Requests', href: '/admin/kyc', icon: Shield },
|
|
{ label: 'Rentals', href: '/admin/rentals', icon: FileText },
|
|
{ label: 'Bikers', href: '/admin/bikers', icon: Users },
|
|
{ label: 'Investors', href: '/admin/investors', icon: Wallet },
|
|
{ label: 'Fleet Management', href: '/admin/fleet', icon: Bike },
|
|
{ label: 'Merchants (P2)', href: '/admin/merchants', icon: Store },
|
|
{ label: 'Swap Stations (P3)', href: '/admin/swap-stations', icon: Zap },
|
|
|
|
{ label: 'Damage & Maintenance', href: '/admin/maintenance', icon: Wrench },
|
|
{ label: 'Accounting', href: '/admin/accounting', icon: Calculator },
|
|
{ label: 'Hubs', href: '/admin/hub', icon: MapPin },
|
|
{ label: 'Reports', href: '/admin/reports', icon: BarChart3 },
|
|
{ label: 'Users Management', href: '/admin/users', icon: Users },
|
|
{ label: 'Roles & Permissions', href: '/admin/roles', icon: Shield },
|
|
{ label: 'Settings', href: '/admin/settings', icon: Settings },
|
|
|
|
];
|
|
|
|
const bikerNavItems = [
|
|
{ label: 'Biker Dashboard', href: '/', icon: Bike },
|
|
{ label: 'Rent Bike', href: '/rent', icon: Zap },
|
|
{ label: 'Browse EVs', href: '/bikes', icon: Battery },
|
|
];
|
|
|
|
const investorNavItems = [
|
|
{ label: 'Dashboard', href: '/investor', icon: Bike },
|
|
{ label: 'My Investments', href: '/investor/plans', icon: Target },
|
|
{ label: 'Rental History', href: '/investor/rental-history', icon: History },
|
|
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
|
{ label: 'My Profile', href: '/investor/profile', icon: User },
|
|
];
|
|
|
|
const shopNavItems = [
|
|
{ label: 'Dashboard', href: '/shop', icon: Store },
|
|
{ label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
|
|
{ label: 'Fleet', href: '/shop/fleet', icon: Bike },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
const [expandedMenu, setExpandedMenu] = useState<string | null>(null);
|
|
const [userName, setUserName] = useState('User');
|
|
const [userRole, setUserRole] = useState('admin');
|
|
|
|
useEffect(() => {
|
|
setUserName(getUserName() || 'User');
|
|
setUserRole(getUserRole() || 'staff');
|
|
}, []);
|
|
|
|
const isAdmin = pathname.startsWith('/admin');
|
|
const isInvestor = pathname.startsWith('/investor');
|
|
const isShop = pathname.startsWith('/shop');
|
|
|
|
const roleLabel = ROLE_LABELS[userRole] || userRole;
|
|
|
|
const navItems = isAdmin ? adminNavItems :
|
|
isInvestor ? investorNavItems :
|
|
isShop ? shopNavItems : bikerNavItems;
|
|
|
|
const bottomNavItems = isAdmin ? [
|
|
{ label: 'Home', href: '/admin', icon: BarChart3 },
|
|
{ label: 'Fleet', href: '/admin/fleet', icon: Bike },
|
|
{ label: 'Users', href: '/admin/users', icon: Users },
|
|
] : isInvestor ? [
|
|
{ label: 'Home', href: '/investor', icon: Bike },
|
|
{ label: 'Investments', href: '/investor/plans', icon: Target },
|
|
{ label: 'History', href: '/investor/rental-history', icon: History },
|
|
{ label: 'Withdraw', href: '/investor/withdraw', icon: CreditCard },
|
|
{ label: 'Profile', href: '/investor/profile', icon: User },
|
|
] : isShop ? [
|
|
{ label: 'Home', href: '/shop', icon: Store },
|
|
{ label: 'Deliveries', href: '/shop/deliveries', icon: Truck },
|
|
{ label: 'Fleet', href: '/shop/fleet', icon: Bike },
|
|
] : [
|
|
{ label: 'Home', href: '/', icon: Bike },
|
|
{ label: 'Rent', href: '/rent', icon: Zap },
|
|
{ label: 'EVs', href: '/bikes', icon: Battery },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<aside className={`
|
|
fixed left-0 top-0 h-screen w-64 bg-white border-r border-slate-200 shadow-sm z-50
|
|
transform transition-transform duration-300 ease-in-out
|
|
${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
|
`}>
|
|
<div className="p-4 border-b border-slate-100">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-xl font-extrabold text-accent">JAIBEN</h1>
|
|
<p className="text-xs text-slate-500">Mobility Ltd</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="px-2 py-1 bg-accent-light rounded text-xs font-semibold text-accent">
|
|
{roleLabel}
|
|
</div>
|
|
<button
|
|
onClick={() => setMobileOpen(false)}
|
|
className="lg:hidden p-1 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="p-3 space-y-1 overflow-y-auto h-[calc(100vh-140px)] pb-24 lg:pb-3">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setMobileOpen(false)}
|
|
className={`
|
|
flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200
|
|
${isActive
|
|
? 'bg-accent text-white shadow-sm'
|
|
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
|
|
}
|
|
`}
|
|
>
|
|
<Icon className={`w-5 h-5 ${isActive ? 'text-white' : ''}`} />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 p-3 border-t border-slate-100 bg-white">
|
|
<Link href="/admin/users/USR-001" className="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 rounded-lg -mx-1">
|
|
<div className="w-8 h-8 rounded-full bg-accent-light flex items-center justify-center">
|
|
<span className="text-sm font-bold text-accent">{userName.charAt(0).toUpperCase()}</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-slate-700 truncate">{userName}</p>
|
|
<p className="text-xs text-slate-400">{roleLabel}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
logout();
|
|
window.location.href = '/login';
|
|
}}
|
|
className="p-1.5 hover:bg-slate-100 rounded-lg"
|
|
>
|
|
<LogOut className="w-4 h-4 text-slate-400" />
|
|
</button>
|
|
</Link>
|
|
<div className="mt-2 text-xs text-slate-400 text-center">
|
|
<p>Phase 1 - Core EV Rental</p>
|
|
<p className="mt-1">v1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Bottom Navigation for Mobile */}
|
|
<nav className="lg:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 flex items-center h-16 z-30 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
|
|
{bottomNavItems.map((item) => {
|
|
const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`
|
|
flex flex-col items-center justify-center flex-1 h-full gap-1 transition-colors
|
|
${isActive ? 'text-accent' : 'text-slate-500 hover:text-slate-900'}
|
|
`}
|
|
>
|
|
<Icon className={`w-5 h-5 ${isActive ? 'text-accent' : ''}`} />
|
|
<span className="text-[10px] font-medium">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
{isAdmin && (
|
|
<button
|
|
onClick={() => setMobileOpen(true)}
|
|
className="flex flex-col items-center justify-center flex-1 h-full gap-1 text-slate-500 hover:text-slate-900 transition-colors"
|
|
>
|
|
<Menu className="w-5 h-5" />
|
|
<span className="text-[10px] font-medium">Menu</span>
|
|
</button>
|
|
)}
|
|
</nav>
|
|
|
|
{mobileOpen && (
|
|
<div
|
|
className="lg:hidden fixed inset-0 bg-black/40 backdrop-blur-sm z-40 transition-opacity"
|
|
onClick={() => setMobileOpen(false)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
} |