Fix: Correction critique de la boucle OAuth - Empêcher les échanges multiples du code

PROBLÈME RÉSOLU:
- Erreur "Code already used" répétée dans les logs Keycloak
- Boucle infinie de tentatives d'échange du code d'autorisation OAuth
- Utilisateurs bloqués à la connexion

CORRECTIONS APPLIQUÉES:
1. Ajout de useRef pour protéger contre les exécutions multiples
   - hasExchanged.current: Flag pour prévenir les réexécutions
   - isProcessing.current: Protection pendant le traitement

2. Modification des dépendances useEffect
   - AVANT: [searchParams, router] → exécution à chaque changement
   - APRÈS: [] → exécution unique au montage du composant

3. Amélioration du logging
   - Console logs pour debug OAuth flow
   - Messages emoji pour faciliter le suivi

4. Nettoyage de l'URL
   - window.history.replaceState() pour retirer les paramètres OAuth
   - Évite les re-renders causés par les paramètres dans l'URL

5. Gestion d'erreurs améliorée
   - Capture des erreurs JSON du serveur
   - Messages d'erreur plus explicites

FICHIERS AJOUTÉS:
- app/(main)/aide/* - 4 pages du module Aide (documentation, tutoriels, support)
- app/(main)/messages/* - 4 pages du module Messages (inbox, envoyés, archives)
- app/auth/callback/page.tsx.backup - Sauvegarde avant modification

IMPACT:
✅ Un seul échange de code par authentification
✅ Plus d'erreur "Code already used"
✅ Connexion fluide et sans boucle
✅ Logs propres et lisibles

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/(main)/aide/documentation/page.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import React, { useState } from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  BookOpen,
+  Search,
+  ChevronRight,
+  FileText,
+  Download,
+  ExternalLink,
+  ArrowLeft,
+} from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Page de documentation
+ * Guides complets et documentation technique
+ */
+export default function DocumentationPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+  const categories = [
+    {
+      id: "getting-started",
+      title: "Démarrage",
+      description: "Premiers pas avec BTPXpress",
+      articles: [
+        "Installation et configuration",
+        "Créer votre premier chantier",
+        "Comprendre l'interface",
+        "Configuration du profil entreprise",
+      ],
+    },
+    {
+      id: "chantiers",
+      title: "Gestion des chantiers",
+      description: "Tout sur la gestion des chantiers",
+      articles: [
+        "Créer un nouveau chantier",
+        "Gérer les phases de chantier",
+        "Suivi en temps réel",
+        "Clôturer un chantier",
+      ],
+    },
+    {
+      id: "factures",
+      title: "Facturation",
+      description: "Devis, factures et paiements",
+      articles: [
+        "Créer un devis",
+        "Convertir un devis en facture",
+        "Gérer les paiements",
+        "Relances automatiques",
+      ],
+    },
+    {
+      id: "equipes",
+      title: "Équipes et planning",
+      description: "Gérer vos équipes",
+      articles: [
+        "Créer une équipe",
+        "Affecter des employés",
+        "Planifier les interventions",
+        "Gérer les disponibilités",
+      ],
+    },
+    {
+      id: "materiel",
+      title: "Matériel",
+      description: "Gestion du matériel BTP",
+      articles: [
+        "Ajouter du matériel",
+        "Planifier l'utilisation",
+        "Maintenance préventive",
+        "Historique d'utilisation",
+      ],
+    },
+    {
+      id: "rapports",
+      title: "Rapports et analyses",
+      description: "Générer des rapports",
+      articles: [
+        "Rapports d'activité",
+        "Analyse financière",
+        "Rapports personnalisés",
+        "Export des données",
+      ],
+    },
+  ];
+
+  const filteredCategories = selectedCategory
+    ? categories.filter((cat) => cat.id === selectedCategory)
+    : categories;
+
+  const allArticles = categories.flatMap((cat) =>
+    cat.articles.map((article) => ({ category: cat.title, article }))
+  );
+
+  const searchResults = searchTerm
+    ? allArticles.filter((item) =>
+        item.article.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : [];
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* En-tête */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/aide">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Retour à l'aide
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Documentation</h1>
+            <p className="text-gray-500 mt-1">
+              Guides complets et documentation technique
+            </p>
+          </div>
+        </div>
+        <Button variant="outline">
+          <Download className="mr-2 h-4 w-4" />
+          Télécharger PDF
+        </Button>
+      </div>
+
+      {/* Barre de recherche */}
+      <Card className="p-4">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <Input
+            placeholder="Rechercher dans la documentation..."
+            className="pl-10"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+
+        {/* Résultats de recherche */}
+        {searchTerm && searchResults.length > 0 && (
+          <div className="mt-4 border-t pt-4">
+            <p className="text-sm text-gray-600 mb-3">
+              {searchResults.length} résultat{searchResults.length > 1 ? "s" : ""}{" "}
+              trouvé{searchResults.length > 1 ? "s" : ""}
+            </p>
+            <div className="space-y-2">
+              {searchResults.map((result, index) => (
+                <div
+                  key={index}
+                  className="p-3 hover:bg-gray-50 rounded cursor-pointer flex items-center justify-between"
+                >
+                  <div>
+                    <p className="font-medium">{result.article}</p>
+                    <p className="text-sm text-gray-500">{result.category}</p>
+                  </div>
+                  <ChevronRight className="h-4 w-4 text-gray-400" />
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </Card>
+
+      {/* Catégories de documentation */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {filteredCategories.map((category) => (
+          <Card
+            key={category.id}
+            className="p-6 hover:shadow-lg transition-shadow"
+          >
+            <div className="flex items-start gap-4 mb-4">
+              <div className="p-3 bg-blue-100 rounded-lg">
+                <BookOpen className="h-6 w-6 text-blue-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-lg mb-1">{category.title}</h3>
+                <p className="text-sm text-gray-600">{category.description}</p>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              {category.articles.map((article, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer group"
+                >
+                  <FileText className="h-4 w-4 text-gray-400" />
+                  <span className="text-sm flex-1">{article}</span>
+                  <ExternalLink className="h-3 w-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+                </div>
+              ))}
+            </div>
+
+            <Button
+              variant="link"
+              className="mt-4 p-0 h-auto text-blue-600"
+              onClick={() => setSelectedCategory(category.id)}
+            >
+              Voir tous les articles
+              <ChevronRight className="ml-1 h-4 w-4" />
+            </Button>
+          </Card>
+        ))}
+      </div>
+
+      {/* Guides de démarrage rapide */}
+      <Card className="p-6 bg-gradient-to-r from-blue-50 to-purple-50">
+        <div className="flex items-start gap-4">
+          <div className="p-3 bg-blue-600 rounded-lg">
+            <BookOpen className="h-6 w-6 text-white" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-lg mb-2">
+              Guide de démarrage rapide
+            </h3>
+            <p className="text-sm text-gray-700 mb-4">
+              Téléchargez notre guide PDF complet pour démarrer rapidement avec
+              BTPXpress. Il contient tous les concepts essentiels et les meilleures
+              pratiques.
+            </p>
+            <div className="flex gap-3">
+              <Button className="bg-blue-600 hover:bg-blue-700">
+                <Download className="mr-2 h-4 w-4" />
+                Télécharger le guide (PDF)
+              </Button>
+              <Button variant="outline">
+                Voir la version en ligne
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}