83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useAuthStore } from '@/lib/auth-store';
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
FileText,
|
|
CreditCard,
|
|
ArrowLeftRight,
|
|
Ticket,
|
|
BarChart3,
|
|
Settings,
|
|
} from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, roles: [] },
|
|
{ label: 'Clients', href: '/clients', icon: Users, roles: [] },
|
|
{ label: 'Invoices', href: '/invoices', icon: FileText, roles: [] },
|
|
{ label: 'Payments', href: '/payments', icon: CreditCard, roles: [] },
|
|
{ label: 'Remittances', href: '/remittances', icon: ArrowLeftRight, roles: [] },
|
|
{ label: 'Tickets', href: '/tickets', icon: Ticket, roles: [] },
|
|
{ label: 'Reports', href: '/reports', icon: BarChart3, roles: ['admin', 'staff'] },
|
|
{ label: 'Settings', href: '/settings/tenant', icon: Settings, roles: ['admin'] },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const user = useAuthStore((s) => s.user);
|
|
const userRoles = user?.roles ?? [];
|
|
|
|
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-1">
|
|
{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"
|
|
style={{
|
|
backgroundColor: isActive ? '#0891B2' : 'transparent',
|
|
color: isActive ? '#fff' : '#94A3B8',
|
|
}}
|
|
>
|
|
<Icon size={18} />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 border-t border-slate-700">
|
|
<p className="text-slate-500 text-xs">FiberOps v1.0</p>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|