package.json

@@ -12,12 +12,16 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.3.3",
     "@zitadel/react-auth": "^1.2.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.27.0",
     "oidc-client-ts": "^3.5.0",
     "otpauth": "^9.5.1",
     "pocketbase": "^0.27.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
+    "react-router-dom": "^7.18.1",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {

src/App.css

@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}

src/App.tsx

@@ -1,46 +1,72 @@
 import { useState } from 'react';
-import { pb } from './config/pocketbase';
+import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
-import Login from './pages/Auth/Login';
+import { pb } from '@/services/pocketbase';
-import DashboardLayout from './layouts/DashboardLayout';
+
-import TrustCenter from './pages/TrustCenter/TrustCenter';
+// Layout & Pages
-import ServiceDesk from './pages/Support/ServiceDesk';
+import Login from '@/pages/Login';
-import DocumentVault from './pages/Vault/DocumentVault';
+import DashboardLayout from '@/layouts/DashboardLayout';
-import AccountSettings from './pages/Account/AccountSettings';
+import TrustCenter from '@/pages/TrustCenter';
+import ServiceDesk from '@/pages/ServiceDesk';
+import DocumentVault from '@/pages/DocumentVault';
+import AccountSettings from '@/pages/AccountSettings';
+import { InfrastructureEvolution } from '@/pages/trustcenter/InfrastructureEvolution';
+import Analytics from '@/pages/trustcenter/Analytics';
+import Backups from '@/pages/trustcenter/Backups';
+import NewTicket from '@/pages/servicedesk/NewTicket';
+import TicketDetail from '@/pages/servicedesk/TicketDetail';
 
 function App() {
-  // On initialise l'état avec la présence du token, mais on ne met plus 
-  // d'écouteur automatique. C'est le composant Login qui gérera le flux.
   const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
-  const [activeView, setActiveView] = useState<'dashboard' | 'support' | 'vault' | 'account'>('dashboard');
+  const navigate = useNavigate();
 
   const handleLogout = () => {
-    pb.authStore.clear(); // Détruit le jeton de sécurité
+    pb.authStore.clear();
     setIsAuthenticated(false);
+    navigate('/', { replace: true });
   };
 
-  // Tant que l'utilisateur n'est pas totalement authentifié (MFA inclus), 
+  // --- SAS DE SÉCURITÉ (Auth Guard) ---
-  // on le maintient dans le sas de sécurité.
+  // Si non authentifié, on force l'affichage du composant Login peu importe l'URL demandée.
   if (!isAuthenticated) {
-    return <Login onLoginSuccess={() => setIsAuthenticated(true)} />;
+    return (
+      <Routes>
+        <Route
+          path="*"
+          element={
+            <Login onLoginSuccess={() => {
+              setIsAuthenticated(true);
+              navigate('/dashboard', { replace: true });
+            }} />
+          }
+        />
+      </Routes>
+    );
   }
 
-  const renderContent = () => {
+  // --- APPLICATION SÉCURISÉE ---
-    switch (activeView) {
+  // Une fois connecté, le DashboardLayout enveloppe nos véritables routes (URLs)
-      case 'dashboard': return <TrustCenter onNavigate={setActiveView} />;
-      case 'support': return <ServiceDesk />;
-      case 'vault': return <DocumentVault />;
-      case 'account': return <AccountSettings />;
-      default: return <TrustCenter onNavigate={setActiveView} />;
-    }
-  };
-
   return (
-    <DashboardLayout 
+    <DashboardLayout onLogout={handleLogout}>
-      activeView={activeView} 
+      <Routes>
-      onNavigate={setActiveView}
+        {/* Redirection par défaut */}
-      onLogout={handleLogout}
+        <Route path="/" element={<Navigate to="/dashboard" replace />} />
-    >
+
-      {renderContent()}
+        {/* Pages du menu principal */}
+        <Route path="/dashboard" element={<TrustCenter />} />
+        <Route path="/support" element={<ServiceDesk />} />
+        <Route path="/vault" element={<DocumentVault />} />
+        <Route path="/account" element={<AccountSettings />} />
+
+        {/* Pages stratégiques (anciennes modales) */}
+        <Route path="/evolution-infrastructure" element={<InfrastructureEvolution />} />
+        <Route path="/analytics" element={<Analytics />} />
+        <Route path="/backups" element={<Backups />} />
+        <Route path="/support/new" element={<NewTicket />} />
+        <Route path="/support/tickets/:ticketId" element={<TicketDetail />} />
+
+        {/* Sécurité : Si l'URL n'existe pas, on redirige vers le dashboard */}
+        <Route path="*" element={<Navigate to="/dashboard" replace />} />
+      </Routes>
     </DashboardLayout>
   );
 }

src/components/auth/LocalLoginForm.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { Input } from '../ui/Input';
+
+interface LocalLoginFormProps {
+  onSubmit: (email: string, pass: string) => void;
+  isLoading: boolean;
+}
+
+export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoading }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit(email, password);
+  };
+
+  return (
+    <form className="space-y-6" onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
+        <div className="mt-1">
+          <Input 
+            id="email" type="email" required placeholder="direction@client.com"
+            value={email} onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
+        <div className="mt-1">
+          <Input 
+            id="password" type="password" required placeholder="••••••••••••"
+            value={password} onChange={(e) => setPassword(e.target.value)} 
+          />
+        </div>
+      </div>
+
+      <Button type="submit" isLoading={isLoading} className="w-full">
+        Authentification classique
+      </Button>
+    </form>
+  );
+};

src/components/auth/MfaForm.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { Button } from '@/components/ui/Button';
+
+interface MfaFormProps {
+  isFirstSetup: boolean;
+  qrUrl: string;
+  isLoading: boolean;
+  onVerify: (code: string) => void;
+  onCancel: () => void;
+}
+
+export const MfaForm: React.FC<MfaFormProps> = ({ isFirstSetup, qrUrl, isLoading, onVerify, onCancel }) => {
+  const [code, setCode] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onVerify(code);
+  };
+
+  return (
+    <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleSubmit}>
+      {isFirstSetup ? (
+        <div className="text-center mb-6">
+          <p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
+          <p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy.</p>
+          <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg shadow-sm">
+            <QRCodeSVG value={qrUrl} size={150} />
+          </div>
+        </div>
+      ) : (
+        <div className="text-center mb-6">
+          <p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
+          <p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
+        </div>
+      )}
+      
+      <div>
+        <input 
+          type="text" required maxLength={6} placeholder="000000"
+          value={code} onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))} // Force les chiffres
+          className="block w-full rounded-md border border-slate-300 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 font-mono shadow-sm focus:border-blue-900 focus:ring-blue-900" 
+        />
+      </div>
+      
+      <div className="flex space-x-3">
+        <Button type="button" variant="outline" onClick={onCancel} disabled={isLoading} className="w-1/3">
+          Annuler
+        </Button>
+        <Button type="submit" isLoading={isLoading} disabled={code.length !== 6} className="w-2/3 bg-emerald-600 hover:bg-emerald-700">
+          Déverrouiller
+        </Button>
+      </div>
+    </form>
+  );
+};

src/components/layout/Sidebar.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-react';
+import { cn } from '@/utils/utils';
+import { Card } from '@/components/ui/Card';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+import { useTheme } from '@/hooks/useTheme';
+import { ThemeToggle } from '@ui/ThemeToggle';
+
+interface SidebarProps {
+  onLogout: () => void;
+  className?: string;
+}
+
+// Liste de tes liens réels avec leurs icônes associées
+const NAVIGATION_ITEMS = [
+  { name: 'Trust Center', path: '/dashboard', icon: ShieldCheck },
+  { name: 'Service Desk', path: '/support', icon: HelpCircle },
+  { name: 'Coffre-fort', path: '/vault', icon: Lock },
+  { name: 'Paramètres', path: '/account', icon: Settings },
+];
+
+
+
+export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
+  const { isDark, toggleTheme } = useTheme();
+  return (
+    <Card className={cn("w-60 flex flex-col p-6 shrink-0", className)}>
+      {/* 1. EN-TÊTE / LOGO */}
+      <div className="flex items-center gap-4 mb-10 px-2">
+        {/* Petit badge logo avec effet creusé */}
+        <div className={cn(
+          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b] transition-all duration-300 ease-in-out",
+          "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
+        )}>
+          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out" />
+        </div>
+        <div>
+          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
+        </div>
+      </div>
+
+      {/* 2. NAVIGATION PRINCIPALE (Basée sur l'URL) */}
+      <nav className="flex flex-col gap-4 flex-1">
+        {NAVIGATION_ITEMS.map((item) => {
+          const Icon = item.icon;
+
+          return (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) =>
+                cn(
+                  "w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
+                  "bg-[#e8e8e8] dark:bg-[#1e293b]",
+                  isActive
+                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "text-blue-600! dark:text-blue-400! font-black")
+                    : cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
+                )
+              }
+            >
+              {({ isActive }) => (
+                <>
+                  <Icon
+                    className={cn(
+                      "w-5 h-5 transition-transform duration-300 ease-in-out shrink-0",
+                      isActive ? "scale-110" : "scale-100"
+                    )}
+                    strokeWidth={isActive ? 2.5 : 2}
+                  />
+                  <span className="text-sm">{item.name}</span>
+                </>
+              )}
+            </NavLink>
+          );
+        })}
+      </nav>
+
+      <ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
+      {/* 3. ZONE DE DÉCONNEXION */}
+      <div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
+        <button
+          onClick={onLogout}
+          className={cn(
+            "w-full flex items-center justify-start gap-4 px-5 py-4 rounded-2xl cursor-pointer transition-all duration-300 ease-in-out",
+            "bg-[#e8e8e8] dark:bg-[#1e293b]",
+            NEUMORPHISM.lightShadow,
+            NEUMORPHISM.darkShadow,
+            "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+            "text-rose-500 dark:text-rose-400 font-bold"
+          )}
+        >
+          <LogOut className="w-5 h-5" />
+          <span className="text-sm font-bold">Déconnexion</span>
+        </button>
+      </div>
+    </Card>
+  );
+};
+
+export default Sidebar;

src/components/ui/BackButton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+import { cn } from '@/utils/utils';
+
+export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /** Route explicite (ex: "/support"). Si omis, fait un retour arrière dans l'historique (-1) */
+  to?: string;
+  /** Texte par défaut du bouton */
+  label?: string;
+  /** Fonction personnalisée au clic */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({
+  to,
+  label = "Retour",
+  onClick,
+  variant = "ghost", // Style par défaut : ultra discret sur la surface Neumorphic
+  size = "sm",
+  children,
+  className,
+  ...props
+}) => {
+  const navigate = useNavigate();
+
+  // Logique du clic (priorité : onClick perso > destination 'to' > retour historique)
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e);
+    } else if (to) {
+      navigate(to);
+    } else {
+      navigate(-1);
+    }
+  };
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={handleClick}
+      leftIcon={
+        <svg 
+          className="w-4 h-4 transition-transform duration-200 group-hover:-translate-x-1" 
+          fill="none" 
+          stroke="currentColor" 
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      }
+      className={cn("group", className)}
+      {...props}
+    >
+      {children || label}
+    </Button>
+  );
+};
+
+export default BackButton;

src/components/ui/Badge.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+
+interface BadgeProps {
+    className?: string;
+    name: string
+}
+
+export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
+
+    return (
+        <div
+            className={cn(
+                "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
+                className
+            )}
+        >
+            {name}
+        </div>
+    );
+};
+
+export default StatusBadge;

src/components/ui/Button.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+
+// Couleurs de texte pour chaque variante
+const variantStyles = {
+  primary: "text-[#090909] dark:text-white font-bold",
+  secondary: "text-slate-500 dark:text-slate-400 font-bold",
+  danger: "text-rose-600 dark:text-rose-400 font-bold",
+  success: "text-emerald-600 dark:text-emerald-400 font-bold",
+  outline: "text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700",
+  ghost: "text-slate-600 dark:text-slate-400 border-transparent shadow-none dark:shadow-none",
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles;
+  size?: keyof typeof NEUMORPHISM.sizeStyles;
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { 
+      className, 
+      variant = 'primary', 
+      size = 'md', 
+      isLoading = false, 
+      leftIcon, 
+      rightIcon, 
+      children, 
+      disabled, 
+      type = "button",
+      ...props 
+    }, 
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(
+          // Style de base & Neumorphism
+          "inline-flex items-center justify-center cursor-pointer outline-none transition-all duration-300 ease-in-out",
+          "bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "border border-[#e8e8e8] dark:border-[#1e293b]",
+          "hover:border-white dark:hover:border-[#2a3850]",
+          NEUMORPHISM.lightShadow,
+          NEUMORPHISM.lightActive,
+          NEUMORPHISM.darkShadow,
+          NEUMORPHISM.darkActive,
+          "disabled:opacity-50 disabled:pointer-events-none",
+          
+          // Variantes & Tailles
+          variantStyles[variant],
+          NEUMORPHISM.sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {/* Spinner SVG si en chargement */}
+        {isLoading && (
+          <svg 
+            className="animate-spin -ml-1 mr-2 h-5 w-5 text-current" 
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none" 
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        )}
+        
+        {/* Icône de gauche (masquée si chargement) */}
+        {!isLoading && leftIcon && <span className="mr-2 shrink-0">{leftIcon}</span>}
+        
+        {/* Texte du bouton */}
+        <span className="truncate">{children}</span>
+
+        {/* Icône de droite */}
+        {rightIcon && <span className="ml-2 shrink-0">{rightIcon}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";

src/components/ui/Card.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+
+
+// IMPORTANT — contraste texte :
+// Le fond clair (#e8e8e8) est assez lumineux. Dans le contenu de la Card,
+// évite text-slate-400/500 en light mode (ratio WCAG insuffisant sur ce fond) :
+// utilise plutôt text-slate-600 (ou plus foncé) pour le texte secondaire en light mode.
+// Ex: className="text-slate-600 dark:text-slate-400"
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
+  // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
+  variant?: 'raised' | 'flat'|'digged'|'prophunt';
+}
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = 'raised', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        // Style de base
+        "rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
+        "bg-[#e8e8e8] dark:bg-[#1e293b]",
+        // Relief neumorphique (par défaut)
+        variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
+        variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
+        variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
+        // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
+        variant === 'flat' && "border border-black/5 dark:border-white/10",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        // Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
+        "px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5 transition-all duration-300 ease-in-out",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
+      {...props}
+    />
+  )
+);
+CardContent.displayName = "CardContent";

src/components/ui/DocumentObject.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Download } from 'lucide-react';
+import { cn } from '@/utils/utils';
+import type { Document } from '@/types/Document';
+import { Button } from './Button';
+import { useDocumentDownload } from '@/hooks/useDocumentDownload';
+
+interface DocumentObjectProps {
+    doc: Document;
+}
+
+export const DocumentObject: React.FC<DocumentObjectProps> = ({ doc }) => {
+    // 2. On initialise le Hook pour ce document spécifique
+    const { downloadFile, isDownloading } = useDocumentDownload();
+
+    const getCategoryBadge = (category: string) => {
+        switch (category) {
+            case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
+            case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
+            case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
+            default: return 'bg-blue-50 text-blue-700 border-blue-200';
+        }
+    };
+
+    return (
+        <tr key={doc.id} className={cn('hover:bg-amber-50 hover:dark:bg-slate-600 cursor-default transition-all duration-300')}>
+            <td className="px-6 py-4 whitespace-nowrap">
+                <div className="flex items-center">
+                    <svg className="shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    <div>
+                        <div className="text-sm font-medium text-slate-900 dark:text-slate-100">{doc.title}</div>
+                        <div className="text-xs text-slate-500 dark:text-slate-400">{doc.file} • PDF</div>
+                    </div>
+                </div>
+            </td>
+            <td className="px-6 py-4 whitespace-nowrap">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
+                    {doc.category}
+                </span>
+            </td>
+            <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
+                {/* Petit conseil d'optimisation : utiliser une fonction date pour éviter les crashs si doc.created est mal formaté */}
+                {doc.created ? `${doc.created.split(" ")[0]} ${doc.created.split(" ")[1]?.substring(0,5)}` : 'N/A'}
+            </td>
+            <td className="px-6 py-4 items-center">
+                {/* 3. On relie le bouton à l'état et à la fonction du Hook */}
+                <Button 
+                    className="text-blue-900 dark:text-blue-400 hover:text-blue-700 px-3 py-1.5 flex ml-auto" 
+                    size='sm'
+                    leftIcon={<Download className="w-4 h-4" />}
+                    onClick={() => downloadFile(doc)}
+                    isLoading={isDownloading} // Si votre composant Button supporte cette prop !
+                    disabled={isDownloading}
+                > 
+                    {isDownloading ? 'Téléchargement...' : 'Télécharger'}
+                </Button>
+            </td>
+        </tr>
+    );
+};

src/components/ui/EmptyState.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { cn } from '@utils/utils';
+
+interface EmptyStateProps {
+  message: string;
+  className?: string;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({ message, className }) => {
+  return (
+    <div className={cn(
+      "flex-1 flex justify-center items-center py-8 text-sm text-slate-500 italic", 
+      className
+    )}>
+      {message}
+    </div>
+  );
+};

src/components/ui/Input.tsx

@@ -0,0 +1,98 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  error?: string;
+  size?: keyof typeof NEUMORPHISM.sizeStyles;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ 
+    className, 
+    label, 
+    error, 
+    id, 
+    size = 'md', 
+    leftIcon, 
+    rightIcon, 
+    required,
+    disabled,
+    ...props 
+  }, ref) => {
+    const autoId = useId();
+    const inputId = id || autoId;
+
+    return (
+      <div className="w-full flex flex-col gap-1.5">
+        {/* Label */}
+        {label && (
+          <label 
+            htmlFor={inputId} 
+            className="block text-sm font-bold text-slate-700 dark:text-slate-300"
+          >
+            {label} {required && <span className="text-rose-500 font-bold">*</span>}
+          </label>
+        )}
+        
+        <div className="relative flex items-center w-full">
+          {/* Icône à gauche */}
+          {leftIcon && (
+            <span className="absolute left-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
+              {leftIcon}
+            </span>
+          )}
+
+          {/* Champ HTML avec les ombres creusées centralisées */}
+          <input
+            id={inputId}
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              // Base & Couleurs de fond
+              "w-full transition-all duration-300 ease-in-out outline-none border border-transparent",
+              "bg-[#e8e8e8] dark:bg-[#1e293b]",
+              "text-slate-800 dark:text-slate-100 font-medium placeholder:text-slate-400 dark:placeholder:text-slate-500",
+              
+              // 🎯 Utilisation directe de tes constantes Neumorphic creusées
+              NEUMORPHISM.insetLight,
+              NEUMORPHISM.insetDark,
+
+              // Focus & État désactivé
+              "focus:border-blue-500/40 dark:focus:border-blue-400/40",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+
+              // Tailles & Marges d'icônes
+              NEUMORPHISM.sizeStyles[size],
+              leftIcon && "pl-11",
+              rightIcon && "pr-11",
+
+              // Style en cas d'erreur
+              error && "border-rose-500 focus:border-rose-500 text-rose-600 dark:text-rose-400",
+              
+              className
+            )}
+            {...props}
+          />
+
+          {/* Icône à droite */}
+          {rightIcon && (
+            <span className="absolute right-4 text-slate-400 dark:text-slate-500 pointer-events-none flex items-center justify-center">
+              {rightIcon}
+            </span>
+          )}
+        </div>
+
+        {/* Message d'erreur */}
+        {error && (
+          <p className="text-xs font-semibold text-rose-500 dark:text-rose-400">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";

src/components/ui/Loader.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { cn } from '@utils/utils';
+
+interface LoaderProps {
+  className?: string;
+}
+
+export const Loader: React.FC<LoaderProps> = ({ className }) => {
+  return (
+    <div className={cn("flex-1 flex justify-center items-center py-8", className)}>
+      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-slate-900"></div>
+    </div>
+  );
+};

src/components/ui/LogoGise.tsx

@@ -0,0 +1,20 @@
+export function LogoGise(){
+    return(
+        <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center">
+          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
+            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </div>
+        </div>
+        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
+          AEGIS <span className="font-light text-slate-500">by GISE</span>
+        </h2>
+        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
+          Accès restreint
+        </p>
+      </div>
+    );
+};
+export default LogoGise;

src/components/ui/MessageBubble.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+import type { TicketMessage } from '@/types/Message';
+
+interface MessageBubbleProps {
+  message: TicketMessage;
+  currentUserId?: string;
+}
+
+export const MessageBubble: React.FC<MessageBubbleProps> = ({ message, currentUserId }) => {
+  const isMyMessage = message.expand?.author?.id === currentUserId;
+  const authorName = message.expand?.author?.name || message.expand?.author?.email || 'Expert GISE';
+  const time = new Date(message.created).toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+
+  return (
+    <div className={cn("flex flex-col", isMyMessage ? "items-end" : "items-start")}>
+      <div className="flex items-center space-x-2 mb-1 px-1">
+        <span className="text-xs font-medium text-slate-600">{authorName}</span>
+        <span className="text-[10px] text-slate-400">{time}</span>
+      </div>
+      
+      <div 
+        className={cn(
+          "max-w-[85%] rounded-2xl px-4 py-3 text-sm shadow-sm",
+          isMyMessage 
+            ? "bg-blue-900 text-white rounded-br-none" 
+            : "bg-slate-100 text-slate-800 rounded-bl-none border border-slate-200/60"
+        )}
+      >
+        {message.content}
+      </div>
+    </div>
+  );
+};

src/components/ui/PageHeader.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/Card';
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+  /** Le contenu optionnel à afficher sur la droite (Bouton, Badge, etc.) */
+  children?: React.ReactNode; 
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, description, children }) => {
+  return (
+    <Card>
+      <CardContent className="p-6 sm:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
+            {title}
+          </h1>
+          <p className="text-sm text-slate-500 mt-1">
+            {description}
+          </p>
+        </div>
+        
+        {/* S'il y a des actions passées en "children", on les affiche ici */}
+        {children && (
+          <div className="shrink-0">
+            {children}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PageHeader;

src/components/ui/Select.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+}
+
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: SelectOption[];
+  placeholder?: string; // Optionnel : ajoute un choix vide par défaut
+}
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, label, error, id, options, placeholder, ...props }, ref) => {
+    const autoId = useId();
+    const selectId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={selectId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <select
+          id={selectId}
+          ref={ref}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors cursor-pointer",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled hidden>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";

src/components/ui/ServiceObject.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { ManagedContract } from '@/types/ManagedContract';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+import { Card } from './Card';
+
+interface ServiceObjectProps {
+  contract: ManagedContract;
+}
+
+export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
+  return (
+    <Card variant= 'prophunt' className="p-4 flex flex-col cursor-pointer">
+      <div className='flex flex-row justify-between'>
+        <h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
+        {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}
+        <StatusBadge status={contract.status} />
+      </div>
+      {contract.description && (
+        <p className="text-xs text-slate-500 mt-1">{contract.description}</p>
+      )}
+    </Card>
+  );
+};

src/components/ui/StatusBadge.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+import type { AegisStatus } from '@/types/Status';
+
+interface StatusBadgeProps {
+  status: AegisStatus;
+  className?: string;
+}
+
+// Configuration visuelle unique pour chaque statut
+const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
+  // Statuts Infrastructure & Contrats Positifs
+  'Opérationnel': {
+    bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
+    dot: 'bg-emerald-500',
+  },
+  'Actif': {
+    bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60',
+    dot: 'bg-emerald-500',
+  },
+  'Ouvert': { bg: 'bg-blue-50 text-blue-700 border-blue-200/60', dot: 'bg-blue-500' },
+
+  // Statuts Intermédiaires / En cours
+  'Dégradé': {
+    bg: 'bg-amber-50 text-amber-700 border-amber-200/60',
+    dot: 'bg-amber-500',
+  },
+  'En Déploiement': {
+    bg: 'bg-blue-50 text-blue-700 border-blue-200/60',
+    dot: 'bg-blue-500',
+  },
+  'En Analyse': { bg: 'bg-amber-50 text-amber-700 border-amber-200/60', dot: 'bg-amber-500' },
+
+  // Statuts Alertes / Inactifs
+  'Hors Ligne': {
+    bg: 'bg-red-50 text-red-700 border-red-200/60',
+    dot: 'bg-red-500',
+  },
+  'Annulé': {
+    bg: 'bg-slate-100 text-slate-700 border-slate-200',
+    dot: 'bg-slate-400',
+  },
+  'Résolu': { bg: 'bg-emerald-50 text-emerald-700 border-emerald-200/60', dot: 'bg-emerald-500' },
+};
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, className }) => {
+  // Récupération de la configuration ou fallback de sécurité
+  const config = STATUS_CONFIG[status] || {
+    bg: 'bg-slate-50 text-slate-600 border-slate-200',
+    dot: 'bg-slate-400',
+  };
+
+  return (
+    <div
+      className={cn(
+        "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
+        config.bg,
+        className
+      )}
+    >
+      <span className={cn("w-1.5 h-1.5 rounded-full mr-2 shrink-0", config.dot)} />
+      {status}
+    </div>
+  );
+};
+
+export default StatusBadge;

src/components/ui/Textarea.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, id, rows = 4, ...props }, ref) => {
+    const autoId = useId();
+    const textareaId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={textareaId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        <textarea
+          id={textareaId}
+          ref={ref}
+          rows={rows}
+          className={cn(
+            "flex w-full rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500 shadow-sm transition-colors resize-y",
+            error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+            className
+          )}
+          {...props}
+        />
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";

src/components/ui/ThemeToggle.tsx

@@ -0,0 +1,52 @@
+import { Sun, Moon } from "lucide-react";
+import { cn } from "@utils/utils";
+
+interface ThemeToggleProps {
+  isDark: boolean;
+  toggleTheme: () => void;
+}
+
+export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
+  
+  const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
+  const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
+  
+  const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
+  const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";
+
+  return (
+    <button 
+      onClick={toggleTheme}
+      // 1. On ajoute la transition globale sur le fond du bouton principal
+      className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
+      aria-label="Basculer le thème"
+    >
+      {/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
+      <div className={cn(
+        "absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
+        lightInset, darkInset
+      )}></div>
+
+      {/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
+      <div className={cn(
+        "absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
+        "transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
+        lightExtrude, darkExtrude,
+        isDark ? "translate-x-10" : "translate-x-0"
+      )}>
+        
+        {/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
+        <Sun className={cn(
+          "absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
+        )} strokeWidth={2.5} />
+        
+        <Moon className={cn(
+          "absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
+        )} strokeWidth={2.5} />
+        
+      </div>
+    </button>
+  );
+}

src/components/ui/TicketRow.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Ticket } from '@/types/Ticket';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+
+interface TicketRowProps {
+  ticket: Ticket;
+  onClick: (id: string) => void;
+}
+
+export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
+  return (
+    <div 
+      onClick={() => onClick(ticket.id)}
+      className="p-6 flex items-center justify-between hover:bg-amber-50 transition-colors"
+    >
+      <div className="space-y-1">
+        <div className="flex items-center space-x-3">
+          <span className="text-xs font-semibold px-2 py-0.5 bg-slate-100 text-slate-700 rounded border border-slate-200">
+            {ticket.category}
+          </span>
+          <span className="text-xs text-slate-400">
+            Ouvert le {new Date(ticket.created).toLocaleDateString('fr-FR')}
+          </span>
+        </div>
+        <h3 className="text-sm font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {ticket.subject}
+        </h3>
+      </div>
+      
+      <div>
+        <StatusBadge status={ticket.status} />
+      </div>
+    </div>
+  );
+};

src/components/ui/UptimeObject.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { InfrastructureNode } from '@/types/InfrastructureNode';
+import { StatusBadge } from '@ui/StatusBadge';
+import { cn } from '@/utils/utils';
+
+interface UptimeObjectProps {
+  node: InfrastructureNode;
+}
+
+export const UptimeObject: React.FC<UptimeObjectProps> = ({ node }) => {
+  return (
+    // La "key" a été retirée d'ici, elle sera gérée par le parent
+    <tr className={cn(
+      "hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
+    )}>
+
+      {/* Infos Serveur */}
+      <td className='p-2'>
+        <p className="font-medium text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.label}</p>
+        <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
+      </td>
+
+      {/* Métriques & Badge */}
+      <td className='p-2'>
+        <p className="text-xs text-slate-500">SLA</p>
+        <p className="text-sm font-semibold text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.uptime_sla}</p>
+      </td>
+      <td className='text-right p-2'>
+        <StatusBadge status={node.status} />
+      </td>
+
+    </tr>
+  );
+};

src/components/widgets/AccessWidget.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Lock } from "lucide-react";
+
+export function AccessWidget() {
+
+    return (
+        <Card>
+            <CardHeader className="p-6 border-slate-100">
+                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center"><Lock className="w-5 h-5 mr-2 text-slate-400"></Lock>Sécurité de l'accès</h2>
+            </CardHeader>
+
+            <CardContent className="space-y-6">
+                {/* MFA Status */}
+                <div className="flex items-center justify-between">
+                    <div>
+                        <p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
+                        <p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
+                    </div>
+                    <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
+                        Actif
+                    </span>
+                </div>
+
+                <div className="pt-4 border-t border-slate-100">
+                    <button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
+                        Générer de nouveaux codes de secours
+                    </button>
+                </div>
+
+                {/* Mot de passe */}
+                <div className="pt-4 border-t border-slate-100">
+                    <p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
+                    <p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
+                    <button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
+                        Modifier le mot de passe
+                    </button>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+export default AccessWidget;

src/components/widgets/BackupWidget.tsx

@@ -1,25 +1,32 @@
-export default function BackupWidget({ onClick }: { onClick?: () => void }) {
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
-  return (
+import { Check } from 'lucide-react';
-    <div 
+import Badge from '@ui/Badge';
-      onClick={onClick}
-      className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
-    >
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">Sauvegardes</h2>
-        <span className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded font-medium border border-slate-200">
-          PRA Immuable
-        </span>
-      </div>
-      
-      <div className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4 group-hover:bg-blue-50/50 transition-colors">
-        <p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
-        <p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
-      </div>
 
-      <div className="flex items-center text-emerald-600 text-sm font-medium">
+interface BackupWidgetProps {
-        <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /></svg>
+  onClick?: () => void;
-        Intégrité validée avec succès
+}
-      </div>
+
-    </div>
+export default function BackupWidget({ onClick }: BackupWidgetProps) {
+  return (
+    <Card
+      onClick={onClick}
+      className="cursor-pointer transition-all duration-300 ease-in-out"
+    >
+      <CardHeader>
+        <h2 className="text-lg font-semibold">Sauvegardes</h2>
+        <Badge className="max-w-fit min-w-fit" name="PRA Immuable">
+        </Badge>
+      </CardHeader>
+      <CardContent className="p-6">
+        <Card variant='digged' className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4">
+          <p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
+          <p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
+        </Card>
+        <div className="flex items-center text-emerald-600 text-sm font-medium">
+          <Check></Check>
+          Intégrité validée avec succès
+        </div>
+      </CardContent>
+    </Card>
   );
 }

src/components/widgets/DocumentsWidget.tsx

@@ -0,0 +1,36 @@
+import { useDocuments } from '@/hooks/useDocuments';
+import {DocumentObject} from '@ui/DocumentObject'
+import { Card } from '../ui/Card';
+
+export function DocumentsWidget(){
+    const { documents } = useDocuments();
+    return (
+        <Card className='pb-7'>
+            <table className="min-w-full divide-y divide-slate-200">
+                <thead>
+                    <tr>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Nom du fichier
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Catégorie
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Ajouté le
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Action
+                        </th>
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200">
+                    {documents.map((doc) => (
+                        <DocumentObject doc={doc}></DocumentObject>
+                    ))}
+                </tbody>
+            </table>
+        </Card>
+    );
+};
+
+export default DocumentsWidget;

src/components/widgets/EvolutionFilterBar.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { EVOLUTION_CATEGORIES } from '@/data/evolutionOptions';
+
+// Importation de nos atomes UI
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+
+interface EvolutionFilterBarProps {
+  selectedCategory: string;
+  onSelectCategory: (categoryId: string) => void;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export const EvolutionFilterBar: React.FC<EvolutionFilterBarProps> = ({
+  selectedCategory,
+  onSelectCategory,
+  searchQuery,
+  onSearchChange,
+}) => {
+  return (
+    <div className="space-y-4 mb-8">
+      <div className="flex flex-col sm:flex-row gap-4 justify-between items-stretch sm:items-center">
+
+        {/* ONGLETS DE CATÉGORIES */}
+        <div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-hide">
+          {EVOLUTION_CATEGORIES.map((cat) => (
+            <Button
+              key={cat.id}
+              size="sm"
+              // Magie du Design System : on bascule simplement entre la variante sombre et claire
+              variant={selectedCategory === cat.id ? 'secondary' : 'outline'}
+              onClick={() => onSelectCategory(cat.id)}
+              className="whitespace-nowrap"
+            >
+              {cat.label}
+            </Button>
+          ))}
+        </div>
+
+        {/* CHAMP DE RECHERCHE */}
+        <div className="relative min-w-60">
+          <Input
+            type="text"
+             // Format compact pour la barre de recherche
+            placeholder="Rechercher une initiative..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            leftIcon={
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            }
+          />
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default EvolutionFilterBar;

src/components/widgets/EvolutionOptionCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Button } from '@/components/ui/Button';
+import { cn } from '@/utils/utils';
+import type { EvolutionOption } from '@/data/evolutionOptions';
+
+interface EvolutionOptionCardProps {
+  option: EvolutionOption;
+  isSubmitting: boolean;
+  isDisabled: boolean;
+  onSelect: (option: EvolutionOption) => void;
+}
+
+export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
+  option,
+  isSubmitting,
+  isDisabled,
+  onSelect
+}) => {
+  return (
+    <div
+      className={cn(
+        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-300 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
+        isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
+      )}
+    >
+      <div>
+        {/* En-tête de la carte */}
+        <div className="flex items-center justify-between gap-2 mb-3">
+          <span className="text-[11px] font-mono font-bold tracking-wider uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
+            {option.categoryLabel}
+          </span>
+          {option.badgeText && (
+            <span className="text-[10px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-blue-50 text-blue-800 border border-blue-100">
+              {option.badgeText}
+            </span>
+          )}
+        </div>
+
+        {/* Titre & Description */}
+        <h3 className="text-base font-bold text-slate-900 group-hover:text-blue-900 transition-colors">
+          {option.title}
+        </h3>
+        <p className="text-xs text-slate-600 mt-2 leading-relaxed">
+          {option.description}
+        </p>
+      </div>
+
+      {/* Bouton d'action */}
+      <div className="mt-6 pt-4 border-t border-slate-100 flex justify-end">
+        <Button
+          size="sm"
+          isLoading={isSubmitting}
+          disabled={isDisabled}
+          onClick={() => onSelect(option)}
+          className="w-full sm:w-auto text-xs"
+        >
+          Engager cette initiative →
+        </Button>
+      </div>
+    </div>
+  );
+};

src/components/widgets/InformationWidget.tsx

@@ -0,0 +1,37 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Building } from "lucide-react";
+
+export function InformationWidget() {
+    return (
+        <Card>
+            <CardHeader className="p-6 border-slate-100">
+                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center">
+                    <Building className="w-5 h-5 mr-2 text-slate-400" />
+                    Profil de l'Organisation
+                </h2>
+            </CardHeader>
+
+            <CardContent>
+                <dl className="space-y-4 text-sm">
+                    <div>
+                        <dt className="text-slate-500 font-medium">Entité Légale</dt>
+                        <dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
+                    </div>
+                    <div>
+                        <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
+                        <dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
+                    </div>
+                    <div>
+                        <dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
+                        <dd className="mt-1 flex items-center">
+                            <span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
+                            <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
+                        </dd>
+                    </div>
+                </dl>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default InformationWidget;

src/components/widgets/NewTicketWidget.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { useCreateTicket } from '@/hooks/useCreateTicket';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Select } from '@/components/ui/Select';
+import { Textarea } from '@/components/ui/Textarea';
+
+interface NewTicketWidgetProps {
+  onCancel: () => void;
+  onSuccess: (ticketId: string) => void;
+}
+
+export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSuccess }) => {
+  const { createTicket, isSubmitting, error } = useCreateTicket();
+
+  // États locaux isolés dans le widget
+  const [category, setCategory] = useState<'Incident Critique' | 'Évolution' | 'Administratif'>('Incident Critique');
+  const [ci, setCi] = useState('general');
+  const [subject, setSubject] = useState('');
+  const [affectedAsset, setAffectedAsset] = useState('');
+  const [incidentTime, setIncidentTime] = useState('');
+  const [description, setDescription] = useState('');
+  const [buttonVariant, setButtonVariant]=useState('primary');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    // Le hook gère la logique de création
+    const newTicketId = await createTicket({
+      category, ci, subject, affectedAsset, incidentTime, description
+    });
+
+    // On délègue la navigation (ou l'action post-création) au composant parent
+    if (newTicketId) {
+      onSuccess(newTicketId);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
+        <p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
+      </CardHeader>
+
+      <CardContent className="p-6 sm:p-8">
+        <form onSubmit={handleSubmit} className="space-y-8">
+
+          {error && (
+            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {/* SECTION 1 : QUALIFICATION */}
+          <div>
+            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
+              1. Qualification de la demande
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <Select
+                label="Type de demande"
+                value={category}
+                onChange={(e) => {setCategory(e.target.value as any); setButtonVariant(e.target.value==="Incident Critique"?"danger":"primary")}}
+                options={[
+                  { value: 'Incident Critique', label: 'Incident Critique (Panne, Dégradation)' },
+                  { value: 'Évolution', label: 'Évolution (Ajout de ressources, Modification)' },
+                  { value: 'Administratif', label: 'Administratif (Facturation, Contrat)' },
+                ]}
+              />
+
+              <Select
+                label="Infrastructure concernée (CI)"
+                value={ci}
+                onChange={(e) => setCi(e.target.value)}
+                options={[
+                  { value: 'general', label: 'Général / Non spécifique' },
+                  { value: 'px1', label: 'Serveur Proxmox Principal (Hyperviseur)' },
+                  { value: 'fw1', label: 'Pare-feu Périphérique (WAN)' },
+                  { value: 'db1', label: 'Base de données MariaDB' },
+                ]}
+              />
+            </div>
+          </div>
+
+          {/* SECTION 2 : DÉTAILS */}
+          <div>
+            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">
+              2. Détails techniques
+            </h2>
+            <div className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <Input
+                  label="Sujet de l'intervention"
+                  required
+                  value={subject}
+                  onChange={(e) => setSubject(e.target.value)}
+                  placeholder="Ex: Perte de paquets sur le lien WAN principal"
+                />
+
+                <Input
+                  label="Équipement ou Produit concerné (Optionnel)"
+                  value={affectedAsset}
+                  onChange={(e) => setAffectedAsset(e.target.value)}
+                  placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
+                />
+              </div>
+
+              {category === 'Incident Critique' && (
+                <div className="animate-in fade-in slide-in-from-top-2 duration-300 max-w-sm">
+                  <Input
+                    type="datetime-local"
+                    label="Heure exacte du début de l'incident"
+                    required
+                    value={incidentTime}
+                    onChange={(e) => setIncidentTime(e.target.value)}
+                    className="bg-red-50/30 border-red-300 focus:border-red-500 focus:ring-red-500"
+                  />
+                </div>
+              )}
+
+              <Textarea
+                label="Description détaillée"
+                required
+                rows={6}
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Décrivez précisément votre besoin ou les symptômes observés..."
+              />
+            </div>
+          </div>
+
+          {/* ACTIONS */}
+          <div className="pt-6 flex justify-end gap-3 border-t border-slate-100">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel} // Utilisation de la prop
+            >
+              Annuler
+            </Button>
+            <Button
+              type="submit"
+              isLoading={isSubmitting}
+              variant={buttonVariant}
+            >
+              Soumettre le ticket
+            </Button>
+          </div>
+
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default NewTicketWidget;

src/components/widgets/SecurityWidget.tsx

@@ -1,23 +1,34 @@
-export default function SecurityWidget() {
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
-  return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-      <h2 className="text-lg font-semibold text-slate-900 mb-4">Posture de Sécurité</h2>
-      
-      <div className="flex items-baseline space-x-2 mb-4">
-        <span className="text-3xl font-bold text-slate-900">1,432</span>
-        <span className="text-sm text-slate-500">menaces bloquées (30j)</span>
-      </div>
 
-      <div className="space-y-3">
+interface SecurityWidgetProps {
-        <div className="flex justify-between items-center text-sm">
+  onClick?: () => void;
-          <span className="text-slate-600">Bouclier Cloudflare WAF</span>
+}
-          <span className="text-emerald-500 font-medium">Actif</span>
+
+export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
+  return (
+    <Card
+      onClick={onClick}
+      className="cursor-pointer hover:border-blue-300 transition-all duration-300 ease-in-out"
+    >
+      <CardHeader>
+        <h2 className="text-lg font-semibold transition-colors">Posture de Sécurité</h2>
+      </CardHeader>
+      <CardContent className="p-6">
+        <div className="flex items-baseline space-x-2 mb-4">
+          <span className="text-3xl font-bold text-slate-900">1,432</span>
+          <span className="text-sm text-slate-500">menaces bloquées (30j)</span>
         </div>
-        <div className="flex justify-between items-center text-sm">
+        <div className="space-y-3">
-          <span className="text-slate-600">Dernier audit de vulnérabilité</span>
+          <div className="flex justify-between items-center text-sm">
-          <span className="text-slate-900 font-medium">Il y a 12 jours</span>
+            <span className="text-slate-600">Bouclier Cloudflare WAF</span>
+            <span className="text-emerald-500 font-medium">Actif</span>
+          </div>
+          <div className="flex justify-between items-center text-sm">
+            <span className="text-slate-600">Dernier audit de vulnérabilité</span>
+            <span className="text-slate-900 font-medium">Il y a 12 jours</span>
+          </div>
         </div>
-      </div>
+      </CardContent>
-    </div>
+    </Card>
   );
 }

src/components/widgets/ServicesWidget.tsx

@@ -1,193 +1,40 @@
-import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
-import { pb } from '../../config/pocketbase';
+import { useContracts } from '@/hooks/useContracts';
+import { ServiceObject } from '@/components/ui/ServiceObject';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Loader } from '@/components/ui/Loader';
+import { EmptyState } from '@/components/ui/EmptyState';
 
 export default function ServicesWidget() {
-  const [contracts, setContracts] = useState<any[]>([]);
+  const { contracts, isLoading, error } = useContracts();
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const navigate = useNavigate();
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitSuccess, setSubmitSuccess] = useState(false);
-
-  useEffect(() => {
-    const fetchContracts = async () => {
-      try {
-        const records = await pb.collection('aegis_managed_contracts').getFullList({
-          sort: '-created',
-        });
-        setContracts(records);
-      } catch (error) {
-        console.error("Erreur lors de la récupération des contrats :", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchContracts();
-  }, []);
-
-  // Fonction pour envoyer la demande d'évolution vers PocketBase
-  const handleEvolutionRequest = async (subject: string, description: string) => {
-    setIsSubmitting(true);
-    try {
-      await pb.collection('aegis_tickets').create({
-        author: pb.authStore.model?.id,
-        company: pb.authStore.model?.company,
-        category: "Évolution",
-        subject: subject,
-        description: description,
-        status: "Ouvert"
-      });
-
-      setSubmitSuccess(true);
-
-      // Ferme la modale après 2.5 secondes de message de succès
-      setTimeout(() => {
-        setSubmitSuccess(false);
-        setIsModalOpen(false);
-      }, 2500);
-
-    } catch (error) {
-      console.error("Erreur lors de la création du ticket d'évolution :", error);
-      alert("Une erreur est survenue. Veuillez contacter le support par téléphone.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
 
   return (
-    <>
+    <Card>
-    <div className= "bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col" >
+      <CardContent className="p-6 flex flex-col h-full">
-    <div className="mb-4" >
+        
-      <h2 className="text-lg font-semibold text-slate-900" > Vos services gérés </h2>
+        <div className="mb-4">
-        < p className = "text-sm text-slate-500" > Catalogue des contrats d'infogérance actifs</p>
+          <h2 className="text-lg font-semibold text-slate-900">Vos services gérés</h2>
-          </div>
+          <p className="text-sm text-slate-500">Catalogue des contrats d'infogérance actifs</p>
+        </div>
 
-          < div className = "flex-1 overflow-y-auto mb-6 space-y-3" >
+        <div className="flex-1 mb-6 space-y-3">
-            {
+          {error && <EmptyState message={error} className="text-red-500" />}
-              isLoading?(
+          {isLoading && !error && <Loader />}
-            <p className = "text-sm text-slate-500 animate-pulse" > Chargement de vos contrats sécurisés...</ p >
+          {!isLoading && !error && contracts.length === 0 && (
-          ) : contracts.length === 0 ? (
+            <EmptyState message="Aucun contrat actif détecté." />
-    <p className= "text-sm text-slate-500" > Aucun contrat actif détecté.</p>
-          ) : (
-    contracts.map((contract?: any) => (
-      <div key= { contract.id } className = "p-4 bg-slate-50 rounded-lg border border-slate-100 flex justify-between items-center" >
-      <div>
-      <h3 className="text-sm font-medium text-slate-900" > { contract.service_name } </h3>
-                  {
-        contract.description && (
-          <p className="text-xs text-slate-500 mt-1"> { contract.description } </p>
-                  )}
-</div>
-  < span className = {`text-xs px-2 py-1 rounded-full font-medium ${contract.status === 'Actif' ? 'bg-emerald-50 text-emerald-600' :
-      contract.status === 'En déploiement' ? 'bg-blue-50 text-blue-600' :
-        'bg-slate-100 text-slate-600'
-    }`}>
-      { contract.status }
-      </span>
-      </div>
-            ))
           )}
-</div>
+          {!isLoading && !error && contracts.map((contract) => (
-
+            <ServiceObject key={contract.id} contract={contract} />
-  < button
+          ))}
-onClick = {() => setIsModalOpen(true)}
-className = "w-full bg-blue-900 text-white font-medium py-3 rounded-lg hover:bg-blue-800 transition-colors shadow-sm"
-  >
-  Demander une évolution du parc
-    </button>
-    </div>
-
-{/* MODALE STRATÉGIQUE */ }
-{
-  isModalOpen && (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 backdrop-blur-sm p-4" >
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in-95 duration-200" >
-        <div className="p-6" >
-          <div className="flex justify-between items-center mb-5" >
-            <h3 className="text-xl font-bold text-slate-900" > Évolution de l'infrastructure</h3>
-  {
-    !isSubmitting && !submitSuccess && (
-      <button onClick={ () => setIsModalOpen(false) } className = "text-slate-400 hover:text-slate-600" >
-        <svg className="w-6 h-6" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
-          <path strokeLinecap="round" strokeLinejoin = "round" strokeWidth = { 2} d = "M6 18L18 6M6 6l12 12" />
-            </svg>
-            </button>
-                )
-  }
-  </div>
-
-  {
-    submitSuccess ? (
-      <div className= "text-center py-8" >
-      <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-4" >
-        <svg className="w-8 h-8" fill = "none" viewBox = "0 0 24 24" stroke = "currentColor" >
-          <path strokeLinecap="round" strokeLinejoin = "round" strokeWidth = { 2} d = "M5 13l4 4L19 7" />
-            </svg>
-            </div>
-            < h4 className = "text-lg font-semibold text-slate-900 mb-2" > Demande transmise avec succès </h4>
-              < p className = "text-sm text-slate-500" > Un expert GISE analyse votre besoin et reviendra vers vous sous 24h.</p>
-                </div>
-              ) : isSubmitting ? (
-      <div className= "text-center py-12" >
-      <p className="text-sm font-medium text-slate-500 animate-pulse" > Création de votre ticket projet sécurisé...</p>
         </div>
-              ) : (
-      <>
-      <p className= "text-sm text-slate-600 mb-6" >
-      Quel est votre prochain objectif d'infrastructure ? Sélectionnez une initiative stratégique pour ouvrir un ticket projet avec votre expert.
-        </p>
 
-        < div className = "space-y-3" >
+        <Button size="lg" onClick={() => navigate('/evolution-infrastructure')}>
-          <button 
+          Demander une évolution du parc
-                      onClick={ () => handleEvolutionRequest("Projet d'Évolution : Cybersécurité", "Le client souhaite renforcer sa sécurité (Audits, Tests d'intrusion, Plan de Reprise d'Activité).") }
+        </Button>
-    className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
-      >
-      <h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Renforcer la sécurité face aux cybermenaces </h4>
-        < p className = "text-xs text-slate-500 mt-1" > Audits de sécurité, tests d'intrusion et Plan de Reprise d'Activité(PRA).</p>
-          </button>
 
-          < button
+      </CardContent>
-    onClick = {() => handleEvolutionRequest("Projet d'Évolution : Architecture Réseau", "Le client souhaite étendre ses capacités (Migration Cloud Privé, nouvelles succursales).")
+    </Card>
-  }
-  className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
-    >
-    <h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Étendre les capacités du réseau actuel </h4>
-      < p className = "text-xs text-slate-500 mt-1" > Migration vers Cloud Privé Sécurisé, ajout de succursales sécurisées.</p>
-        </button>
-
-        < button
-  onClick = {() => handleEvolutionRequest("Projet d'Évolution : Conformité Légal", "Le client demande un accompagnement vCISO pour la mise en conformité (RGPD, NIS2).")
-}
-className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
-  >
-  <h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Mise en conformité légale(RGPD, NIS2) </h4>
-    < p className = "text-xs text-slate-500 mt-1" > Accompagnement vCISO et mise aux normes de votre système d'information.</p>
-      </button>
-
-      < button
-onClick = {() => handleEvolutionRequest("Projet d'Évolution : Outils Souverains", "Le client souhaite déployer de nouveaux outils collaboratifs souverains.")}
-className = "w-full text-left p-4 border border-slate-200 rounded-lg hover:border-blue-900 hover:bg-blue-50 transition-colors group"
-  >
-  <h4 className="font-medium text-slate-900 group-hover:text-blue-900" > Autre demande stratégique </h4>
-    < p className = "text-xs text-slate-500 mt-1" > Déploiement d'outils collaboratifs souverains ou besoins spécifiques.</p>
-      </button>
-      </div>
-      </>
-              )}
-</div>
-
-{
-  !isSubmitting && !submitSuccess && (
-    <div className="bg-slate-50 px-6 py-4 border-t border-slate-200 flex justify-end" >
-      <button onClick={ () => setIsModalOpen(false) } className = "text-sm font-medium text-slate-600 hover:text-slate-900" >
-        Annuler
-        </button>
-        </div>
-            )
-}
-</div>
-  </div>
-      )}
-</>
   );
 }

src/components/widgets/SupportCtaWidget.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+
+export const SupportCtaWidget: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
+        <p className="text-blue-900 text-sm mb-4 leading-relaxed">
+          Déclarez un incident critique ou demandez une évolution de votre infrastructure.
+        </p>
+        <Button 
+          onClick={() => navigate('/support')}
+          className="w-full text-blue-900"
+        >
+          Ouvrir un ticket sécurisé
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SupportCtaWidget;

src/components/widgets/SupportFooterWidget.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+
+interface SupportFooterWidgetProps {
+  title?: string;
+  description?: string;
+  buttonText?: string;
+}
+
+export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
+  title = "Besoin d'un cadrage sur-mesure ?",
+  description = "Nos ingénieurs restent joignables pour les demandes complexes.",
+  buttonText = "Consulter le Service Desk"
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="mt-12 bg-slate-900 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
+      <div>
+        <h4 className="text-sm font-bold text-white">{title}</h4>
+        <p className="text-xs text-slate-400 mt-0.5">
+          {description}
+        </p>
+      </div>
+      <Button
+        variant="ghost" // On utilise ghost pour ne pas avoir le fond blanc par défaut
+        size="sm"
+        onClick={() => navigate('/support')}
+        // On surcharge les couleurs pour l'adapter au fond sombre
+        className="border border-slate-700 text-slate-200 hover:bg-slate-800 hover:text-white hover:border-slate-600 text-xs whitespace-nowrap"
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+};
+
+export default SupportFooterWidget;

src/components/widgets/TicketChatWidget.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import type { TicketMessage } from '@/types/Message';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { MessageBubble } from '@/components/ui/MessageBubble';
+
+interface TicketChatWidgetProps {
+  messages: TicketMessage[];
+  currentUserId?: string;
+  isSending: boolean;
+  onSendMessage: (content: string) => Promise<void>;
+}
+
+export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({ 
+  messages, 
+  currentUserId, 
+  isSending, 
+  onSendMessage 
+}) => {
+  const [newMessage, setNewMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newMessage.trim()) return;
+
+    try {
+      await onSendMessage(newMessage);
+      setNewMessage(''); // Vide l'input uniquement si l'envoi réussit
+    } catch (err) {
+      alert("Erreur lors de l'envoi.");
+    }
+  };
+
+  return (
+    <Card className="h-125">
+      <CardHeader>
+        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés</h2>
+      </CardHeader>
+
+      {/* Zone des messages */}
+      <CardContent className="flex-1 overflow-y-auto p-6 space-y-6">
+        {messages.length === 0 ? (
+          <EmptyState message="Aucun message pour l'instant. Démarrez la conversation ci-dessous." />
+        ) : (
+          messages.map((msg) => (
+            <MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
+          ))
+        )}
+      </CardContent>
+
+      {/* Zone de saisie avec notre composant UI */}
+      <form onSubmit={handleSubmit} className="p-4 flex items-start space-x-3">
+        <div className="flex-1">
+          <Input
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            placeholder="Écrivez votre message..."
+          />
+        </div>
+        <Button
+          type="submit"
+          isLoading={isSending}
+          disabled={isSending || !newMessage.trim()}
+          className="px-6"
+        >
+          Envoyer
+        </Button>
+      </form>
+    </Card>
+  );
+};

src/components/widgets/TicketInfoWidget.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Ticket } from '@/types/Ticket';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { StatusBadge } from '@/components/ui/StatusBadge';
+
+interface TicketInfoWidgetProps {
+  ticket: Ticket;
+}
+
+export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="space-y-2">
+          <div className="flex items-center space-x-3">
+            <span className="text-xs font-bold uppercase tracking-wider px-2.5 py-1 bg-slate-200 text-slate-700 rounded-md">
+              {ticket.category}
+            </span>
+            <span className="text-xs font-mono text-slate-400">ID: {ticket.id}</span>
+          </div>
+          <h1 className="text-xl font-bold text-slate-900 leading-snug">{ticket.subject}</h1>
+          <p className="text-xs text-slate-500 font-medium">
+            Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
+          </p>
+        </div>
+        
+        <StatusBadge status={ticket.status} className="shrink-0 max-w-fit" />
+      </CardHeader>
+      
+      <CardContent>
+        <p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
+          Description du besoin :
+        </p>
+        <div className="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
+          {ticket.description}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src/components/widgets/TicketsWidget.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTickets } from '@/hooks/useTickets';
+import { TicketRow } from '@/components/ui/TicketRow';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Loader } from '@/components/ui/Loader';
+import { EmptyState } from '@/components/ui/EmptyState';
+
+interface TicketsWidgetProps {
+  onSelectTicket: (id: string) => void;
+}
+
+export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket }) => {
+  const { tickets, isLoading, error } = useTickets();
+
+  return (
+    <Card className='pb-7'>
+      <CardContent className="p-0">
+        {/* En-tête du Widget */}
+        <div className="p-6 border-b border-slate-100">
+          <h2 className="text-lg font-semibold text-slate-900">Requêtes en cours et historiques</h2>
+        </div>
+
+        {/* Liste des tickets et états de chargement */}
+        <div className="divide-y divide-slate-100">
+          {error && (
+            <div className="p-6">
+              <EmptyState message={error} className="text-red-500 font-medium not-italic" />
+            </div>
+          )}
+          
+          {isLoading && !error && (
+            <Loader />
+          )}
+          
+          {!isLoading && !error && tickets.length === 0 && (
+            <div className="p-6">
+              <EmptyState message="Aucun ticket enregistré pour le moment." />
+            </div>
+          )}
+          
+          {!isLoading && !error && tickets.map((ticket) => (
+            <TicketRow 
+              key={ticket.id} 
+              ticket={ticket} 
+              onClick={onSelectTicket} 
+            />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TicketsWidget;

src/components/widgets/UptimeWidget.tsx

@@ -1,99 +1,41 @@
-import { useState, useEffect } from 'react';
+import { useInfrastructureNodes } from '@/hooks/useInfrastructureNodes';
-import { pb } from '../../config/pocketbase';
+import { UptimeObject } from '@/components/ui/UptimeObject';
-
+import { Card, CardContent } from '@/components/ui/Card';
-interface InfrastructureNode {
+import { Loader } from '@/components/ui/Loader';
-  id: string;
+import { EmptyState } from '@/components/ui/EmptyState';
-  label: string;
-  type: string;
-  status: string;
-  uptime_sla: string;
-}
 
 export default function UptimeWidget() {
-  const [nodes, setNodes] = useState<InfrastructureNode[]>([]);
+  const { nodes, isLoading, error } = useInfrastructureNodes();
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchNodes = async () => {
-      try {
-        // Récupération sécurisée filtrée automatiquement par le Token JWT de la compagnie
-        const records = await pb.collection('aegis_infrastructure_nodes').getFullList<InfrastructureNode>({
-          sort: 'created',
-        });
-        setNodes(records);
-      } catch (error) {
-        console.error("Erreur lors de la récupération des nœuds :", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchNodes();
-  }, []);
-
-  // Fonction pour adapter dynamiquement la couleur du badge selon le statut renvoyé par la base
-  const getStatusStyle = (status: string) => {
-    switch (status) {
-      case 'Opérationnel':
-        return {
-          bg: 'bg-emerald-50 text-emerald-600 border-emerald-100',
-          dot: 'bg-emerald-500'
-        };
-      case 'Dégradé':
-        return {
-          bg: 'bg-amber-50 text-amber-600 border-amber-100',
-          dot: 'bg-amber-500'
-        };
-      case 'Hors Ligne':
-        return {
-          bg: 'bg-red-50 text-red-600 border-red-100',
-          dot: 'bg-red-500'
-        };
-      default:
-        return {
-          bg: 'bg-slate-50 text-slate-600 border-slate-100',
-          dot: 'bg-slate-400'
-        };
-    }
-  };
 
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 flex flex-col">
+    <Card>
-      <h2 className="text-lg font-semibold text-slate-900 mb-4">État des Services & SLA</h2>
+      <CardContent className="p-6 flex flex-col h-full">
-      
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-400 mb-4 transition-all duration-300 ease-in-out">État des Services & SLA</h2>
-      {isLoading ? (
+
-        <div className="flex-1 flex justify-center items-center py-8">
+        {/* 1. Gestion de l'erreur */}
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-slate-900"></div>
+        {error && (
-        </div>
+          <EmptyState message={error} className="text-red-500 not-italic font-medium" />
-      ) : nodes.length === 0 ? (
+        )}
-        <div className="flex-1 flex justify-center items-center py-8 text-sm text-slate-500 italic">
+
-          Aucun équipement enregistré pour ce contrat.
+        {/* 2. Gestion du chargement */}
-        </div>
+        {isLoading && !error && <Loader />}
-      ) : (
+
-        <div className="divide-y divide-slate-100 flex-1">
+        {/* 3. Gestion de l'état vide */}
-          {nodes.map((node) => {
+        {!isLoading && !error && nodes.length === 0 && (
-            const style = getStatusStyle(node.status);
+          <EmptyState message="Aucun équipement enregistré pour ce contrat." />
-            return (
+        )}
-              <div key={node.id} className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
+
-                <div>
+        {/* 4. Affichage des données */}
-                  <p className="font-medium text-slate-900">{node.label}</p>
+        <table className="divide-y divide-slate-100 table-auto">
-                  <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
+        {!isLoading && !error && nodes.length > 0 && (
-                </div>
+            <tbody className=''>
-                <div className="flex items-center space-x-6">
+              {nodes.map((node) => (
-                  <div className="text-right">
+                <UptimeObject key={node.id} node={node} />
-                    <p className="text-xs text-slate-500">SLA</p>
+              ))}
-                    <p className="text-sm font-semibold text-slate-900">{node.uptime_sla}%</p>
+            </tbody>
-                  </div>
+        )}
-                  <div className={`${style.bg} px-3 py-1 rounded-full text-xs font-medium flex items-center border`}>
+        </table>
-                    <div className={`w-1.5 h-1.5 rounded-full ${style.dot} mr-2`}></div>
+      </CardContent>
-                    {node.status}
+    </Card>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
   );
 }

src/data/evolutionOptions.ts

@@ -0,0 +1,122 @@
+// Fichier : src/data/evolutionOptions.ts
+
+export interface EvolutionOption {
+  id: string;
+  category: 'security' | 'cloud' | 'sovereignty' | 'governance' | 'custom';
+  categoryLabel: string;
+  title: string;
+  description: string;
+  subject: string;
+  payloadDescription: string;
+  badgeText?: string;
+}
+
+export interface EvolutionCategory {
+  id: string;
+  label: string;
+}
+
+export const EVOLUTION_CATEGORIES = [
+  { id: 'all', label: 'Toutes les initiatives' },
+  { id: 'security', label: 'Cybersécurité & Zero Trust' },
+  { id: 'cloud', label: 'Cloud Privé & Réseau' },
+  { id: 'sovereignty', label: 'Outils Souverains & Data' },
+  { id: 'governance', label: 'Conformité & vCISO' },
+];
+
+export const EVOLUTION_OPTIONS: EvolutionOption[] = [
+  // --- CYBERSÉCURITÉ & ZERO TRUST ---
+  {
+    id: 'sec-zero-trust',
+    category: 'security',
+    categoryLabel: 'Cybersécurité',
+    title: 'Segmentation Réseau Zero Trust & Firewalls Dedicated',
+    description: 'Mise en place de micro-segmentation par VLANs et déploiement de pare-feu virtuels/physiques (OPNsense) hautement sécurisés.',
+    subject: "Projet d'Évolution : Zero Trust & Pare-feu",
+    payloadDescription: "Le client souhaite déployer une politique Zero Trust avec segmentation par VLANs et pare-feu OPNsense dédiés.",
+    badgeText: 'Socle Souverain'
+  },
+  {
+    id: 'sec-pentest-pra',
+    category: 'security',
+    categoryLabel: 'Cybersécurité',
+    title: 'Audit de Vulnérabilités & Plan de Reprise d\'Activité (PRA)',
+    description: 'Tests d\'intrusion (Pen-test) de surface, audit de configuration et rédaction du Plan de Reprise d\'Activité en cas de sinistre majeur.',
+    subject: "Projet d'Évolution : Audits & PRA",
+    payloadDescription: "Demande d'audit de vulnérabilités, tests d'intrusion et élaboration/revue du Plan de Reprise d'Activité (PRA).",
+  },
+
+  // --- CLOUD PRIVÉ & INFRASTRUCTURE ---
+  {
+    id: 'cloud-proxmox',
+    category: 'cloud',
+    categoryLabel: 'Cloud Privé',
+    title: 'Migration vers Hyperviseur Bare-Metal Proxmox',
+    description: 'Migration des serveurs physiques vétustes vers nos hyperviseurs bare-metal chiffrés et interconnectés via tunnels VPN dédiés.',
+    subject: "Projet d'Évolution : Migration Cloud Privé Proxmox",
+    payloadDescription: "Le client souhaite migrer ses serveurs locaux/vétustes vers des hyperviseurs bare-metal Proxmox managés par GISE.",
+    badgeText: 'Haute Disponibilité'
+  },
+  {
+    id: 'cloud-sdwan-vpn',
+    category: 'cloud',
+    categoryLabel: 'Réseau',
+    title: 'Interconnexion Multi-site & Tunnels VPN WireGuard',
+    description: 'Liaison chiffrée permanente entre vos différentes succursales et le datacenter avec basculement automatique en cas de coupure.',
+    subject: "Projet d'Évolution : Architecture Multi-site & VPN",
+    payloadDescription: "Demande d'extension du réseau avec interconnexion VPN WireGuard/OPNsense entre plusieurs sites.",
+  },
+
+  // --- OU TILS SOUVERAINS & DONNÉES ---
+  {
+    id: 'sov-suite',
+    category: 'sovereignty',
+    categoryLabel: 'Souveraineté',
+    title: 'Suite Collaborative Souveraine (GED & Coffre-Fort)',
+    description: 'Déploiement d\'espaces de stockage chiffrés (Nextcloud souverain), coffre-fort de mots de passe d\'entreprise (Vaultwarden) et visioconférence sécurisée.',
+    subject: "Projet d'Évolution : Suite Collaborative Souveraine",
+    payloadDescription: "Le client demande le déploiement de la suite souveraine (GED Nextcloud, Vaultwarden d'entreprise, outils chiffrés).",
+    badgeText: '100% Souverain'
+  },
+  {
+    id: 'sov-backups',
+    category: 'sovereignty',
+    categoryLabel: 'Sauvegardes',
+    title: 'Sauvegardes Immuables & Anti-Ransomware (Règle 3-2-1-1-0)',
+    description: 'Stockage des sauvegardes dans un coffre-fort numérique immuable (non modifiable et non supprimable même en cas de piratage).',
+    subject: "Projet d'Évolution : Sauvegardes Immuables",
+    payloadDescription: "Mise en place ou renforcement de la politique de sauvegardes immuables anti-ransomware (Règle 3-2-1-1-0).",
+  },
+
+  // --- CONFORMITÉ & GOUVERNANCE ---
+  {
+    id: 'gov-vciso',
+    category: 'governance',
+    categoryLabel: 'Gouvernance',
+    title: 'Accompagnement vCISO (Directeur Sécurité Partagé)',
+    description: 'Mise à disposition d\'un expert RSSI/vCISO dédié pour piloter la stratégie SI, former vos collaborateurs et auditer les prestataires.',
+    subject: "Projet d'Évolution : Accompagnement vCISO",
+    payloadDescription: "Le client souhaite un accompagnement vCISO (RSSI dédié à temps partagé) pour piloter sa gouvernance IT.",
+    badgeText: 'Conseil VIP'
+  },
+  {
+    id: 'gov-compliance',
+    category: 'governance',
+    categoryLabel: 'Conformité',
+    title: 'Mise en Conformité Légale (RGPD, NIS2, DORA)',
+    description: 'Analyse d\'écart et mise aux normes réglementaires européennes imposées aux infrastructures critiques et professions réglementées.',
+    subject: "Projet d'Évolution : Conformité NIS2 / RGPD / DORA",
+    payloadDescription: "Demande de mise en conformité réglementaire (RGPD, directive NIS2, DORA ou normes sectorielles).",
+  },
+
+  // --- DEMANDE SUR MESURE ---
+  {
+    id: 'custom-project',
+    category: 'custom',
+    categoryLabel: 'Sur-Mesure',
+    title: 'Projet d\'Ingénierie & Besoins Spécifiques',
+    description: 'Vous avez une contrainte technique spécifique ou un projet d\'extension sur-mesure ? Discutez-en directement avec votre directeur de compte.',
+    subject: "Projet d'Évolution : Demande spécifique",
+    payloadDescription: "Le client formule une demande d'évolution stratégique spécifique à cadrer lors d'un entretien.",
+  }
+];

src/hooks/useContracts.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { ManagedContract } from '@/types/ManagedContract';
+
+export const useContracts = () => {
+  const [contracts, setContracts] = useState<ManagedContract[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchContracts = async () => {
+      try {
+        setIsLoading(true);
+        const records = await pb.collection('aegis_managed_contracts').getFullList<ManagedContract>({
+          sort: '-created',
+        });
+        setContracts(records);
+      } catch (err) {
+        console.error("Erreur contrats :", err);
+        setError("Impossible de charger le catalogue des services.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchContracts();
+  }, []);
+
+  return { contracts, isLoading, error };
+};

src/hooks/useCreateTicket.ts

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { pb } from '@/services/pocketbase';
+
+interface TicketPayload {
+  category: string;
+  ci: string;
+  subject: string;
+  affectedAsset: string;
+  incidentTime: string;
+  description: string;
+}
+
+export const useCreateTicket = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const createTicket = async (payload: TicketPayload): Promise<string | null> => {
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const currentUser = pb.authStore.record || pb.authStore.model;
+      if (!currentUser) throw new Error("Utilisateur non authentifié");
+
+      // Construction de la description enrichie avec les métadonnées techniques
+      let fullDescription = payload.description;
+      
+      if (payload.affectedAsset.trim()) {
+        fullDescription = `[Équipement concerné: ${payload.affectedAsset}]\n` + fullDescription;
+      }
+      if (payload.category === 'Incident Critique' && payload.incidentTime) {
+        fullDescription = `[Heure de l'incident: ${new Date(payload.incidentTime).toLocaleString('fr-FR')}]\n` + fullDescription;
+      }
+      if (payload.ci !== 'general') {
+        fullDescription = `[CI: ${payload.ci}]\n` + fullDescription;
+      }
+
+      // Enregistrement dans PocketBase
+      const record = await pb.collection('aegis_tickets').create({
+        author: currentUser.id,
+        company: currentUser.company,
+        category: payload.category,
+        subject: payload.subject,
+        description: fullDescription,
+        status: 'Ouvert',
+      });
+
+      return record.id; // On retourne l'ID pour la redirection
+    } catch (err) {
+      console.error("Erreur lors de la création du ticket :", err);
+      setError("Impossible d'enregistrer le ticket sur le serveur sécurisé.");
+      return null;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return { createTicket, isSubmitting, error };
+};

src/hooks/useDocumentDownload.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+// Importez votre instance PocketBase
+import {pb} from '@/services/pocketbase'; 
+import type { Document } from '@/types/Document';
+
+export function useDocumentDownload() {
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const downloadFile = async (doc: Document) => {
+        try {
+            setIsDownloading(true);
+            setError(null);
+
+            // 1. Demander un jeton éphémère de téléchargement (Sécurité Max)
+            // Ce jeton autorise le navigateur à télécharger un fichier protégé sans exposer votre session
+            const fileToken = await pb.files.getToken();
+
+            // 2. Générer l'URL du fichier
+            // ATTENTION : Pour que getUrl fonctionne, 'doc' DOIT contenir doc.id ET doc.collectionId (ou doc.collectionName)
+            const fileUrl = pb.files.getUrl(doc, doc.file);
+            
+            // 3. Ajouter le jeton sécurisé et forcer le téléchargement (?download=1)
+            const downloadUrl = `${fileUrl}?token=${fileToken}&download=1`;
+
+            // 4. Créer un lien invisible pour forcer le navigateur à télécharger
+            const link = document.createElement("a");
+            link.href = downloadUrl;
+            // On s'assure d'avoir un nom de fichier par défaut si doc.title est vide
+            link.setAttribute("download", doc.title || "document_aegis.pdf"); 
+            
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+        } catch (err) {
+            console.error("Erreur lors du téléchargement sécurisé :", err);
+            setError("Accès refusé au coffre-fort documentaire.");
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+
+    return { downloadFile, isDownloading, error };
+}

src/hooks/useDocuments.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Document } from '@/types/Document';
+
+export const useDocuments = () => {
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDocuments = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const records = await pb.collection('aegis_documents_vault').getFullList<Document>({
+        sort: '-created', // Du plus récent au plus ancien
+      });
+      setDocuments(records);
+    } catch (err) {
+      console.error("Erreur lors de la récupération des documents :", err);
+      setError("Impossible de charger les documents.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  return { documents, isLoading, error, refetch: fetchDocuments };
+};

src/hooks/useEvolutionRequest.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { pb } from '@/services/pocketbase';
+
+export const useEvolutionRequest = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submitRequest = async (subject: string, description: string) => {
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await pb.collection('aegis_tickets').create({
+        author: pb.authStore.model?.id,
+        company: pb.authStore.model?.company,
+        category: "Évolution",
+        subject,
+        description,
+        status: "Ouvert"
+      });
+      setSubmitSuccess(true);
+    } catch (err) {
+      console.error("Erreur ticket d'évolution :", err);
+      setError("Une erreur de communication est survenue. Nos systèmes sont alertés.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return { submitRequest, isSubmitting, submitSuccess, error };
+};

src/hooks/useInfrastructureNodes.ts

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { pb } from '@services/pocketbase';
+import type { InfrastructureNode } from '@/types/InfrastructureNode';
+
+export const useInfrastructureNodes = () => {
+  const [nodes, setNodes] = useState<InfrastructureNode[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchNodes = async () => {
+      try {
+        setIsLoading(true);
+        const records = await pb.collection('aegis_infrastructure_nodes').getFullList<InfrastructureNode>({
+          sort: 'created',
+        });
+        setNodes(records);
+      } catch (err) {
+        setError("Impossible de charger l'infrastructure.");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchNodes();
+  }, []);
+
+  return { nodes, isLoading, error };
+};

src/hooks/useLoginFlow.ts

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import { pb } from '@/services/pocketbase';
+import * as OTPAuth from 'otpauth';
+
+interface MfaConfig {
+  userId: string;
+  totpSecret: string;
+  qrUrl: string;
+  isFirstSetup: boolean;
+  email: string;
+}
+
+export const useLoginFlow = (onLoginSuccess: () => void) => {
+  const [step, setStep] = useState<1 | 2>(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [mfaConfig, setMfaConfig] = useState<MfaConfig | null>(null);
+
+  // --- SSO ZITADEL ---
+  const loginWithZitadel = async () => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
+      if (authData) onLoginSuccess();
+    } catch (err) {
+      console.error(err);
+      setError("Échec de la connexion via GISE Identity.");
+      pb.authStore.clear();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- LOCAL LOGIN (Étape 1) ---
+  const loginWithLocal = async (email: string, pass: string) => {
+    setError('');
+    setIsLoading(true);
+    try {
+      const authData = await pb.collection('aegis_users').authWithPassword(email, pass);
+
+      if (authData.record.mfa_enabled) {
+        let secret = authData.record.totp_secret;
+        let qrUrl = '';
+        let isFirstSetup = false;
+
+        // Génération d'un nouveau secret si première fois
+        if (!secret) {
+          const totp = new OTPAuth.TOTP({
+            issuer: 'AEGIS by GISE',
+            label: email,
+            algorithm: 'SHA1',
+            digits: 6,
+            period: 30,
+            secret: new OTPAuth.Secret({ size: 20 })
+          });
+          secret = totp.secret.base32;
+          qrUrl = totp.toString();
+          isFirstSetup = true;
+        }
+
+        setMfaConfig({ userId: authData.record.id, totpSecret: secret, qrUrl, isFirstSetup, email });
+        setStep(2);
+      } else {
+        onLoginSuccess();
+      }
+    } catch (err) {
+      setError("Identifiants incorrects ou accès révoqué.");
+      pb.authStore.clear();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // --- VALIDATION MFA (Étape 2) ---
+  const verifyMfa = async (mfaCode: string) => {
+    if (!mfaConfig) return;
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const totp = new OTPAuth.TOTP({
+        issuer: 'AEGIS by GISE',
+        label: mfaConfig.email,
+        algorithm: 'SHA1',
+        digits: 6,
+        period: 30,
+        secret: OTPAuth.Secret.fromBase32(mfaConfig.totpSecret)
+      });
+
+      const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
+
+      if (isValid) {
+        if (mfaConfig.isFirstSetup) {
+          await pb.collection('aegis_users').update(mfaConfig.userId, { totp_secret: mfaConfig.totpSecret });
+        }
+        onLoginSuccess();
+      } else {
+        setError("Code de sécurité invalide ou expiré.");
+      }
+    } catch (err) {
+      setError("Erreur critique lors de la vérification.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const cancelMfa = () => {
+    pb.authStore.clear();
+    setStep(1);
+    setMfaConfig(null);
+    setError('');
+  };
+
+  return { step, isLoading, error, mfaConfig, loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa };
+};

src/hooks/useTheme.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  // Initialisation de l'état avec une fonction pour ne lire le localStorage qu'une seule fois
+  const [theme, setTheme] = useState<Theme>(() => {
+    // 1. On vérifie si un choix a déjà été sauvegardé
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme === 'dark' || storedTheme === 'light') {
+      return storedTheme;
+    }
+    
+    // 2. Sinon, on vérifie la préférence système de l'utilisateur
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    
+    // 3. Par défaut, mode clair
+    return 'light';
+  });
+
+  // À chaque fois que 'theme' change, on met à jour le HTML et on sauvegarde
+  useEffect(() => {
+    const root = window.document.documentElement;
+    
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  // Fonction utilitaire pour basculer facilement
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return { theme, isDark: theme === 'dark', toggleTheme, setTheme };
+}

src/hooks/useTicketDetail.ts

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Ticket } from '@/types/Ticket';
+import type { TicketMessage } from '@/types/Message';
+
+export const useTicketDetail = (ticketId?: string) => {
+  const [ticket, setTicket] = useState<Ticket | null>(null);
+  const [messages, setMessages] = useState<TicketMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSending, setIsSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const currentUser = pb.authStore.record; // ou .model selon votre version PocketBase
+
+  const fetchTicketData = useCallback(async () => {
+    if (!ticketId) return;
+    setError(null);
+    
+    try {
+      // 1. Récupération du ticket
+      const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
+      setTicket(ticketData);
+
+      // 2. Récupération des messages associés
+      const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<TicketMessage>({
+        filter: `ticket = "${ticketId}"`,
+        expand: 'author',
+        sort: 'created',
+      });
+      setMessages(messageRecords);
+    } catch (err) {
+      console.error("Erreur lors du chargement de la discussion :", err);
+      setError("Ticket introuvable ou accès non autorisé.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [ticketId]);
+
+  useEffect(() => {
+    fetchTicketData();
+  }, [fetchTicketData]);
+
+  const sendMessage = async (content: string) => {
+    if (!content.trim() || !currentUser || !ticketId) return;
+    
+    setIsSending(true);
+    try {
+      await pb.collection('aegis_ticket_messages').create({
+        ticket: ticketId,
+        author: currentUser.id,
+        content: content.trim(),
+      });
+      await fetchTicketData(); // On recharge les messages après l'envoi
+    } catch (err) {
+      console.error("Erreur lors de l'envoi du message :", err);
+      throw new Error("Impossible d'envoyer le message.");
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  return { ticket, messages, isLoading, error, isSending, sendMessage, currentUser };
+};

src/hooks/useTickets.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Ticket } from '@/types/Ticket';
+
+export const useTickets = () => {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTickets = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
+        sort: '-created', // Du plus récent au plus ancien
+      });
+      setTickets(records);
+    } catch (err) {
+      console.error("Erreur lors de la récupération des tickets :", err);
+      setError("Impossible de charger l'historique de vos requêtes.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchTickets();
+  }, [fetchTickets]);
+
+  return { tickets, isLoading, error, refetch: fetchTickets };
+};

src/index.css

@@ -2,4 +2,20 @@
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* --- VOS UTILITAIRES PERSONNALISÉS --- */
+@layer utilities {
+  .scrollbar-hide {
+    /* Masquer pour IE, Edge et Firefox */
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  /* Masquer pour Chrome, Safari et Opera */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}

src/layouts/DashboardLayout.tsx

@@ -1,93 +1,23 @@
 import React from 'react';
+import Sidebar from '@/components/layout/Sidebar';
 
-// Définition stricte des propriétés attendues par le Layout
 interface DashboardLayoutProps {
   children: React.ReactNode;
-  activeView: 'dashboard' | 'support' | 'vault' | 'account';
-  onNavigate: (view: 'dashboard' | 'support' | 'vault' | 'account') => void;
   onLogout: () => void;
 }
 
-export default function DashboardLayout({ children, activeView, onNavigate, onLogout }: DashboardLayoutProps) {
+export default function DashboardLayout({ children, onLogout }: DashboardLayoutProps) {
-  
-  const navItems = [
-    { id: 'dashboard', label: 'Tableau de bord', icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
-    )},
-    { id: 'support', label: 'Centre de Support', icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
-    )},
-    { id: 'vault', label: 'Coffre-Fort', icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
-    )}
-  ];
-
   return (
-    <div className="flex h-screen bg-slate-50 overflow-hidden font-sans selection:bg-blue-900 selection:text-white">
+    <div className="h-screen w-full flex bg-[#e8e8e8] dark:bg-[#1e293b] text-slate-800 dark:text-slate-100 font-sans transition-all duration-300 ease-in-out">
-      
+      {/* Intégration de la navbar extraite */}
-      {/* Sidebar Latérale (Institutionnelle) */}
+      <Sidebar onLogout={onLogout} className='my-4 ml-4'/>
-      <aside className="w-64 bg-white border-r border-slate-200 flex flex-col justify-between shadow-sm z-10">
+
-        
+      {/* CONTENU PRINCIPAL */}
-        {/* En-tête Sidebar */}
+      <main className="flex-1 overflow-y-auto scrollbar-hide">
         <div>
-          <div className="h-20 flex items-center px-8 border-b border-slate-100">
+          {children}
-            <h2 className="text-2xl font-bold tracking-tight text-slate-900">
-              AEGIS <span className="text-xs font-semibold text-blue-900 ml-1 bg-blue-50 px-2 py-1 rounded">VIP</span>
-            </h2>
-          </div>
-
-          {/* Navigation */}
-          <nav className="p-4 space-y-1">
-            {navItems.map((item) => (
-              <button
-                key={item.id}
-                onClick={() => onNavigate(item.id as any)}
-                className={`w-full flex items-center px-4 py-3 text-sm font-medium rounded-lg transition-colors duration-200 ${
-                  activeView === item.id
-                    ? 'bg-blue-50 text-blue-900'
-                    : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
-                }`}
-              >
-                <span className={`mr-3 ${activeView === item.id ? 'text-blue-900' : 'text-slate-400'}`}>
-                  {item.icon}
-                </span>
-                {item.label}
-              </button>
-            ))}
-          </nav>
         </div>
-
-        {/* Pied de la Sidebar (Profil & Déconnexion) */}
-        <div className="p-4 border-t border-slate-100">
-          <button 
-            onClick={() => onNavigate('account')}
-            className={`w-full flex items-center px-4 py-3 rounded-lg transition-colors duration-200 text-left ${
-              activeView === 'account' ? 'bg-slate-100 ring-1 ring-slate-200' : 'hover:bg-slate-50'
-            }`}
-          >
-            <div className="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 font-bold text-sm shrink-0">
-              DC
-            </div>
-            <div className="ml-3 overflow-hidden">
-              <p className="text-sm font-medium text-slate-900 truncate">Direction Client</p>
-              <p className="text-xs text-slate-500 truncate">Paramètres du compte</p>
-            </div>
-          </button>
-          <button 
-            onClick={onLogout}
-            className="w-full flex items-center px-4 py-2 text-sm font-medium text-red-600 rounded-lg hover:bg-red-50 transition-colors duration-200"
-          >
-            <svg className="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
-            Verrouiller la session
-          </button>
-        </div>
-      </aside>
-
-      {/* Zone de contenu principal */}
-      <main className="flex-1 overflow-y-auto">
-        {children}
       </main>
-
     </div>
   );
-}
+} 

src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { BrowserRouter } from 'react-router-dom'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
 )

src/pages/Account/AccountSettings.tsx

@@ -1,92 +0,0 @@
-export default function AccountSettings() {
-  return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Paramètres du compte</h1>
-            <p className="text-sm text-slate-500 mt-1">Gestion de la sécurité et informations contractuelles</p>
-          </div>
-        </div>
-      </header>
-
-      {/* Contenu Principal */}
-      <main className="max-w-7xl mx-auto px-8 py-8 space-y-8">
-        
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          
-          {/* Colonne 1 : Sécurité */}
-          <div className="space-y-8">
-            <section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-              <h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
-                Sécurité de l'accès
-              </h2>
-              
-              <div className="space-y-6">
-                {/* MFA Status */}
-                <div className="flex items-center justify-between">
-                  <div>
-                    <p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
-                    <p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
-                  </div>
-                  <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
-                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
-                    Actif
-                  </span>
-                </div>
-
-                <div className="pt-4 border-t border-slate-100">
-                  <button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
-                    Générer de nouveaux codes de secours
-                  </button>
-                </div>
-
-                {/* Mot de passe */}
-                <div className="pt-4 border-t border-slate-100">
-                  <p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
-                  <p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
-                  <button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
-                    Modifier le mot de passe
-                  </button>
-                </div>
-              </div>
-            </section>
-          </div>
-
-          {/* Colonne 2 : Organisation & Contrat */}
-          <div className="space-y-8">
-            <section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-              <h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
-                <svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
-                Profil de l'Organisation
-              </h2>
-              
-              <dl className="space-y-4 text-sm">
-                <div>
-                  <dt className="text-slate-500 font-medium">Entité Légale</dt>
-                  <dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
-                </div>
-                <div>
-                  <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
-                  <dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
-                </div>
-                <div>
-                  <dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
-                  <dd className="mt-1 flex items-center">
-                    <span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
-                    <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
-                  </dd>
-                </div>
-              </dl>
-            </section>
-          </div>
-
-        </div>
-
-      </main>
-    </div>
-  );
-}

src/pages/AccountSettings.tsx

@@ -0,0 +1,30 @@
+import PageHeader from "@/components/ui/PageHeader";
+import AccessWidget from "@/components/widgets/AccessWidget";
+import InformationWidget from "@/components/widgets/InformationWidget";
+
+export default function AccountSettings() {
+  return (
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+
+
+      {/* Contenu Principal */}
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
+        {/* Header */}
+        <PageHeader
+          title="Paramètres du compte"
+          description="Gestion de la sécurité et informations contractuelles" />
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+
+          {/* Colonne 1 : Sécurité */}
+          <AccessWidget/>
+
+          {/* Colonne 2 : Organisation & Contrat */}
+          <InformationWidget/>
+
+        </div>
+
+      </main>
+    </div>
+  );
+}

src/pages/Auth/Login.tsx

@@ -1,261 +0,0 @@
-import React, { useState } from 'react';
-import { pb } from '../../config/pocketbase';
-import * as OTPAuth from 'otpauth';
-import { QRCodeSVG } from 'qrcode.react';
-
-interface LoginProps {
-  onLoginSuccess: () => void;
-}
-
-export default function Login({ onLoginSuccess }: LoginProps) {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [mfaCode, setMfaCode] = useState('');
-  const [error, setError] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [step, setStep] = useState<1 | 2>(1);
-
-  // États pour la cryptographie TOTP (Flux Local)
-  const [userId, setUserId] = useState('');
-  const [totpSecret, setTotpSecret] = useState('');
-  const [qrUrl, setQrUrl] = useState('');
-  const [isFirstSetup, setIsFirstSetup] = useState(false);
-
-  // --------------------------------------------------------
-  // 1 Connexion Zitadel (SSO)
-  // --------------------------------------------------------
-  const handleZitadelLogin = async () => {
-    setError('');
-    setIsLoading(true);
-    try {
-      // PocketBase gère automatiquement la popup vers Zitadel et le retour du token
-      const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
-      console.log("Données d'authentification SSO :", authData);
-      
-      if (authData) {
-        // Zitadel a déjà géré la sécurité et le MFA de son côté.
-        // On ouvre directement le coffre-fort.
-        onLoginSuccess();
-      }
-    } catch (err: any) {
-      console.error("Erreur d'authentification SSO :", err);
-      setError("Échec de la connexion sécurisée via GISE Identity.");
-      pb.authStore.clear();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  // --------------------------------------------------------
-  // 2 Connexion Email - Mot de passe
-  // --------------------------------------------------------
-  const handleLocalLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsLoading(true);
-
-    try {
-      const authData = await pb.collection('aegis_users').authWithPassword(email, password);
-
-      if (authData.record.mfa_enabled) {
-        setUserId(authData.record.id);
-
-        if (!authData.record.totp_secret) {
-          const totp = new OTPAuth.TOTP({
-            issuer: 'AEGIS by GISE',
-            label: email,
-            algorithm: 'SHA1',
-            digits: 6,
-            period: 30,
-            secret: new OTPAuth.Secret({ size: 20 })
-          });
-
-          setTotpSecret(totp.secret.base32);
-          setQrUrl(totp.toString());
-          setIsFirstSetup(true);
-        } else {
-          setTotpSecret(authData.record.totp_secret);
-          setIsFirstSetup(false);
-        }
-        setStep(2); // On passe à l'étape MFA locale
-      } else {
-        onLoginSuccess();
-      }
-    } catch (err: any) {
-      setError("Identifiants institutionnels incorrects ou accès révoqué.");
-      pb.authStore.clear();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleFinalStep = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsLoading(true);
-
-    try {
-      const totp = new OTPAuth.TOTP({
-        issuer: 'AEGIS by GISE',
-        label: email,
-        algorithm: 'SHA1',
-        digits: 6,
-        period: 30,
-        secret: OTPAuth.Secret.fromBase32(totpSecret)
-      });
-
-      const isValid = totp.validate({ token: mfaCode, window: 1 }) !== null;
-
-      if (isValid) {
-        if (isFirstSetup) {
-          await pb.collection('aegis_users').update(userId, { totp_secret: totpSecret });
-        }
-        onLoginSuccess();
-      } else {
-        setError("Code de sécurité invalide ou expiré.");
-        setMfaCode('');
-      }
-    } catch (err) {
-      setError("Une erreur critique est survenue lors de la vérification.");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleCancelMFA = () => {
-    pb.authStore.clear();
-    setStep(1);
-    setPassword('');
-    setMfaCode('');
-    setError('');
-    setIsFirstSetup(false);
-  };
-
-  return (
-    <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
-      
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="flex justify-center">
-          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
-            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-            </svg>
-          </div>
-        </div>
-        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
-          AEGIS <span className="font-light text-slate-500">by GISE</span>
-        </h2>
-        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
-          Accès restreint
-        </p>
-      </div>
-
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow-sm border border-slate-200 rounded-xl sm:px-10">
-          
-          {step === 1 ? (
-            <div className="space-y-6">
-              {error && (
-                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
-                  {error}
-                </div>
-              )}
-
-              {/* BOUTON SSO ZITADEL */}
-              <div>
-                <button
-                  type="button"
-                  onClick={handleZitadelLogin}
-                  disabled={isLoading}
-                  className="flex w-full justify-center items-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition-colors disabled:opacity-70"
-                >
-                  <svg className="w-5 h-5 mr-2 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-                  </svg>
-                  {isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
-                </button>
-              </div>
-
-              {/* SÉPARATEUR VISUEL */}
-              <div className="relative">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-slate-200" />
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="bg-white px-2 text-slate-400">Ou via vos identifiants locaux</span>
-                </div>
-              </div>
-
-              {/* FORMULAIRE CLASSIQUE */}
-              <form className="space-y-6" onSubmit={handleLocalLogin}>
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
-                  <div className="mt-1">
-                    <input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="direction@client.com" />
-                  </div>
-                </div>
-
-                <div>
-                  <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
-                  <div className="mt-1">
-                    <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-2 placeholder-slate-400 shadow-sm focus:border-blue-900 focus:outline-none focus:ring-blue-900 sm:text-sm" placeholder="••••••••••••" />
-                  </div>
-                </div>
-
-                <div>
-                  <button type="submit" disabled={isLoading} className="flex w-full justify-center rounded-md border border-transparent bg-blue-900 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-800 focus:outline-none transition-colors disabled:opacity-70">
-                    {isLoading ? 'Chiffrement en cours...' : 'Authentification classique'}
-                  </button>
-                </div>
-              </form>
-            </div>
-          ) : (
-             <form className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300" onSubmit={handleFinalStep}>
-               {error && (
-                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
-                  {error}
-                </div>
-               )}
-               
-               {isFirstSetup ? (
-                 <div className="text-center mb-6">
-                   <p className="text-sm font-medium text-slate-900">Configuration de la sécurité</p>
-                   <p className="text-xs text-slate-500 mt-2 mb-4">Scannez ce QR Code avec Google Authenticator ou Authy pour lier votre appareil.</p>
-                   <div className="flex justify-center p-4 bg-white border border-slate-200 rounded-lg inline-block shadow-sm">
-                     <QRCodeSVG value={qrUrl} size={150} />
-                   </div>
-                 </div>
-               ) : (
-                 <div className="text-center mb-6">
-                   <p className="text-sm font-medium text-slate-900">Validation à double facteur</p>
-                   <p className="text-xs text-slate-500 mt-1">Saisissez le code généré par votre application d'authentification.</p>
-                 </div>
-               )}
-               
-               <div>
-                 <input 
-                   type="text" 
-                   value={mfaCode}
-                   onChange={(e) => setMfaCode(e.target.value)}
-                   required 
-                   maxLength={6} 
-                   className="block w-full appearance-none rounded-md border border-slate-300 px-3 py-3 text-center text-2xl tracking-[0.5em] text-slate-900 placeholder-slate-300 shadow-sm focus:border-blue-900 focus:outline-none font-mono" 
-                   placeholder="000000" 
-                 />
-               </div>
-               
-               <div className="flex space-x-3">
-                 <button type="button" onClick={handleCancelMFA} disabled={isLoading} className="flex w-1/3 justify-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 transition-colors disabled:opacity-70">
-                   Annuler
-                 </button>
-                 <button type="submit" disabled={isLoading || mfaCode.length !== 6} className="flex w-2/3 justify-center rounded-md border border-transparent bg-emerald-600 py-2.5 px-4 text-sm font-medium text-white shadow-sm hover:bg-emerald-700 transition-colors disabled:opacity-70">
-                   {isLoading ? 'Vérification...' : 'Déverrouiller'}
-                 </button>
-               </div>
-             </form>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

src/pages/DocumentVault.tsx

@@ -0,0 +1,32 @@
+import { Input } from '@/components/ui/Input';
+import PageHeader from '@/components/ui/PageHeader';
+import DocumentsWidget from '@/components/widgets/DocumentsWidget';
+import { useState } from 'react';
+
+export default function DocumentVault() {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  return (
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+
+      {/* Contenu Principal */}
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
+        <PageHeader
+          title='Coffre-Fort Documentaire'
+          description='Espace de stockage chiffré de bout en bout'>
+        </PageHeader>
+
+        {/* Barre de recherche (Visuelle) */}
+        <Input
+          type="text"
+          placeholder="Rechercher un document, une facture..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
+
+        {/* Liste des Documents (La Carte) */}
+        <DocumentsWidget></DocumentsWidget>
+      </main>
+    </div >
+  );
+}

src/pages/Login.tsx

@@ -0,0 +1,76 @@
+import { useLoginFlow } from '@/hooks/useLoginFlow';
+import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
+import { MfaForm } from '@/components/auth/MfaForm';
+import { Card, CardContent } from '@/components/ui/Card';
+import LogoGise from '@/components/ui/LogoGise';
+import { Button } from '@/components/ui/Button';
+import { GlobeLock } from 'lucide-react';
+import Badge from '@/components/ui/Badge';
+
+interface LoginProps {
+  onLoginSuccess: () => void;
+}
+
+export default function Login({ onLoginSuccess }: LoginProps) {
+  const {
+    step, isLoading, error, mfaConfig,
+    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa
+  } = useLoginFlow(onLoginSuccess);
+
+  return (
+    <div className="min-h-screen bg-[#e8e8e8] dark:bg-[#1e293b] flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
+
+      {/* HEADER LOGO */}
+      <LogoGise />
+
+      {/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md justify-center flex">
+        <Card>
+          <CardContent className="p-6 sm:p-10">
+
+            {/* AFFICHAGE DES ERREURS GLOBALES */}
+            {error && (
+              <div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
+                {error}
+              </div>
+            )}
+
+            {/* ROUTAGE INTERNE DES ÉTAPES */}
+            {step === 1 ? (
+              <div className="space-y-6 items-center">
+                <Button
+                  type="button"
+                  onClick={loginWithZitadel}
+                  disabled={isLoading}
+                  leftIcon={<GlobeLock className="w-5 h-5 mr-2 text-blue-900" />}>
+                  {isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
+                </Button>
+
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-slate-200" />
+                  </div>
+                  <div className="relative flex justify-center text-sm">
+                    <Badge name="Ou via authentification classique"></Badge>
+                  </div>
+                </div>
+
+                <LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
+              </div>
+            ) : (
+              <MfaForm
+                isFirstSetup={mfaConfig?.isFirstSetup || false}
+                qrUrl={mfaConfig?.qrUrl || ''}
+                isLoading={isLoading}
+                onVerify={verifyMfa}
+                onCancel={cancelMfa}
+              />
+            )}
+
+          </CardContent>
+        </Card>
+      </div>
+
+    </div>
+  );
+}

src/pages/ServiceDesk.tsx

@@ -0,0 +1,31 @@
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/Button';
+import { PageHeader } from '@/components/ui/PageHeader';
+import { TicketsWidget } from '@/components/widgets/TicketsWidget';
+
+export default function ServiceDesk() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
+
+        {/* HEADER EXTRAIT */}
+        <PageHeader 
+          title="Centre de Support (Service Desk)"
+          description="Canal de communication sécurisé avec vos experts GISE."
+        >
+          <Button onClick={() => navigate('/support/new')}>
+            Ouvrir un ticket sécurisé
+          </Button>
+        </PageHeader>
+
+        {/* WIDGET DES TICKETS */}
+        <TicketsWidget 
+          onSelectTicket={(ticketId) => navigate(`/support/tickets/${ticketId}`)} 
+        />
+
+      </main>
+    </div>
+  );
+}

src/pages/Support/NewTicket.tsx

@@ -1,216 +0,0 @@
-import React, { useState } from 'react';
-import { pb } from '../../config/pocketbase';
-
-interface NewTicketProps {
-  onCancel: () => void;
-  onTicketCreated: () => void; // Rappel pour recharger la liste et revenir en arrière
-}
-
-export default function NewTicket({ onCancel, onTicketCreated }: NewTicketProps) {
-  const [category, setCategory] = useState<'Incident Critique' | 'Évolution' | 'Administratif'>('Incident Critique');
-  const [ci, Ci] = useState('general');
-  const [subject, setSubject] = useState('');
-  const [affectedAsset, setAffectedAsset] = useState('');
-  const [incidentTime, setIncidentTime] = useState('');
-  const [description, setDescription] = useState('');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState('');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsSubmitting(true);
-
-    try {
-      const currentUser = pb.authStore.record;
-      if (!currentUser) throw new Error("Utilisateur non authentifié");
-
-      // Construction de la description enrichie avec les métadonnées techniques
-      let fullDescription = description;
-      if (affectedAsset.trim()) {
-        fullDescription = `[Équipement concerné: ${affectedAsset}]\n` + fullDescription;
-      }
-      if (category === 'Incident Critique' && incidentTime) {
-        fullDescription = `[Heure de l'incident: ${new Date(incidentTime).toLocaleString('fr-FR')}]\n` + fullDescription;
-      }
-
-      // Enregistrement dans PocketBase
-      await pb.collection('aegis_tickets').create({
-        author: currentUser.id,
-        company: currentUser.company,
-        category,
-        subject,
-        description: fullDescription,
-        status: 'Ouvert',
-      });
-
-      onTicketCreated(); // Retourne à la liste et rafraîchit
-    } catch (err) {
-      console.error("Erreur lors de la création du ticket :", err);
-      setError("Impossible d'enregistrer le ticket sur le serveur sécurisé.");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-12">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-4 sticky top-0 z-10 shadow-sm">
-        <div className="max-w-7xl mx-auto flex items-center">
-          <button 
-            type="button"
-            onClick={onCancel}
-            className="mr-4 p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-full transition-colors"
-          >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-          </button>
-          <div>
-            <h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
-            <p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
-          </div>
-        </div>
-      </header>
-
-      {/* Formulaire Principal */}
-      <main className="max-w-4xl mx-auto px-8 pt-8">
-        <form onSubmit={handleSubmit} className="space-y-8 bg-white rounded-xl shadow-sm border border-slate-200 p-8">
-          
-          {error && (
-            <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium">
-              {error}
-            </div>
-          )}
-
-          {/* Section 1 : Qualification */}
-          <div>
-            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">1. Qualification de la demande</h2>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              
-              <div>
-                <label htmlFor="category" className="block text-sm font-medium text-slate-700 mb-1">Type de demande</label>
-                <select
-                  id="category"
-                  value={category}
-                  onChange={(e) => setCategory(e.target.value as any)}
-                  className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
-                >
-                  <option value="Incident Critique">Incident Critique (Panne, Dégradation)</option>
-                  <option value="Évolution">Évolution (Ajout de ressources, Modification)</option>
-                  <option value="Administratif">Administratif (Facturation, Contrat)</option>
-                </select>
-              </div>
-
-              <div>
-                <label htmlFor="ci" className="block text-sm font-medium text-slate-700 mb-1">Infrastructure concernée (CI)</label>
-                <select
-                  id="ci"
-                  value={ci}
-                  onChange={(e) => Ci(e.target.value)}
-                  className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
-                >
-                  <option value="general">Général / Non spécifique</option>
-                  <option value="px1">Serveur Proxmox Principal (Hyperviseur)</option>
-                  <option value="fw1">Pare-feu Périphérique (WAN)</option>
-                  <option value="db1">Base de données MariaDB</option>
-                </select>
-              </div>
-
-            </div>
-          </div>
-
-          {/* Section 2 : Détails techniques & Actifs */}
-          <div>
-            <h2 className="text-base font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2">2. Détails techniques</h2>
-            <div className="space-y-6">
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <label htmlFor="subject" className="block text-sm font-medium text-slate-700 mb-1">Sujet de l'intervention <span className="text-blue-900 font-bold">*</span></label>
-                  <input
-                    type="text"
-                    id="subject"
-                    required
-                    value={subject}
-                    onChange={(e) => setSubject(e.target.value)}
-                    placeholder="Ex: Perte de paquets sur le lien WAN principal"
-                    className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="affectedAsset" className="block text-sm font-medium text-slate-700 mb-1">
-                    Équipement ou Produit concerné <span className="text-slate-400 font-normal">(Optionnel)</span>
-                  </label>
-                  <input
-                    type="text"
-                    id="affectedAsset"
-                    value={affectedAsset}
-                    onChange={(e) => setAffectedAsset(e.target.value)}
-                    placeholder="Ex: Ordinateur Direction, Imprimante X, etc."
-                    className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
-                  />
-                </div>
-              </div>
-
-              {category === 'Incident Critique' && (
-                <div>
-                  <label htmlFor="incidentTime" className="block text-sm font-medium text-slate-700 mb-1">
-                    Heure exacte du début de l'incident <span className="text-red-500 font-bold">*</span>
-                  </label>
-                  <input
-                    type="datetime-local"
-                    id="incidentTime"
-                    required
-                    value={incidentTime}
-                    onChange={(e) => setIncidentTime(e.target.value)}
-                    className="block w-full max-w-md rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 bg-white"
-                  />
-                </div>
-              )}
-
-              <div>
-                <label htmlFor="description" className="block text-sm font-medium text-slate-700 mb-1">
-                  Description détaillée <span className="text-blue-900 font-bold">*</span>
-                </label>
-                <textarea
-                  id="description"
-                  required
-                  rows={6}
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  placeholder="Décrivez précisément votre besoin ou les symptômes observés..."
-                  className="block w-full rounded-md border border-slate-300 py-2.5 px-3 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900 resize-y"
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Actions */}
-          <div className="pt-4 flex justify-end space-x-3 border-t border-slate-100">
-            <button
-              type="button"
-              onClick={onCancel}
-              className="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
-            >
-              Annuler
-            </button>
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className={`px-6 py-2 text-sm font-medium text-white rounded-lg transition-colors shadow-sm ${
-                category === 'Incident Critique' ? 'bg-red-600 hover:bg-red-700 focus:ring-red-600' : 'bg-blue-900 hover:bg-blue-800 focus:ring-blue-900'
-              } focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50`}
-            >
-              {isSubmitting ? 'Transmission en cours...' : 'Soumettre le ticket'}
-            </button>
-          </div>
-
-        </form>
-      </main>
-    </div>
-  );
-}

src/pages/Support/ServiceDesk.tsx

@@ -1,154 +0,0 @@
-import { useState, useEffect } from 'react';
-import { pb } from '../../config/pocketbase';
-import NewTicket from './NewTicket'; // Ajustez le chemin d'import selon votre arborescence
-import TicketDetail from './TicketDetail'; // Ajustez le chemin d'import selon votre arborescence
-
-interface Ticket {
-  id: string;
-  subject: string;
-  category: string;
-  status: 'Ouvert' | 'En analyse' | 'Résolu';
-  created: string;
-}
-
-export default function ServiceDesk() {
-  const [tickets, setTickets] = useState<Ticket[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  
-  // États de navigation interne au module Service Desk
-  const [currentView, setCurrentView] = useState<'list' | 'new' | 'detail'>('list');
-  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
-
-  // Récupération des tickets de l'entreprise connectée
-  const fetchTickets = async () => {
-    try {
-      const records = await pb.collection('aegis_tickets').getFullList<Ticket>({
-        sort: '-created', // Du plus récent au plus ancien
-      });
-      setTickets(records);
-    } catch (error) {
-      console.error("Erreur lors de la récupération des tickets :", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchTickets();
-  }, []);
-
-  // Gestion du clic sur un ticket pour ouvrir la discussion
-  const handleSelectTicket = (id: string) => {
-    setSelectedTicketId(id);
-    setCurrentView('detail');
-  };
-
-  // Styles visuels pour les statuts
-  const getStatusStyle = (status: Ticket['status']) => {
-    switch (status) {
-      case 'Ouvert': return 'bg-blue-50 text-blue-700 border-blue-100';
-      case 'En analyse': return 'bg-amber-50 text-amber-700 border-amber-100';
-      case 'Résolu': return 'bg-emerald-50 text-emerald-700 border-emerald-100';
-      default: return 'bg-slate-50 text-slate-700 border-slate-100';
-    }
-  };
-
-  // Rendu conditionnel selon la vue active
-  if (currentView === 'new') {
-    return (
-      <NewTicket 
-        onCancel={() => setCurrentView('list')} 
-        onTicketCreated={() => {
-          setCurrentView('list');
-          fetchTickets(); // On recharge la liste pour afficher le nouveau ticket
-        }} 
-      />
-    );
-  }
-
-  if (currentView === 'detail' && selectedTicketId) {
-    return (
-      <TicketDetail 
-        ticketId={selectedTicketId} 
-        onBack={() => {
-          setCurrentView('list');
-          setSelectedTicketId(null);
-          fetchTickets();
-        }} 
-      />
-    );
-  }
-
-  // Vue par défaut : La liste des tickets
-  return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 relative">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex justify-between items-center">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Centre de Support (Service Desk)</h1>
-            <p className="text-sm text-slate-500 mt-1">Canal de communication sécurisé avec vos experts GISE.</p>
-          </div>
-          <div className="flex items-center space-x-3">
-            <button
-          onClick={() => setCurrentView('new')}
-          className="bg-blue-900 hover:bg-blue-800 text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors shadow-sm"
-        >
-          Ouvrir un ticket sécurisé
-        </button>
-          </div>
-        </div>
-      </header>
-
-      <main className="max-w-7xl mx-auto px-8 py-8">
-
-      {/* Liste des tickets */}
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-        <div className="p-6 border-b border-slate-100">
-          <h2 className="text-lg font-semibold text-slate-900">Requêtes en cours et historiques</h2>
-        </div>
-
-        {isLoading ? (
-          <div className="flex justify-center items-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-900"></div>
-          </div>
-        ) : tickets.length === 0 ? (
-          <div className="text-center py-12 text-sm text-slate-500 italic">
-            Aucun ticket enregistré pour le moment.
-          </div>
-        ) : (
-          <div className="divide-y divide-slate-100">
-            {tickets.map((ticket) => (
-              <div 
-                key={ticket.id} 
-                onClick={() => handleSelectTicket(ticket.id)}
-                className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
-              >
-                <div className="space-y-1">
-                  <div className="flex items-center space-x-3">
-                    <span className="text-xs font-semibold px-2 py-0.5 bg-slate-100 text-slate-700 rounded border border-slate-200">
-                      {ticket.category}
-                    </span>
-                    <span className="text-xs text-slate-400">
-                      Ouvert le {new Date(ticket.created).toLocaleDateString('fr-FR')}
-                    </span>
-                  </div>
-                  <h3 className="text-sm font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">
-                    {ticket.subject}
-                  </h3>
-                </div>
-                <div>
-                  <span className={`px-3 py-1 rounded-full text-xs font-medium border ${getStatusStyle(ticket.status)}`}>
-                    {ticket.status}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-      </main>
-    </div>
-  );
-}

src/pages/Support/TicketDetail.tsx

@@ -1,201 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { pb } from '../../config/pocketbase';
-
-interface Ticket {
-  id: string;
-  subject: string;
-  description: string;
-  category: string;
-  status: 'Ouvert' | 'En analyse' | 'Résolu';
-  created: string;
-}
-
-interface Message {
-  id: string;
-  content: string;
-  created: string;
-  expand?: {
-    author?: {
-      id?: string;
-      name?: string;
-      email?: string;
-      avatar?: string;
-    };
-  };
-}
-
-interface TicketDetailProps {
-  ticketId: string;
-  onBack: () => void;
-}
-
-export default function TicketDetail({ ticketId, onBack }: TicketDetailProps) {
-  const [ticket, setTicket] = useState<Ticket | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [newMessage, setNewMessage] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-  const [isSending, setIsSending] = useState(false);
-
-  const currentUser = pb.authStore.record;
-
-  // Récupération du ticket et de ses messages associés
-  const fetchTicketData = async () => {
-    try {
-      const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
-      setTicket(ticketData);
-
-      const messageRecords = await pb.collection('aegis_ticket_messages').getFullList<Message>({
-        filter: `ticket = "${ticketId}"`,
-        expand: 'author',
-        sort: 'created',
-      });
-      setMessages(messageRecords);
-    } catch (error) {
-      console.error("Erreur lors du chargement de la discussion :", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchTicketData();
-  }, [ticketId]);
-
-  // Envoi d'un nouveau message dans la discussion
-  const handleSendMessage = async (e: React.SubmitEvent) => {
-    e.preventDefault();
-    if (!newMessage.trim() || !currentUser) return;
-
-    setIsSending(true);
-    try {
-      await pb.collection('aegis_ticket_messages').create({
-        ticket: ticketId,
-        author: currentUser.id,
-        content: newMessage.trim(),
-      });
-
-      setNewMessage('');
-      await fetchTicketData(); // Recharger les messages
-    } catch (error) {
-      console.error("Erreur lors de l'envoi du message :", error);
-      alert("Impossible d'envoyer le message.");
-    } finally {
-      setIsSending(false);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center py-20">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-900"></div>
-      </div>
-    );
-  }
-
-  if (!ticket) {
-    return (
-      <div className="bg-white rounded-xl p-6 text-center border border-slate-200">
-        <p className="text-sm text-slate-500 mb-4">Ticket introuvable ou accès non autorisé.</p>
-        <button onClick={onBack} className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm font-medium">
-          Retour aux tickets
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6 max-w-4xl mx-auto">
-      {/* Barre de navigation / Retour */}
-      <div className="flex items-center justify-between bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
-        <button
-          onClick={onBack}
-          className="flex items-center space-x-2 text-sm font-medium text-slate-600 hover:text-slate-900 transition-colors"
-        >
-          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
-          </svg>
-          <span>Retour au Centre de Support</span>
-        </button>
-        <div className="flex items-center space-x-3">
-          <span className="text-xs font-semibold px-2.5 py-1 bg-slate-100 text-slate-700 rounded border border-slate-200 uppercase">
-            {ticket.category}
-          </span>
-          <span className={`px-3 py-1 rounded-full text-xs font-medium border ${
-            ticket.status === 'Résolu' ? 'bg-emerald-50 text-emerald-700 border-emerald-100' : 'bg-blue-50 text-blue-700 border-blue-100'
-          }`}>
-            {ticket.status}
-          </span>
-        </div>
-      </div>
-
-      {/* En-tête du ticket & Description initiale */}
-      <div className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm space-y-4">
-        <h1 className="text-xl font-bold text-slate-900">{ticket.subject}</h1>
-        <div className="bg-slate-50 p-4 rounded-lg border border-slate-100 text-sm text-slate-700 whitespace-pre-wrap">
-          <p className="text-xs font-semibold text-slate-400 mb-1">Description initiale :</p>
-          {ticket.description}
-        </div>
-        <p className="text-xs text-slate-400">
-          Créé le {new Date(ticket.created).toLocaleString('fr-FR')}
-        </p>
-      </div>
-
-      {/* Fil de discussion / Messages */}
-      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col h-[500px]">
-        <div className="p-4 border-b border-slate-100 bg-slate-50/50">
-          <h2 className="text-sm font-semibold text-slate-800">Échanges avec l'équipe GISE</h2>
-        </div>
-
-        {/* Liste des messages */}
-        <div className="flex-1 overflow-y-auto p-6 space-y-4">
-          {messages.length === 0 ? (
-            <div className="text-center py-12 text-sm text-slate-400 italic">
-              Aucun message pour l'instant. Démarrez la conversation ci-dessous.
-            </div>
-          ) : (
-            messages.map((msg) => {
-              const isMyMessage = msg.expand?.author?.id === currentUser?.id;
-              const authorName = msg.expand?.author?.name || msg.expand?.author?.email || 'Expert GISE';
-
-              return (
-                <div key={msg.id} className={`flex flex-col ${isMyMessage ? 'items-end' : 'items-start'}`}>
-                  <div className="flex items-center space-x-2 mb-1">
-                    <span className="text-xs font-medium text-slate-600">{authorName}</span>
-                    <span className="text-[10px] text-slate-400">
-                      {new Date(msg.created).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                    </span>
-                  </div>
-                  <div className={`max-w-[80%] rounded-2xl px-4 py-3 text-sm shadow-sm ${
-                    isMyMessage 
-                      ? 'bg-blue-900 text-white rounded-br-none' 
-                      : 'bg-slate-100 text-slate-800 rounded-bl-none border border-slate-200/60'
-                  }`}>
-                    {msg.content}
-                  </div>
-                </div>
-              );
-            })
-          )}
-        </div>
-
-        {/* Formulaire de réponse */}
-        <form onSubmit={handleSendMessage} className="p-4 border-t border-slate-100 bg-white flex items-center space-x-3">
-          <input
-            type="text"
-            value={newMessage}
-            onChange={(e) => setNewMessage(e.target.value)}
-            placeholder="Écrivez votre message ou complément d'information..."
-            className="flex-1 rounded-lg border border-slate-300 px-4 py-2.5 text-sm focus:border-blue-900 focus:outline-none focus:ring-1 focus:ring-blue-900"
-          />
-          <button
-            type="submit"
-            disabled={isSending || !newMessage.trim()}
-            className="bg-blue-900 hover:bg-blue-800 text-white px-5 py-2.5 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 shadow-sm"
-          >
-            {isSending ? 'Envoi...' : 'Envoyer'}
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-}

src/pages/TrustCenter.tsx

@@ -0,0 +1,52 @@
+import { useNavigate } from 'react-router-dom';
+import UptimeWidget from '@/components/widgets/UptimeWidget';
+import BackupWidget from '@/components/widgets/BackupWidget';
+import SecurityWidget from '@/components/widgets/SecurityWidget';
+import ServicesWidget from '@/components/widgets/ServicesWidget';
+import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
+import { PageHeader } from '@/components/ui/PageHeader';
+
+export default function TrustCenter() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
+        
+        {/* HEADER EXTRAIT */}
+        <PageHeader
+          title="Tableau de bord de l'infrastructure"
+          description="Espace sécurisé AEGIS • Synchronisation en temps réel"
+        >
+          {/* L'indicateur de connexion devient le "children" du header */}
+          <div className="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100">
+            <span className="flex h-2.5 w-2.5 relative">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
+            </span>
+            <span className="text-xs font-semibold uppercase tracking-wide text-slate-600">
+              Connexion chiffrée
+            </span>
+          </div>
+        </PageHeader>
+
+        {/* GRILLE DES WIDGETS */}
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+          <div className="lg:col-span-3 space-y-6">
+            <UptimeWidget />
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <BackupWidget onClick={() => navigate('/backups')} />
+              <SecurityWidget onClick={() => navigate('/analytics')} />
+            </div>
+          </div>
+
+          <div className="space-y-6 lg:col-span-2">
+            <ServicesWidget />
+            <SupportCtaWidget />
+          </div>
+        </div>
+        
+      </main>
+    </div>
+  );
+}

src/pages/TrustCenter/TrustCenter.tsx

@@ -1,194 +0,0 @@
-import { useState } from 'react';
-import UptimeWidget from '../../components/widgets/UptimeWidget';
-import BackupWidget from '../../components/widgets/BackupWidget';
-import SecurityWidget from '../../components/widgets/SecurityWidget';
-import ServicesWidget from '../../components/widgets/ServicesWidget';
-
-interface TrustCenterProps {
-  onNavigate?: (view: 'dashboard' | 'support' | 'vault' | 'account') => void;
-}
-
-export default function TrustCenter({ onNavigate }: TrustCenterProps) {
-  const [activeModal, setActiveModal] = useState<'none' | 'evolution' | 'analytics' | 'backups'>('none');
-  //const [selectedService, setSelectedService] = useState<string>('');
-  const [evolutionChoice, setEvolutionChoice] = useState<string>('');
-
-  const closeModal = () => setActiveModal('none');
-
-  return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 relative">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex justify-between items-center">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Tableau de bord de l'infrastructure</h1>
-            <p className="text-sm text-slate-500 mt-1">Espace sécurisé AEGIS • Synchronisation en temps réel</p>
-          </div>
-          <div className="flex items-center space-x-3">
-            <span className="flex h-3 w-3 relative">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
-            </span>
-            <span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
-          </div>
-        </div>
-      </header>
-
-      {/* Main Grid */}
-      <main className="max-w-7xl mx-auto px-8 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <div className="lg:col-span-2 space-y-6">
-            <UptimeWidget />
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <BackupWidget onClick={() => setActiveModal('backups')} />
-              <SecurityWidget />
-            </div>
-          </div>
-
-          <div className="space-y-6">
-            <ServicesWidget />
-            
-            {/* CTA Support ITSM Actif */}
-            <div className="bg-blue-900 rounded-xl shadow-sm border border-blue-800 p-6 text-white">
-              <h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
-              <p className="text-blue-200 text-sm mb-4 leading-relaxed">
-                Déclarez un incident critique ou demandez une évolution de votre infrastructure.
-              </p>
-              <button 
-                onClick={() => onNavigate && onNavigate('support')}
-                className="w-full bg-white text-blue-900 hover:bg-slate-50 font-medium py-2.5 px-4 rounded-lg transition-colors shadow-sm"
-              >
-                Ouvrir un ticket sécurisé
-              </button>
-            </div>
-          </div>
-        </div>
-      </main>
-
-      {/* --- OVERLAY MODALES --- */}
-      {activeModal !== 'none' && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
-          
-          {/* MODALE 1 : ÉVOLUTION STRATÉGIQUE */}
-          {activeModal === 'evolution' && (
-            <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
-              <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
-                <h3 className="text-lg font-bold text-slate-900">Demande d'évolution d'infrastructure</h3>
-                <button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
-              </div>
-              <div className="p-6">
-                <h4 className="text-base font-semibold text-slate-900 mb-4">Quel est votre prochain objectif d'infrastructure ?</h4>
-                <div className="space-y-3">
-                  {[
-                    { id: 'sec', title: 'Renforcer la sécurité face aux cybermenaces', desc: 'Audits de vulnérabilité, Plan de Reprise d\'Activité (PRA)' },
-                    { id: 'net', title: 'Étendre les capacités du réseau actuel', desc: 'Migration Cloud Privé, ouverture de nouveaux sites' },
-                    { id: 'gov', title: 'Mise en conformité légale & Gouvernance', desc: 'Accompagnement RGPD, Directive NIS2, vCISO' },
-                    { id: 'oth', title: 'Autre demande stratégique', desc: 'Outils souverains, audit spécifique' }
-                  ].map((option) => (
-                    <div 
-                      key={option.id}
-                      onClick={() => setEvolutionChoice(option.id)}
-                      className={`p-4 rounded-xl border-2 cursor-pointer transition-all ${evolutionChoice === option.id ? 'border-blue-900 bg-blue-50' : 'border-slate-200 hover:border-blue-300'}`}
-                    >
-                      <p className="font-semibold text-slate-900">{option.title}</p>
-                      <p className="text-sm text-slate-500 mt-1">{option.desc}</p>
-                    </div>
-                  ))}
-                </div>
-                <div className="mt-8 flex justify-end space-x-3">
-                  <button onClick={closeModal} className="px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded-lg">Annuler</button>
-                  <button onClick={() => { alert('Redirection vers un ticket projet avec le choix stratégique.'); closeModal(); }} className="px-6 py-2 text-sm font-medium text-white bg-blue-900 hover:bg-blue-800 rounded-lg shadow-sm">Valider la demande stratégique</button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* MODALE 2 : ANALYTICS SERVICES */}
-          {activeModal === 'analytics' && (
-            <div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
-               <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
-                <div>
-                  <h3 className="text-lg font-bold text-slate-900">Télémétrie & Analytics</h3>
-                  <p className="text-sm text-slate-500">{'selectedService'}</p>
-                </div>
-                <button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
-              </div>
-              <div className="p-6">
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-                  <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
-                    <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
-                    <p className="text-2xl font-bold text-emerald-600">100%</p>
-                  </div>
-                  <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
-                    <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
-                    <p className="text-2xl font-bold text-slate-900">14%</p>
-                  </div>
-                  <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
-                    <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
-                    <p className="text-2xl font-bold text-slate-900">1.2 TB</p>
-                  </div>
-                  <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
-                    <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
-                    <p className="text-2xl font-bold text-blue-900">3,492</p>
-                  </div>
-                </div>
-                {/* Représentation visuelle d'un graphe */}
-                <h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
-                <div className="h-32 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
-                  {[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
-                    <div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* MODALE 3 : HISTORIQUE DES SAUVEGARDES */}
-          {activeModal === 'backups' && (
-            <div className="bg-white rounded-2xl shadow-xl w-full max-w-3xl overflow-hidden animate-in fade-in zoom-in-95 duration-200">
-               <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
-                <h3 className="text-lg font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
-                <button onClick={closeModal} className="text-slate-400 hover:text-slate-900"><svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" /></svg></button>
-              </div>
-              <div className="p-0 overflow-x-auto">
-                <table className="min-w-full divide-y divide-slate-200">
-                  <thead className="bg-slate-50">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date d'exécution</th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Cible (Nœud)</th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
-                      <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Volume</th>
-                      <th className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase">Statut</th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-slate-100">
-                    {[
-                      { date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
-                      { date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
-                      { date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
-                      { date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
-                    ].map((bkp, i) => (
-                      <tr key={i} className="hover:bg-slate-50">
-                        <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
-                        <td className="px-6 py-4 whitespace-nowrap text-right">
-                           <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-100">
-                            Succès (Chiffré)
-                          </span>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-
-        </div>
-      )}
-    </div>
-  );
-}

src/pages/Vault/DocumentVault.tsx

@@ -1,119 +0,0 @@
-import { useState } from 'react';
-
-// Données fictives pour le maquettage visuel
-const mockDocuments = [
-  { id: 'DOC-102', title: 'Rapport d\'Audit de Vulnérabilité Q2', category: 'Audit', date: '12 Juil. 2026', size: '2.4 MB', encrypted: true },
-  { id: 'DOC-101', title: 'Facture Infogérance - Juin 2026', category: 'Facture', date: '01 Juil. 2026', size: '1.1 MB', encrypted: true },
-  { id: 'DOC-095', title: 'Certificat de Conformité ISO 27001', category: 'Rapport de conformité', date: '15 Jan. 2026', size: '4.8 MB', encrypted: true }
-];
-
-export default function DocumentVault() {
-  const [searchTerm, setSearchTerm] = useState('');
-
-  const getCategoryBadge = (category: string) => {
-    switch (category) {
-      case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
-      case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
-      case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
-      default: return 'bg-blue-50 text-blue-700 border-blue-200';
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
-      
-      {/* Header du Coffre-Fort */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Coffre-Fort Documentaire</h1>
-            <p className="text-sm text-slate-500 mt-1 flex items-center">
-              <svg className="w-4 h-4 mr-1.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
-              Espace de stockage chiffré de bout en bout
-            </p>
-          </div>
-        </div>
-      </header>
-
-      {/* Contenu Principal */}
-      <main className="max-w-7xl mx-auto px-8 py-8">
-        
-        {/* Barre de recherche (Visuelle) */}
-        <div className="mb-6 flex">
-          <div className="relative flex-1 max-w-lg">
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <svg className="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            <input
-              type="text"
-              placeholder="Rechercher un document, une facture..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 sm:text-sm shadow-sm"
-            />
-          </div>
-        </div>
-
-        {/* Liste des Documents (La Carte) */}
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-          <table className="min-w-full divide-y divide-slate-200">
-            <thead className="bg-slate-50">
-              <tr>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Nom du fichier
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Catégorie
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Ajouté le
-                </th>
-                <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Action
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-slate-200">
-              {mockDocuments.map((doc) => (
-                <tr key={doc.id} className="hover:bg-slate-50 transition-colors">
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center">
-                      <svg className="flex-shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                      </svg>
-                      <div>
-                        <div className="text-sm font-medium text-slate-900">{doc.title}</div>
-                        <div className="text-xs text-slate-500">{doc.size} • PDF</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
-                      {doc.category}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                    {doc.date}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <button className="text-blue-900 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded flex items-center justify-end ml-auto transition-colors">
-                      <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                      </svg>
-                      Télécharger
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
-      </main>
-    </div>
-  );
-}

src/pages/servicedesk/NewTicket.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+import { NewTicketWidget } from '@/components/widgets/NewTicketWidget';
+import { BackButton } from '@/components/ui/BackButton'; // Importation de notre nouvel Atome
+
+export default function NewTicket() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
+
+      {/* BOUTON DE RETOUR EXTRAIT */}
+      <BackButton to="/support" label="Annuler et retourner au Service Desk" />
+
+      {/* WIDGET DU FORMULAIRE */}
+      <NewTicketWidget
+        onCancel={() => navigate('/support')}
+        onSuccess={(ticketId) => navigate(`/support/tickets/${ticketId}`)}
+      />
+    </div>
+  );
+}

src/pages/servicedesk/TicketDetail.tsx

@@ -0,0 +1,55 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useTicketDetail } from '@/hooks/useTicketDetail';
+
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import { Loader } from '@/components/ui/Loader';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { BackButton } from '@/components/ui/BackButton'; // Importation
+
+import { TicketInfoWidget } from '@/components/widgets/TicketInfoWidget';
+import { TicketChatWidget } from '@/components/widgets/TicketChatWidget';
+
+export default function TicketDetail() {
+  const { ticketId } = useParams<{ ticketId: string }>();
+  const navigate = useNavigate();
+
+  const { 
+    ticket, messages, isLoading, error, isSending, 
+    sendMessage, currentUser 
+  } = useTicketDetail(ticketId);
+
+  if (isLoading) return <div className="py-20"><Loader /></div>;
+  
+  if (error || !ticket) {
+    return (
+      <div className="max-w-4xl mx-auto py-12 px-4">
+        <Card className="text-center py-12">
+          <EmptyState message={error || "Ticket introuvable."} className="text-red-500 mb-6 not-italic font-medium" />
+          <Button onClick={() => navigate('/support')} variant="outline">
+            Retour au Centre de Support
+          </Button>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
+      
+      {/* BOUTON DE RETOUR EXTRAIT */}
+      <BackButton to="/support" label="Retour au Centre de Support" />
+
+      {/* WIDGETS */}
+      <TicketInfoWidget ticket={ticket} />
+
+      <TicketChatWidget 
+        messages={messages}
+        currentUserId={currentUser?.id}
+        isSending={isSending}
+        onSendMessage={sendMessage}
+      />
+
+    </div>
+  );
+}

src/pages/trustcenter/Analytics.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';
+
+export const Analytics: React.FC = () => {
+
+  return (
+    <div className="max-w-5xl mx-auto py-8 px-8">
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
+
+      <Card>
+        <CardHeader className="bg-slate-50">
+          <h3 className="text-xl font-bold text-slate-900">Télémétrie & Analytics</h3>
+          <p className="text-sm text-slate-500">Données réseau en temps réel</p>
+        </CardHeader>
+        
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
+              <p className="text-2xl font-bold text-emerald-600">100%</p>
+            </div>
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
+              <p className="text-2xl font-bold text-slate-900">14%</p>
+            </div>
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
+              <p className="text-2xl font-bold text-slate-900">1.2 TB</p>
+            </div>
+            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
+              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
+              <p className="text-2xl font-bold text-blue-900">3,492</p>
+            </div>
+          </div>
+          
+          {/* Représentation visuelle du graphe */}
+          <h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
+          <div className="h-48 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
+            {[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
+              <div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Analytics;

src/pages/trustcenter/Backups.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';
+
+// On pourrait extraire ces données dans un Custom Hook plus tard
+const BACKUP_HISTORY = [
+  { date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
+  { date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
+  { date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
+  { date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
+];
+
+export const Backups: React.FC = () => {
+
+  return (
+    <div className="max-w-5xl mx-auto py-8 px-8">
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />
+
+      <Card>
+        <CardHeader className="bg-slate-50">
+          <h3 className="text-xl font-bold text-slate-900">Historique des Sauvegardes PRA</h3>
+          <p className="text-sm text-slate-500">Journal d'exécution de la règle 3-2-1-1-0</p>
+        </CardHeader>
+        
+        {/* On retire le padding sur le content pour que le tableau touche les bords */}
+        <CardContent className="p-0 overflow-x-auto">
+          <table className="min-w-full divide-y divide-slate-200">
+            <thead className="bg-white">
+              <tr>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date d'exécution</th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Cible (Nœud)</th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
+                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Volume</th>
+                <th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-slate-100">
+              {BACKUP_HISTORY.map((bkp, i) => (
+                <tr key={i} className="hover:bg-slate-50 transition-colors">
+                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right">
+                     <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200/60">
+                      Succès (Chiffré)
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default Backups;

src/pages/trustcenter/InfrastructureEvolution.tsx

@@ -0,0 +1,124 @@
+// Fichier : src/pages/InfrastructureEvolution.tsx
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
+
+import { BackButton } from '@/components/ui/BackButton';
+import { EmptyState } from '@/components/ui/EmptyState';
+import { Button } from '@/components/ui/Button';
+
+// Nos nouveaux composants
+import { EvolutionOptionCard } from '@/components/widgets/EvolutionOptionCard';
+import { EvolutionFilterBar } from '@/components/widgets/EvolutionFilterBar';
+
+import { EVOLUTION_OPTIONS, type EvolutionOption } from '@/data/evolutionOptions';
+import SupportFooterWidget from '@/components/widgets/SupportFooterWidget';
+
+export const InfrastructureEvolution: React.FC = () => {
+  const navigate = useNavigate();
+  const { submitRequest, isSubmitting, submitSuccess, error } = useEvolutionRequest();
+  
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);
+
+  // Redirection automatique
+  useEffect(() => {
+    if (submitSuccess) {
+      const timer = setTimeout(() => navigate('/dashboard'), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [submitSuccess, navigate]);
+
+  // Logique de filtrage
+  const filteredOptions = EVOLUTION_OPTIONS.filter((opt) => {
+    const matchesCategory = selectedCategory === 'all' || opt.category === selectedCategory;
+    const matchesSearch = opt.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+                          opt.description.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  const handleSelectOption = (option: EvolutionOption) => {
+    setSelectedOptionId(option.id);
+    submitRequest(option.subject, option.payloadDescription);
+  };
+
+  return (
+    <div className="max-w-5xl mx-auto py-8 px-4 sm:px-6">
+      
+      {/* EN-TÊTE DE LA PAGE */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <BackButton to="/dashboard" label="Retour au tableau de bord" />
+          <span className="text-xs font-mono font-bold tracking-widest text-slate-400 uppercase">
+            AEGIS • Catalogue Projets
+          </span>
+        </div>
+        <h1 className="text-3xl font-extrabold text-slate-900 tracking-tight">
+          Évolution & Extension de l'Infrastructure
+        </h1>
+        <p className="text-slate-600 mt-2 text-base">
+          Sélectionnez une initiative stratégique. Votre demande ouvrira immédiatement un ticket projet sécurisé auprès de votre référent technique GISE.
+        </p>
+      </div>
+
+      {/* ÉTAT DE SUCCÈS */}
+      {submitSuccess ? (
+        <div className="bg-white rounded-xl border border-emerald-200 shadow-sm p-12 text-center max-w-xl mx-auto my-12 animate-in fade-in zoom-in-95 duration-200">
+          <div className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
+            <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+          <h2 className="text-2xl font-bold text-slate-900 mb-2">Demande d'évolution enregistrée</h2>
+          <p className="text-slate-600 text-sm mb-6 leading-relaxed">
+            Votre ticket projet a été chiffré et transmis à notre équipe d'ingénierie. Un expert GISE analyse vos prérequis et reprendra contact avec vous sous 24h ouvrées.
+          </p>
+          <p className="text-xs text-slate-400 font-mono">Redirection automatique vers le Trust Center...</p>
+        </div>
+      ) : (
+        <>
+          {/* BARRE DE RECHERCHE ET FILTRES */}
+          <EvolutionFilterBar 
+            selectedCategory={selectedCategory}
+            onSelectCategory={setSelectedCategory}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+          />
+
+          {/* AFFICHAGE DES ERREURS */}
+          {error && (
+            <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm font-medium">
+              {error}
+            </div>
+          )}
+
+          {/* GRILLE DES OPTIONS */}
+          {filteredOptions.length === 0 ? (
+            <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
+              <EmptyState message="Aucune initiative ne correspond à votre recherche." />
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+              {filteredOptions.map((option) => (
+                <EvolutionOptionCard
+                  key={option.id}
+                  option={option}
+                  isSubmitting={isSubmitting && selectedOptionId === option.id}
+                  isDisabled={isSubmitting} // On bloque toutes les cartes pendant un envoi
+                  onSelect={handleSelectOption}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* PIED DE PAGE D'ASSISTANCE */}
+          <SupportFooterWidget />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default InfrastructureEvolution;

src/services/pocketbase.ts

@@ -1,6 +1,6 @@
 import PocketBase from 'pocketbase';
 
-const PB_URL = 'https://pocket.bunker.lan';
+const PB_URL = import.meta.env.VITE_PB_URL;
 
 export const pb = new PocketBase(PB_URL);
 

src/styles/Neumorphism.ts

@@ -0,0 +1,33 @@
+// Styles neumorphiques réutilisables.
+
+export const NEUMORPHISM = {
+
+  // Reliefs au repos
+  lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
+  darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
+
+  lightShadowHover: "hover:shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
+  darkShadowHover: "dark:hover:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
+
+  // Ombres Neumorphic quand on clique (enfoncé)
+  lightActive: "active:shadow-[4px_4px_12px_#c5c5c5,-4px_-4px_12px_#ffffff]",
+  darkActive: "dark:active:shadow-[4px_4px_12px_#121926,-4px_-4px_12px_#2a3850]",
+
+
+  insetLightActive: "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDarkActive: "dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+  insetLightHover: "hover:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDarkHover: "dark:hover:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+  sizeStyles: {
+    sm: "px-5 py-2 text-sm rounded-md",
+    md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
+    lg: "px-10 py-4 text-xl rounded-xl",
+    icon: "p-3 rounded-lg",
+  },
+  // Ombres du bouton ACTIF (effet enfoncé/creusé "inset")
+  insetLight: "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDark: "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+} as const;

src/types/Document.ts

@@ -0,0 +1,11 @@
+export interface Document {
+    id: string;
+    collectionId: string; // <-- OBLIGATOIRE pour pb.files.getUrl()
+    collectionName: string; // (ex: 'aegis_documents_vault')
+    created: string;
+    updated: string;
+    title: string;
+    file: string; // Le nom du fichier généré par PocketBase (ex: 'rapport_7b3a.pdf')
+    category: string;
+    company?: string; // L'ID du client (Relation)
+}

src/types/InfrastructureNode.ts

@@ -0,0 +1,9 @@
+import type { NodeStatus } from '@/types/Status';
+
+export interface InfrastructureNode {
+  id: string;
+  label: string;
+  type: string;
+  status: NodeStatus;
+  uptime_sla: string;
+}

src/types/ManagedContract.ts

@@ -0,0 +1,8 @@
+import type { ContractStatus } from '@/types/Status';
+
+export interface ManagedContract {
+  id: string;
+  service_name: string;
+  description?: string;
+  status: ContractStatus;
+}

src/types/Message.ts

@@ -0,0 +1,13 @@
+export interface TicketMessage {
+  id: string;
+  content: string;
+  created: string;
+  expand?: {
+    author?: {
+      id?: string;
+      name?: string;
+      email?: string;
+      avatar?: string;
+    };
+  };
+}

src/types/Status.ts

@@ -0,0 +1,11 @@
+// Statuts relatifs aux équipements d'infrastructure
+export type NodeStatus = 'Opérationnel' | 'Dégradé' | 'Hors Ligne';
+
+// Statuts relatifs aux contrats d'infogérance
+export type ContractStatus = 'Actif' | 'En Déploiement' | 'Annulé';
+
+// Status relatifs aux tickets du service desk
+export type TicketStatus = 'Ouvert' | 'En Analyse' | 'Résolu';
+
+// Type unifié regroupant tous les statuts possibles sur la plateforme AEGIS
+export type AegisStatus = NodeStatus | ContractStatus | TicketStatus;

src/types/Ticket.ts

@@ -0,0 +1,10 @@
+import type { TicketStatus } from '@/types/Status';
+
+export interface Ticket {
+  id: string;
+  subject: string;
+  description: string;
+  category: string;
+  status: TicketStatus;
+  created: string;
+}

src/utils/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

tsconfig.app.json

@@ -8,6 +8,23 @@
     "allowArbitraryExtensions": true,
     "skipLibCheck": true,
 
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@ui/*": ["./src/components/ui/*"],
+      "@common/*": ["./src/components/common/*"],
+      "@pages/*": ["./src/pages/*"],
+      "@hooks/*": ["./src/hooks/*"],
+      "@layouts/*": ["./src/layouts/*"],
+      "@features/*": ["./src/features/*"],
+      "@services/*": ["./src/services/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@assets/*": ["./src/assets/*"],
+      "@types/*": ["./src/types/*"],
+      "@widgets/*": ["./src/components/widgets/*"],
+      "@styles/*": ["./src/styles/*"],
+    },
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,

vite.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -8,4 +9,22 @@ export default defineConfig({
     react(),
     tailwindcss()
   ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@ui': path.resolve(__dirname, './src/components/ui'),
+      '@common': path.resolve(__dirname, './src/components/common'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@layouts': path.resolve(__dirname, './src/layouts'),
+      '@features': path.resolve(__dirname, './src/features'),
+      '@services': path.resolve(__dirname, './src/services'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@data': path.resolve(__dirname, './src/data'),
+      '@widgets': path.resolve(__dirname, './src/components/widgets'),
+      '@styles': path.resolve(__dirname, './src/styles'),
+    }
+  }
 })