91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
MessageSquare,
|
|
BookOpen,
|
|
LogOut,
|
|
ShieldCheck,
|
|
BarChart3,
|
|
Flag,
|
|
CreditCard,
|
|
Settings,
|
|
Globe,
|
|
FileText,
|
|
Briefcase,
|
|
Tags,
|
|
Image as ImageIcon
|
|
} from 'lucide-react';
|
|
|
|
const menuItems = [
|
|
{ name: 'Dashboard', icon: LayoutDashboard, href: '/dashboard' },
|
|
{ name: 'Utilisateurs', icon: Users, href: '/users' },
|
|
{ name: 'Metrics & Analytics', icon: BarChart3, href: '/metrics' },
|
|
{ name: 'Commentaires', icon: MessageSquare, href: '/comments' },
|
|
{ name: 'Modération', icon: Flag, href: '/moderation' },
|
|
{ name: 'Actualités & Interviews', icon: BookOpen, href: '/actualites' },
|
|
{ name: 'Forfaits & Services', icon: CreditCard, href: '/plans' },
|
|
{ name: 'Taxonomies', icon: Tags, href: '/taxonomies' },
|
|
{ name: 'Pays', icon: Globe, href: '/countries' },
|
|
{ name: 'Bannière', icon: ImageIcon, href: '/slides' },
|
|
{ name: 'Documents Légaux', icon: FileText, href: '/legal' },
|
|
{ name: 'Configuration', icon: Settings, href: '/settings' },
|
|
];
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { getPendingVerificationCount } from '@/app/actions/business';
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const [pendingCount, setPendingCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
getPendingVerificationCount().then(setPendingCount);
|
|
}, [pathname]); // Refresh on navigation
|
|
|
|
return (
|
|
<div className="admin-sidebar p-6 flex flex-col">
|
|
<div className="flex items-center gap-3 mb-10 px-2">
|
|
<div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
|
|
<ShieldCheck className="text-white" />
|
|
</div>
|
|
<h1 className="text-xl font-bold tracking-tight text-white">AfroAdmin</h1>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-1">
|
|
{menuItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`nav-link ${isActive ? 'active' : ''} flex items-center justify-between group`}
|
|
>
|
|
<div className="flex items-center">
|
|
<item.icon className="w-5 h-5 mr-3" />
|
|
<span>{item.name}</span>
|
|
</div>
|
|
|
|
{item.name === 'Utilisateurs' && pendingCount > 0 && (
|
|
<span className="bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center shadow-lg group-hover:scale-110 transition-transform">
|
|
{pendingCount}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="mt-auto pt-6 border-t border-slate-700">
|
|
<button className="nav-link w-full text-left text-red-400 hover:bg-red-950/30">
|
|
<LogOut className="w-5 h-5 mr-3" />
|
|
<span>Déconnexion</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|