fix: résolution des conflits avec dev

.env.example

@@ -0,0 +1 @@
+VITE_PB_URL=

.gitea/workflows/deploy-environments.yml

@@ -0,0 +1,93 @@
+name: Déploiement AEGIS Portal
+
+on:
+  push:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      GIT_SSL_NO_VERIFY: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+
+    steps:
+      - name: Patch DNS local pour Gitea Runner
+        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
+
+      - name: Configuration de Git pour SSL
+        run: git config --global http.sslVerify false
+
+      - name: Récupération du code
+        uses: actions/checkout@v4
+      
+      - name: Configuration de Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      
+      - name: Configuration de Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      
+      - name: Activation de pnpm
+        run: corepack enable pnpm
+      
+      - name: Installation des dépendances
+        run: pnpm install --frozen-lockfile
+      
+      - name: Compilation de la Build
+        env:
+          VITE_APP_ENV: ${{ github.ref_name }}
+          VITE_PB_URL: ${{ secrets.PB_URL }}
+        run: pnpm run build
+      
+      - name: Installation de lftp
+        run: sudo apt-get update && sudo apt-get install -y lftp
+      
+      - name: Routage et Déploiement FTP
+        env: # 1. On charge tous les secrets de manière sécurisée
+          SERVER: ${{ secrets.FTP_SERVER }}
+          DEV_U: ${{ secrets.DEV_FTP_USER }}
+          DEV_P: ${{ secrets.DEV_FTP_PASSWORD }}
+          TEST_U: ${{ secrets.TEST_FTP_USER }}
+          TEST_P: ${{ secrets.TEST_FTP_PASSWORD }}
+          ACC_U: ${{ secrets.ACC_FTP_USER }}
+          ACC_P: ${{ secrets.ACC_FTP_PASSWORD }}
+          PROD_U: ${{ secrets.PROD_FTP_USER }}
+          PROD_P: ${{ secrets.PROD_FTP_PASSWORD }}
+          BRANCH: ${{ github.ref_name }}
+        run: |
+          # 2. On attribue les bons identifiants selon la branche
+          if [ "$BRANCH" == "master" ]; then
+            TARGET_USER=$PROD_U; TARGET_PASS=$PROD_P;
+          elif [ "$BRANCH" == "acc" ]; then
+            TARGET_USER=$ACC_U; TARGET_PASS=$ACC_P;
+          elif [ "$BRANCH" == "test" ]; then
+            TARGET_USER=$TEST_U; TARGET_PASS=$TEST_P;
+          else
+            TARGET_USER=$DEV_U; TARGET_PASS=$DEV_P;
+          fi
+          
+          echo "Déploiement de la branche [$BRANCH]"
+          
+          # 3. Exécution du script FTP
+          cat << EOF > script.lftp
+          set ftp:passive-mode true
+          set ftp:ssl-allow no
+          set ssl:verify-certificate no
+          set net:timeout 5
+          set net:max-retries 2
+          set dns:fatal-timeout 2
+          open -u "${TARGET_USER}","${TARGET_PASS}" "${SERVER}"
+          cd home/${TARGET_USER}
+          mirror -R --delete --verbose dist/ ./
+          quit
+          EOF
+          
+          lftp -f script.lftp

.gitea/workflows/deploy.yml

@@ -1,61 +0,0 @@
-name: Deploy Aegis Portal
-
-on:
-  push:
-    branches:
-      - master # Branche principale confirmée
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    
-    # 1. On désactive la vérification SSL pour tout le conteneur du job (Node.js et Git)
-    env:
-      GIT_SSL_NO_VERIFY: "true"
-      NODE_TLS_REJECT_UNAUTHORIZED: "0"
-
-    steps:
-      - name: Patch DNS local pour Gitea Runner
-        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
-
-      # 2. On force l'exécutable Git interne à ignorer la vérification de l'autorité locale
-      - name: Configuration de Git pour SSL
-        run: git config --global http.sslVerify false
-
-      - name: Récupération du code
-        uses: actions/checkout@v4
-      
-      - name: Configuration de Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-      
-      - name: Installation des dépendances (React/Vite)
-        run: npm ci
-      
-      - name: Compilation de la Build (Aegis)
-        run: npm run build
-      
-      - name: Installation de lftp
-        run: sudo apt-get update && sudo apt-get install -y lftp
-      
-      - name: Déploiement FTP (10.10.40.12)
-        env:
-          FTP_USER: ${{ secrets.FTP_USER }}        # Le compte FTP enfermé dans aegis.gise.be
-          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
-          FTP_SERVER: ${{ secrets.FTP_SERVER }}    # Doit contenir : 10.10.40.12
-        run: |
-          cat << EOF > script.lftp
-          set ftp:passive-mode true
-          set ftp:ssl-allow no
-          set ssl:verify-certificate no
-          set net:timeout 5
-          set net:max-retries 2
-          set dns:fatal-timeout 2
-          open -u "${FTP_USER}","${FTP_PASSWORD}" "${FTP_SERVER}"
-          cd home/${FTP_USER}
-          mirror -R --delete --verbose dist/ ./
-          quit
-          EOF
-          
-          lftp -f script.lftp

.gitea/workflows/enforce-git-flow.yml

@@ -0,0 +1,40 @@
+name: Sécurité - Architecture Git-Flow
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  validate-flow:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Vérification du flux de promotion
+        run: |
+          TARGET_BRANCH="${{ github.base_ref }}"
+          SOURCE_BRANCH="${{ github.head_ref }}"
+          
+          echo "Tentative de promotion : $SOURCE_BRANCH ➔ $TARGET_BRANCH"
+          
+          # Règle 1 : Vers TEST (Doit venir de DEV)
+          if [ "$TARGET_BRANCH" == "test" ] && [ "$SOURCE_BRANCH" != "dev" ]; then
+            echo "ERREUR : L'environnement TEST ne peut recevoir que du code de DEV."
+            exit 1
+          fi
+          
+          # Règle 2 : Vers ACC (Doit venir de TEST)
+          if [ "$TARGET_BRANCH" == "acc" ] && [ "$SOURCE_BRANCH" != "test" ]; then
+            echo "ERREUR : L'environnement d'ACCEPTATION ne peut recevoir que du code de TEST."
+            exit 1
+          fi
+          
+          # Règle 3 : Vers PROD (Doit venir de ACC)
+          if [ "$TARGET_BRANCH" == "master" ] && [ "$SOURCE_BRANCH" != "acc" ]; then
+            echo "ERREUR : La PRODUCTION ne peut recevoir que du code validé en ACCEPTATION (acc)."
+            exit 1
+          fi
+          
+          echo "Flux réglementaire respecté ! Promotion autorisée."

.gitea/workflows/quality-checks.yml

@@ -0,0 +1,59 @@
+name: Contrôle Qualité & Sécurité (QA)
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  quality-gate:
+    name: qa-s-check
+    runs-on: ubuntu-latest
+    
+    env:
+      GIT_SSL_NO_VERIFY: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+
+    steps:
+      - name: Patch DNS local pour Gitea Runner
+        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
+
+      - name: Configuration de Git pour SSL
+        run: git config --global http.sslVerify false
+
+      - name: Récupération du code source
+        uses: actions/checkout@v4
+
+      - name: Configuration de Node.js (v22)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Activation de pnpm
+        run: corepack enable pnpm
+
+      - name: Installation des dépendances
+        run: pnpm install --frozen-lockfile
+
+      # Étape 1 : ESLint (Syntaxe et conventions)
+      - name: Analyse Linter (ESLint)
+        run: pnpm run lint
+
+      # Étape 2 : Verification stricte des types TypeScript (sans émettre de fichiers)
+      - name: Verification des Types TypeScript
+        run: pnpm exec tsc --noEmit
+
+      # Étape 3 : Exécution des tests unitaires
+      - name: Tests Unitaires (Vitest)
+        run: pnpm run test -- --run
+
+      # Étape 4 : Audit des vulnérabilités npm (Niveau High/Critical)
+      - name: Audit de Sécurité des Dépendances
+        run: pnpm audit --audit-level=high
+
+      # Étape 5 : Validation de la compilation ViteJS
+      - name: Validation du Build de Production
+        run: pnpm run build

App.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('AEGIS Initial Test', () => {
+  it('devrait valider que 1 + 1 font 2', () => {
+    expect(1 + 1).toBe(2);
+  });
+});

package.json

@@ -7,31 +7,37 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.3",
     "@zitadel/react-auth": "^1.2.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.28.0",
     "oidc-client-ts": "^3.5.0",
     "otpauth": "^9.5.1",
-    "pocketbase": "^0.27.0",
+    "pocketbase": "^0.27.1",
     "qrcode.react": "^4.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
+    "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@types/node": "^24.13.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^10.6.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.62.0",
-    "vite": "^8.1.1"
+    "globals": "^17.9.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
   }
-}
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+overrides:
+  react-router: "^6.30.4"
+  react-router-dom: "^6.30.4"

src/components/widgets/NewTicketWidget.tsx

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

src/components/widgets/TicketChatWidget.tsx

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

src/hooks/useDocuments.ts

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

src/hooks/useInfrastructureNodes.ts

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

src/hooks/useLoginFlow.ts

@@ -0,0 +1,115 @@
+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 {
+      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 {
+      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 {
+      setError("Erreur critique lors de la vérification.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const cancelMfa = () => {
+    pb.authStore.clear();
+    setStep(1);
+    setMfaConfig(null);
+    setError('');
+  };
+
+  return { step, isLoading, error, mfaConfig, loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa };
+};

src/hooks/useTicketDetail.ts

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

src/hooks/useTickets.ts

@@ -0,0 +1,32 @@
+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(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchTickets();
+  }, [fetchTickets]);
+
+  return { tickets, isLoading, error, refetch: fetchTickets };
+};

src/pages/trustcenter/InfrastructureEvolution.tsx

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

src/styles/VariantStyle.ts

@@ -0,0 +1 @@
+export type ButtonVariantStyle = "primary" | "danger" | "secondary" | "success" | "outline" | "ghost";

src/types/Category.ts

@@ -0,0 +1 @@
+export type TicketCategory = "Incident Critique" | "Évolution" | "Administratif";