ajout du dashboard

2026-06-12 15:53:16 +02:00
parent cab5d749d2
commit bfa3161646
10 changed files with 400 additions and 195 deletions
@@ -0,0 +1,111 @@
+// src/layouts/AppLayout.jsx
+import { Outlet, NavLink, useNavigate } from 'react-router-dom';
+
+export default function AppLayout() {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    // Ici, tu pourras ajouter la logique de déconnexion (effacer les cookies/tokens)
+    alert("[ DÉCONNEXION EN COURS... ]");
+    navigate('/login');
+  };
+
+  // --- DESIGN SYSTEM DU BUNKER ---
+  const sidebarStyle = {
+    width: '260px',
+    backgroundColor: '#121212', // Gris blindage
+    borderRight: '1px solid #222222',
+    height: '100vh',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    fontFamily: 'monospace'
+  };
+
+  const mainContentStyle = {
+    marginLeft: '260px', // Laisse la place à la sidebar
+    minHeight: '100vh',
+    backgroundColor: '#050505', // Fond abyssal
+    color: '#E0E0E0',
+    padding: '40px'
+  };
+
+  // Fonction pour styliser le lien actif (en Cyan)
+  const getNavLinkStyle = ({ isActive }) => ({
+    display: 'block',
+    padding: '15px 25px',
+    color: isActive ? '#00E5FF' : '#888',
+    backgroundColor: isActive ? 'rgba(0, 229, 255, 0.05)' : 'transparent',
+    textDecoration: 'none',
+    borderLeft: isActive ? '4px solid #00E5FF' : '4px solid transparent',
+    transition: 'all 0.2s',
+    textTransform: 'uppercase',
+    letterSpacing: '1px',
+    fontSize: '0.9rem'
+  });
+
+  return (
+    <div style={{ display: 'flex' }}>
+      
+      {/* ========================================== */}
+      {/* BARRE LATÉRALE (SIDEBAR)                   */}
+      {/* ========================================== */}
+      <aside style={sidebarStyle}>
+        
+        {/* En-tête de la Sidebar (Logo / Marque) */}
+        <div style={{ padding: '30px 25px', borderBottom: '1px solid #222' }}>
+          <h1 style={{ color: '#00E5FF', margin: 0, fontSize: '1.5rem', letterSpacing: '2px' }}>
+            GISE<span style={{ color: '#FFF' }}>_NEXUS</span>
+          </h1>
+          <p style={{ color: '#555', fontSize: '0.7rem', margin: '5px 0 0 0' }}>
+            CONSOLE D'INFRASTRUCTURE v1.0
+          </p>
+        </div>
+
+        {/* Menu de Navigation */}
+        <nav style={{ flex: 1, marginTop: '20px' }}>
+          <div style={{ padding: '0 25px', marginBottom: '10px', color: '#444', fontSize: '0.7rem', fontWeight: 'bold' }}>
+            // SUPERVISION
+          </div>
+          <NavLink style={getNavLinkStyle} to="/dashboard">Tableau de bord</NavLink>
+          <NavLink style={getNavLinkStyle} to="/services">Inventaire Réseau</NavLink>
+          
+          <div style={{ padding: '0 25px', marginTop: '25px', marginBottom: '10px', color: '#444', fontSize: '0.7rem', fontWeight: 'bold' }}>
+            // GESTION
+          </div>
+          <NavLink style={getNavLinkStyle} to="/billing">Facturation</NavLink>
+          <NavLink style={getNavLinkStyle} to="/support">Tickets Support</NavLink>
+          <NavLink style={getNavLinkStyle} to="/settings">Profil & Sécurité</NavLink>
+        </nav>
+
+        {/* Bas de la Sidebar (Déconnexion) */}
+        <div style={{ padding: '20px', borderTop: '1px solid #222' }}>
+          <button 
+            onClick={handleLogout}
+            style={{
+              width: '100%', padding: '12px', backgroundColor: 'transparent',
+              color: '#ff003c', border: '1px solid #ff003c', cursor: 'pointer',
+              fontFamily: 'monospace', textTransform: 'uppercase'
+            }}
+          >
+            [ Déconnexion ]
+          </button>
+        </div>
+      </aside>
+
+      {/* ========================================== */}
+      {/* 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 !
+        */}
+        <Outlet />
+      </main>
+
+    </div>
+  );
+}