feat: implement admin authentication, role-based permissions, and backoffice layout components

admin/src/components/Sidebar.tsx

@@ -7,57 +7,88 @@ import {
   Users, 
   MessageSquare, 
   BookOpen, 
-  LogOut,
-  ShieldCheck,
-  BarChart3,
-  Flag,
-  CreditCard,
-  Settings,
-  Globe,
-  FileText,
-  Briefcase,
-  Tags,
-  Image as ImageIcon
+  LogOut, 
+  ShieldCheck, 
+  ShieldAlert,
+  BarChart3, 
+  Flag, 
+  CreditCard, 
+  Settings, 
+  Globe, 
+  FileText, 
+  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';
+import { getCurrentAdminAction, logoutAdminAction } from '@/app/actions/auth';
+import type { AdminSessionPayload } from '@/lib/session';
+import { hasTabPermission, ADMIN_ROLES, type AdminRoleType } from '@/lib/permissions';
+
+const ALL_MENU_ITEMS = [
+  { id: 'dashboard', name: 'Dashboard', icon: LayoutDashboard, href: '/dashboard' },
+  { id: 'team', name: 'Équipe & Rôles', icon: ShieldAlert, href: '/team' },
+  { id: 'users', name: 'Utilisateurs', icon: Users, href: '/users' },
+  { id: 'metrics', name: 'Metrics & Analytics', icon: BarChart3, href: '/metrics' },
+  { id: 'comments', name: 'Commentaires', icon: MessageSquare, href: '/comments' },
+  { id: 'moderation', name: 'Modération', icon: Flag, href: '/moderation' },
+  { id: 'actualites', name: 'Actualités & Interviews', icon: BookOpen, href: '/actualites' },
+  { id: 'plans', name: 'Forfaits & Services', icon: CreditCard, href: '/plans' },
+  { id: 'taxonomies', name: 'Taxonomies', icon: Tags, href: '/taxonomies' },
+  { id: 'countries', name: 'Pays', icon: Globe, href: '/countries' },
+  { id: 'slides', name: 'Bannière', icon: ImageIcon, href: '/slides' },
+  { id: 'legal', name: 'Documents Légaux', icon: FileText, href: '/legal' },
+  { id: 'settings', name: 'Configuration', icon: Settings, href: '/settings' },
+];
 
 export default function Sidebar() {
   const pathname = usePathname();
   const [pendingCount, setPendingCount] = useState(0);
+  const [adminUser, setAdminUser] = useState<AdminSessionPayload | null>(null);
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
 
   useEffect(() => {
     getPendingVerificationCount().then(setPendingCount);
   }, [pathname]); // Refresh on navigation
 
+  useEffect(() => {
+    getCurrentAdminAction().then(setAdminUser);
+  }, []);
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await logoutAdminAction();
+      window.location.href = '/login';
+    } catch (err) {
+      console.error('Logout error:', err);
+      setIsLoggingOut(false);
+    }
+  };
+
+  const visibleMenuItems = ALL_MENU_ITEMS.filter((item) => {
+    if (!adminUser) return true;
+    return hasTabPermission(adminUser.adminRole, adminUser.permissions, item.id);
+  });
+
+  const roleMeta = adminUser ? ADMIN_ROLES[adminUser.adminRole as AdminRoleType] : null;
+
   return (
     <div className="admin-sidebar z-50 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 className="flex items-center gap-3 mb-8 px-2">
+        <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center shadow-md shadow-indigo-600/30">
+          <ShieldCheck className="text-white w-6 h-6" />
+        </div>
+        <div>
+          <h1 className="text-xl font-bold tracking-tight text-white leading-none">AfroAdmin</h1>
+          <span className="text-[10px] uppercase font-semibold tracking-wider text-indigo-400">Backoffice</span>
         </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;
+      <nav className="flex-1 space-y-1 overflow-y-auto pr-1">
+        {visibleMenuItems.map((item) => {
+          const isActive = pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href + '/'));
           return (
             <Link 
               key={item.name} 
@@ -65,24 +96,55 @@ export default function Sidebar() {
               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>
+                <item.icon className="w-5 h-5 mr-3 shrink-0" />
+                <span className="truncate">{item.name}</span>
               </div>
               
-              {item.name === 'Utilisateurs' && pendingCount > 0 && (
+              {item.id === 'users' && 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>
               )}
+
+              {item.id === 'team' && (
+                <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-purple-500/20 text-purple-300 border border-purple-500/30">
+                  Super
+                </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>
+      <div className="mt-auto pt-4 border-t border-slate-700/80 space-y-3">
+        {adminUser && (
+          <div className="px-3 py-2.5 rounded-xl bg-slate-800/60 border border-slate-700/50 flex items-center gap-3">
+            <div className={`w-9 h-9 rounded-lg bg-gradient-to-tr ${roleMeta?.iconBgClass || 'from-indigo-500 to-violet-500'} flex items-center justify-center text-white font-bold text-sm shadow shrink-0`}>
+              {adminUser.name ? adminUser.name.charAt(0).toUpperCase() : 'A'}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-1">
+                <p className="text-sm font-semibold text-white truncate leading-tight">
+                  {adminUser.name || 'Admin'}
+                </p>
+              </div>
+              <p className="text-[11px] text-slate-400 truncate mb-1">
+                {adminUser.email}
+              </p>
+              <span className={`inline-block text-[10px] font-semibold px-2 py-0.5 rounded-full border ${roleMeta?.badgeClass || 'bg-slate-700 text-slate-300 border-slate-600'}`}>
+                {roleMeta?.badgeLabel || adminUser.adminRole}
+              </span>
+            </div>
+          </div>
+        )}
+
+        <button 
+          onClick={handleLogout}
+          disabled={isLoggingOut}
+          className="nav-link w-full text-left text-red-400 hover:bg-red-950/30 hover:text-red-300 transition-colors cursor-pointer disabled:opacity-50"
+        >
+          <LogOut className="w-5 h-5 mr-3 shrink-0" />
+          <span>{isLoggingOut ? 'Déconnexion...' : 'Déconnexion'}</span>
         </button>
       </div>
     </div>