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/page.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import React from "react";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  BookOpen,
+  Video,
+  MessageCircle,
+  Search,
+  FileText,
+  HelpCircle,
+  Lightbulb,
+  Phone,
+  Mail,
+  ExternalLink,
+} from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Page principale du centre d'aide
+ * Point d'entrée pour accéder à toute l'aide et la documentation
+ */
+export default function AidePage() {
+  const categories = [
+    {
+      title: "Démarrage rapide",
+      description: "Premiers pas avec BTPXpress",
+      icon: Lightbulb,
+      color: "bg-blue-100 text-blue-600",
+      articles: 12,
+    },
+    {
+      title: "Gestion des chantiers",
+      description: "Créer et gérer vos chantiers",
+      icon: FileText,
+      color: "bg-green-100 text-green-600",
+      articles: 25,
+    },
+    {
+      title: "Facturation",
+      description: "Devis, factures et paiements",
+      icon: BookOpen,
+      color: "bg-purple-100 text-purple-600",
+      articles: 18,
+    },
+    {
+      title: "Équipes et planning",
+      description: "Gérer vos équipes et plannings",
+      icon: Video,
+      color: "bg-orange-100 text-orange-600",
+      articles: 15,
+    },
+  ];
+
+  const articlesPopulaires = [
+    "Comment créer un nouveau chantier ?",
+    "Gérer les devis et les factures",
+    "Planifier l'utilisation du matériel",
+    "Ajouter des membres à une équipe",
+    "Générer des rapports d'activité",
+  ];
+
+  return (
+    <div className="space-y-8 p-6">
+      {/* En-tête */}
+      <div className="text-center space-y-4">
+        <h1 className="text-4xl font-bold text-gray-900">
+          Comment pouvons-nous vous aider ?
+        </h1>
+        <p className="text-lg text-gray-600">
+          Recherchez dans notre base de connaissances ou contactez notre support
+        </p>
+        <div className="max-w-2xl mx-auto">
+          <div className="relative">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+            <Input
+              placeholder="Rechercher dans l'aide..."
+              className="pl-12 h-12 text-lg"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Accès rapide */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Link href="/aide/documentation">
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex items-start gap-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-2">Documentation</h3>
+                <p className="text-sm text-gray-600">
+                  Guides complets et documentation technique
+                </p>
+              </div>
+            </div>
+          </Card>
+        </Link>
+
+        <Link href="/aide/tutoriels">
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex items-start gap-4">
+              <div className="p-3 bg-green-100 rounded-lg">
+                <Video className="h-6 w-6 text-green-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-lg mb-2">Tutoriels</h3>
+                <p className="text-sm text-gray-600">
+                  Vidéos et guides pas-à-pas
+                </p>
+              </div>
+            </div>
+          </Card>
+        </Link>
+
+        <Link href="/aide/support">
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex items-start gap-4">
+              <div className="p-3 bg-purple-100 rounded-lg">
+                <MessageCircle className="h-6 w-6 text-purple-600" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-lg mb-2">Support</h3>
+                <p className="text-sm text-gray-600">
+                  Contactez notre équipe d'assistance
+                </p>
+              </div>
+            </div>
+          </Card>
+        </Link>
+      </div>
+
+      {/* Catégories populaires */}
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">
+          Catégories populaires
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          {categories.map((category) => (
+            <Card
+              key={category.title}
+              className="p-6 hover:shadow-lg transition-shadow cursor-pointer"
+            >
+              <div className={`p-3 ${category.color} rounded-lg w-fit mb-4`}>
+                <category.icon className="h-6 w-6" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">{category.title}</h3>
+              <p className="text-sm text-gray-600 mb-4">{category.description}</p>
+              <p className="text-sm text-blue-600 font-medium">
+                {category.articles} articles
+              </p>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      {/* Articles populaires */}
+      <div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">
+          Articles populaires
+        </h2>
+        <Card>
+          <div className="divide-y">
+            {articlesPopulaires.map((article, index) => (
+              <div
+                key={index}
+                className="p-4 hover:bg-gray-50 cursor-pointer flex items-center justify-between group"
+              >
+                <div className="flex items-center gap-3">
+                  <HelpCircle className="h-5 w-5 text-gray-400" />
+                  <span className="text-gray-900">{article}</span>
+                </div>
+                <ExternalLink className="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+
+      {/* Contact direct */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card className="p-6 bg-blue-50 border-blue-200">
+          <div className="flex items-start gap-4">
+            <div className="p-3 bg-blue-600 rounded-lg">
+              <Phone className="h-6 w-6 text-white" />
+            </div>
+            <div className="flex-1">
+              <h3 className="font-semibold text-lg mb-2 text-blue-900">
+                Support téléphonique
+              </h3>
+              <p className="text-sm text-blue-700 mb-3">
+                Disponible du lundi au vendredi de 9h à 18h
+              </p>
+              <Button className="bg-blue-600 hover:bg-blue-700">
+                +33 1 23 45 67 89
+              </Button>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6 bg-green-50 border-green-200">
+          <div className="flex items-start gap-4">
+            <div className="p-3 bg-green-600 rounded-lg">
+              <Mail className="h-6 w-6 text-white" />
+            </div>
+            <div className="flex-1">
+              <h3 className="font-semibold text-lg mb-2 text-green-900">
+                Support par email
+              </h3>
+              <p className="text-sm text-green-700 mb-3">
+                Réponse sous 24h ouvrées
+              </p>
+              <Button className="bg-green-600 hover:bg-green-700">
+                support@btpxpress.fr
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}