remove alert

src/layouts/AppLayout.jsx

@@ -1,12 +1,75 @@
 // src/layouts/AppLayout.jsx
+import { useState } from 'react';
 import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 
+// ============================================================================
+// COMPOSANT : MODAL DE CONFIRMATION DE DÉCONNEXION
+// ============================================================================
+const ConfirmLogoutModal = ({ isOpen, onClose, onConfirm }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div style={{ 
+      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 
+      backgroundColor: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(4px)', 
+      zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center' 
+    }}>
+      <div style={{
+        backgroundColor: '#1A1A1A',
+        border: '1px solid #ff003c',
+        boxShadow: '0 10px 30px rgba(255, 0, 60, 0.2)',
+        borderRadius: '8px',
+        maxWidth: '400px',
+        width: '100%',
+        padding: '24px',
+        color: '#FFF',
+        fontFamily: 'monospace'
+      }}>
+        <h4 style={{ fontSize: '1.1rem', fontWeight: 'bold', letterSpacing: '1px', marginBottom: '10px', color: '#ff003c', textTransform: 'uppercase' }}>
+          DÉCONNEXION DU TERMINAL
+        </h4>
+        <p style={{ fontSize: '0.9rem', color: '#AAA', marginBottom: '24px', lineHeight: '1.5' }}>
+          Êtes-vous sûr de vouloir fermer la session sécurisée et quitter l'environnement cloud ?
+        </p>
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button onClick={onClose} style={{
+            flex: 1, padding: '10px',
+            backgroundColor: '#333', color: '#FFF',
+            border: 'none', borderRadius: '4px',
+            fontFamily: 'monospace', fontWeight: 'bold', cursor: 'pointer', letterSpacing: '1px'
+          }}>
+            ANNULER
+          </button>
+          <button onClick={onConfirm} style={{
+            flex: 1, padding: '10px',
+            backgroundColor: '#ff003c', color: '#FFF',
+            border: 'none', borderRadius: '4px',
+            fontFamily: 'monospace', fontWeight: 'bold', cursor: 'pointer', letterSpacing: '1px'
+          }}>
+            SE DÉCONNECTER
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// COMPOSANT PRINCIPAL : LAYOUT DU PORTAIL
+// ============================================================================
 export default function AppLayout() {
   const navigate = useNavigate();
+  const [showLogoutModal, setShowLogoutModal] = useState(false);
 
-  const handleLogout = () => {
-    // Ici, tu pourras ajouter la logique de déconnexion (effacer les cookies/tokens)
-    alert("[ DÉCONNEXION EN COURS... ]");
+  // Ouvre simplement le modal
+  const handleLogoutClick = () => {
+    setShowLogoutModal(true);
+  };
+
+  // Exécute la vraie déconnexion
+  const confirmLogout = () => {
+    // Ici, tu pourras effacer les tokens (ex: localStorage.removeItem('token'))
+    setShowLogoutModal(false);
     navigate('/login');
   };
 
@@ -83,7 +146,7 @@ export default function AppLayout() {
         {/* Bas de la Sidebar (Déconnexion) */}
         <div style={{ padding: '20px', borderTop: '1px solid #222' }}>
           <button 
-            onClick={handleLogout}
+            onClick={handleLogoutClick}
             style={{
               width: '100%', padding: '12px', backgroundColor: 'transparent',
               color: '#ff003c', border: '1px solid #ff003c', cursor: 'pointer',
@@ -99,13 +162,17 @@ export default function AppLayout() {
       {/* ZONE DE CONTENU DYNAMIQUE                  */}
       {/* ========================================== */}
       <main style={mainContentStyle}>
-        {/* Le composant <Outlet /> est magique : 
-          C'est ici que React Router va injecter le contenu de la page demandée 
-          (Dashboard, Settings, etc.) sans jamais recharger la barre latérale !
-        */}
+        {/* Le composant <Outlet /> injecte le contenu de la page demandée sans recharger la sidebar */}
         <Outlet />
       </main>
 
+      {/* MODAL DE DÉCONNEXION */}
+      <ConfirmLogoutModal 
+        isOpen={showLogoutModal} 
+        onClose={() => setShowLogoutModal(false)} 
+        onConfirm={confirmLogout} 
+      />
+
     </div>
   );
 }