refactor(admin): simplify AdminHeader component by removing inline logic

src/features/admin/components/AdminHeader.js

@@ -1,181 +1,29 @@
 'use client';
 
-import { Fragment } from 'react';
+import { useRouter } from 'next/navigation';
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
+import { Button } from '@zen/core/shared/components';
-import { ChevronDownIcon, User03Icon } from '@zen/core/shared/icons';
-import { UserAvatar } from '@zen/core/shared/components';
-import { useRouter, usePathname } from 'next/navigation';
-import { useTheme, getThemeIcon } from '@zen/core/themes';
 
-const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
+const AdminHeader = ({ title, description, backHref, backLabel = '← Retour', action }) => {
-    const router = useRouter();
+  const router = useRouter();
-    const pathname = usePathname();
 
-    const handleLogout = async () => {
+  return (
-        try {
+    <div className="flex items-center justify-between">
-            if (onLogout) {
+      <div className="flex items-center gap-3">
-                const result = await onLogout();
+        {backHref && (
-                if (result && result.success) {
+          <Button variant="secondary" size="sm" onClick={() => router.push(backHref)}>
-                    router.push('/auth/login');
+            {backLabel}
-                } else {
+          </Button>
-                    console.error('Logout failed:', result?.error);
+        )}
-                    router.push('/auth/login');
+        <div>
-                }
+          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">{title}</h1>
-            } else {
+          {description && (
-                router.push('/auth/login');
+            <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">{description}</p>
-            }
+          )}
-        } catch (error) {
+        </div>
-            console.error('Logout error:', error);
+      </div>
-            router.push('/auth/login');
+      {action}
-        }
+    </div>
-    };
+  );
-
-    const { theme, toggle, systemIsDark } = useTheme();
-    const ThemeIcon = getThemeIcon(theme, systemIsDark);
-    const themeLabel = theme === 'light' ? 'Mode clair' : theme === 'dark' ? 'Mode sombre' : 'Thème système';
-
-    const currentPageName = (() => {
-        for (const section of navigationSections) {
-            for (const item of section.items) {
-                if (pathname === item.href || pathname.startsWith(item.href + '/')) {
-                    return item.name;
-                }
-            }
-            if (section.items.length === 1 && (pathname === section.items[0].href || pathname.startsWith(section.items[0].href + '/'))) {
-                return section.title;
-            }
-        }
-        return null;
-    })();
-
-    const quickLinks = [];
-
-    return (
-        <header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-12 flex items-center w-full">
-            <div className="flex items-center justify-between px-4 lg:px-6 py-2 w-full">
-                {/* Left section — Mobile menu button + Logo / Desktop breadcrumb */}
-                <div className="flex items-center space-x-3 lg:hidden">
-                    <button
-                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                        className="p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-700/50 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors duration-200"
-                        aria-label="Toggle menu"
-                    >
-                        <svg className={`h-5 w-5 transition-transform duration-200 ${isMobileMenuOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
-                        </svg>
-                    </button>
-                    <h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
-                </div>
-
-                {/* Desktop breadcrumb */}
-                {currentPageName && (
-                    <div className="hidden lg:flex items-center gap-1.5 text-[13px]">
-                        <span className="text-neutral-500 dark:text-neutral-400">{appName}</span>
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-400 dark:text-neutral-600 flex-shrink-0">
-                            <polyline points="9 18 15 12 9 6" />
-                        </svg>
-                        <span className="text-neutral-900 dark:text-white font-medium">{currentPageName}</span>
-                    </div>
-                )}
-
-                {/* Right section — Quick links + Profile */}
-                <div className="flex items-center gap-3 sm:gap-4">
-                    <nav className="hidden sm:flex items-center gap-4 lg:gap-6">
-                        {quickLinks.map((link) => (
-                            <a
-                                key={link.name}
-                                href={link.href}
-                                className="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
-                            >
-                                {link.name}
-                            </a>
-                        ))}
-                    </nav>
-
-                    {/* User Profile Menu */}
-                    <Menu as="div" className="relative">
-                        <MenuButton className="cursor-pointer flex items-center gap-2.5 px-2.5 py-1.5 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200 outline-none group">
-                            <UserAvatar user={user} size="sm" />
-                            {/* Name — desktop only */}
-                            <span className="hidden sm:block text-[13px] leading-none font-medium text-neutral-800 dark:text-white">
-                                {user?.name || 'User'}
-                            </span>
-                            <ChevronDownIcon className="w-3.5 h-3.5 shrink-0 text-neutral-400 dark:text-neutral-600 transition-transform duration-200 group-data-open:rotate-180" />
-                        </MenuButton>
-
-                        <Transition
-                            as={Fragment}
-                            enter="transition ease-out duration-150"
-                            enterFrom="opacity-0 translate-y-1"
-                            enterTo="opacity-100 translate-y-0"
-                            leave="transition ease-in duration-100"
-                            leaveFrom="opacity-100 translate-y-0"
-                            leaveTo="opacity-0 translate-y-1"
-                        >
-                            <MenuItems className="absolute right-0 mt-4 w-48 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
-                                <div className="p-1.5 flex flex-col gap-0.5">
-                                    {/* Quick links — mobile only */}
-                                    {quickLinks.length > 0 && (
-                                        <>
-                                            {quickLinks.map((link) => (
-                                                <MenuItem key={link.name}>
-                                                    <a
-                                                        href={link.href}
-                                                        className="sm:hidden flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
-                                                    >
-                                                        <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                                        </svg>
-                                                        {link.name}
-                                                    </a>
-                                                </MenuItem>
-                                            ))}
-                                            <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
-                                        </>
-                                    )}
-
-                                    {/* Profile */}
-                                    <MenuItem>
-                                        <a
-                                            href="/admin/profile"
-                                            className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
-                                        >
-                                            <User03Icon className="w-4 h-4 shrink-0" />
-                                            Mon profil
-                                        </a>
-                                    </MenuItem>
-
-                                    {/* Theme — pas de MenuItem pour ne pas fermer le menu au clic */}
-                                    <button
-                                        onClick={toggle}
-                                        className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-150"
-                                    >
-                                        <ThemeIcon className="w-4 h-4 shrink-0" />
-                                        {themeLabel}
-                                    </button>
-
-                                    <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
-
-                                    {/* Logout */}
-                                    <MenuItem>
-                                        <button
-                                            onClick={handleLogout}
-                                            className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-red-500 dark:text-red-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10"
-                                        >
-                                            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                                            </svg>
-                                            Se déconnecter
-                                        </button>
-                                    </MenuItem>
-                                </div>
-                            </MenuItems>
-                        </Transition>
-                    </Menu>
-                </div>
-            </div>
-        </header>
-    );
 };
 
 export default AdminHeader;

src/features/admin/components/AdminShell.js

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import AdminSidebar from './AdminSidebar.js';
-import AdminHeader from './AdminHeader.js';
+import AdminTop from './AdminTop.js';
 
 export default function AdminShell({ children, user, onLogout, appName, navigationSections }) {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -16,7 +16,7 @@ export default function AdminShell({ children, user, onLogout, appName, navigati
         navigationSections={navigationSections}
       />
       <div className="flex-1 flex flex-col min-w-0">
-        <AdminHeader
+        <AdminTop
           isMobileMenuOpen={isMobileMenuOpen}
           setIsMobileMenuOpen={setIsMobileMenuOpen}
           user={user}

src/features/admin/components/AdminTop.js

@@ -0,0 +1,181 @@
+'use client';
+
+import { Fragment } from 'react';
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
+import { ChevronDownIcon, User03Icon } from '@zen/core/shared/icons';
+import { UserAvatar } from '@zen/core/shared/components';
+import { useRouter, usePathname } from 'next/navigation';
+import { useTheme, getThemeIcon } from '@zen/core/themes';
+
+const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const handleLogout = async () => {
+        try {
+            if (onLogout) {
+                const result = await onLogout();
+                if (result && result.success) {
+                    router.push('/auth/login');
+                } else {
+                    console.error('Logout failed:', result?.error);
+                    router.push('/auth/login');
+                }
+            } else {
+                router.push('/auth/login');
+            }
+        } catch (error) {
+            console.error('Logout error:', error);
+            router.push('/auth/login');
+        }
+    };
+
+    const { theme, toggle, systemIsDark } = useTheme();
+    const ThemeIcon = getThemeIcon(theme, systemIsDark);
+    const themeLabel = theme === 'light' ? 'Mode clair' : theme === 'dark' ? 'Mode sombre' : 'Thème système';
+
+    const currentPageName = (() => {
+        for (const section of navigationSections) {
+            for (const item of section.items) {
+                if (pathname === item.href || pathname.startsWith(item.href + '/')) {
+                    return item.name;
+                }
+            }
+            if (section.items.length === 1 && (pathname === section.items[0].href || pathname.startsWith(section.items[0].href + '/'))) {
+                return section.title;
+            }
+        }
+        return null;
+    })();
+
+    const quickLinks = [];
+
+    return (
+        <header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-12 flex items-center w-full">
+            <div className="flex items-center justify-between px-4 lg:px-6 py-2 w-full">
+                {/* Left section — Mobile menu button + Logo / Desktop breadcrumb */}
+                <div className="flex items-center space-x-3 lg:hidden">
+                    <button
+                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                        className="p-2 rounded-lg bg-neutral-100 dark:bg-neutral-900/50 border border-neutral-200 dark:border-neutral-700/50 text-neutral-900 dark:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors duration-200"
+                        aria-label="Toggle menu"
+                    >
+                        <svg className={`h-5 w-5 transition-transform duration-200 ${isMobileMenuOpen ? 'rotate-90' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
+                        </svg>
+                    </button>
+                    <h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
+                </div>
+
+                {/* Desktop breadcrumb */}
+                {currentPageName && (
+                    <div className="hidden lg:flex items-center gap-1.5 text-[13px]">
+                        <span className="text-neutral-500 dark:text-neutral-400">{appName}</span>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-neutral-400 dark:text-neutral-600 flex-shrink-0">
+                            <polyline points="9 18 15 12 9 6" />
+                        </svg>
+                        <span className="text-neutral-900 dark:text-white font-medium">{currentPageName}</span>
+                    </div>
+                )}
+
+                {/* Right section — Quick links + Profile */}
+                <div className="flex items-center gap-3 sm:gap-4">
+                    <nav className="hidden sm:flex items-center gap-4 lg:gap-6">
+                        {quickLinks.map((link) => (
+                            <a
+                                key={link.name}
+                                href={link.href}
+                                className="text-sm text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors duration-200"
+                            >
+                                {link.name}
+                            </a>
+                        ))}
+                    </nav>
+
+                    {/* User Profile Menu */}
+                    <Menu as="div" className="relative">
+                        <MenuButton className="cursor-pointer flex items-center gap-2.5 px-2.5 py-1.5 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200 outline-none group">
+                            <UserAvatar user={user} size="sm" />
+                            {/* Name — desktop only */}
+                            <span className="hidden sm:block text-[13px] leading-none font-medium text-neutral-800 dark:text-white">
+                                {user?.name || 'User'}
+                            </span>
+                            <ChevronDownIcon className="w-3.5 h-3.5 shrink-0 text-neutral-400 dark:text-neutral-600 transition-transform duration-200 group-data-open:rotate-180" />
+                        </MenuButton>
+
+                        <Transition
+                            as={Fragment}
+                            enter="transition ease-out duration-150"
+                            enterFrom="opacity-0 translate-y-1"
+                            enterTo="opacity-100 translate-y-0"
+                            leave="transition ease-in duration-100"
+                            leaveFrom="opacity-100 translate-y-0"
+                            leaveTo="opacity-0 translate-y-1"
+                        >
+                            <MenuItems className="absolute right-0 mt-4 w-48 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
+                                <div className="p-1.5 flex flex-col gap-0.5">
+                                    {/* Quick links — mobile only */}
+                                    {quickLinks.length > 0 && (
+                                        <>
+                                            {quickLinks.map((link) => (
+                                                <MenuItem key={link.name}>
+                                                    <a
+                                                        href={link.href}
+                                                        className="sm:hidden flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
+                                                    >
+                                                        <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                                        </svg>
+                                                        {link.name}
+                                                    </a>
+                                                </MenuItem>
+                                            ))}
+                                            <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
+                                        </>
+                                    )}
+
+                                    {/* Profile */}
+                                    <MenuItem>
+                                        <a
+                                            href="/admin/profile"
+                                            className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 transition-colors duration-[120ms] ease-out data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
+                                        >
+                                            <User03Icon className="w-4 h-4 shrink-0" />
+                                            Mon profil
+                                        </a>
+                                    </MenuItem>
+
+                                    {/* Theme — pas de MenuItem pour ne pas fermer le menu au clic */}
+                                    <button
+                                        onClick={toggle}
+                                        className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-neutral-500 dark:text-neutral-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 hover:text-amber-500 dark:hover:text-amber-400 transition-colors duration-150"
+                                    >
+                                        <ThemeIcon className="w-4 h-4 shrink-0" />
+                                        {themeLabel}
+                                    </button>
+
+                                    <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
+
+                                    {/* Logout */}
+                                    <MenuItem>
+                                        <button
+                                            onClick={handleLogout}
+                                            className="cursor-pointer w-full flex items-center gap-2 px-[7px] py-[10px] rounded-lg text-[13px] leading-none text-red-500 dark:text-red-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10"
+                                        >
+                                            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                                            </svg>
+                                            Se déconnecter
+                                        </button>
+                                    </MenuItem>
+                                </div>
+                            </MenuItems>
+                        </Transition>
+                    </Menu>
+                </div>
+            </div>
+        </header>
+    );
+};
+
+export default AdminTop;

src/features/admin/components/index.js

@@ -2,5 +2,6 @@
 
 export { default as AdminShell } from './AdminShell.js';
 export { default as AdminSidebar } from './AdminSidebar.js';
+export { default as AdminTop } from './AdminTop.js';
 export { default as AdminHeader } from './AdminHeader.js';
 export { default as ThemeToggle } from './ThemeToggle.js';

src/features/admin/pages/DashboardPage.client.js

@@ -1,6 +1,7 @@
 'use client';
 
 import { getWidgets } from '../registry.js';
+import AdminHeader from '../components/AdminHeader.js';
 
 export default function DashboardPage({ stats }) {
   const loading = stats === null || stats === undefined;
@@ -8,10 +9,7 @@ export default function DashboardPage({ stats }) {
 
   return (
     <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <div>
+      <AdminHeader title="Tableau de bord" description="Vue d'ensemble de votre application" />
-        <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Tableau de bord</h1>
-        <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">Vue d'ensemble de votre application</p>
-      </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
         {widgets.map(({ id, Component }) => (
           <Component key={id} data={loading ? null : (stats[id] ?? null)} loading={loading} />

src/features/admin/pages/ProfilePage.client.js

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Card, Input, Button } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
+import AdminHeader from '../components/AdminHeader.js';
 
 const ProfilePage = ({ user: initialUser }) => {
     const toast = useToast();
@@ -181,17 +182,7 @@ const ProfilePage = ({ user: initialUser }) => {
 
     return (
         <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-            {/* Header */}
+            <AdminHeader title="Mon profil" description="Gérez les informations de votre compte" />
-            <div className="flex items-center justify-between">
-                <div>
-                    <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">
-                        Mon profil
-                    </h1>
-                    <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">
-                        Gérez les informations de votre compte
-                    </p>
-                </div>
-            </div>
 
             {/* Content */}
             <div className="flex flex-col gap-6">

src/features/admin/pages/RoleEditPage.client.js

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Card, Button, Input, Textarea, Switch } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 import { getPermissionGroups } from '@zen/core/users/constants';
+import AdminHeader from '../components/AdminHeader.js';
 
 const PERMISSION_GROUPS = getPermissionGroups();
 
@@ -115,17 +116,11 @@ const RoleEditPage = ({ roleId }) => {
 
   return (
     <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <div className="flex items-center gap-3">
+      <AdminHeader
-        <Button variant="secondary" size="sm" onClick={() => router.push('/admin/roles')}>
+        title={title}
-          ← Retour
+        description={isSystem ? 'Rôle système — le nom ne peut pas être modifié' : undefined}
-        </Button>
+        backHref="/admin/roles"
-        <div>
+      />
-          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">{title}</h1>
-          {isSystem && (
-            <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">Rôle système — le nom ne peut pas être modifié</p>
-          )}
-        </div>
-      </div>
 
       <form onSubmit={handleSubmit} className="flex flex-col gap-6">
         <Card variant="default" padding="md">

src/features/admin/pages/RolesPage.client.js

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Card, Table, Button, Badge } from '@zen/core/shared/components';
 import { PencilEdit01Icon, Cancel01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
+import AdminHeader from '../components/AdminHeader.js';
 
 const RolesPageClient = () => {
   const router = useRouter();
@@ -146,21 +147,15 @@ const RolesPage = () => {
 
   return (
     <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <div className="flex items-center justify-between">
+      <AdminHeader
-        <div>
+        title="Rôles"
-          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Rôles</h1>
+        description="Gérez les rôles et leurs permissions"
-          <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">
+        action={
-            Gérez les rôles et leurs permissions
+          <Button variant="primary" size="sm" onClick={() => router.push('/admin/roles/new')}>
-          </p>
+            Nouveau rôle
-        </div>
+          </Button>
-        <Button
+        }
-          variant="primary"
+      />
-          size="sm"
-          onClick={() => router.push('/admin/roles/new')}
-        >
-          Nouveau rôle
-        </Button>
-      </div>
       <RolesPageClient />
     </div>
   );

src/features/admin/pages/UserEditPage.client.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button, Card, Input, Select, Loading, TagInput } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
+import AdminHeader from '../components/AdminHeader.js';
 
 const UserEditPage = ({ userId }) => {
   const router = useRouter();
@@ -158,15 +159,12 @@ const UserEditPage = ({ userId }) => {
   if (!userData) {
     return (
       <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-        <div className="flex items-center justify-between">
+        <AdminHeader
-          <div>
+          title="Modifier l'utilisateur"
-            <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
+          description="Utilisateur introuvable"
-            <p className="mt-1 text-xs text-neutral-400">Utilisateur introuvable</p>
+          backHref="/admin/users"
-          </div>
+          backLabel="← Retour aux utilisateurs"
-          <Button variant="secondary" size="sm" onClick={() => router.push('/admin/users')}>
+        />
-            ← Retour aux utilisateurs
-          </Button>
-        </div>
         <Card>
           <div className="bg-red-500/10 border border-red-500/20 text-red-400 px-4 py-3 rounded-lg">
             <p className="font-medium">Utilisateur introuvable</p>
@@ -179,15 +177,12 @@ const UserEditPage = ({ userId }) => {
 
   return (
     <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-      <div className="flex items-center justify-between">
+      <AdminHeader
-        <div>
+        title="Modifier l'utilisateur"
-          <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Modifier l'utilisateur</h1>
+        description={userData.email}
-          <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">{userData.email}</p>
+        backHref="/admin/users"
-        </div>
+        backLabel="← Retour aux utilisateurs"
-        <Button variant="secondary" size="sm" onClick={() => router.push('/admin/users')}>
+      />
-          ← Retour aux utilisateurs
-        </Button>
-      </div>
 
       <form onSubmit={handleSubmit} className="flex flex-col gap-6">
         <Card variant="default" padding="md">

src/features/admin/pages/UsersPage.client.js

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Card, Table, Badge, StatusBadge, Button, UserAvatar } from '@zen/core/shared/components';
 import { PencilEdit01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
+import AdminHeader from '../components/AdminHeader.js';
 
 const UsersPageClient = () => {
     const router = useRouter();
@@ -211,14 +212,7 @@ const UsersPageClient = () => {
 const UsersPage = () => {
     return (
         <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
-            <div className="flex items-center justify-between">
+            <AdminHeader title="Utilisateurs" description="Gérez les comptes utilisateurs" />
-                <div>
-                    <h1 className="text-lg sm:text-xl font-semibold text-neutral-900 dark:text-white">Utilisateurs</h1>
-                    <p className="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400">
-                        Gérez les comptes utilisateurs
-                    </p>
-                </div>
-            </div>
             <UsersPageClient />
         </div>
     );