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

@@ -0,0 +1,184 @@
+"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 { Archive, Search, Mail, Send, RotateCcw, Trash2, MoreVertical } from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Page des messages archivés
+ * Affiche tous les messages archivés avec possibilité de restauration
+ */
+export default function MessagesArchivesPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const messagesArchives = [
+    {
+      id: "1",
+      from: "Ancien Client",
+      fromEmail: "ancien@client.fr",
+      subject: "Projet terminé - Retour d'expérience",
+      preview: "Nous tenions à vous remercier pour le travail effectué...",
+      date: "2025-09-15T10:00:00",
+      archivedDate: "2025-10-01T14:30:00",
+    },
+    {
+      id: "2",
+      from: "Fournisseur Matériaux",
+      fromEmail: "contact@fournisseur.com",
+      subject: "Catalogue 2024 - Nouveaux produits",
+      preview: "Découvrez notre nouveau catalogue avec nos dernières innovations...",
+      date: "2025-08-20T09:15:00",
+      archivedDate: "2025-09-10T11:00:00",
+    },
+  ];
+
+  const filteredMessages = messagesArchives.filter(
+    (message) =>
+      message.from.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      message.subject.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("fr-FR", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric",
+    });
+  };
+
+  const handleRestore = (id: string) => {
+    alert(`Message ${id} restauré dans la boîte de réception`);
+  };
+
+  const handleDelete = (id: string) => {
+    if (confirm("Voulez-vous vraiment supprimer définitivement ce message ?")) {
+      alert(`Message ${id} supprimé définitivement`);
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Messages archivés</h1>
+          <p className="text-gray-500 mt-1">
+            {messagesArchives.length} message{messagesArchives.length > 1 ? "s" : ""}{" "}
+            archivé{messagesArchives.length > 1 ? "s" : ""}
+          </p>
+        </div>
+        <Link href="/messages/nouveau">
+          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Send className="mr-2 h-4 w-4" />
+            Nouveau message
+          </Button>
+        </Link>
+      </div>
+
+      <div className="flex gap-2">
+        <Link href="/messages">
+          <Button variant="outline">
+            <Mail className="mr-2 h-4 w-4" />
+            Reçus
+          </Button>
+        </Link>
+        <Link href="/messages/envoyes">
+          <Button variant="outline">
+            <Send className="mr-2 h-4 w-4" />
+            Envoyés
+          </Button>
+        </Link>
+        <Link href="/messages/archives">
+          <Button variant="default" className="bg-blue-600">
+            <Archive className="mr-2 h-4 w-4" />
+            Archives
+          </Button>
+        </Link>
+      </div>
+
+      <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 les archives..."
+            className="pl-10"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </Card>
+
+      <Card>
+        <div className="divide-y">
+          {filteredMessages.length > 0 ? (
+            filteredMessages.map((message) => (
+              <div
+                key={message.id}
+                className="p-4 hover:bg-gray-50 transition-colors"
+              >
+                <div className="flex items-start gap-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <p className="font-semibold">{message.from}</p>
+                        <p className="text-sm font-medium text-gray-900 truncate">
+                          {message.subject}
+                        </p>
+                        <p className="text-sm text-gray-500 truncate mt-1">
+                          {message.preview}
+                        </p>
+                        <p className="text-xs text-gray-400 mt-2">
+                          Archivé le {formatDate(message.archivedDate)}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleRestore(message.id)}
+                        >
+                          <RotateCcw className="h-4 w-4 mr-2" />
+                          Restaurer
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleDelete(message.id)}
+                          className="text-red-600 hover:text-red-700"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="p-12 text-center">
+              <Archive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <p className="text-gray-500">Aucun message archivé</p>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <Card className="p-4 bg-blue-50 border-blue-200">
+        <div className="flex items-start gap-3">
+          <Archive className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
+          <div className="flex-1">
+            <h3 className="font-semibold text-blue-900">À propos des archives</h3>
+            <p className="text-sm text-blue-700 mt-1">
+              Les messages archivés sont conservés pendant 90 jours avant d'être supprimés
+              automatiquement. Vous pouvez restaurer un message archivé à tout moment
+              pour le retrouver dans votre boîte de réception.
+            </p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

app/(main)/messages/envoyes/page.tsx

@@ -0,0 +1,172 @@
+"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 { Badge } from "@/components/ui/badge";
+import { Send, Search, Mail, Archive, Trash2, MoreVertical } from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Page des messages envoyés
+ * Affiche l'historique de tous les messages envoyés
+ */
+export default function MessagesEnvoyesPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const messagesenvoyes = [
+    {
+      id: "1",
+      to: "Jean Dupont",
+      toEmail: "jean.dupont@btpxpress.fr",
+      subject: "RE: Demande de devis pour chantier Lyon",
+      preview: "Bonjour Jean, voici le devis demandé pour le projet...",
+      date: "2025-10-30T11:00:00",
+      status: "delivered",
+    },
+    {
+      id: "2",
+      to: "Marie Martin",
+      toEmail: "marie.martin@client.fr",
+      subject: "Confirmation planning",
+      preview: "Bonjour Marie, je confirme la réception de votre validation...",
+      date: "2025-10-30T09:30:00",
+      status: "read",
+    },
+    {
+      id: "3",
+      to: "Pierre Leblanc",
+      toEmail: "p.leblanc@entreprise.com",
+      subject: "RE: Question sur facture #2024-103",
+      preview: "Bonjour Pierre, concernant votre question sur la facture...",
+      date: "2025-10-29T17:00:00",
+      status: "delivered",
+    },
+  ];
+
+  const filteredMessages = messagesenvoyes.filter(
+    (message) =>
+      message.to.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      message.subject.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString("fr-FR", {
+      day: "2-digit",
+      month: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "read":
+        return <Badge className="bg-green-100 text-green-800">Lu</Badge>;
+      case "delivered":
+        return <Badge className="bg-blue-100 text-blue-800">Envoyé</Badge>;
+      default:
+        return <Badge>En cours</Badge>;
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Messages envoyés</h1>
+          <p className="text-gray-500 mt-1">
+            {messagesenvoyes.length} message{messagesenvoyes.length > 1 ? "s" : ""}{" "}
+            envoyé{messagesenvoyes.length > 1 ? "s" : ""}
+          </p>
+        </div>
+        <Link href="/messages/nouveau">
+          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Send className="mr-2 h-4 w-4" />
+            Nouveau message
+          </Button>
+        </Link>
+      </div>
+
+      <div className="flex gap-2">
+        <Link href="/messages">
+          <Button variant="outline">
+            <Mail className="mr-2 h-4 w-4" />
+            Reçus
+          </Button>
+        </Link>
+        <Link href="/messages/envoyes">
+          <Button variant="default" className="bg-blue-600">
+            <Send className="mr-2 h-4 w-4" />
+            Envoyés
+          </Button>
+        </Link>
+        <Link href="/messages/archives">
+          <Button variant="outline">
+            <Archive className="mr-2 h-4 w-4" />
+            Archives
+          </Button>
+        </Link>
+      </div>
+
+      <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 les messages envoyés..."
+            className="pl-10"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+      </Card>
+
+      <Card>
+        <div className="divide-y">
+          {filteredMessages.length > 0 ? (
+            filteredMessages.map((message) => (
+              <div
+                key={message.id}
+                className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
+              >
+                <div className="flex items-start gap-4">
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <p className="font-semibold">À: {message.to}</p>
+                          {getStatusBadge(message.status)}
+                        </div>
+                        <p className="text-sm font-medium text-gray-900 truncate">
+                          {message.subject}
+                        </p>
+                        <p className="text-sm text-gray-500 truncate mt-1">
+                          {message.preview}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-4 flex-shrink-0">
+                        <span className="text-sm text-gray-500">
+                          {formatDate(message.date)}
+                        </span>
+                        <button className="hover:bg-gray-200 rounded p-1">
+                          <MoreVertical className="h-4 w-4 text-gray-400" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="p-12 text-center">
+              <Send className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <p className="text-gray-500">Aucun message envoyé</p>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

app/(main)/messages/nouveau/page.tsx

@@ -0,0 +1,161 @@
+"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 { Send, Paperclip, X, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+/**
+ * Page de création de nouveau message
+ * Permet de composer et envoyer un nouveau message
+ */
+export default function NouveauMessagePage() {
+  const router = useRouter();
+  const [destinataire, setDestinataire] = useState("");
+  const [sujet, setSujet] = useState("");
+  const [message, setMessage] = useState("");
+  const [fichiers, setFichiers] = useState<File[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFichiers([...fichiers, ...Array.from(e.target.files)]);
+    }
+  };
+
+  const removeFile = (index: number) => {
+    setFichiers(fichiers.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+
+    // Simuler l'envoi
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
+    alert("Message envoyé avec succès !");
+    router.push("/messages");
+  };
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <Link href="/messages">
+            <Button variant="ghost" size="sm">
+              <ArrowLeft className="h-4 w-4 mr-2" />
+              Retour
+            </Button>
+          </Link>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Nouveau message</h1>
+            <p className="text-gray-500 mt-1">Composer un nouveau message</p>
+          </div>
+        </div>
+      </div>
+
+      <Card className="p-6">
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <Label htmlFor="destinataire">Destinataire *</Label>
+            <Input
+              id="destinataire"
+              type="email"
+              placeholder="email@exemple.com"
+              value={destinataire}
+              onChange={(e) => setDestinataire(e.target.value)}
+              required
+              className="mt-2"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="sujet">Sujet *</Label>
+            <Input
+              id="sujet"
+              type="text"
+              placeholder="Objet du message"
+              value={sujet}
+              onChange={(e) => setSujet(e.target.value)}
+              required
+              className="mt-2"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="message">Message *</Label>
+            <Textarea
+              id="message"
+              placeholder="Tapez votre message ici..."
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              required
+              rows={12}
+              className="mt-2"
+            />
+          </div>
+
+          <div>
+            <Label>Pièces jointes</Label>
+            <div className="mt-2 space-y-2">
+              {fichiers.map((file, index) => (
+                <div
+                  key={index}
+                  className="flex items-center gap-2 p-2 bg-gray-50 rounded"
+                >
+                  <Paperclip className="h-4 w-4 text-gray-400" />
+                  <span className="text-sm flex-1">{file.name}</span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeFile(index)}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+              <input
+                type="file"
+                multiple
+                onChange={handleFileChange}
+                className="hidden"
+                id="file-upload"
+              />
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => document.getElementById("file-upload")?.click()}
+              >
+                <Paperclip className="mr-2 h-4 w-4" />
+                Ajouter une pièce jointe
+              </Button>
+            </div>
+          </div>
+
+          <div className="flex gap-4">
+            <Button
+              type="submit"
+              className="bg-blue-600 hover:bg-blue-700"
+              disabled={isSubmitting}
+            >
+              <Send className="mr-2 h-4 w-4" />
+              {isSubmitting ? "Envoi en cours..." : "Envoyer"}
+            </Button>
+            <Link href="/messages">
+              <Button type="button" variant="outline">
+                Annuler
+              </Button>
+            </Link>
+          </div>
+        </form>
+      </Card>
+    </div>
+  );
+}

app/(main)/messages/page.tsx

@@ -0,0 +1,374 @@
+"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 { Badge } from "@/components/ui/badge";
+import {
+  Mail,
+  Search,
+  Send,
+  Archive,
+  Star,
+  Trash2,
+  Reply,
+  Forward,
+  MoreVertical,
+  Paperclip,
+  Clock,
+} from "lucide-react";
+import Link from "next/link";
+
+/**
+ * Page principale de la messagerie - Boîte de réception
+ * Affiche tous les messages reçus avec filtrage et recherche
+ */
+export default function MessagesPage() {
+  const [selectedMessages, setSelectedMessages] = useState<string[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterStatus, setFilterStatus] = useState<"all" | "unread" | "starred">(
+    "all"
+  );
+
+  // Messages mockés pour démonstration
+  const messages = [
+    {
+      id: "1",
+      from: "Jean Dupont",
+      fromEmail: "jean.dupont@btpxpress.fr",
+      subject: "Demande de devis pour chantier Lyon",
+      preview:
+        "Bonjour, je souhaiterais obtenir un devis pour la construction d'un immeuble...",
+      date: "2025-10-30T10:30:00",
+      isRead: false,
+      isStarred: true,
+      hasAttachment: true,
+    },
+    {
+      id: "2",
+      from: "Marie Martin",
+      fromEmail: "marie.martin@client.fr",
+      subject: "Validation planning chantier",
+      preview: "Le planning que vous avez envoyé me convient parfaitement...",
+      date: "2025-10-30T09:15:00",
+      isRead: true,
+      isStarred: false,
+      hasAttachment: false,
+    },
+    {
+      id: "3",
+      from: "Pierre Leblanc",
+      fromEmail: "p.leblanc@entreprise.com",
+      subject: "Question sur facture #2024-103",
+      preview: "J'ai une question concernant la facture que j'ai reçue...",
+      date: "2025-10-29T16:45:00",
+      isRead: false,
+      isStarred: false,
+      hasAttachment: true,
+    },
+    {
+      id: "4",
+      from: "Sophie Bernard",
+      fromEmail: "sophie.b@construction.fr",
+      subject: "Proposition de collaboration",
+      preview: "Nous sommes intéressés par une collaboration sur plusieurs projets...",
+      date: "2025-10-29T14:20:00",
+      isRead: true,
+      isStarred: true,
+      hasAttachment: false,
+    },
+  ];
+
+  const filteredMessages = messages.filter((message) => {
+    const matchesSearch =
+      message.from.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      message.subject.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesFilter =
+      filterStatus === "all" ||
+      (filterStatus === "unread" && !message.isRead) ||
+      (filterStatus === "starred" && message.isStarred);
+
+    return matchesSearch && matchesFilter;
+  });
+
+  const toggleSelectMessage = (id: string) => {
+    setSelectedMessages((prev) =>
+      prev.includes(id) ? prev.filter((msgId) => msgId !== id) : [...prev, id]
+    );
+  };
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
+
+    if (diffInHours < 24) {
+      return date.toLocaleTimeString("fr-FR", {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    } else if (diffInHours < 48) {
+      return "Hier";
+    } else {
+      return date.toLocaleDateString("fr-FR", {
+        day: "2-digit",
+        month: "short",
+      });
+    }
+  };
+
+  const unreadCount = messages.filter((m) => !m.isRead).length;
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* En-tête */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-gray-900">Messagerie</h1>
+          <p className="text-gray-500 mt-1">
+            {unreadCount} message{unreadCount > 1 ? "s" : ""} non lu
+            {unreadCount > 1 ? "s" : ""}
+          </p>
+        </div>
+        <Link href="/messages/nouveau">
+          <Button className="bg-blue-600 hover:bg-blue-700">
+            <Send className="mr-2 h-4 w-4" />
+            Nouveau message
+          </Button>
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex gap-2">
+        <Link href="/messages">
+          <Button variant="default" className="bg-blue-600">
+            <Mail className="mr-2 h-4 w-4" />
+            Reçus
+          </Button>
+        </Link>
+        <Link href="/messages/envoyes">
+          <Button variant="outline">
+            <Send className="mr-2 h-4 w-4" />
+            Envoyés
+          </Button>
+        </Link>
+        <Link href="/messages/archives">
+          <Button variant="outline">
+            <Archive className="mr-2 h-4 w-4" />
+            Archives
+          </Button>
+        </Link>
+      </div>
+
+      {/* Barre de recherche et filtres */}
+      <Card className="p-4">
+        <div className="flex gap-4 flex-wrap">
+          <div className="flex-1 min-w-[300px]">
+            <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 les messages..."
+                className="pl-10"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              variant={filterStatus === "all" ? "default" : "outline"}
+              onClick={() => setFilterStatus("all")}
+            >
+              Tous
+            </Button>
+            <Button
+              variant={filterStatus === "unread" ? "default" : "outline"}
+              onClick={() => setFilterStatus("unread")}
+            >
+              Non lus ({unreadCount})
+            </Button>
+            <Button
+              variant={filterStatus === "starred" ? "default" : "outline"}
+              onClick={() => setFilterStatus("starred")}
+            >
+              <Star className="mr-1 h-4 w-4" />
+              Favoris
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* Actions groupées */}
+      {selectedMessages.length > 0 && (
+        <Card className="p-4">
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-gray-600">
+              {selectedMessages.length} message{selectedMessages.length > 1 ? "s" : ""}{" "}
+              sélectionné{selectedMessages.length > 1 ? "s" : ""}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setSelectedMessages([])}
+            >
+              Tout désélectionner
+            </Button>
+            <div className="flex-1" />
+            <Button variant="outline" size="sm">
+              <Archive className="mr-2 h-4 w-4" />
+              Archiver
+            </Button>
+            <Button variant="outline" size="sm">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Supprimer
+            </Button>
+          </div>
+        </Card>
+      )}
+
+      {/* Liste des messages */}
+      <Card>
+        <div className="divide-y">
+          {filteredMessages.length > 0 ? (
+            filteredMessages.map((message) => (
+              <div
+                key={message.id}
+                className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
+                  !message.isRead ? "bg-blue-50" : ""
+                }`}
+                onClick={() => toggleSelectMessage(message.id)}
+              >
+                <div className="flex items-start gap-4">
+                  {/* Checkbox */}
+                  <input
+                    type="checkbox"
+                    checked={selectedMessages.includes(message.id)}
+                    onChange={() => toggleSelectMessage(message.id)}
+                    className="mt-1"
+                    onClick={(e) => e.stopPropagation()}
+                  />
+
+                  {/* Star */}
+                  <button
+                    className="mt-1"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    <Star
+                      className={`h-5 w-5 ${
+                        message.isStarred
+                          ? "fill-yellow-400 text-yellow-400"
+                          : "text-gray-400"
+                      }`}
+                    />
+                  </button>
+
+                  {/* Contenu du message */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <p
+                            className={`font-semibold ${
+                              !message.isRead ? "font-bold" : ""
+                            }`}
+                          >
+                            {message.from}
+                          </p>
+                          {message.hasAttachment && (
+                            <Paperclip className="h-4 w-4 text-gray-400" />
+                          )}
+                        </div>
+                        <p
+                          className={`text-sm ${
+                            !message.isRead
+                              ? "font-semibold text-gray-900"
+                              : "text-gray-600"
+                          } truncate`}
+                        >
+                          {message.subject}
+                        </p>
+                        <p className="text-sm text-gray-500 truncate mt-1">
+                          {message.preview}
+                        </p>
+                      </div>
+                      <div className="flex items-center gap-4 flex-shrink-0">
+                        <span className="text-sm text-gray-500">
+                          {formatDate(message.date)}
+                        </span>
+                        <button
+                          onClick={(e) => e.stopPropagation()}
+                          className="hover:bg-gray-200 rounded p-1"
+                        >
+                          <MoreVertical className="h-4 w-4 text-gray-400" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="p-12 text-center">
+              <Mail className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <p className="text-gray-500">Aucun message trouvé</p>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Statistiques */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-blue-100 rounded-lg">
+              <Mail className="h-6 w-6 text-blue-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">{messages.length}</p>
+              <p className="text-sm text-gray-500">Messages reçus</p>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-orange-100 rounded-lg">
+              <Clock className="h-6 w-6 text-orange-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">{unreadCount}</p>
+              <p className="text-sm text-gray-500">Non lus</p>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-yellow-100 rounded-lg">
+              <Star className="h-6 w-6 text-yellow-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">
+                {messages.filter((m) => m.isStarred).length}
+              </p>
+              <p className="text-sm text-gray-500">Favoris</p>
+            </div>
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center gap-4">
+            <div className="p-3 bg-green-100 rounded-lg">
+              <Send className="h-6 w-6 text-green-600" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold">12</p>
+              <p className="text-sm text-gray-500">Envoyés</p>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}