feat(admin): add bottom navigation items and settings page to admin panel

src/features/admin/components/AdminShell.js

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

src/features/admin/components/AdminSidebar.js

@@ -20,7 +20,7 @@ function resolveIcon(iconNameOrComponent) {
     return Icons.DashboardSquare03Icon;
 }
 
-const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledModules, navigationSections: serverNavigationSections }) => {
+const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledModules, navigationSections: serverNavigationSections, bottomNavItems = [] }) => {
     const pathname = usePathname();
 
     const [collapsedSections, setCollapsedSections] = useState(() => {
@@ -190,9 +190,31 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
                 </Link>
 
                 {/* Navigation */}
-                <nav className="flex-1 px-2 py-2 overflow-y-auto flex flex-col pb-12">
+                <nav className="flex-1 px-2 py-2 overflow-y-auto flex flex-col">
                     {navigationSections.map(renderNavSection)}
                 </nav>
+
+                {/* Bottom pinned items */}
+                {bottomNavItems.length > 0 && (
+                    <div className="px-2 py-2 border-t border-neutral-200 dark:border-neutral-800/70 shrink-0">
+                        {bottomNavItems.map((item) => {
+                            const Icon = resolveIcon(item.icon);
+                            return (
+                                <Link
+                                    key={item.href}
+                                    href={item.href}
+                                    onClick={handleMobileLinkClick}
+                                    className={`${base} ${item.current ? parentActif : inactive}`}
+                                >
+                                    <div className="flex items-center gap-2">
+                                        <Icon className="h-[15px] w-[15px] flex-shrink-0" />
+                                        <span>{item.name}</span>
+                                    </div>
+                                </Link>
+                            );
+                        })}
+                    </div>
+                )}
             </div>
         </>
     );