2026-07-30 14:10:23 +02:00
39 changed files with 1620 additions and 1062 deletions
@@ -9,9 +9,11 @@ import TrustCenter from '@/pages/TrustCenter';
 import ServiceDesk from '@/pages/ServiceDesk';
 import DocumentVault from '@/pages/DocumentVault';
 import AccountSettings from '@/pages/AccountSettings';
-import { InfrastructureEvolution } from '@/pages/InfrastructureEvolution';
-import Analytics from '@/pages/Analytics';
-import Backups from '@/pages/Backups';
+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() {
  const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
@@ -59,6 +61,8 @@ function App() {
        <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 />} />
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+
+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)}
+            className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm" 
+          />
+        </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)}
+            className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm" 
+          />
+        </div>
+      </div>
+
+      <Button type="submit" isLoading={isLoading} className="w-full">
+        Authentification classique
+      </Button>
+    </form>
+  );
+};
@@ -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>
+  );
+};
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, type ButtonProps } from '@/components/ui/Button';
+
+export interface BackButtonProps extends Omit<ButtonProps, 'onClick'> {
+  /** Route explicite vers laquelle naviguer (ex: "/support"). Si non spécifié, fait un retour arrière navigateur (-1) */
+  to?: string;
+  /** Texte à afficher à côté de la flèche */
+  label?: string;
+  /** Callback optionnel si vous souhaitez intercepter le clic */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const BackButton: React.FC<BackButtonProps> = ({
+  to,
+  label = "Retour",
+  onClick,
+  variant = "ghost",
+  size = "sm",
+  children,
+  className,
+  ...props
+}) => {
+  const navigate = useNavigate();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e);
+    } else if (to) {
+      navigate(to);
+    } else {
+      navigate(-1); // Comportement natif "Précédent" dans l'historique
+    }
+  };
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={handleClick}
+      leftIcon={
+        <svg 
+          className="w-4 h-4 transition-transform group-hover:-translate-x-0.5" 
+          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={className}
+      {...props}
+    >
+      {children || label}
+    </Button>
+  );
+};
+
+export default BackButton;
@@ -1,37 +1,90 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '@/utils/utils';

-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+// 1. Dictionnaire des variantes (Sémantique de couleurs GISE)
+const variantStyles = {
+  primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm border border-transparent",
+  secondary: "bg-slate-900 text-white hover:bg-slate-800 focus:ring-slate-900 shadow-sm border border-transparent",
+  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 shadow-sm border border-transparent",
+  success: "bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-600 shadow-sm border border-transparent",
+  outline: "bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-900",
+  ghost: "bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-900 border border-transparent",
+};
+
+// 2. Dictionnaire des tailles
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2.5 text-sm",
+  lg: "px-6 py-3 text-base w-full sm:w-auto", // w-full sur mobile par défaut, auto sur desktop
+  icon: "p-2", // Format carré optimisé pour les boutons sans texte
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles;
+  size?: keyof typeof sizeStyles;
  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
 }

-export const Button: React.FC<ButtonProps> = ({
-  children, variant = 'primary', size = 'md', isLoading, className, disabled, ...props
-}) => {
-  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
-  
-  const variants = {
-    primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm",
-    outline: "border border-slate-200 text-slate-900 hover:border-blue-900 hover:bg-blue-50 focus:ring-blue-900",
-    ghost: "text-slate-600 hover:text-slate-900 hover:bg-slate-100 focus:ring-slate-500",
-  };
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { 
+      className, 
+      variant = 'primary', 
+      size = 'md', 
+      isLoading = false, 
+      leftIcon, 
+      rightIcon, 
+      children, 
+      disabled, 
+      type = "button",
+      ...props 
+    }, 
+    ref
+  ) => {
+    const newLocal = "ml-2 flex-shrink-0";
+    return (
+      <button
+        ref={ref} // Indispensable pour l'accessibilité ou des librairies externes
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(
+          // Styles de base structurels
+          "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200",
+          "focus:outline-none active:scale-[0.98]",
+          "disabled:opacity-60 disabled:pointer-events-none disabled:active:scale-100",
+          // Application dynamique des dictionnaires
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {/* Spinner SVG optimisé pour le chargement */}
+        {isLoading && (
+          <svg 
+            className="animate-spin -ml-1 mr-2 h-4 w-4 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>

-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "w-full py-3 text-base",
-  };
+        {/* Icône de droite */}
+        {rightIcon && <span className={newLocal}>{rightIcon}</span>}
+      </button>
+    );
+  }
+);

-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={cn(baseStyles, variants[variant], sizes[size], (disabled || isLoading) && "opacity-50 cursor-not-allowed", className)}
-      {...props}
-    >
-      {isLoading && <span className="mr-2 w-4 h-4 rounded-full border-2 border-current border-b-transparent animate-spin" />}
-      {children}
-    </button>
-  );
-};
+Button.displayName = "Button";
@@ -0,0 +1,75 @@
+import React, { forwardRef, useId } from 'react';
+import { cn } from '@/utils/utils';
+
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2.5 text-sm",
+};
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  sizeVariant?: keyof typeof sizeStyles; // Gestion de la taille
+  leftIcon?: React.ReactNode;          // Icône optionnelle intégrée à gauche
+  rightIcon?: React.ReactNode;         // Icône optionnelle intégrée à droite
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ 
+    className, 
+    label, 
+    error, 
+    id, 
+    sizeVariant = 'md', 
+    leftIcon, 
+    rightIcon, 
+    ...props 
+  }, ref) => {
+    const autoId = useId();
+    const inputId = id || autoId;
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-slate-700 mb-1.5">
+            {label} {props.required && <span className="text-blue-900 font-bold">*</span>}
+          </label>
+        )}
+        
+        <div className="relative flex items-center w-full">
+          {/* Icône à gauche */}
+          {leftIcon && (
+            <span className="absolute left-3 text-slate-400 pointer-events-none flex items-center">
+              {leftIcon}
+            </span>
+          )}
+
+          <input
+            id={inputId}
+            ref={ref}
+            className={cn(
+              "flex w-full rounded-lg border border-slate-300 bg-white text-slate-900 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",
+              sizeStyles[sizeVariant],
+              leftIcon && "pl-9",  // Décale le texte à droite si icône gauche
+              rightIcon && "pr-9", // Décale le texte à gauche si icône droite
+              error && "border-red-500 focus:ring-red-500 focus:border-red-500",
+              className
+            )}
+            {...props}
+          />
+
+          {/* Icône à droite */}
+          {rightIcon && (
+            <span className="absolute right-3 text-slate-400 pointer-events-none flex items-center">
+              {rightIcon}
+            </span>
+          )}
+        </div>
+
+        {error && <p className="mt-1.5 text-xs font-medium text-red-500">{error}</p>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
@@ -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>
+  );
+};
@@ -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 className="border-slate-200 shadow-sm">
+      <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;
@@ -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";
@@ -20,26 +20,29 @@ const STATUS_CONFIG: Record<AegisStatus, { bg: string; dot: string }> = {
    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': {
+  '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',
  },
-  'Suspendu': {
+  '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 }) => {
@@ -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";
@@ -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-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>
+        <StatusBadge status={ticket.status} />
+      </div>
+    </div>
+  );
+};
@@ -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"
+            sizeVariant="sm" // 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;
@@ -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-200 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>
+  );
+};
@@ -0,0 +1,162 @@
+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';
+import { cn } from '@/utils/utils';
+
+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 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 className="bg-slate-50 border-b border-slate-100">
+        <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)}
+                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}
+              className={cn(
+                category === 'Incident Critique'
+                  ? "bg-red-600 hover:bg-red-700 focus:ring-red-600"
+                  : ""
+              )}
+            >
+              Soumettre le ticket
+            </Button>
+          </div>
+
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default NewTicketWidget;
@@ -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;
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import type { TicketMessage } from '@/types/Message';
+import { Card } 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="flex flex-col h-[500px] overflow-hidden shadow-sm">
+      <div className="p-4 border-b border-slate-100 bg-slate-50">
+        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés avec l'ingénierie</h2>
+      </div>
+
+      {/* Zone des messages */}
+      <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide bg-white">
+        {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} />
+          ))
+        )}
+      </div>
+
+      {/* Zone de saisie avec notre composant UI */}
+      <form onSubmit={handleSubmit} className="p-4 border-t border-slate-100 bg-slate-50 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>
+  );
+};
@@ -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 className="bg-slate-50 border-b border-slate-100 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+        <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" />
+      </CardHeader>
+      
+      <CardContent className="p-6 bg-white">
+        <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>
+  );
+};
@@ -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>
+      <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;
@@ -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 };
+};
@@ -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 };
+};
@@ -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 };
+};
@@ -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 };
+};
@@ -2,4 +2,18 @@

@tailwind base;
@tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* --- 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;
+  }
+}
@@ -13,7 +13,7 @@ export default function DashboardLayout({ children, onLogout }: DashboardLayoutP
      <Sidebar onLogout={onLogout} />

      {/* CONTENU PRINCIPAL */}
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto scrollbar-hide">
        <div className="p-8">
          {children}
        </div>
@@ -1,215 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
-import { Button } from '@/components/ui/Button';
-import { EmptyState } from '@/components/ui/EmptyState';
-import { cn } from '@/utils/utils';
-import { 
-  EVOLUTION_OPTIONS, 
-  EVOLUTION_CATEGORIES, 
-  type EvolutionOption 
-} from '@/data/evolutionOptions';
-
-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 vers le Dashboard après confirmation de la demande
-  useEffect(() => {
-    if (submitSuccess) {
-      const timer = setTimeout(() => {
-        navigate('/dashboard');
-      }, 3000);
-      return () => clearTimeout(timer);
-    }
-  }, [submitSuccess, navigate]);
-
-  // Filtrage combiné par onglet et recherche textuelle
-  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">
-          <button 
-            onClick={() => navigate('/dashboard')}
-            className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1"
-          >
-            ← Retour au tableau de bord
-          </button>
-          <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 CONFIRMATION AVEC 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 ONGLETS DE FILTRAGE */}
-          <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-1 overflow-x-auto pb-2 sm:pb-0 scrollbar-none">
-                {EVOLUTION_CATEGORIES.map((cat) => (
-                  <button
-                    key={cat.id}
-                    onClick={() => setSelectedCategory(cat.id)}
-                    className={cn(
-                      "px-3.5 py-2 text-xs font-semibold rounded-lg whitespace-nowrap transition-all duration-150",
-                      selectedCategory === cat.id
-                        ? "bg-slate-900 text-white shadow-sm"
-                        : "bg-white text-slate-600 hover:bg-slate-100 border border-slate-200"
-                    )}
-                  >
-                    {cat.label}
-                  </button>
-                ))}
-              </div>
-
-              {/* Champ de recherche */}
-              <div className="relative min-w-60">
-                <input
-                  type="text"
-                  placeholder="Rechercher une initiative..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-9 pr-4 py-2 text-xs bg-white border border-slate-200 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-900 focus:border-transparent"
-                />
-                <svg className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" 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>
-
-          {/* AFFICHAGE DES ERREURS D'ENVOI */}
-          {error && (
-            <div className="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl text-sm flex items-center justify-between">
-              <span>{error}</span>
-            </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) => {
-                const isThisSubmitting = isSubmitting && selectedOptionId === option.id;
-
-                return (
-                  <div
-                    key={option.id}
-                    className={cn(
-                      "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
-                      isThisSubmitting ? "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={isThisSubmitting}
-                        disabled={isSubmitting}
-                        onClick={() => handleSelectOption(option)}
-                        className="w-full sm:w-auto text-xs"
-                      >
-                        Engager cette initiative →
-                      </Button>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          )}
-
-          {/* PIED DE PAGE D'ASSISTANCE */}
-          <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">
-            <div>
-              <h4 className="text-sm font-bold text-white">Besoin d'un cadrage sur-mesure ?</h4>
-              <p className="text-xs text-slate-400 mt-0.5">
-                Nos ingénieurs restent joignables par téléphone pour les demandes urgentes ou complexes.
-              </p>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => navigate('/support')}
-              className="border-slate-700 text-slate-200 hover:bg-slate-800 hover:border-slate-600 text-xs whitespace-nowrap"
-            >
-              Consulter le Service Desk
-            </Button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default InfrastructureEvolution;
@@ -1,139 +1,22 @@
-import React, { useState } from 'react';
-import { pb } from '@services/pocketbase';
-import * as OTPAuth from 'otpauth';
-import { QRCodeSVG } from 'qrcode.react';
+import { useLoginFlow } from '@/hooks/useLoginFlow';
+import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
+import { MfaForm } from '@/components/auth/MfaForm';
+import { Card, CardContent } from '@/components/ui/Card';

 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);
-  };
+  const { 
+    step, isLoading, error, mfaConfig, 
+    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa 
+  } = useLoginFlow(onLoginSuccess);

  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">
      
+      {/* HEADER LOGO */}
      <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">
@@ -150,112 +33,58 @@ export default function Login({ onLoginSuccess }: LoginProps) {
        </p>
      </div>

+      {/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
      <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>
-              )}
+        <Card className="shadow-sm border-slate-200">
+          <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>
+            )}

-              {/* BOUTON SSO ZITADEL */}
-              <div>
+            {/* ROUTAGE INTERNE DES ÉTAPES */}
+            {step === 1 ? (
+              <div className="space-y-6">
                <button
                  type="button"
-                  onClick={handleZitadelLogin}
+                  onClick={loginWithZitadel}
                  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"
+                  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 cursor-pointer"
                >
                  <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 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>

-                <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>
+                <LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
+              </div>
+            ) : (
+              <MfaForm 
+                isFirstSetup={mfaConfig?.isFirstSetup || false}
+                qrUrl={mfaConfig?.qrUrl || ''}
+                isLoading={isLoading}
+                onVerify={verifyMfa}
+                onCancel={cancelMfa}
+              />
+            )}

-                <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 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>
+          </CardContent>
+        </Card>
      </div>
+
    </div>
  );
 }
@@ -1,216 +0,0 @@
-import React, { useState } from 'react';
-import { pb } from '@services/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>
-  );
-}
@@ -1,153 +1,30 @@
-import { useState, useEffect } from 'react';
-import { pb } from '@services/pocketbase';
-import NewTicket from './NewTicket';
-import TicketDetail from './TicketDetail';
-
-interface Ticket {
-  id: string;
-  subject: string;
-  category: string;
-  status: 'Ouvert' | 'En analyse' | 'Résolu';
-  created: string;
-}
+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 [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);
+  const navigate = useNavigate();

-  // 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"
+    <div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
+      <main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
+
+        {/* HEADER EXTRAIT */}
+        <PageHeader 
+          title="Centre de Support (Service Desk)"
+          description="Canal de communication sécurisé avec vos experts GISE."
        >
-          Ouvrir un ticket sécurisé
-        </button>
-          </div>
-        </div>
-      </header>
+          <Button onClick={() => navigate('/support/new')}>
+            Ouvrir un ticket sécurisé
+          </Button>
+        </PageHeader>

-      <main className="max-w-7xl mx-auto px-8 py-8">
+        {/* WIDGET DES TICKETS */}
+        <TicketsWidget 
+          onSelectTicket={(ticketId) => navigate(`/support/tickets/${ticketId}`)} 
+        />

-      {/* 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>
  );
@@ -1,201 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { pb } from '@services/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>
-  );
-}
@@ -4,36 +4,36 @@ 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="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
-      
-      {/* 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">
+      <main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
+        
+        {/* 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-3 w-3 bg-emerald-500"></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>
-            <span className="text-sm font-medium text-slate-700">Connexion chiffrée</span>
          </div>
-        </div>
-      </header>
+        </PageHeader>

-      {/* Main Grid */}
-      <main className="max-w-7xl mx-auto px-8 py-8">
+        {/* GRILLE DES WIDGETS */}
        <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={() => navigate('/backups')} />
              <SecurityWidget onClick={() => navigate('/analytics')} />
@@ -45,6 +45,7 @@ export default function TrustCenter() {
            <SupportCtaWidget />
          </div>
        </div>
+        
      </main>
    </div>
  );
@@ -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>
+  );
+}
@@ -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>
+  );
+}
@@ -1,18 +1,12 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import BackButton from '@/components/ui/BackButton';

 export const Analytics: React.FC = () => {
-  const navigate = useNavigate();

  return (
    <div className="max-w-5xl mx-auto py-8 px-8">
-      <button 
-        onClick={() => navigate('/dashboard')}
-        className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 mb-6"
-      >
-        ← Retour au tableau de bord
-      </button>
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />

      <Card>
        <CardHeader className="bg-slate-50">
@@ -1,6 +1,6 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 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 = [
@@ -11,16 +11,10 @@ const BACKUP_HISTORY = [
 ];

 export const Backups: React.FC = () => {
-  const navigate = useNavigate();

  return (
    <div className="max-w-5xl mx-auto py-8 px-8">
-      <button 
-        onClick={() => navigate('/dashboard')}
-        className="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors flex items-center gap-1 mb-6"
-      >
-        ← Retour au tableau de bord
-      </button>
+      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />

      <Card>
        <CardHeader className="bg-slate-50">
@@ -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;
@@ -0,0 +1,13 @@
+export interface TicketMessage {
+  id: string;
+  content: string;
+  created: string;
+  expand?: {
+    author?: {
+      id?: string;
+      name?: string;
+      email?: string;
+      avatar?: string;
+    };
+  };
+}
@@ -2,7 +2,10 @@
 export type NodeStatus = 'Opérationnel' | 'Dégradé' | 'Hors Ligne';

 // Statuts relatifs aux contrats d'infogérance
-export type ContractStatus = 'Actif' | 'En déploiement' | 'Suspendu';
+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;
+export type AegisStatus = NodeStatus | ContractStatus | TicketStatus;
@@ -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;
+}