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

@@ -0,0 +1,348 @@
+"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 { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  MessageCircle,
+  Phone,
+  Mail,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  Send,
+  ArrowLeft,
+  Headphones,
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+/**
+ * Page de support technique
+ * Formulaire de contact et informations de support
+ */
+export default function SupportPage() {
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    nom: "",
+    email: "",
+    sujet: "",
+    priorite: "normale",
+    message: "",
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    // Simuler l'envoi
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    alert("Ticket de support créé avec succès ! Notre équipe vous contactera bientôt.");
+    router.push("/aide");
+  };
+
+  const ticketsRecents = [
+    {
+      id: "#2024-1234",
+      sujet: "Problème d'accès au dashboard",
+      status: "resolved",
+      date: "2025-10-28",
+    },
+    {
+      id: "#2024-1189",
+      sujet: "Question sur la facturation",
+      status: "in-progress",
+      date: "2025-10-25",
+    },
+  ];
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "resolved":
+        return (
+          <Badge className="bg-green-100 text-green-800">
+            <CheckCircle className="h-3 w-3 mr-1" />
+            Résolu
+          </Badge>
+        );
+      case "in-progress":
+        return (
+          <Badge className="bg-blue-100 text-blue-800">
+            <Clock className="h-3 w-3 mr-1" />
+            En cours
+          </Badge>
+        );
+      default:
+        return <Badge>Nouveau</Badge>;
+    }
+  };
+
+  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">Support technique</h1>
+            <p className="text-gray-500 mt-1">
+              Contactez notre équipe d'assistance
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Formulaire de contact */}
+        <div className="lg:col-span-2 space-y-6">
+          <Card className="p-6">
+            <h2 className="text-xl font-semibold mb-6">Créer un ticket de support</h2>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="nom">Nom complet *</Label>
+                  <Input
+                    id="nom"
+                    name="nom"
+                    type="text"
+                    placeholder="Votre nom"
+                    value={formData.nom}
+                    onChange={handleChange}
+                    required
+                    className="mt-2"
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="email">Email *</Label>
+                  <Input
+                    id="email"
+                    name="email"
+                    type="email"
+                    placeholder="votre@email.com"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                    className="mt-2"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <Label htmlFor="sujet">Sujet *</Label>
+                <Input
+                  id="sujet"
+                  name="sujet"
+                  type="text"
+                  placeholder="Résumé de votre demande"
+                  value={formData.sujet}
+                  onChange={handleChange}
+                  required
+                  className="mt-2"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="priorite">Priorité</Label>
+                <select
+                  id="priorite"
+                  name="priorite"
+                  value={formData.priorite}
+                  onChange={handleChange}
+                  className="mt-2 w-full border border-gray-300 rounded-md p-2"
+                >
+                  <option value="basse">Basse</option>
+                  <option value="normale">Normale</option>
+                  <option value="haute">Haute</option>
+                  <option value="urgente">Urgente</option>
+                </select>
+              </div>
+
+              <div>
+                <Label htmlFor="message">Description du problème *</Label>
+                <Textarea
+                  id="message"
+                  name="message"
+                  placeholder="Décrivez votre problème en détail..."
+                  value={formData.message}
+                  onChange={handleChange}
+                  required
+                  rows={8}
+                  className="mt-2"
+                />
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full bg-blue-600 hover:bg-blue-700"
+                disabled={isSubmitting}
+              >
+                <Send className="mr-2 h-4 w-4" />
+                {isSubmitting ? "Envoi en cours..." : "Envoyer le ticket"}
+              </Button>
+            </form>
+          </Card>
+
+          {/* Tickets récents */}
+          {ticketsRecents.length > 0 && (
+            <Card className="p-6">
+              <h2 className="text-xl font-semibold mb-4">Vos tickets récents</h2>
+              <div className="space-y-3">
+                {ticketsRecents.map((ticket) => (
+                  <div
+                    key={ticket.id}
+                    className="flex items-center justify-between p-3 bg-gray-50 rounded hover:bg-gray-100 cursor-pointer"
+                  >
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3">
+                        <span className="font-mono text-sm text-gray-600">
+                          {ticket.id}
+                        </span>
+                        {getStatusBadge(ticket.status)}
+                      </div>
+                      <p className="font-medium mt-1">{ticket.sujet}</p>
+                      <p className="text-sm text-gray-500">
+                        Créé le{" "}
+                        {new Date(ticket.date).toLocaleDateString("fr-FR", {
+                          day: "2-digit",
+                          month: "long",
+                          year: "numeric",
+                        })}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          )}
+        </div>
+
+        {/* Sidebar - Informations de contact */}
+        <div className="space-y-6">
+          {/* Horaires de support */}
+          <Card className="p-6">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="p-3 bg-blue-100 rounded-lg">
+                <Headphones className="h-6 w-6 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="font-semibold">Support disponible</h3>
+                <p className="text-sm text-gray-600">Lundi - Vendredi</p>
+              </div>
+            </div>
+            <div className="space-y-3 text-sm">
+              <div className="flex items-center gap-2">
+                <Clock className="h-4 w-4 text-gray-400" />
+                <span>9h00 - 18h00 (CET)</span>
+              </div>
+              <p className="text-xs text-gray-500">
+                Temps de réponse moyen : 2-4 heures pendant les horaires d'ouverture
+              </p>
+            </div>
+          </Card>
+
+          {/* Contact téléphonique */}
+          <Card className="p-6 bg-blue-50 border-blue-200">
+            <div className="flex items-start gap-3">
+              <div className="p-3 bg-blue-600 rounded-lg">
+                <Phone className="h-5 w-5 text-white" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-blue-900 mb-1">
+                  Support téléphonique
+                </h3>
+                <p className="text-sm text-blue-700 mb-2">
+                  Pour une assistance immédiate
+                </p>
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="bg-blue-600 hover:bg-blue-700 w-full"
+                >
+                  +33 1 23 45 67 89
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* Contact email */}
+          <Card className="p-6 bg-green-50 border-green-200">
+            <div className="flex items-start gap-3">
+              <div className="p-3 bg-green-600 rounded-lg">
+                <Mail className="h-5 w-5 text-white" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-green-900 mb-1">Email support</h3>
+                <p className="text-sm text-green-700 mb-2">Réponse sous 24h</p>
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="bg-green-600 hover:bg-green-700 w-full"
+                >
+                  support@btpxpress.fr
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* Chat en direct */}
+          <Card className="p-6 bg-purple-50 border-purple-200">
+            <div className="flex items-start gap-3">
+              <div className="p-3 bg-purple-600 rounded-lg">
+                <MessageCircle className="h-5 w-5 text-white" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-purple-900 mb-1">
+                  Chat en direct
+                </h3>
+                <p className="text-sm text-purple-700 mb-2">
+                  Discutez avec un agent
+                </p>
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="bg-purple-600 hover:bg-purple-700 w-full"
+                >
+                  Démarrer le chat
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* Note importante */}
+          <Card className="p-4 bg-yellow-50 border-yellow-200">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="h-5 w-5 text-yellow-600 flex-shrink-0 mt-0.5" />
+              <div className="flex-1">
+                <p className="text-sm text-yellow-800">
+                  Pour les urgences critiques affectant votre production, appelez
+                  notre ligne d'urgence 24/7 au{" "}
+                  <span className="font-semibold">+33 1 98 76 54 32</span>
+                </p>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}