refactor(style): apply new design

src/features/admin/components/AdminHeader.js

@@ -3,11 +3,12 @@
 import { Fragment } from 'react';
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@zen/core/shared/icons';
-import { useRouter } from 'next/navigation';
+import { useRouter, usePathname } from 'next/navigation';
 import { useTheme, getThemeIcon } from '@zen/core/themes';
 
-const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN' }) => {
+const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN', navigationSections = [] }) => {
     const router = useRouter();
+    const pathname = usePathname();
 
     const getImageUrl = (imageKey) => {
         if (!imageKey) return null;
@@ -47,14 +48,28 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
     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 = [];
     const imageUrl = getImageUrl(user?.image);
     const userInitials = getUserInitials(user?.name);
 
     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 lg:justify-end px-4 lg:px-6 py-2 w-full">
-                {/* Left section — Mobile menu button + Logo */}
+            <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)}
@@ -68,6 +83,17 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
                     <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">

src/features/admin/components/AdminPagesLayout.js

@@ -17,7 +17,7 @@ export default function AdminPagesLayout({ children, user, onLogout, appName, en
         navigationSections={navigationSections}
       />
       <div className="flex-1 flex flex-col min-w-0">
-        <AdminHeader isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} user={user} onLogout={onLogout} appName={appName} />
+        <AdminHeader isMobileMenuOpen={isMobileMenuOpen} setIsMobileMenuOpen={setIsMobileMenuOpen} user={user} onLogout={onLogout} appName={appName} navigationSections={navigationSections} />
         <main className="flex-1 overflow-y-auto bg-neutral-50 dark:bg-black">
           <div className="px-8 py-7 pb-32 max-w-[1400px] mx-auto">
             {children}

src/features/admin/components/AdminSidebar.js

@@ -201,7 +201,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
                 {/* Logo */}
                 <Link href="/admin" className="px-4 h-12 flex items-center justify-start gap-2 border-b border-neutral-200 dark:border-neutral-800/70">
                     <h1 className="text-neutral-900 dark:text-white font-semibold">{appName}</h1>
-                    <span className="bg-red-700/10 border border-red-600/20 text-red-600 uppercase text-[10px] leading-none px-2 py-1 rounded-lg font-semibold">
+                    <span className="bg-red-700/10 border border-red-600/20 text-red-600 uppercase text-[10px] leading-none px-2 py-1 rounded font-semibold">
                         Admin
                     </span>
                 </Link>