@djangocfg/layouts 1.2.8 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,9 +53,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.8",
-    "@djangocfg/og-image": "^1.2.8",
-    "@djangocfg/ui": "^1.2.8",
+    "@djangocfg/api": "^1.2.10",
+    "@djangocfg/og-image": "^1.2.10",
+    "@djangocfg/ui": "^1.2.10",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -76,7 +76,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.8",
+    "@djangocfg/typescript-config": "^1.2.10",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -32,7 +32,7 @@ import { Seo, PageProgress, ErrorBoundary } from './components';
 import { PublicLayout } from './layouts/PublicLayout';
 import { PrivateLayout } from './layouts/PrivateLayout';
 import { AuthLayout } from './layouts/AuthLayout';
-import { CfgLayout } from './layouts/CfgLayout';
+import { AdminLayout } from './layouts/AdminLayout';
 import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
 import type { AppLayoutConfig } from './types';
@@ -97,15 +97,47 @@ function LayoutRouter({
     setIsMounted(true);
   }, []);
 
-  const isAdminMode = forceLayout === 'admin';
   // If layout is disabled, render children directly (providers still active!)
-  if (disableLayout || isAdminMode) {
+  if (disableLayout) {
     return <>{children}</>;
   }
 
   // Check route type (synchronous - works with SSR)
   const isAuthRoute = config.routes.detectors.isAuthRoute(router.pathname);
   const isPrivateRoute = config.routes.detectors.isPrivateRoute(router.pathname);
+  const isAdminRoute = config.routes.detectors.isAdminRoute(router.pathname);
+
+  // Admin routes: Always show loading during SSR and initial client render
+  // This prevents hydration mismatch when isAuthenticated differs between server/client
+  if (isAdminRoute && !forceLayout) {
+    if (!isMounted || isLoading) {
+      return (
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-muted-foreground">Loading...</div>
+        </div>
+      );
+    }
+
+    // After mount: check authentication
+    if (!isAuthenticated) {
+      // Redirect to auth
+      return (
+        <AuthLayout
+          termsUrl={config.auth?.termsUrl}
+          privacyUrl={config.auth?.privacyUrl}
+          supportUrl={config.auth?.supportUrl}
+          enablePhoneAuth={config.auth?.enablePhoneAuth}
+        />
+      );
+    }
+
+    // Admin routes use AdminLayout with ParentSync
+    return (
+      <AdminLayout enableParentSync={true}>
+        {children}
+      </AdminLayout>
+    );
+  }
 
   // Private routes: Always show loading during SSR and initial client render
   // This prevents hydration mismatch when isAuthenticated differs between server/client
@@ -138,8 +170,8 @@ function LayoutRouter({
   const getLayoutMode = (): 'public' | 'auth' | 'admin' => {
     if (forceLayout === 'auth') return 'auth';
     if (forceLayout === 'public') return 'public';
+    if (forceLayout === 'admin') return 'admin';
     if (isAuthRoute) return 'auth';
-    if (isAdminMode) return 'admin';
     return 'public';
   };
 
@@ -148,8 +180,11 @@ function LayoutRouter({
   // Render appropriate layout
   switch (layoutMode) {
     case 'admin':
-      return <CfgLayout>{children}</CfgLayout>;
-      break;
+      return (
+        <AdminLayout enableParentSync={true}>
+          {children}
+        </AdminLayout>
+      );
     // Public routes: render immediately (SSR enabled)
     case 'public':
       return <PublicLayout>{children}</PublicLayout>;
@@ -209,8 +244,31 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
   const supportEmail = config.errors?.supportEmail;
   const onError = config.errors?.onError;
 
-  // Determine if admin mode is enabled (Django CFG iframe integration)
-  const isAdminMode = forceLayout === 'admin';
+  const appContent = (
+    <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
+      {/* SEO Meta Tags */}
+      <Seo
+        pageConfig={{
+          title: config.app.name,
+          description: config.app.description,
+          ogImage: {
+            title: config.app.name,
+            subtitle: config.app.description,
+          },
+        }}
+        icons={config.app.icons}
+        siteUrl={config.app.siteUrl}
+      />
+
+      {/* Loading Progress Bar */}
+      <PageProgress />
+
+      {/* Smart Layout Router */}
+      <LayoutRouter disableLayout={disableLayout} forceLayout={forceLayout} config={config}>
+        {children}
+      </LayoutRouter>
+    </AppContextProvider>
+  );
 
   const content = (
     <>
@@ -222,33 +280,7 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
       )}
 
       <CoreProviders config={config}>
-        {/* CfgLayout must be inside CoreProviders to access AuthProvider */}
-        {/* Only enable ParentSync when in admin mode */}
-        <CfgLayout enableParentSync={isAdminMode}>
-          <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
-            {/* SEO Meta Tags */}
-            <Seo
-              pageConfig={{
-                title: config.app.name,
-                description: config.app.description,
-                ogImage: {
-                  title: config.app.name,
-                  subtitle: config.app.description,
-                },
-              }}
-              icons={config.app.icons}
-              siteUrl={config.app.siteUrl}
-            />
-
-            {/* Loading Progress Bar */}
-            <PageProgress />
-
-            {/* Smart Layout Router */}
-            <LayoutRouter disableLayout={disableLayout} forceLayout={forceLayout} config={config}>
-              {children}
-            </LayoutRouter>
-          </AppContextProvider>
-        </CfgLayout>
+        {appContent}
       </CoreProviders>
     </>
   );

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-10-28T04:50:15.743Z
+ * Last updated: 2025-10-29T03:56:18.725Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.8"
+    "version": "1.2.10"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.8"
+    "version": "1.2.10"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.8"
+    "version": "1.2.10"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.8"
+    "version": "1.2.10"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.8"
+    "version": "1.2.10"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.8"
+    "version": "1.2.10"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.8"
+    "version": "1.2.10"
   }
 ];
 

package/src/layouts/AppLayout/index.ts

@@ -30,14 +30,14 @@ export { PublicLayout } from './layouts/PublicLayout';
 export { PrivateLayout } from './layouts/PrivateLayout';
 export { AuthLayout } from './layouts/AuthLayout';
 
-// CfgLayout - Django CFG iframe integration
-export { CfgLayout } from './layouts/CfgLayout';
-export { useCfgApp, useApp } from './layouts/CfgLayout';
-export { ParentSync, AuthStatusSync } from './layouts/CfgLayout';
+// AdminLayout - Django CFG iframe integration
+export { AdminLayout } from './layouts/AdminLayout';
+export { useCfgApp, useApp } from './layouts/AdminLayout';
+export { ParentSync, AuthStatusSync } from './layouts/AdminLayout';
 export type {
-  CfgLayoutConfig,
+  AdminLayoutConfig,
   UseCfgAppReturn,
   UseCfgAppOptions,
   UseAppReturn,
   UseAppOptions
-} from './layouts/CfgLayout';
+} from './layouts/AdminLayout';

package/src/layouts/AppLayout/layouts/{CfgLayout/CfgLayout.tsx → AdminLayout/AdminLayout.tsx}

@@ -1,5 +1,5 @@
 // ============================================================================
-// CfgLayout - Django CFG Layout with iframe Integration
+// AdminLayout - Django CFG Layout with iframe Integration
 // ============================================================================
 // Universal layout component that handles:
 // - iframe embedding detection
@@ -15,14 +15,16 @@
 'use client';
 
 import React, { ReactNode } from 'react';
+import { ShieldAlert } from 'lucide-react';
 import { ParentSync } from './components';
 import { useCfgApp } from './hooks';
-import type { CfgLayoutConfig } from './types';
+import type { AdminLayoutConfig } from './types';
 import { api } from '@djangocfg/api';
+import { useAuth } from '../../../../auth';
 
-export interface CfgLayoutProps {
+export interface AdminLayoutProps {
   children: ReactNode;
-  config?: CfgLayoutConfig;
+  config?: AdminLayoutConfig;
   /**
    * Whether to render ParentSync component
    * Set to false if you want to handle sync manually
@@ -32,7 +34,7 @@ export interface CfgLayoutProps {
 }
 
 /**
- * CfgLayout - Universal Layout Component for Django CFG
+ * AdminLayout - Universal Layout Component for Django CFG
  *
  * Provides iframe integration features:
  * - Auto-detects iframe embedding
@@ -44,16 +46,16 @@ export interface CfgLayoutProps {
  * Usage:
  * ```tsx
  * // Wrap your app in _app.tsx - no config needed!
- * <CfgLayout>
+ * <AdminLayout>
  *   <AppLayout config={appLayoutConfig}>
  *     <Component {...pageProps} />
  *   </AppLayout>
- * </CfgLayout>
+ * </AdminLayout>
  * ```
  *
  * Or with custom auth handler:
  * ```tsx
- * <CfgLayout config={{
+ * <AdminLayout config={{
  *   onAuthTokenReceived: (authToken, refreshToken) => {
  *     // Custom logic before/after setting tokens
  *     console.log('Tokens received');
@@ -62,12 +64,12 @@ export interface CfgLayoutProps {
  *   <AppLayout config={appLayoutConfig}>
  *     <Component {...pageProps} />
  *   </AppLayout>
- * </CfgLayout>
+ * </AdminLayout>
  * ```
  *
  * Use useCfgApp hook directly:
  * ```tsx
- * import { useCfgApp } from '@djangocfg/layouts/CfgLayout';
+ * import { useCfgApp } from '@djangocfg/layouts/AdminLayout';
  *
  * function MyComponent() {
  *   const { isEmbedded, disableLayout, parentTheme } = useCfgApp();
@@ -75,11 +77,13 @@ export interface CfgLayoutProps {
  * }
  * ```
  */
-export function CfgLayout({
+export function AdminLayout({
   children,
   config,
   enableParentSync = true
-}: CfgLayoutProps) {
+}: AdminLayoutProps) {
+  const { user } = useAuth();
+
   // useCfgApp hook is called here to initialize iframe communication
   // Automatically sets tokens in API client when received from parent
   const { isEmbedded } = useCfgApp({
@@ -94,13 +98,35 @@ export function CfgLayout({
     }
   });
 
+  // Check if user has staff or superuser privileges
+  const hasAdminAccess = user?.is_staff || user?.is_superuser;
+
+  // Only render AdminLayout features for staff/superuser
+  if (!hasAdminAccess) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="text-center space-y-4 p-8">
+          <div className="flex justify-center">
+            <ShieldAlert className="w-16 h-16 text-destructive" />
+          </div>
+          <h1 className="text-2xl font-bold text-foreground">Access Denied</h1>
+          <p className="text-muted-foreground max-w-md">
+            You don't have permission to access this admin panel.
+            <br />
+            Staff or superuser privileges are required.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       {/* ParentSync handles theme sync and auth status reporting */}
       {enableParentSync && <ParentSync />}
 
       {/* Apply padding only when NOT in iframe */}
-      <div className={isEmbedded ? '' : 'p-6'}>
+      <div className="p-6">
         {children}
       </div>
     </>

package/src/layouts/AppLayout/layouts/{CfgLayout → AdminLayout}/README.md

@@ -1,8 +1,8 @@
-# CfgLayout - Django CFG Layout with iframe Integration
+# AdminLayout - Django CFG Layout with iframe Integration
 
 Universal layout component for Django CFG applications that handles iframe embedding, theme synchronization, and authentication communication.
 
-**Note:** CfgLayout is now integrated into AppLayout. For most use cases, use `AppLayout` with `isCfgAdmin={true}` instead of using CfgLayout directly.
+**Note:** AdminLayout is now integrated into AppLayout. For most use cases, use `AppLayout` with `isCfgAdmin={true}` instead of using AdminLayout directly.
 
 ## Features
 
@@ -38,28 +38,28 @@ function MyApp({ Component, pageProps }) {
 ```
 
 **That's it!** Setting `isCfgAdmin={true}` automatically:
-- Wraps your app with CfgLayout
+- Wraps your app with AdminLayout
 - Sets up iframe communication
 - Handles auth token passing
 - Syncs theme from parent window
 
 ## Direct Usage (Advanced)
 
-If you need more control, you can use CfgLayout directly:
+If you need more control, you can use AdminLayout directly:
 
-### 1. Wrap your app with CfgLayout (Zero Config!)
+### 1. Wrap your app with AdminLayout (Zero Config!)
 
 ```tsx
 // apps/admin/src/pages/_app.tsx
-import { CfgLayout, AppLayout } from '@djangocfg/layouts';
+import { AdminLayout, AppLayout } from '@djangocfg/layouts';
 
 function MyApp({ Component, pageProps }) {
   return (
-    <CfgLayout>
+    <AdminLayout>
       <AppLayout config={appLayoutConfig}>
         <Component {...pageProps} />
       </AppLayout>
-    </CfgLayout>
+    </AdminLayout>
   );
 }
 ```
@@ -70,7 +70,7 @@ function MyApp({ Component, pageProps }) {
 
 ```tsx
 // Only if you need additional logic when tokens are received
-<CfgLayout
+<AdminLayout
   config={{
     onAuthTokenReceived: (authToken, refreshToken) => {
       // Tokens are already set in API client automatically
@@ -82,7 +82,7 @@ function MyApp({ Component, pageProps }) {
   <AppLayout config={appLayoutConfig}>
     <Component {...pageProps} />
   </AppLayout>
-</CfgLayout>
+</AdminLayout>
 ```
 
 ## Hook Usage
@@ -140,20 +140,20 @@ function MyApp({ Component, pageProps }) {
 </AppLayout>
 ```
 
-### CfgLayout Props
+### AdminLayout Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `children` | `ReactNode` | Required | Your app content |
-| `config` | `CfgLayoutConfig` | `{}` | Configuration object |
+| `config` | `AdminLayoutConfig` | `{}` | Configuration object |
 | `enableParentSync` | `boolean` | `true` | Enable automatic theme/auth sync |
 
-### CfgLayoutConfig
+### AdminLayoutConfig
 
-**All options are optional!** CfgLayout works with zero configuration.
+**All options are optional!** AdminLayout works with zero configuration.
 
 ```typescript
-interface CfgLayoutConfig {
+interface AdminLayoutConfig {
   // Optional: Called when auth tokens are received from parent
   // Note: Tokens are ALWAYS automatically set in API client
   // Use this only if you need additional custom logic
@@ -230,9 +230,9 @@ function MyThemeSync() {
 ### Disable Auto Sync
 
 ```tsx
-<CfgLayout enableParentSync={false}>
+<AdminLayout enableParentSync={false}>
   {/* Handle sync manually */}
-</CfgLayout>
+</AdminLayout>
 ```
 
 ### URL Override
@@ -289,7 +289,7 @@ import { ParentSync } from '@djangocfg/layouts';
 
 **Old approach:**
 ```tsx
-import { AppLayout, CfgLayout, useCfgApp } from '@djangocfg/layouts';
+import { AppLayout, AdminLayout, useCfgApp } from '@djangocfg/layouts';
 
 function AppLayoutWrapper() {
   const { disableLayout, isEmbedded } = useCfgApp();
@@ -302,11 +302,11 @@ function AppLayoutWrapper() {
 
 export default function App() {
   return (
-    <CfgLayout>
+    <AdminLayout>
       <AppLayoutWrapper>
         {children}
       </AppLayoutWrapper>
-    </CfgLayout>
+    </AdminLayout>
   );
 }
 ```
@@ -368,7 +368,7 @@ export default function App({ Component, pageProps }) {
 
 **With custom auth logic:**
 ```tsx
-<CfgLayout
+<AdminLayout
   config={{
     onAuthTokenReceived: (token, refresh) => {
       console.log('Tokens received from parent');
@@ -379,11 +379,11 @@ export default function App({ Component, pageProps }) {
   <AppLayout config={config}>
     <Component {...pageProps} />
   </AppLayout>
-</CfgLayout>
+</AdminLayout>
 ```
 
 ## Related Files
 
 - Django Template: `src/django_cfg/templates/admin/index.html`
 - Django Views: `src/django_cfg/apps/frontend/views.py`
-- Example App: `src/@frontend/apps/admin/src/pages/_app.tsx`
+- Example App: `src/django_admin/apps/admin/src/pages/_app.tsx`

package/src/layouts/AppLayout/layouts/{CfgLayout → AdminLayout}/index.ts

@@ -1,13 +1,13 @@
 /**
- * CfgLayout - Django CFG Layout with iframe Integration
+ * AdminLayout - Django CFG Layout with iframe Integration
  *
  * Universal layout component for Django CFG applications
  * Handles iframe embedding, theme sync, and auth communication
  */
 
 // Main component
-export { CfgLayout } from './CfgLayout';
-export type { CfgLayoutProps } from './CfgLayout';
+export { AdminLayout } from './AdminLayout';
+export type { AdminLayoutProps } from './AdminLayout';
 
 // Hooks
 export { useCfgApp, useApp } from './hooks';
@@ -17,4 +17,4 @@ export type { UseCfgAppReturn, UseCfgAppOptions, UseAppReturn, UseAppOptions } f
 export { ParentSync, AuthStatusSync } from './components';
 
 // Types
-export type { CfgLayoutConfig } from './types';
+export type { AdminLayoutConfig } from './types';

package/src/layouts/AppLayout/layouts/{CfgLayout → AdminLayout}/types/index.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 
 /**
- * Configuration for CfgLayout
- * All options are optional - CfgLayout works out of the box with zero config
+ * Configuration for AdminLayout
+ * All options are optional - AdminLayout works out of the box with zero config
  */
-export interface CfgLayoutConfig {
+export interface AdminLayoutConfig {
   /**
    * Optional handler called when auth tokens are received from parent window
    *
@@ -13,7 +13,7 @@ export interface CfgLayoutConfig {
    *
    * @example
    * ```tsx
-   * <CfgLayout config={{
+   * <AdminLayout config={{
    *   onAuthTokenReceived: (authToken, refreshToken) => {
    *     console.log('Tokens received and set in API client');
    *     // Additional custom logic here
@@ -37,9 +37,9 @@ export interface CfgLayoutConfig {
 }
 
 /**
- * Props for CfgLayout component
+ * Props for AdminLayout component
  */
-export interface CfgLayoutProps {
+export interface AdminLayoutProps {
   children: ReactNode;
-  config?: CfgLayoutConfig;
+  config?: AdminLayoutConfig;
 }

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardContent.tsx

@@ -14,6 +14,7 @@ import { useAppContext } from '../../../context';
 interface DashboardContentProps {
   children: React.ReactNode;
   className?: string;
+  isAdmin?: boolean;
 }
 
 const paddingVariants = {
@@ -37,6 +38,7 @@ const paddingVariants = {
 export function DashboardContent({
   children,
   className,
+  isAdmin = false,
 }: DashboardContentProps) {
   const { config } = useAppContext();
   const { privateLayout } = config;

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardHeader.tsx

@@ -20,6 +20,10 @@ import { useAppContext } from '../../../context';
 import { useNavigation } from '../../../hooks';
 import { UserMenu } from '../../../components';
 
+export interface DashboardHeaderProps {
+  isAdmin?: boolean;
+}
+
 /**
  * Dashboard Header Component
  *
@@ -34,7 +38,7 @@ import { UserMenu } from '../../../components';
  *
  * All data from context!
  */
-export function DashboardHeader() {
+export function DashboardHeader({ isAdmin = false }: DashboardHeaderProps) {
   const { config } = useAppContext();
   const { getPageTitle } = useNavigation();
 

package/src/layouts/AppLayout/layouts/PrivateLayout/components/DashboardSidebar.tsx

@@ -31,6 +31,10 @@ import { useAppContext } from '../../../context';
 import { useNavigation } from '../../../hooks';
 import { PackageVersions } from '../../../components';
 
+export interface DashboardSidebarProps {
+  isAdmin?: boolean;
+}
+
 /**
  * Dashboard Sidebar Component
  *
@@ -44,12 +48,28 @@ import { PackageVersions } from '../../../components';
  *
  * All data from context!
  */
-export function DashboardSidebar() {
+export function DashboardSidebar({ isAdmin = false }: DashboardSidebarProps) {
   const { config, showPackageVersions } = useAppContext();
   const { currentPath } = useNavigation();
   const { state, isMobile } = useSidebar();
 
-  const { app, privateLayout } = config;
+  const { app, privateLayout, adminLayout } = config;
+
+  // Admin layout: use adminLayout.menuSections converted to menuGroups, fallback to privateLayout
+  const menuGroups = isAdmin && adminLayout
+    ? adminLayout.menuSections.map((section, idx) => ({
+        label: section.title,
+        order: idx + 1,
+        items: section.items.map(item => ({
+          path: item.path,
+          label: item.label,
+          icon: item.icon || (() => null),
+          badge: item.badge,
+        })),
+      }))
+    : privateLayout.menuGroups;
+
+  const homeHref = privateLayout.homeHref;
 
   const isActiveRoute = (path: string) => {
     // Only exact match - no prefix matching
@@ -73,7 +93,7 @@ export function DashboardSidebar() {
             transition: 'padding 200ms ease-in-out'
           }}
         >
-          <Link href={privateLayout.homeHref}>
+          <Link href={homeHref}>
             <div className="flex items-center gap-3">
               {app.logoPath ? (
                 <img
@@ -99,7 +119,7 @@ export function DashboardSidebar() {
       </SidebarHeader>
 
       <SidebarContent>
-        {privateLayout.menuGroups.map((group) => (
+        {menuGroups.map((group) => (
           <SidebarGroup key={group.label}>
             <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
             <SidebarGroupContent>

package/src/layouts/AppLayout/layouts/PrivateLayout/components/index.ts

@@ -3,5 +3,7 @@
  */
 
 export { DashboardHeader } from './DashboardHeader';
+export type { DashboardHeaderProps } from './DashboardHeader';
 export { DashboardSidebar } from './DashboardSidebar';
+export type { DashboardSidebarProps } from './DashboardSidebar';
 export { DashboardContent } from './DashboardContent';

package/src/layouts/AppLayout/types/config.ts

@@ -3,7 +3,7 @@
  */
 
 import type { ReactNode } from 'react';
-import type { PublicLayoutConfig, PrivateLayoutConfig } from './layout';
+import type { PublicLayoutConfig, PrivateLayoutConfig, AdminLayoutConfig } from './layout';
 import type { RouteConfig } from './routes';
 
 /**
@@ -38,6 +38,9 @@ export interface AppLayoutConfig {
   /** Private layout configuration */
   privateLayout: PrivateLayoutConfig;
 
+  /** Admin layout configuration (optional) */
+  adminLayout?: AdminLayoutConfig;
+
   /** Error handling configuration */
   errors?: {
     /** Enable automatic error boundary (default: true) */

package/src/layouts/AppLayout/types/layout.ts

@@ -45,3 +45,10 @@ export interface PrivateLayoutConfig {
   contentPadding?: 'default' | 'none';
   headerActions?: ReactNode;
 }
+
+/**
+ * Admin layout configuration
+ */
+export interface AdminLayoutConfig {
+  menuSections: NavigationSection[];
+}

package/src/layouts/AppLayout/types/navigation.ts

@@ -10,6 +10,8 @@ import type { LucideIcon } from 'lucide-react';
 export interface NavigationItem {
   label: string;
   path: string;
+  icon?: LucideIcon;
+  badge?: string | number;
 }
 
 /**

package/src/layouts/AppLayout/types/routes.ts

@@ -29,6 +29,9 @@ export interface RouteDetectors {
   /** Check if route is private/protected */
   isPrivateRoute: (path: string) => boolean;
 
+  /** Check if route is admin */
+  isAdminRoute: (path: string) => boolean;
+
   /** Check if route is auth page */
   isAuthRoute: (path: string) => boolean;
 
@@ -42,4 +45,4 @@ export interface RouteDetectors {
 /**
  * Layout mode based on route
  */
-export type LayoutMode = 'public' | 'private' | 'auth';
+export type LayoutMode = 'public' | 'private' | 'admin' | 'auth';