73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useAuthStore } from '@/lib/auth';
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/', icon: '📊' },
|
|
{ name: 'Tenants', href: '/tenants', icon: '🏢' },
|
|
{ name: 'Users', href: '/users', icon: '👥' },
|
|
{
|
|
name: 'Support Tickets',
|
|
href: '/support',
|
|
icon: '🎫',
|
|
children: [
|
|
{ name: 'All Tickets', href: '/support' },
|
|
{ name: 'Open', href: '/support?status=open' },
|
|
{ name: 'My Assigned', href: '/support?assigned=me' },
|
|
],
|
|
},
|
|
{ name: 'Audit Logs', href: '/audit-logs', icon: '📋' },
|
|
];
|
|
|
|
export function AdminSidebar() {
|
|
const pathname = usePathname();
|
|
const admin = useAuthStore((s) => s.admin);
|
|
|
|
return (
|
|
<aside className="w-64 bg-white border-r border-surface-200 flex flex-col shrink-0">
|
|
<div className="h-16 flex items-center px-6 border-b border-surface-200">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<span className="text-lg font-bold text-primary-600">FiberOps</span>
|
|
<span className="text-xs font-medium text-surface-400 bg-surface-100 px-2 py-0.5 rounded">Admin</span>
|
|
</Link>
|
|
</div>
|
|
|
|
<nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
|
{navigation.map((item) => {
|
|
const isActive =
|
|
item.href === '/'
|
|
? pathname === '/'
|
|
: pathname.startsWith(item.href);
|
|
|
|
return (
|
|
<div key={item.name}>
|
|
<Link
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-primary-50 text-primary-700'
|
|
: 'text-surface-600 hover:bg-surface-100 hover:text-surface-900'
|
|
}`}
|
|
>
|
|
<span>{item.icon}</span>
|
|
{item.name}
|
|
</Link>
|
|
</div>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-surface-200">
|
|
<div className="text-xs text-surface-500">
|
|
<p className="font-medium text-surface-700">
|
|
{admin?.firstName} {admin?.lastName}
|
|
</p>
|
|
<p>{admin?.email}</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|