68 lines
3.1 KiB
TypeScript
68 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
import {
|
|
LayoutDashboard, Users, UserPlus, FileText, CreditCard,
|
|
ArrowLeftRight, Ticket, BarChart3, ScrollText, Settings,
|
|
} from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, roles: [] },
|
|
{ label: 'Clients', href: '/clients', icon: Users, roles: [] },
|
|
{ label: 'Leads', href: '/leads', icon: UserPlus, roles: ['admin', 'staff'] },
|
|
{ label: 'Invoices', href: '/invoices', icon: FileText, roles: [] },
|
|
{ label: 'Payments', href: '/payments', icon: CreditCard, roles: [] },
|
|
{ label: 'Remittances', href: '/remittances', icon: ArrowLeftRight, roles: ['admin', 'collector'] },
|
|
{ label: 'Tickets', href: '/tickets', icon: Ticket, roles: [] },
|
|
{ label: 'Reports', href: '/reports', icon: BarChart3, roles: ['admin', 'staff'] },
|
|
{ label: 'Audit Log', href: '/audit-log', icon: ScrollText, roles: ['admin'] },
|
|
{ label: 'Settings', href: '/settings', icon: Settings, roles: ['admin'] },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const user = useAuthStore((s) => s.user);
|
|
const userRoles: string[] = (user?.roles ?? []).map((r: string) => r.toLowerCase());
|
|
|
|
const visibleItems = navItems.filter(
|
|
(item) => item.roles.length === 0 || item.roles.some((r) => userRoles.includes(r))
|
|
);
|
|
|
|
return (
|
|
<aside className="flex flex-col w-64 min-h-screen" style={{ backgroundColor: '#0F172A' }}>
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-2 px-6 py-5 border-b border-slate-700">
|
|
<div className="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-sm"
|
|
style={{ backgroundColor: '#0891B2' }}>F</div>
|
|
<span className="text-white font-semibold text-lg">FiberOps</span>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
|
|
{visibleItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
|
|
return (
|
|
<Link key={item.href} href={item.href}
|
|
className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer"
|
|
style={{
|
|
backgroundColor: isActive ? '#0891B2' : 'transparent',
|
|
color: isActive ? '#fff' : '#94A3B8',
|
|
}}
|
|
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.backgroundColor = '#1E293B'; }}
|
|
onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent'; }}>
|
|
<Icon size={18} />{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="px-6 py-4 border-t border-slate-700">
|
|
<p className="text-slate-500 text-xs">FiberOps v1.0</p>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|