feat: add user dropdown menu in admin and employee headers

- Add dropdown menu with user avatar, name, and email in admin header
- Add dropdown menu with user avatar, name, and email in employee header
- Create admin profile page at /admin/profil
- Create employee profile page at /employe/profil
- Remove Profil link from admin sidebar (now in dropdown)
- Fix header public display: hide for admin/employee on all pages
- Use router.replace() instead of router.push() for login redirects to avoid history pollution
- Simplify employe dashboard page: remove redundant auth checks handled by layout
- Add click-outside-to-close functionality for dropdown menus

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

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

app/admin/layout.tsx

@@ -3,11 +3,12 @@
 import Sidebar from "@/components/admin/Sidebar";
 import { useAuth } from "@/contexts/AuthContext";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Loading } from "@/components/ui/Loading";
 import toast from "react-hot-toast";
-import { LogOut } from "lucide-react";
+import { LogOut, User, ChevronDown } from "lucide-react";
 import Logo from "@/components/Logo";
+import Link from "next/link";
 
 export default function AdminLayout({
   children,
@@ -16,6 +17,7 @@ export default function AdminLayout({
 }) {
   const { user, isAuthenticated, isLoading, logout } = useAuth();
   const router = useRouter();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
@@ -30,6 +32,24 @@ export default function AdminLayout({
     }
   }, [isLoading, isAuthenticated, user, router]);
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.user-dropdown')) {
+        setDropdownOpen(false);
+      }
+    };
+
+    if (dropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dropdownOpen]);
+
   const handleLogout = async () => {
     await logout();
     router.push("/login");
@@ -58,18 +78,51 @@ export default function AdminLayout({
               <Logo size="md" showText={false} />
               <div>
                 <h1 className="text-2xl font-bold text-gray-900">Thé Tip Top - Administration</h1>
-                <p className="text-sm text-gray-500 mt-1">
-                  Connecté en tant que <span className="font-medium">{user?.firstName} {user?.lastName}</span>
-                </p>
               </div>
             </div>
-            <button
-              onClick={handleLogout}
-              className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-            >
-              <LogOut className="w-4 h-4" />
-              Déconnexion
-            </button>
+
+            {/* User Dropdown */}
+            <div className="relative user-dropdown">
+              <button
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+                className="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-100 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold">
+                    {user?.firstName?.charAt(0)}{user?.lastName?.charAt(0)}
+                  </div>
+                  <div className="text-left">
+                    <p className="text-sm font-bold text-gray-900">
+                      {user?.firstName} {user?.lastName}
+                    </p>
+                    <p className="text-xs text-gray-500">{user?.email}</p>
+                  </div>
+                </div>
+                <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
+              </button>
+
+              {/* Dropdown Menu */}
+              {dropdownOpen && (
+                <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
+                  <Link
+                    href="/admin/profil"
+                    onClick={() => setDropdownOpen(false)}
+                    className="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition-colors"
+                  >
+                    <User className="w-4 h-4 text-gray-600" />
+                    <span className="text-sm font-medium text-gray-700">Profil</span>
+                  </Link>
+                  <div className="border-t border-gray-200 my-1"></div>
+                  <button
+                    onClick={handleLogout}
+                    className="w-full flex items-center gap-3 px-4 py-3 hover:bg-red-50 transition-colors text-left"
+                  >
+                    <LogOut className="w-4 h-4 text-red-600" />
+                    <span className="text-sm font-medium text-red-600">Déconnexion</span>
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
         </header>
 

app/admin/profil/page.tsx

@@ -0,0 +1,235 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAuth } from "@/contexts/AuthContext";
+import { profileUpdateSchema, ProfileUpdateFormData } from "@/lib/validations";
+import { Input } from "@/components/ui/Input";
+import Button from "@/components/Button";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card";
+import { Badge } from "@/components/ui/Badge";
+import { userService } from "@/services/user.service";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { ROUTES } from "@/utils/constants";
+import { formatDate } from "@/utils/helpers";
+
+export const dynamic = 'force-dynamic';
+
+export default function AdminProfilePage() {
+  const { user, isAuthenticated, refreshUser } = useAuth();
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<ProfileUpdateFormData>({
+    resolver: zodResolver(profileUpdateSchema),
+    defaultValues: {
+      firstName: user?.firstName || "",
+      lastName: user?.lastName || "",
+      phone: user?.phone || "",
+    },
+  });
+
+  if (!user) {
+    return null;
+  }
+
+  const onSubmit = async (data: ProfileUpdateFormData) => {
+    setIsSubmitting(true);
+    try {
+      await userService.updateProfile(data);
+      await refreshUser();
+      toast.success("Profil mis à jour avec succès");
+      setIsEditing(false);
+    } catch (error: any) {
+      toast.error(error.message || "Erreur lors de la mise à jour du profil");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    reset({
+      firstName: user?.firstName || "",
+      lastName: user?.lastName || "",
+      phone: user?.phone || "",
+    });
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="p-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-900 mb-6">Mon profil</h1>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {/* Profile Info Card */}
+          <div className="md:col-span-2">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
+              <div className="px-6 py-4 border-b border-gray-200">
+                <h2 className="text-xl font-bold text-gray-900">Informations personnelles</h2>
+              </div>
+              <div className="p-6">
+                {!isEditing ? (
+                  <div className="space-y-4">
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Prénom
+                      </label>
+                      <p className="text-lg text-gray-900">{user.firstName}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Nom
+                      </label>
+                      <p className="text-lg text-gray-900">{user.lastName}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Email
+                      </label>
+                      <p className="text-lg text-gray-900">{user.email}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Téléphone
+                      </label>
+                      <p className="text-lg text-gray-900">
+                        {user.phone || "Non renseigné"}
+                      </p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Rôle
+                      </label>
+                      <div className="mt-1">
+                        <Badge variant="danger">Administrateur</Badge>
+                      </div>
+                    </div>
+                    <div className="pt-4">
+                      <button
+                        onClick={() => setIsEditing(true)}
+                        className="bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-md"
+                      >
+                        Modifier mes informations
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+                    <Input
+                      id="firstName"
+                      type="text"
+                      label="Prénom"
+                      error={errors.firstName?.message}
+                      {...register("firstName")}
+                      required
+                    />
+                    <Input
+                      id="lastName"
+                      type="text"
+                      label="Nom"
+                      error={errors.lastName?.message}
+                      {...register("lastName")}
+                      required
+                    />
+                    <Input
+                      id="email"
+                      type="email"
+                      label="Email"
+                      value={user.email}
+                      disabled
+                      helperText="L'email ne peut pas être modifié"
+                    />
+                    <Input
+                      id="phone"
+                      type="tel"
+                      label="Téléphone"
+                      error={errors.phone?.message}
+                      {...register("phone")}
+                    />
+                    <div className="flex gap-3">
+                      <button
+                        type="submit"
+                        disabled={isSubmitting}
+                        className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-md"
+                      >
+                        {isSubmitting ? "Enregistrement..." : "Enregistrer"}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleCancel}
+                        disabled={isSubmitting}
+                        className="border-2 border-gray-300 hover:bg-gray-100 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
+                      >
+                        Annuler
+                      </button>
+                    </div>
+                  </form>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Account Status Card */}
+          <div>
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
+              <div className="px-6 py-4 border-b border-gray-200">
+                <h2 className="text-xl font-bold text-gray-900">Statut du compte</h2>
+              </div>
+              <div className="p-6 space-y-4">
+                <div>
+                  <label className="text-sm font-medium text-gray-600">
+                    Email vérifié
+                  </label>
+                  <div className="mt-1">
+                    {user.isVerified ? (
+                      <Badge variant="success">Vérifié ✓</Badge>
+                    ) : (
+                      <Badge variant="warning">Non vérifié</Badge>
+                    )}
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-600">
+                    Membre depuis
+                  </label>
+                  <p className="text-sm text-gray-900 mt-1">
+                    {formatDate(user.createdAt)}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions Card */}
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mt-6">
+              <div className="px-6 py-4 border-b border-gray-200">
+                <h2 className="text-xl font-bold text-gray-900">Actions rapides</h2>
+              </div>
+              <div className="p-6 space-y-2">
+                <button
+                  onClick={() => router.push(ROUTES.ADMIN_DASHBOARD)}
+                  className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-md"
+                >
+                  Dashboard
+                </button>
+                <button
+                  onClick={() => router.push("/admin/utilisateurs")}
+                  className="w-full border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                >
+                  Gestion Utilisateurs
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/employe/dashboard/page.tsx

@@ -23,8 +23,7 @@ interface PendingTicket {
 }
 
 export default function EmployeDashboardPage() {
-  const { user, isAuthenticated, isLoading: authLoading } = useAuth();
-  const router = useRouter();
+  const { user } = useAuth();
   const [stats, setStats] = useState({
     pendingTickets: 0,
     claimedToday: 0,
@@ -34,22 +33,9 @@ export default function EmployeDashboardPage() {
   const [loadingTickets, setLoadingTickets] = useState(true);
 
   useEffect(() => {
-    if (!authLoading && !isAuthenticated) {
-      router.push(ROUTES.LOGIN);
-      return;
-    }
-
-    if (isAuthenticated && user?.role !== 'EMPLOYEE') {
-      router.push(ROUTES.HOME);
-      toast.error('Accès refusé : rôle employé requis');
-      return;
-    }
-
-    if (isAuthenticated) {
-      loadPendingTickets();
-      loadEmployeeStats();
-    }
-  }, [authLoading, isAuthenticated, user, router]);
+    loadPendingTickets();
+    loadEmployeeStats();
+  }, []);
 
   const loadPendingTickets = async () => {
     try {
@@ -106,15 +92,7 @@ export default function EmployeDashboardPage() {
     }
   };
 
-  if (authLoading) {
-    return (
-      <div className="min-h-[calc(100vh-8rem)] flex items-center justify-center">
-        <Loading size="lg" />
-      </div>
-    );
-  }
-
-  if (!isAuthenticated || user?.role !== 'EMPLOYEE') {
+  if (!user) {
     return null;
   }
 

app/employe/layout.tsx

@@ -2,10 +2,10 @@
 
 import { useAuth } from "@/contexts/AuthContext";
 import { useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Loading } from "@/components/ui/Loading";
 import toast from "react-hot-toast";
-import { LogOut, Ticket, BarChart3 } from "lucide-react";
+import { LogOut, Ticket, BarChart3, User, ChevronDown } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Logo from "@/components/Logo";
@@ -18,6 +18,7 @@ export default function EmployeLayout({
   const { user, isAuthenticated, isLoading, logout } = useAuth();
   const router = useRouter();
   const pathname = usePathname();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
@@ -32,6 +33,24 @@ export default function EmployeLayout({
     }
   }, [isLoading, isAuthenticated, user, router]);
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.user-dropdown')) {
+        setDropdownOpen(false);
+      }
+    };
+
+    if (dropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dropdownOpen]);
+
   const handleLogout = async () => {
     await logout();
     router.push("/login");
@@ -107,21 +126,51 @@ export default function EmployeLayout({
                 <h1 className="text-2xl font-bold text-gray-900">
                   Thé Tip Top - Espace Employé
                 </h1>
-                <p className="text-sm text-gray-500 mt-1">
-                  Connecté en tant que{" "}
-                  <span className="font-medium">
-                    {user?.firstName} {user?.lastName}
-                  </span>
-                </p>
               </div>
             </div>
-            <button
-              onClick={handleLogout}
-              className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-            >
-              <LogOut className="w-4 h-4" />
-              Déconnexion
-            </button>
+
+            {/* User Dropdown */}
+            <div className="relative user-dropdown">
+              <button
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+                className="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-gray-100 transition-colors"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center text-white font-bold">
+                    {user?.firstName?.charAt(0)}{user?.lastName?.charAt(0)}
+                  </div>
+                  <div className="text-left">
+                    <p className="text-sm font-bold text-gray-900">
+                      {user?.firstName} {user?.lastName}
+                    </p>
+                    <p className="text-xs text-gray-500">{user?.email}</p>
+                  </div>
+                </div>
+                <ChevronDown className={`w-4 h-4 text-gray-500 transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
+              </button>
+
+              {/* Dropdown Menu */}
+              {dropdownOpen && (
+                <div className="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border border-gray-200 py-2 z-50">
+                  <Link
+                    href="/employe/profil"
+                    onClick={() => setDropdownOpen(false)}
+                    className="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 transition-colors"
+                  >
+                    <User className="w-4 h-4 text-gray-600" />
+                    <span className="text-sm font-medium text-gray-700">Profil</span>
+                  </Link>
+                  <div className="border-t border-gray-200 my-1"></div>
+                  <button
+                    onClick={handleLogout}
+                    className="w-full flex items-center gap-3 px-4 py-3 hover:bg-red-50 transition-colors text-left"
+                  >
+                    <LogOut className="w-4 h-4 text-red-600" />
+                    <span className="text-sm font-medium text-red-600">Déconnexion</span>
+                  </button>
+                </div>
+              )}
+            </div>
           </div>
         </header>
 

app/employe/profil/page.tsx

@@ -0,0 +1,233 @@
+"use client";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAuth } from "@/contexts/AuthContext";
+import { profileUpdateSchema, ProfileUpdateFormData } from "@/lib/validations";
+import { Input } from "@/components/ui/Input";
+import { Badge } from "@/components/ui/Badge";
+import { userService } from "@/services/user.service";
+import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
+import { ROUTES } from "@/utils/constants";
+import { formatDate } from "@/utils/helpers";
+
+export const dynamic = 'force-dynamic';
+
+export default function EmployeProfilePage() {
+  const { user, refreshUser } = useAuth();
+  const router = useRouter();
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<ProfileUpdateFormData>({
+    resolver: zodResolver(profileUpdateSchema),
+    defaultValues: {
+      firstName: user?.firstName || "",
+      lastName: user?.lastName || "",
+      phone: user?.phone || "",
+    },
+  });
+
+  if (!user) {
+    return null;
+  }
+
+  const onSubmit = async (data: ProfileUpdateFormData) => {
+    setIsSubmitting(true);
+    try {
+      await userService.updateProfile(data);
+      await refreshUser();
+      toast.success("Profil mis à jour avec succès");
+      setIsEditing(false);
+    } catch (error: any) {
+      toast.error(error.message || "Erreur lors de la mise à jour du profil");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleCancel = () => {
+    reset({
+      firstName: user?.firstName || "",
+      lastName: user?.lastName || "",
+      phone: user?.phone || "",
+    });
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="p-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-900 mb-6">Mon profil</h1>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {/* Profile Info Card */}
+          <div className="md:col-span-2">
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
+              <div className="px-6 py-4 border-b border-gray-200">
+                <h2 className="text-xl font-bold text-gray-900">Informations personnelles</h2>
+              </div>
+              <div className="p-6">
+                {!isEditing ? (
+                  <div className="space-y-4">
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Prénom
+                      </label>
+                      <p className="text-lg text-gray-900">{user.firstName}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Nom
+                      </label>
+                      <p className="text-lg text-gray-900">{user.lastName}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Email
+                      </label>
+                      <p className="text-lg text-gray-900">{user.email}</p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Téléphone
+                      </label>
+                      <p className="text-lg text-gray-900">
+                        {user.phone || "Non renseigné"}
+                      </p>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium text-gray-600">
+                        Rôle
+                      </label>
+                      <div className="mt-1">
+                        <Badge variant="warning">Employé</Badge>
+                      </div>
+                    </div>
+                    <div className="pt-4">
+                      <button
+                        onClick={() => setIsEditing(true)}
+                        className="bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-md"
+                      >
+                        Modifier mes informations
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+                    <Input
+                      id="firstName"
+                      type="text"
+                      label="Prénom"
+                      error={errors.firstName?.message}
+                      {...register("firstName")}
+                      required
+                    />
+                    <Input
+                      id="lastName"
+                      type="text"
+                      label="Nom"
+                      error={errors.lastName?.message}
+                      {...register("lastName")}
+                      required
+                    />
+                    <Input
+                      id="email"
+                      type="email"
+                      label="Email"
+                      value={user.email}
+                      disabled
+                      helperText="L'email ne peut pas être modifié"
+                    />
+                    <Input
+                      id="phone"
+                      type="tel"
+                      label="Téléphone"
+                      error={errors.phone?.message}
+                      {...register("phone")}
+                    />
+                    <div className="flex gap-3">
+                      <button
+                        type="submit"
+                        disabled={isSubmitting}
+                        className="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-md"
+                      >
+                        {isSubmitting ? "Enregistrement..." : "Enregistrer"}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleCancel}
+                        disabled={isSubmitting}
+                        className="border-2 border-gray-300 hover:bg-gray-100 text-gray-700 font-bold px-6 py-3 rounded-lg transition-all"
+                      >
+                        Annuler
+                      </button>
+                    </div>
+                  </form>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Account Status Card */}
+          <div>
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200">
+              <div className="px-6 py-4 border-b border-gray-200">
+                <h2 className="text-xl font-bold text-gray-900">Statut du compte</h2>
+              </div>
+              <div className="p-6 space-y-4">
+                <div>
+                  <label className="text-sm font-medium text-gray-600">
+                    Email vérifié
+                  </label>
+                  <div className="mt-1">
+                    {user.isVerified ? (
+                      <Badge variant="success">Vérifié ✓</Badge>
+                    ) : (
+                      <Badge variant="warning">Non vérifié</Badge>
+                    )}
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-gray-600">
+                    Membre depuis
+                  </label>
+                  <p className="text-sm text-gray-900 mt-1">
+                    {formatDate(user.createdAt)}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions Card */}
+            <div className="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200 mt-6">
+              <div className="px-6 py-4 border-b border-gray-200">
+                <h2 className="text-xl font-bold text-gray-900">Actions rapides</h2>
+              </div>
+              <div className="p-6 space-y-2">
+                <button
+                  onClick={() => router.push(ROUTES.EMPLOYEE_DASHBOARD)}
+                  className="w-full bg-green-600 hover:bg-green-700 text-white font-bold px-6 py-3 rounded-lg transition-all shadow-md"
+                >
+                  Dashboard
+                </button>
+                <button
+                  onClick={() => router.push("/employe/verification")}
+                  className="w-full border-2 border-green-600 text-green-600 hover:bg-green-600 hover:text-white font-bold px-6 py-3 rounded-lg transition-all"
+                >
+                  Validation des gains
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/layout-client.tsx

@@ -1,19 +1,29 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { useAuth } from "@/contexts/AuthContext";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 import CookieConsent from "@/components/CookieConsent";
 
 export default function LayoutClient({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
+  const { user } = useAuth();
 
   // Ne pas afficher Header/Footer dans l'espace admin et employé
   const isAdminRoute = pathname?.startsWith("/admin");
   const isEmployeRoute = pathname?.startsWith("/employe");
   const isHomePage = pathname === "/";
+  const isLoginPage = pathname === "/login" || pathname === "/register";
 
-  if (isAdminRoute || isEmployeRoute) {
+  // Vérifier si l'utilisateur est admin ou employé
+  const userRole = user?.role?.toUpperCase();
+  const isAdminOrEmployee = userRole === "ADMIN" || userRole === "EMPLOYEE";
+
+  // Ne pas afficher le header si:
+  // 1. On est sur une route admin/employé
+  // 2. On est sur login/register ET l'utilisateur est admin/employé (en cours de redirection)
+  if (isAdminRoute || isEmployeRoute || (isLoginPage && isAdminOrEmployee)) {
     return <>{children}</>;
   }
 

contexts/AuthContext.tsx

@@ -72,13 +72,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       toast.success('Connexion réussie !');
 
       // Redirect based on role (support both uppercase and lowercase)
+      // Use replace() to remove login page from history
       const role = response.user.role.toUpperCase();
       if (role === 'ADMIN') {
-        router.push(ROUTES.ADMIN_DASHBOARD);
+        router.replace(ROUTES.ADMIN_DASHBOARD);
       } else if (role === 'EMPLOYEE') {
-        router.push(ROUTES.EMPLOYEE_DASHBOARD);
+        router.replace(ROUTES.EMPLOYEE_DASHBOARD);
       } else {
-        router.push(ROUTES.CLIENT_DASHBOARD);
+        router.replace(ROUTES.CLIENT_DASHBOARD);
       }
     } catch (error: any) {
       toast.error(error.message || 'Erreur lors de la connexion');
@@ -123,13 +124,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       toast.success('Connexion avec Google réussie !');
 
       // Redirect based on role (support both uppercase and lowercase)
+      // Use replace() to remove login page from history
       const role = response.user.role.toUpperCase();
       if (role === 'ADMIN') {
-        router.push(ROUTES.ADMIN_DASHBOARD);
+        router.replace(ROUTES.ADMIN_DASHBOARD);
       } else if (role === 'EMPLOYEE') {
-        router.push(ROUTES.EMPLOYEE_DASHBOARD);
+        router.replace(ROUTES.EMPLOYEE_DASHBOARD);
       } else {
-        router.push(ROUTES.CLIENT_DASHBOARD);
+        router.replace(ROUTES.CLIENT_DASHBOARD);
       }
     } catch (error: any) {
       toast.error(error.message || 'Erreur lors de la connexion avec Google');
@@ -146,13 +148,14 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
       toast.success('Connexion avec Facebook réussie !');
 
       // Redirect based on role (support both uppercase and lowercase)
+      // Use replace() to remove login page from history
       const role = response.user.role.toUpperCase();
       if (role === 'ADMIN') {
-        router.push(ROUTES.ADMIN_DASHBOARD);
+        router.replace(ROUTES.ADMIN_DASHBOARD);
       } else if (role === 'EMPLOYEE') {
-        router.push(ROUTES.EMPLOYEE_DASHBOARD);
+        router.replace(ROUTES.EMPLOYEE_DASHBOARD);
       } else {
-        router.push(ROUTES.CLIENT_DASHBOARD);
+        router.replace(ROUTES.CLIENT_DASHBOARD);
       }
     } catch (error: any) {
       toast.error(error.message || 'Erreur lors de la connexion avec Facebook');