change and add into components, widgets and pages

2026-07-30 14:08:49 +02:00
parent ec900efe3a
commit 057aa628a3
39 changed files with 1620 additions and 1062 deletions
@@ -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;