ptechcore_ui 0.0.0

package/src/components/layout/ModernDoubleSidebarLayout.tsx

@@ -0,0 +1,727 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+
+import {
+  LayoutDashboard, FileText, Users, CreditCard, TrendingUp,
+  Settings, ChevronLeft, ChevronRight, Search, Bell, User,
+  LogOut, Menu, X, Moon, Sun, Palette, Building2,
+  Calculator, PiggyBank, FileBarChart, Shield, Package,
+  DollarSign, BarChart3, Briefcase, Receipt, UserCheck,
+  Database, Globe, HelpCircle, Activity, Lock, AlertTriangle,
+  CheckCircle, Clock, FileCheck, Bot, ScanLine,
+  MessageSquare, Smartphone, Workflow, RefreshCw, Wifi,
+  Eye, Target, BookOpen, Archive, Download,
+  Upload, Save, FolderOpen, Home, ChevronDown, Link, PieChart,
+  Video, Calendar, Folder
+} from 'lucide-react';
+import { cn } from '../../utils/utils';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export interface MenuItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  path?: string;
+  badge?: string | number;
+  submenu?: MenuItem[];
+  ariaLabel?: string;
+}
+
+export interface Notification {
+  id: string;
+  title: string;
+  message: string;
+  type: 'info' | 'warning' | 'error' | 'success';
+  timestamp: Date;
+  read: boolean;
+}
+
+
+interface PrivateLayoutProps {
+  children: React.ReactNode;
+  module_name: string;
+  primaryMenuItems: MenuItem[];
+  secondaryMenuItems: Record<string, MenuItem[]>;
+
+}
+
+const RewiseLayout: React.FC<PrivateLayoutProps> = ({ children, module_name='Rewise', primaryMenuItems, secondaryMenuItems }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { theme, themeType, setTheme } = useTheme();
+
+  const [primaryCollapsed, setPrimaryCollapsed] = useState(false);
+  const [secondaryCollapsed, setSecondaryCollapsed] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [selectedModule, setSelectedModule] = useState('dashboard');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showNotifications, setShowNotifications] = useState(false);
+  const [showUserMenu, setShowUserMenu] = useState(false);
+  const [showThemeMenu, setShowThemeMenu] = useState(false);
+  const [notifications, setNotifications] = useState<Notification[]>([
+    {
+      id: '1',
+      title: 'Nouvelle facture',
+      message: '3 nouvelles factures en attente de validation',
+      type: 'info',
+      timestamp: new Date(),
+      read: false
+    },
+    {
+      id: '2',
+      title: 'Clôture mensuelle',
+      message: 'La clôture de janvier est prête',
+      type: 'success',
+      timestamp: new Date(),
+      read: false
+    }
+  ]);
+
+  // Navigation clavier
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Alt + M pour toggle menu mobile
+      if (e.altKey && e.key === 'm') {
+        e.preventDefault();
+        setMobileMenuOpen(prev => !prev);
+      }
+      // Alt + S pour recherche
+      if (e.altKey && e.key === 's') {
+        e.preventDefault();
+        document.getElementById('global-search')?.focus();
+      }
+      // Escape pour fermer les menus
+      if (e.key === 'Escape') {
+        setShowNotifications(false);
+        setShowUserMenu(false);
+        setShowThemeMenu(false);
+        setMobileMenuOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  
+
+  // Détection automatique du module actif basé sur l'URL
+  useEffect(() => {
+    const path = location.pathname;
+    const moduleMatch = path.match(/^\/([^/]+)/);
+    if (moduleMatch) {
+      const moduleId = moduleMatch[1];
+      // Mapping des routes vers les IDs de modules
+      const routeMapping: Record<string, string> = {
+        'dashboard': 'dashboard',
+        'organizations': 'organizations',
+        'entities': 'entities',
+
+
+      };
+      setSelectedModule(routeMapping[moduleId] || 'dashboard');
+    }
+  }, [location]);
+
+
+
+
+  const handleThemeChange = (type: 'elegant' | 'fintech' | 'minimalist') => {
+    setTheme(type);
+    setShowThemeMenu(false);
+  };
+
+  const isActive = (path: string) => location.pathname === path;
+  const isModuleActive = (moduleId: string) => selectedModule === moduleId;
+
+  // Breadcrumbs
+  const getBreadcrumbs = () => {
+    const paths = location.pathname.split('/').filter(Boolean);
+    const breadcrumbs = [{ label: 'Accueil', path: '/' }];
+
+    paths.forEach((path, index) => {
+      const fullPath = '/' + paths.slice(0, index + 1).join('/');
+      const module = primaryMenuItems.find(m => m.id === path);
+      const label = module ? module.label : path.charAt(0).toUpperCase() + path.slice(1);
+      breadcrumbs.push({ label, path: fullPath });
+    });
+
+    return breadcrumbs;
+  };
+
+  // Mark notification as read
+  const markNotificationAsRead = (id: string) => {
+    setNotifications(prev =>
+      prev.map(n => n.id === id ? { ...n, read: true } : n)
+    );
+  };
+
+  return (
+    <div className="flex h-screen bg-[var(--color-background)] overflow-hidden">
+      {/* Skip to main content (Accessibility) */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 bg-[var(--color-primary)] text-[var(--color-background)] px-4 py-2 rounded"
+      >
+        Aller au contenu principal
+      </a>
+
+      {/* Primary Sidebar */}
+      <aside
+        className={cn(
+          'hidden lg:flex flex-col bg-[var(--color-sidebar-bg)] transition-all duration-300',
+          primaryCollapsed ? 'w-20' : 'w-64'
+        )}
+        role="navigation"
+        aria-label="Navigation principale"
+      >
+        {/* Logo */}
+        <div className="h-16 flex items-center justify-between px-4 border-b border-[var(--color-sidebar-border)]">
+          <div className={cn(
+            'flex items-center gap-3',
+            primaryCollapsed && 'justify-center'
+          )}>
+            <div className="w-10 h-10 bg-[var(--color-primary)] rounded-lg flex items-center justify-center">
+              <span className="text-[var(--color-background)] font-bold text-xl">W</span>
+            </div>
+            {!primaryCollapsed && (
+              <div>
+                <h1 className="text-[var(--color-sidebar-text)] font-bold text-lg">WiseBook</h1>
+                <p className="text-[var(--color-sidebar-text-secondary)] text-xs">ERP Next-Gen</p>
+              </div>
+            )}
+          </div>
+          <button
+            onClick={() => setPrimaryCollapsed(!primaryCollapsed)}
+            className="text-[var(--color-sidebar-text-secondary)] hover:text-[var(--color-sidebar-text)] transition-colors"
+            aria-label={primaryCollapsed ? 'Développer le menu' : 'Réduire le menu'}
+            aria-expanded={!primaryCollapsed}
+          >
+            <ChevronLeft className={cn(
+              "w-5 h-5 transition-transform",
+              primaryCollapsed && "rotate-180"
+            )} />
+          </button>
+        </div>
+
+        {/* Primary Navigation */}
+        <nav
+          className="flex-1 py-4 overflow-y-auto"
+          role="menubar"
+          aria-label="Modules principaux"
+        >
+          {primaryMenuItems.map((item) => (
+            <button
+              key={item.id}
+              onClick={() => {
+                if (item.path) {
+                  navigate(item.path);
+                } else {
+                  setSelectedModule(item.id);
+                }
+              }}
+              className={cn(
+                'w-full flex items-center gap-3 px-4 py-3 transition-all duration-200',
+                'hover:bg-[var(--color-sidebar-hover)] relative group',
+                isModuleActive(item.id) && 'bg-[var(--color-sidebar-active)] border-l-4 border-[var(--color-primary)]',
+                primaryCollapsed && 'justify-center'
+              )}
+              role="menuitem"
+              aria-label={item.ariaLabel || item.label}
+              aria-current={isModuleActive(item.id) ? 'page' : undefined}
+            >
+              <div className={cn(
+                'transition-colors',
+                isModuleActive(item.id) ? 'text-[var(--color-primary)]' : 'text-[var(--color-sidebar-text-secondary)] group-hover:text-[var(--color-sidebar-text)]'
+              )}>
+                {item.icon}
+              </div>
+              {!primaryCollapsed && (
+                <>
+                  <span className={cn(
+                    'flex-1 text-left text-sm font-medium transition-colors',
+                    isModuleActive(item.id) ? 'text-[var(--color-sidebar-text)]' : 'text-[var(--color-sidebar-text-secondary)] group-hover:text-[var(--color-sidebar-text)]'
+                  )}>
+                    {item.label}
+                  </span>
+                  {item.badge && (
+                    <span className="px-2 py-0.5 text-xs bg-[var(--color-primary)] text-[var(--color-background)] rounded-full">
+                      {item.badge}
+                    </span>
+                  )}
+                </>
+              )}
+              {primaryCollapsed && (
+                <div className="absolute left-full ml-2 px-2 py-1 bg-[var(--color-sidebar-active)] text-[var(--color-sidebar-text)] text-xs rounded opacity-0 group-hover:opacity-100 pointer-events-none whitespace-nowrap z-50">
+                  {item.label}
+                </div>
+              )}
+            </button>
+          ))}
+        </nav>
+
+        {/* User Section */}
+        <div className="p-4 border-t border-[var(--color-sidebar-border)]">
+          <div className={cn(
+            'flex items-center gap-3',
+            primaryCollapsed && 'justify-center'
+          )}>
+            <div className="w-10 h-10 bg-[var(--color-sidebar-avatar-bg)] rounded-full flex items-center justify-center">
+              <User className="w-5 h-5 text-[var(--color-sidebar-text-secondary)]" />
+            </div>
+            {!primaryCollapsed && (
+              <div className="flex-1">
+                <p className="text-sm font-medium text-[var(--color-sidebar-text)]">Admin</p>
+                <p className="text-xs text-[var(--color-sidebar-text-secondary)]">admin@wisebook.com</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </aside>
+
+      {/* Secondary Sidebar */}
+      {secondaryMenuItems[selectedModule] && (
+        <>
+          {/* Toggle button when collapsed */}
+          {secondaryCollapsed && (
+            <button
+              onClick={() => setSecondaryCollapsed(false)}
+              className="hidden lg:flex items-center justify-center w-12 h-full bg-[var(--color-background)] border-r border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] transition-colors"
+              aria-label="Ouvrir le sous-menu"
+            >
+              <ChevronRight className="w-5 h-5 text-[var(--color-text-tertiary)]" />
+            </button>
+          )}
+
+          <aside
+            className={cn(
+              'hidden lg:flex flex-col bg-[var(--color-background)] border-r border-[var(--color-border)] transition-all duration-300',
+              secondaryCollapsed ? 'w-0 overflow-hidden' : 'w-64'
+            )}
+            role="navigation"
+            aria-label="Navigation secondaire"
+          >
+            <div className="h-16 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
+              <h2 className="text-sm font-semibold text-[var(--color-text-secondary)] uppercase tracking-wider whitespace-nowrap">
+                {primaryMenuItems.find(item => item.id === selectedModule)?.label}
+              </h2>
+              <button
+                onClick={() => setSecondaryCollapsed(!secondaryCollapsed)}
+                className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] flex-shrink-0"
+                aria-label={secondaryCollapsed ? 'Développer le sous-menu' : 'Réduire le sous-menu'}
+              >
+                <ChevronLeft className={cn(
+                  "w-4 h-4 transition-transform",
+                  secondaryCollapsed && "rotate-180"
+                )} />
+              </button>
+            </div>
+
+          <nav
+            className="flex-1 py-4 overflow-y-auto"
+            role="menu"
+            aria-label="Sous-navigation"
+          >
+            {secondaryMenuItems[selectedModule]?.map((item) => (
+              <button
+                key={item.id}
+                onClick={() => item.path && navigate(item.path)}
+                className={cn(
+                  'w-full flex items-center gap-3 px-4 py-2.5 transition-all duration-200',
+                  'hover:bg-[var(--color-surface-hover)]',
+                  isActive(item.path || '') && 'bg-[var(--color-primary-light)] border-l-4 border-[var(--color-primary)]'
+                )}
+                role="menuitem"
+                aria-current={isActive(item.path || '') ? 'page' : undefined}
+              >
+                {item.icon && (
+                  <div className={cn(
+                    'transition-colors',
+                    isActive(item.path || '') ? 'text-[var(--color-primary)]' : 'text-[var(--color-text-tertiary)]'
+                  )}>
+                    {item.icon}
+                  </div>
+                )}
+                <span className={cn(
+                  'flex-1 text-left text-sm',
+                  isActive(item.path || '') ? 'text-[var(--color-primary)] font-medium' : 'text-[var(--color-text-secondary)]'
+                )}>
+                  {item.label}
+                </span>
+                {item.badge && (
+                  <span className="px-2 py-0.5 text-xs bg-[var(--color-primary)] text-white rounded-full">
+                    {item.badge}
+                  </span>
+                )}
+              </button>
+            ))}
+          </nav>
+          </aside>
+        </>
+      )}
+
+      {/* Mobile Sidebar Overlay */}
+      {mobileMenuOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 z-50 lg:hidden"
+          onClick={() => setMobileMenuOpen(false)}
+          aria-hidden="true"
+        >
+          <aside
+            className="w-80 h-full bg-[var(--color-sidebar-bg)]"
+            onClick={(e) => e.stopPropagation()}
+            role="navigation"
+            aria-label="Navigation mobile"
+          >
+            <div className="h-16 flex items-center justify-between px-4 border-b border-[var(--color-sidebar-border)]">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-[var(--color-primary)] rounded-lg flex items-center justify-center">
+                  <span className="text-[var(--color-background)] font-bold text-xl">W</span>
+                </div>
+                <div>
+                  <h1 className="text-white font-bold text-lg">WiseBook</h1>
+                  <p className="text-gray-400 text-xs">ERP Next-Gen</p>
+                </div>
+              </div>
+              <button
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-[var(--color-sidebar-text-secondary)]"
+                aria-label="Fermer le menu"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            </div>
+            <nav className="py-4" role="menubar">
+              {primaryMenuItems.map((item) => (
+                <div key={item.id}>
+                  <button
+                    onClick={() => {
+                      if (item.path) {
+                        navigate(item.path);
+                        setMobileMenuOpen(false);
+                      } else {
+                        setSelectedModule(item.id);
+                      }
+                    }}
+                    className={cn(
+                      'w-full flex items-center gap-3 px-4 py-3 transition-all duration-200',
+                      'hover:bg-[var(--color-sidebar-hover)]',
+                      isModuleActive(item.id) && 'bg-[var(--color-sidebar-active)] border-l-4 border-[var(--color-primary)]'
+                    )}
+                    role="menuitem"
+                    aria-current={isModuleActive(item.id) ? 'page' : undefined}
+                  >
+                    <div className={cn(
+                      'transition-colors',
+                      isModuleActive(item.id) ? 'text-[var(--color-primary)]' : 'text-[var(--color-sidebar-text-secondary)]'
+                    )}>
+                      {item.icon}
+                    </div>
+                    <span className={cn(
+                      'flex-1 text-left text-sm font-medium',
+                      isModuleActive(item.id) ? 'text-[var(--color-sidebar-text)]' : 'text-[var(--color-sidebar-text-secondary)]'
+                    )}>
+                      {item.label}
+                    </span>
+                    {item.badge && (
+                      <span className="px-2 py-0.5 text-xs bg-[var(--color-primary)] text-[var(--color-background)] rounded-full">
+                        {item.badge}
+                      </span>
+                    )}
+                  </button>
+
+                  {/* Mobile Submenu */}
+                  {isModuleActive(item.id) && secondaryMenuItems[item.id] && (
+                    <div className="bg-[var(--color-sidebar-submenu-bg)] py-2">
+                      {secondaryMenuItems[item.id].map((subItem) => (
+                        <button
+                          key={subItem.id}
+                          onClick={() => {
+                            if (subItem.path) {
+                              navigate(subItem.path);
+                              setMobileMenuOpen(false);
+                            }
+                          }}
+                          className={cn(
+                            'w-full flex items-center gap-3 pl-12 pr-4 py-2 text-sm',
+                            'hover:bg-[var(--color-sidebar-hover)]',
+                            isActive(subItem.path || '') && 'bg-[var(--color-sidebar-active)] text-[var(--color-primary)]'
+                          )}
+                        >
+                          {subItem.icon}
+                          <span className={cn(
+                            isActive(subItem.path || '') ? 'text-[var(--color-primary)]' : 'text-[var(--color-sidebar-text-secondary)]'
+                          )}>
+                            {subItem.label}
+                          </span>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </nav>
+          </aside>
+        </div>
+      )}
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Header */}
+        <header
+          className="h-14 bg-[var(--color-background)] border-b border-[var(--color-border)] flex items-center justify-between px-3 lg:px-4"
+          role="banner"
+        >
+          <div className="flex items-center gap-4 flex-1">
+            <button
+              onClick={() => setMobileMenuOpen(true)}
+              className="lg:hidden text-[var(--color-text-primary)]"
+              aria-label="Ouvrir le menu mobile"
+            >
+              <Menu className="w-6 h-6" />
+            </button>
+
+            {/* Breadcrumbs */}
+            <nav
+              className="hidden sm:flex items-center gap-2 text-sm"
+              aria-label="Fil d'Ariane"
+            >
+              {getBreadcrumbs().map((crumb, index) => (
+                <React.Fragment key={crumb.path}>
+                  {index > 0 && <ChevronRight className="w-4 h-4 text-[var(--color-text-tertiary)]" />}
+                  <button
+                    onClick={() => navigate(crumb.path)}
+                    className={cn(
+                      'hover:text-[var(--color-primary)]',
+                      index === getBreadcrumbs().length - 1
+                        ? 'text-[var(--color-text-primary)] font-medium'
+                        : 'text-[var(--color-text-tertiary)]'
+                    )}
+                  >
+                    {crumb.label}
+                  </button>
+                </React.Fragment>
+              ))}
+            </nav>
+
+            {/* Search */}
+            <div className="relative max-w-md flex-1 hidden lg:block">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] w-5 h-5" />
+              <input
+                id="global-search"
+                type="text"
+                placeholder="Rechercher... (Alt+S)"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 bg-[var(--color-surface-hover)] border border-[var(--color-border)] rounded-lg text-sm focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary-light)]"
+                aria-label="Recherche globale"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3">
+            {/* Theme Selector */}
+            <div className="relative">
+              <button
+                onClick={() => setShowThemeMenu(!showThemeMenu)}
+                className="p-2 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors"
+                title="Changer le thème"
+                aria-label="Sélecteur de thème"
+                aria-expanded={showThemeMenu}
+              >
+                <Palette className="w-5 h-5 text-[var(--color-text-secondary)]" />
+              </button>
+              {showThemeMenu && (
+                <div
+                  className="absolute right-0 mt-2 w-64 bg-[var(--color-background)] rounded-lg shadow-xl border border-[var(--color-border)] z-50"
+                  role="menu"
+                  aria-label="Sélection du thème"
+                >
+                  <div className="p-2">
+                    <p className="px-3 py-2 text-xs font-semibold text-[var(--color-text-tertiary)] uppercase">
+                      Thèmes disponibles
+                    </p>
+                    <button
+                      onClick={() => handleThemeChange('elegant')}
+                      className={cn(
+                        'w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors',
+                        themeType === 'elegant' && 'bg-[var(--color-primary-light)]'
+                      )}
+                      role="menuitem"
+                    >
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)]" />
+                      <div className="text-left">
+                        <p className="text-sm font-medium">Élégance Sobre</p>
+                        <p className="text-xs text-[var(--color-text-tertiary)]">Finance traditionnelle</p>
+                      </div>
+                    </button>
+                    <button
+                      onClick={() => handleThemeChange('fintech')}
+                      className={cn(
+                        'w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors',
+                        themeType === 'fintech' && 'bg-[var(--color-primary-light)]'
+                      )}
+                      role="menuitem"
+                    >
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--color-success)] to-[var(--color-text-primary)]" />
+                      <div className="text-left">
+                        <p className="text-sm font-medium">Modern Fintech</p>
+                        <p className="text-xs text-[var(--color-text-tertiary)]">Tableau de bord moderne</p>
+                      </div>
+                    </button>
+                    <button
+                      onClick={() => handleThemeChange('minimalist')}
+                      className={cn(
+                        'w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors',
+                        themeType === 'minimalist' && 'bg-[var(--color-primary-light)]'
+                      )}
+                      role="menuitem"
+                    >
+                      <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--color-text-secondary)] to-[var(--color-accent)]" />
+                      <div className="text-left">
+                        <p className="text-sm font-medium">Minimaliste Premium</p>
+                        <p className="text-xs text-[var(--color-text-tertiary)]">Élégance minimaliste</p>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Currency Display */}
+            <div className="flex items-center px-3 py-1.5 bg-[var(--color-surface)] rounded-lg border border-[var(--color-border)]">
+              <DollarSign className="w-4 h-4 text-[var(--color-primary)] mr-2" />
+              <span className="text-sm font-medium text-[var(--color-text-primary)]">FCFA</span>
+            </div>
+
+            {/* Notifications */}
+            <div className="relative">
+              <button
+                className="relative p-2 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors"
+                onClick={() => setShowNotifications(!showNotifications)}
+                aria-label={`Notifications ${notifications.filter(n => !n.read).length > 0 ? `(${notifications.filter(n => !n.read).length} non lues)` : ''}`}
+                aria-expanded={showNotifications}
+              >
+                <Bell className="w-5 h-5 text-[var(--color-text-secondary)]" />
+                {notifications.filter(n => !n.read).length > 0 && (
+                  <span className="absolute top-1 right-1 w-2 h-2 bg-[var(--color-error)] rounded-full"></span>
+                )}
+              </button>
+
+              {showNotifications && (
+                <div
+                  className="absolute right-0 mt-2 w-80 bg-[var(--color-background)] rounded-lg shadow-xl border border-[var(--color-border)] z-50 max-h-96 overflow-y-auto"
+                  role="region"
+                  aria-label="Centre de notifications"
+                >
+                  <div className="p-4 border-b border-[var(--color-border)]">
+                    <h3 className="font-semibold text-[var(--color-text-primary)]">Notifications</h3>
+                  </div>
+                  <div className="divide-y divide-[var(--color-border)]">
+                    {notifications.map((notif) => (
+                      <div
+                        key={notif.id}
+                        className={cn(
+                          "p-4 hover:bg-[var(--color-surface-hover)] cursor-pointer",
+                          !notif.read && "bg-[var(--color-primary-light)] bg-opacity-10"
+                        )}
+                        onClick={() => markNotificationAsRead(notif.id)}
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className={cn(
+                            "w-2 h-2 rounded-full mt-2",
+                            notif.type === 'error' && "bg-[var(--color-error)]",
+                            notif.type === 'warning' && "bg-[var(--color-warning)]",
+                            notif.type === 'success' && "bg-[var(--color-success)]",
+                            notif.type === 'info' && "bg-[var(--color-info)]"
+                          )} />
+                          <div className="flex-1">
+                            <p className="text-sm font-medium text-[var(--color-text-primary)]">{notif.title}</p>
+                            <p className="text-xs text-[var(--color-text-secondary)] mt-1">{notif.message}</p>
+                            <p className="text-xs text-[var(--color-text-tertiary)] mt-2">
+                              {notif.timestamp.toLocaleTimeString()}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* User Menu */}
+            <div className="relative">
+              <button
+                onClick={() => setShowUserMenu(!showUserMenu)}
+                className="flex items-center gap-2 p-2 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors"
+                aria-label="Menu utilisateur"
+                aria-expanded={showUserMenu}
+              >
+                <div className="w-8 h-8 bg-[var(--color-primary)] rounded-full flex items-center justify-center">
+                  <User className="w-4 h-4 text-[var(--color-background)]" />
+                </div>
+              </button>
+              {showUserMenu && (
+                <div
+                  className="absolute right-0 mt-2 w-56 bg-[var(--color-background)] rounded-lg shadow-xl border border-[var(--color-border)] z-50"
+                  role="menu"
+                  aria-label="Menu utilisateur"
+                >
+                  <div className="p-2">
+                    <button
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors"
+                      role="menuitem"
+                    >
+                      <User className="w-4 h-4" />
+                      <span className="text-sm">Mon profil</span>
+                    </button>
+                    <button
+                      onClick={() => {
+                        navigate('/settings');
+                        setShowUserMenu(false);
+                      }}
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors"
+                      role="menuitem"
+                    >
+                      <Settings className="w-4 h-4" />
+                      <span className="text-sm">Paramètres</span>
+                    </button>
+                    <button
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors"
+                      role="menuitem"
+                    >
+                      <HelpCircle className="w-4 h-4" />
+                      <span className="text-sm">Aide</span>
+                    </button>
+                    <hr className="my-2 border-[var(--color-border)]" />
+                    <button
+                      className="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] text-[var(--color-error)] transition-colors"
+                      role="menuitem"
+                    >
+                      <LogOut className="w-4 h-4" />
+                      <span className="text-sm">Déconnexion</span>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </header>
+
+        {/* Page Content */}
+        <main
+          id="main-content"
+          className="flex-1 overflow-y-auto bg-[var(--color-background)]"
+          role="main"
+        >
+          <div className="p-3 lg:p-4">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default RewiseLayout;