@syuttechnologies/layout 1.0.0

package/src/components/EnterpriseLayout.tsx

@@ -0,0 +1,4460 @@
+/**
+ * @prima/layout - Enterprise React Layout Component
+ */
+
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useTransition,
+  useDeferredValue,
+  useId,
+} from "react";
+import notificationService, { Notification as AppNotification } from "../services/notificationService";
+import { ChangePasswordModal } from "./ChangePasswordModal";
+
+// Component Registry Type - passed as prop from consuming application
+export type ComponentRegistry = Record<string, React.ComponentType<any>>;
+
+
+// Type for module config stored in localStorage (without component reference)
+export interface StoredModuleConfig {
+  showHeader: boolean;
+  title: string;
+  description: string;
+  componentName: string; // Name of component in COMPONENT_REGISTRY
+  actions: string[];
+  permissions: string[];
+  breadcrumb: string[];
+}
+
+
+
+// Type Definitions
+export interface LogoConfig {
+  src?: string;
+  alt?: string;
+  width?: string;
+  height?: string;
+  showText?: boolean;
+}
+
+export interface Colors {
+  primary: string;
+  secondary: string;
+  success: string;
+  warning: string;
+  danger: string;
+  info: string;
+}
+
+export interface BrandingConfig {
+  appName: string;
+  logo?: LogoConfig;
+  favicon?: string | null;
+  colors: Colors;
+}
+
+export interface LayoutConfig {
+  headerHeight: string;
+  sidebarWidth: string;
+  sidebarCollapsedWidth: string;
+  footerHeight: string;
+  tabBarHeight: string;
+  enableTabMode: boolean;
+  enableDarkMode: boolean;
+  enableFooter: boolean;
+  defaultTheme: "light" | "dark";
+  responsive: boolean;
+  collapsibleSidebar: boolean;
+  showBreadcrumbs: boolean;
+  autoCollapseSidebar: boolean;
+  compactModeStrategy: "sections-only" | "all-items" | "smart-grouping";
+}
+
+export interface FooterConfig {
+  appVersion: string;
+  environment: string;
+  copyright: string;
+  supportLink: string;
+  supportText: string;
+}
+
+export interface UserConfig {
+  name: string;
+  role: string;
+  avatar: string;
+  permissions: string[];
+}
+
+// ENHANCED: Multi-level menu support
+export interface NavigationItem {
+  id: string;
+  title: string;
+  icon: string;
+  badge?: string;
+  active?: boolean;
+  permissions?: string[];
+  children?: NavigationItem[];
+  isExpanded?: boolean;
+  sectionName?: string; // Added for compatibility with CompactModeItem
+  onClick?: () => void; // Added for handling custom click actions
+}
+
+export interface NavigationSection {
+  section: string;
+  items: NavigationItem[];
+  icon?: string;
+  priority?: number;
+}
+
+export interface CompactModeItem {
+  id: string;
+  title: string;
+  icon: string;
+  sectionName: string;
+  badge?: string;
+  active?: boolean;
+  permissions?: string[];
+  children?: CompactModeItem[]; // NEW: Support nested items in compact mode
+  // Section-specific properties
+  isSection?: boolean;
+  section?: string;
+  items?: NavigationItem[];
+}
+
+// Enhanced Type Definitions for Enterprise Toolbar
+export interface ToolbarAction {
+  id: string;
+  icon: string;
+  tooltip: string;
+  permission: string;
+  variant?: "primary" | "secondary" | "danger" | "success";
+  separator?: boolean;
+}
+
+export interface ModuleConfig {
+  showHeader: boolean | true;
+  title: string;
+  description: string;
+  component: React.ComponentType<any> | null;
+  actions: string[]; // Legacy - kept for backward compatibility
+  toolbarActions?: ToolbarAction[]; // New enterprise toolbar actions
+  permissions: string[];
+  breadcrumb: string[];
+}
+
+export interface ModulesConfig {
+  [key: string]: ModuleConfig;
+}
+
+export interface HooksConfig {
+  onModuleChange?: ((moduleId: string, config?: ModuleConfig) => void) | null;
+  onThemeChange?: ((theme: string) => void) | null;
+  onUserAction?: ((action: string, data: any) => void) | null;
+  onNavigate?: ((path: string, params?: any) => void) | null;
+  onChangePassword?: (() => void) | null;
+  onLogout?: (() => void) | null;
+  // Enterprise toolbar event handlers
+  onToolbarAction?:
+    | ((actionId: string, moduleId: string, data?: any) => void)
+    | null;
+}
+
+export interface EnterpriseLayoutConfig {
+  branding: BrandingConfig;
+  layout: LayoutConfig;
+  footer: FooterConfig;
+  user: UserConfig;
+  navigation: NavigationSection[];
+  modules: ModulesConfig;
+  hooks: HooksConfig;
+}
+
+export interface TabData {
+  title: string;
+  config?: ModuleConfig;
+}
+
+export interface IconSystemType {
+  [key: string]: () => React.JSX.Element;
+}
+
+export interface EnterpriseLayoutProps {
+  config: EnterpriseLayoutConfig;
+  componentRegistry: ComponentRegistry;
+  children?: React.ReactNode;
+  router?: any;
+  apiClient?: any;
+  authProvider?: any;
+  onModuleChange?: ((moduleId: string, config?: ModuleConfig) => void) | null;
+  onThemeChange?: ((theme: string) => void) | null;
+}
+
+
+// Enterprise Layout Component
+export const EnterpriseLayout: React.FC<EnterpriseLayoutProps> = ({
+  config,
+  componentRegistry,
+  children,
+  router = null,
+  apiClient = null,
+  authProvider = null,
+  onModuleChange = null,
+  onThemeChange = null,
+}: EnterpriseLayoutProps) => {
+  // State Management
+  const initialOverviewConfig = config.modules["overview"] || config.modules["dashboard"] || { title: "Overview", description: "Dashboard overview", component: null, actions: [], permissions: [], breadcrumb: ["Dashboard", "Overview"], showHeader: false };
+  const [openTabs, setOpenTabs] = useState<Map<string, TabData>>(
+    new Map([["overview", { title: "Overview", config: initialOverviewConfig }]])
+  );
+  const [activeTab, setActiveTab] = useState<string>("overview");
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState<boolean>(false);
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(
+    new Set(config.navigation.map((n) => n.section))
+  );
+
+  // NEW: State for managing multi-level menu expansion
+  const [expandedSubItems, setExpandedSubItems] = useState<Set<string>>(
+    new Set()
+  );
+
+  const [tabModeEnabled, setTabModeEnabled] = useState<boolean>(
+    config.layout.enableTabMode
+  );
+  const [darkMode, setDarkMode] = useState<boolean>(
+    config.layout.defaultTheme === "dark"
+  );
+  const [tabOverflowMenuOpen, setTabOverflowMenuOpen] = useState<boolean>(false);
+  const [footerVisible, setFooterVisible] = useState<boolean>(false);
+  const [breadcrumbs, setBreadcrumbs] = useState<string[]>([
+    "Dashboard",
+    "Overview",
+  ]);
+
+  // Entity and Financial Year information
+  const [currentEntity, setCurrentEntity] = useState<string>("Sample Entity A");
+  const [currentBusinessUnit, setCurrentBusinessUnit] = useState<string>("Sample Business Unit 1");
+  const [financialYear, setFinancialYear] = useState<string>("FY 2024-25");
+
+  // Available options for selection
+  const availableEntities = [
+    "Sample Entity A",
+    "Sample Entity B",
+    "Sample Entity C",
+    "Test Entity 1",
+    "Test Entity 2"
+  ];
+
+  const availableFinancialYears = [
+    "FY 2024-25",
+    "FY 2023-24",
+    "FY 2022-23",
+    "FY 2021-22"
+  ];
+
+  // Dropdown states
+  const [entityDropdownOpen, setEntityDropdownOpen] = useState<boolean>(false);
+  const [fyDropdownOpen, setFyDropdownOpen] = useState<boolean>(false);
+
+  // FIX: Initialize persona panel as closed to prevent initial popup
+  const [personaPanelOpen, setPersonaPanelOpen] = useState<boolean>(false);
+  const [isInitialized, setIsInitialized] = useState<boolean>(false); // NEW: Track initialization
+
+  // Notification panel state
+  const [notificationPanelOpen, setNotificationPanelOpen] = useState<boolean>(false);
+
+  // Change Password Modal state
+  const [changePasswordModalOpen, setChangePasswordModalOpen] = useState<boolean>(false);
+  const [isChangingPassword, setIsChangingPassword] = useState<boolean>(false);
+  const [notifications, setNotifications] = useState([
+    { id: 1, type: 'success', title: 'Welcome!', message: 'Your account has been successfully verified', time: '5 min ago', read: false },
+    { id: 2, type: 'info', title: 'System Update', message: 'New features are now available in the dashboard', time: '1 hour ago', read: false },
+    { id: 3, type: 'warning', title: 'Action Required', message: 'Please update your profile information', time: '2 hours ago', read: true },
+    { id: 4, type: 'error', title: 'Failed Transaction', message: 'Your recent transaction could not be processed', time: '1 day ago', read: true }
+  ]);
+  const [notificationFilter, setNotificationFilter] = useState<'all' | 'unread' | 'read'>('all');
+  const [notificationGrouping, setNotificationGrouping] = useState<'none' | 'type' | 'time'>('none');
+
+  // Dynamic navigation menu from localStorage
+  const [dynamicNavigation, setDynamicNavigation] = useState<NavigationSection[]>(config.navigation);
+
+  // Dynamic modules configuration from localStorage
+  const [dynamicModules, setDynamicModules] = useState<ModulesConfig>(config.modules);
+
+  // Dynamic user data from localStorage
+  const [dynamicUser, setDynamicUser] = useState<UserConfig>(config.user);
+
+  // Dynamic app title from localStorage
+  const [dynamicAppTitle, setDynamicAppTitle] = useState<string>(config.branding.appName);
+
+  // Load all dynamic config from localStorage on mount
+  useEffect(() => {
+    // Load user data
+    const storedUser = localStorage.getItem('user');
+    if (storedUser) {
+      try {
+        const parsedUser = JSON.parse(storedUser);
+        setDynamicUser({
+          name: parsedUser.name || config.user.name,
+          role: parsedUser.role || config.user.role,
+          avatar: parsedUser.avatar || parsedUser.name?.split(' ').map((n: string) => n[0]).join('').toUpperCase() || config.user.avatar,
+          permissions: parsedUser.permissions || config.user.permissions,
+        });
+      } catch (error) {
+        console.error('Failed to parse user data from localStorage:', error);
+      }
+    }
+
+    // Load app config (title)
+    const storedAppConfig = localStorage.getItem('APP_CONFIG');
+    if (storedAppConfig) {
+      try {
+        const parsedAppConfig = JSON.parse(storedAppConfig);
+        if (parsedAppConfig.appTitle) {
+          setDynamicAppTitle(parsedAppConfig.appTitle);
+        }
+      } catch (error) {
+        console.error('Failed to parse app config from localStorage:', error);
+      }
+    }
+
+    // Load navigation menu
+    const storedNavigation = localStorage.getItem('NAVIGATION_MENU');
+    if (storedNavigation) {
+      try {
+        const parsedNavigation = JSON.parse(storedNavigation);
+        if (Array.isArray(parsedNavigation) && parsedNavigation.length > 0) {
+          setDynamicNavigation(parsedNavigation);
+          // Update expanded sections for the new navigation
+          setExpandedSections(new Set(parsedNavigation.map((n: NavigationSection) => n.section)));
+          setExpandedOverviewSections(
+            new Set(parsedNavigation.filter((sec: NavigationSection) => sec.section !== "Dashboard").map((sec: NavigationSection) => sec.section))
+          );
+        }
+      } catch (error) {
+        console.error('Failed to parse navigation menu from localStorage:', error);
+      }
+    }
+
+    // Load modules configuration
+    const storedModules = localStorage.getItem('MODULES_CONFIG');
+    if (storedModules) {
+      try {
+        const parsedModules: Record<string, StoredModuleConfig> = JSON.parse(storedModules);
+        // Convert stored module configs to actual ModuleConfig with component references
+        const modulesWithComponents: ModulesConfig = {};
+
+        for (const [moduleId, storedConfig] of Object.entries(parsedModules)) {
+          modulesWithComponents[moduleId] = {
+            showHeader: storedConfig.showHeader,
+            title: storedConfig.title,
+            description: storedConfig.description,
+            component: componentRegistry[storedConfig.componentName] || null,
+            actions: storedConfig.actions,
+            permissions: storedConfig.permissions,
+            breadcrumb: storedConfig.breadcrumb,
+          };
+        }
+
+        setDynamicModules(modulesWithComponents);
+      } catch (error) {
+        console.error('Failed to parse modules config from localStorage:', error);
+      }
+    }
+  }, []);
+
+  // User preference for auto-collapse (configurable)
+  const [autoCollapseEnabled, setAutoCollapseEnabled] = useState<boolean>(
+    config.layout.autoCollapseSidebar
+  );
+
+  // Overview tab section management
+  const [expandedOverviewSections, setExpandedOverviewSections] = useState<Set<string>>(
+    new Set(config.navigation.filter(sec => sec.section !== "Dashboard").map(sec => sec.section))
+  );
+
+  // React 18 Concurrent Features
+  const [isPending, startTransition] = useTransition();
+  const deferredActiveTab = useDeferredValue(activeTab);
+  const componentId = useId();
+
+  // FIX: Mark as initialized after first render to prevent initial popup flashes
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsInitialized(true);
+    }, 100); // Small delay to prevent initial flashes
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Subscribe to notification events from any component
+  useEffect(() => {
+    const unsubscribe = notificationService.subscribe((notification: AppNotification) => {
+      setNotifications(prev => [notification, ...prev]);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  // Dynamic Icon System - Enhanced with enterprise action icons
+  const IconSystem: IconSystemType = useMemo(
+    () => ({
+      menu: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      ),
+      notification: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+        </svg>
+      ),
+      settings: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="12" cy="12" r="5"></circle>
+          <line x1="12" y1="1" x2="12" y2="3"></line>
+          <line x1="12" y1="21" x2="12" y2="23"></line>
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+          <line x1="1" y1="12" x2="3" y2="12"></line>
+          <line x1="21" y1="12" x2="23" y2="12"></line>
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+        </svg>
+      ),
+      chevronDown: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="6,9 12,15 18,9"></polyline>
+        </svg>
+      ),
+      home: () => (
+        <svg
+          style={{ width: "1.125rem", height: "1.125rem", opacity: 0.85 }}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+        </svg>
+      ),
+      user: () => (
+        <svg
+          style={{ width: "1.125rem", height: "1.125rem", opacity: 0.85 }}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+          <circle cx="12" cy="7" r="4"></circle>
+        </svg>
+      ),
+      users: () => (
+        <svg
+          style={{ width: "1.125rem", height: "1.125rem", opacity: 0.85 }}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+          <circle cx="9" cy="7" r="4"></circle>
+          <path d="m22 21-3-3m0 0a4 4 0 0 0 0-4 4 4 0 0 0 0 4Z"></path>
+        </svg>
+      ),
+      tabs: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="9" y1="9" x2="15" y2="9"></line>
+          <line x1="9" y1="12" x2="15" y2="12"></line>
+          <line x1="9" y1="15" x2="15" y2="15"></line>
+        </svg>
+      ),
+      window: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <rect x="2" y="4" width="20" height="16" rx="2"></rect>
+          <path d="M10 4v16"></path>
+        </svg>
+      ),
+      chevronRight: () => (
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="9,18 15,12 9,6"></polyline>
+        </svg>
+      ),
+      arrowLeft: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <line x1="19" y1="12" x2="5" y2="12"></line>
+          <polyline points="12,19 5,12 12,5"></polyline>
+        </svg>
+      ),
+      plus: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="12" y1="8" x2="12" y2="16"></line>
+          <line x1="8" y1="12" x2="16" y2="12"></line>
+        </svg>
+      ),
+      file: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14,2 14,8 20,8"></polyline>
+        </svg>
+      ),
+      breadcrumbSeparator: () => (
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="9,18 15,12 9,6"></polyline>
+        </svg>
+      ),
+      lock: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+          <circle cx="12" cy="16" r="1"></circle>
+          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+        </svg>
+      ),
+      logout: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+          <polyline points="16,17 21,12 16,7"></polyline>
+          <line x1="21" y1="12" x2="9" y2="12"></line>
+        </svg>
+      ),
+      footer: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+          <line x1="8" y1="21" x2="16" y2="21"></line>
+          <line x1="12" y1="17" x2="12" y2="21"></line>
+        </svg>
+      ),
+      folder: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+        </svg>
+      ),
+      collapse: () => (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <polyline points="11,19 2,12 11,5"></polyline>
+          <polyline points="22,19 13,12 22,5"></polyline>
+        </svg>
+      ),
+      service: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="12" cy="10" r="3"></circle>
+          <path d="M3 20c1.5-4.5 4.5-7.5 9-7.5s7.5 3 9 7.5"></path>
+          <circle cx="17" cy="5" r="1"></circle>
+          <circle cx="19" cy="3" r="1"></circle>
+        </svg>
+      ),
+      currency: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <path d="M12 6v12"></path>
+          <path d="M15 9.5a3 3 0 1 0 0 5"></path>
+          <path d="M9 9.5a3 3 0 1 1 0 5"></path>
+        </svg>
+      ),
+      chartofAccount: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="9" y1="7" x2="9" y2="17"></line>
+          <line x1="15" y1="7" x2="15" y2="17"></line>
+          <line x1="7" y1="11" x2="17" y2="11"></line>
+          <line x1="7" y1="15" x2="17" y2="15"></line>
+          <line x1="7" y1="7" x2="17" y2="7"></line>
+        </svg>
+      ),
+      configure: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="12" cy="12" r="3"></circle>
+          <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m15.5-6.5L19 5l-1.5-1.5M6.5 17.5L5 19l-1.5-1.5M17.5 17.5L19 19l1.5-1.5M6.5 6.5L5 5 3.5 6.5"></path>
+        </svg>
+      ),
+      search: () => (
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+      ),
+    }),
+    []
+  );
+
+  // CSS Styles
+  const dynamicStyles = useMemo(() => {
+    const colors = config.branding.colors;
+    const footerHeight =
+      footerVisible && config.layout.enableFooter
+        ? config.layout.footerHeight
+        : "0px";
+
+    return `
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      :root {
+        --primary: ${colors.primary};
+        --secondary: ${colors.secondary};
+        --success: ${colors.success};
+        --warning: ${colors.warning};
+        --danger: ${colors.danger};
+        --info: ${colors.info};
+        
+        --bg-primary: #ffffff;
+        --bg-secondary: #f8fafc;
+        --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        --text-primary: #1e293b;
+        --text-secondary: #64748b;
+        --text-muted: #94a3b8;
+        --border-color: rgba(226, 232, 240, 0.5);
+        --glass-bg: rgba(255, 255, 255, 0.95);
+        --shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.1);
+        --accent-primary: ${colors.primary};
+        --accent-gradient: linear-gradient(135deg, ${colors.primary}, ${colors.info});
+        
+        --header-height: ${config.layout.headerHeight};
+        --sidebar-width: ${config.layout.sidebarWidth};
+        --sidebar-collapsed-width: ${config.layout.sidebarCollapsedWidth};
+        --footer-height: ${footerHeight};
+        --tab-bar-height: ${config.layout.tabBarHeight};
+      }
+
+      [data-theme="dark"] {
+        --bg-primary: #0f172a;
+        --bg-secondary: #1e293b;
+        --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+        --text-primary: #f1f5f9;
+        --text-secondary: #cbd5e1;
+        --text-muted: #64748b;
+        --border-color: rgba(71, 85, 105, 0.5);
+        --glass-bg: rgba(15, 23, 42, 0.95);
+        --shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.3);
+      }
+
+      html {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background: var(--bg-gradient);
+        color: var(--text-primary);
+        line-height: 1.5;
+        height: 100vh;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        transition: background 0.3s ease, color 0.3s ease;
+      }
+
+      .enterprise-layout {
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .layout-header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--header-height);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 1rem;
+        z-index: 1000;
+        box-shadow: var(--shadow);
+      }
+
+      .header-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex: 0 0 auto;
+        min-width: 0;
+      }
+
+      .header-center {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: center;
+        min-width: 0;
+      }
+
+      .header-right {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        flex-shrink: 0;
+        position: relative;
+      }
+
+      .header-info-section {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        height: fit-content;
+        max-height: calc(var(--header-height) - 1rem);
+      }
+
+      .header-info-card {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.875rem;
+        border-radius: 1.25rem;
+        backdrop-filter: blur(10px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        cursor: pointer;
+        position: relative;
+        overflow: visible;
+        height: fit-content;
+        max-height: 2.25rem;
+      }
+
+      .header-info-card-blue {
+        background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.06) 100%);
+        border: 1px solid rgba(37, 99, 235, 0.2);
+        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08),
+                    0 1px 2px rgba(0, 0, 0, 0.04);
+      }
+
+      .header-info-card-green {
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(34, 197, 94, 0.06) 100%);
+        border: 1px solid rgba(16, 185, 129, 0.2);
+        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08),
+                    0 1px 2px rgba(0, 0, 0, 0.04);
+      }
+
+      .header-info-card::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform 0.5s ease-out;
+        pointer-events: none;
+      }
+
+      .header-info-card:hover::before {
+        transform: translate(-50%, -50%) scale(2);
+      }
+
+      .header-info-card-blue:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18),
+                    0 2px 4px rgba(0, 0, 0, 0.06);
+        border-color: rgba(37, 99, 235, 0.35);
+        background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(59, 130, 246, 0.08) 100%);
+      }
+
+      .header-info-card-green:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18),
+                    0 2px 4px rgba(0, 0, 0, 0.06);
+        border-color: rgba(16, 185, 129, 0.35);
+        background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(34, 197, 94, 0.08) 100%);
+      }
+
+      .header-info-card:active {
+        transform: translateY(0) scale(0.98);
+        transition: all 0.1s ease;
+      }
+
+      .header-info-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        flex-shrink: 0;
+      }
+
+      .header-info-card-blue .header-info-icon {
+        color: #2563eb;
+      }
+
+      .header-info-card-green .header-info-icon {
+        color: #10b981;
+      }
+
+      .header-info-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.0625rem;
+        min-width: 0;
+      }
+
+      .header-info-label {
+        font-size: 0.5625rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 700;
+        line-height: 1;
+        white-space: nowrap;
+      }
+
+      .header-info-card-blue .header-info-label {
+        color: #1d4ed8;
+        opacity: 0.85;
+      }
+
+      .header-info-card-green .header-info-label {
+        color: #059669;
+        opacity: 0.85;
+      }
+
+      .header-info-value {
+        font-size: 0.8125rem;
+        font-weight: 700;
+        white-space: nowrap;
+        letter-spacing: -0.01em;
+        line-height: 1.2;
+      }
+
+      .header-info-card-blue .header-info-value {
+        color: #1e3a8a;
+      }
+
+      .header-info-card-green .header-info-value {
+        color: #065f46;
+      }
+
+      .header-info-card:hover .header-info-label,
+      .header-info-card:hover .header-info-value {
+        opacity: 1;
+      }
+
+      .header-info-card.selectable {
+        cursor: pointer;
+        padding-right: 0.625rem;
+      }
+
+      .header-info-chevron {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0.25rem;
+        transition: transform 0.3s ease;
+        opacity: 0.7;
+      }
+
+      .header-info-card:hover .header-info-chevron {
+        opacity: 1;
+      }
+
+      .header-info-dropdown {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        left: 0;
+        right: 0;
+        background: var(--glass-bg);
+        border-radius: 0.75rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
+                    0 4px 8px rgba(0, 0, 0, 0.1);
+        backdrop-filter: blur(12px);
+        z-index: 1000;
+        overflow: hidden;
+        animation: dropdownSlideIn 0.2s ease-out;
+        min-width: 180px;
+      }
+
+      @keyframes dropdownSlideIn {
+        from {
+          opacity: 0;
+          transform: translateY(-8px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .header-info-dropdown-blue {
+        border: 1px solid rgba(37, 99, 235, 0.3);
+      }
+
+      .header-info-dropdown-green {
+        border: 1px solid rgba(16, 185, 129, 0.3);
+      }
+
+      .header-info-dropdown-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.625rem 0.875rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        color: var(--text-primary);
+        transition: all 0.2s ease;
+        cursor: pointer;
+        gap: 0.5rem;
+      }
+
+      .header-info-dropdown-item:hover {
+        background: rgba(37, 99, 235, 0.08);
+      }
+
+      .header-info-dropdown-blue .header-info-dropdown-item:hover {
+        background: rgba(37, 99, 235, 0.12);
+        color: #1e40af;
+      }
+
+      .header-info-dropdown-green .header-info-dropdown-item:hover {
+        background: rgba(16, 185, 129, 0.12);
+        color: #047857;
+      }
+
+      .header-info-dropdown-item.active {
+        font-weight: 700;
+        background: rgba(37, 99, 235, 0.1);
+      }
+
+      .header-info-dropdown-blue .header-info-dropdown-item.active {
+        background: rgba(37, 99, 235, 0.15);
+        color: #1e40af;
+      }
+
+      .header-info-dropdown-green .header-info-dropdown-item.active {
+        background: rgba(16, 185, 129, 0.15);
+        color: #047857;
+      }
+
+      .header-info-dropdown-item svg {
+        flex-shrink: 0;
+      }
+
+      .app-logo {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.125rem;
+        font-weight: 700;
+        background: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+
+      .logo-image {
+        flex-shrink: 0;
+        border-radius: 0.375rem;
+      }
+
+      .breadcrumb-container {
+        display: flex;
+        align-items: center;
+        font-size: 0.75rem;
+        opacity: 0.8;
+        margin-left: 1rem;
+      }
+
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        color: var(--text-secondary);
+      }
+
+      .breadcrumb-item {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .breadcrumb-link {
+        color: var(--text-secondary);
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+
+      .breadcrumb-link:hover {
+        color: var(--accent-primary);
+      }
+
+      .breadcrumb-current {
+        color: var(--accent-primary);
+        font-weight: 500;
+      }
+
+      .breadcrumb-separator {
+        color: var(--text-muted);
+        opacity: 0.6;
+      }
+
+      .layout-body {
+        display: flex;
+        height: calc(100vh - var(--header-height) - var(--footer-height));
+        margin-top: var(--header-height);
+        overflow: hidden;
+      }
+
+      .layout-body.footer-hidden {
+        height: calc(100vh - var(--header-height));
+      }
+
+      .layout-sidebar {
+        width: var(--sidebar-width);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border-right: 1px solid var(--border-color);
+        overflow-y: auto;
+        overflow-x: hidden;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        flex-shrink: 0;
+        will-change: width;
+        backface-visibility: hidden;
+        contain: layout style paint;
+      }
+
+      .layout-sidebar.collapsed {
+        width: var(--sidebar-collapsed-width);
+        overflow-y: hidden;
+      }
+
+      .layout-sidebar.mobile-hidden {
+        transform: translateX(-100%);
+        width: 0;
+      }
+
+      .layout-main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-gradient);
+        min-width: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      .layout-footer {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: var(--footer-height);
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 1rem;
+        z-index: 1000;
+        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+        font-size: 0.7rem;
+        color: var(--text-secondary);
+        transition: transform 0.3s ease;
+      }
+
+      .layout-footer.hidden {
+        transform: translateY(100%);
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      .footer-left {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .footer-environment {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.375rem;
+        font-weight: 500;
+        font-size: 0.625rem;
+      }
+
+      .env-development {
+        background: var(--danger);
+        color: white;
+      }
+
+      .env-staging {
+        background: var(--warning);
+        color: white;
+      }
+
+      .env-production {
+        background: var(--success);
+        color: white;
+      }
+
+      .env-uat {
+        background: var(--info);
+        color: white;
+      }
+
+      .footer-right {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+      }
+
+      .footer-support {
+        color: var(--accent-primary);
+        text-decoration: none;
+        transition: opacity 0.2s ease;
+      }
+
+      .footer-support:hover {
+        opacity: 0.8;
+      }
+
+      .content-wrapper {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      .tab-bar {
+        display: flex;
+        align-items: center;
+        background: var(--glass-bg);
+        border-bottom: 1px solid var(--border-color);
+        padding: 0;
+        margin: 0;
+        min-height: var(--tab-bar-height);
+        overflow-x: hidden;
+        flex-shrink: 0;
+        gap: 0.25rem;
+        transition: all 0.3s ease;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .tab-bar.hidden {
+        display: none;
+      }
+
+      .single-page-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: var(--glass-bg);
+        border-bottom: 1px solid var(--border-color);
+        padding: 0.5rem 1.25rem;
+        flex-shrink: 0;
+      }
+
+      .page-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+        color: var(--text-primary);
+      }
+
+      .back-button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.75rem;
+        background: transparent;
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        font-size: 0.8rem;
+        transition: all 0.3s ease;
+        cursor: pointer;
+      }
+
+      .back-button:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+        border-color: var(--border-color);
+      }
+
+      .tab {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.5rem;
+        margin: 0;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-bottom: none;
+        border-radius: 0.75rem 0.75rem 0 0;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+        min-width: 100px;
+        max-width: 180px;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+      }
+
+      .tab:hover {
+        background: var(--bg-primary);
+        color: var(--text-primary);
+      }
+
+      .tab.active {
+        background: var(--bg-primary);
+        border-color: var(--accent-primary);
+        color: var(--accent-primary);
+        box-shadow: 0 -2px 4px rgba(37, 99, 235, 0.1);
+      }
+
+      .tab-title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+
+      .tab-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+      }
+
+      .tab-close:hover {
+        background: var(--border-color);
+        color: var(--text-secondary);
+      }
+
+      .tab.active .tab-close:hover {
+        background: rgba(37, 99, 235, 0.1);
+        color: var(--accent-primary);
+      }
+
+      /* Tab overflow menu styles for mobile */
+      .tab-bar-wrapper {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        background: var(--glass-bg);
+        border-bottom: 1px solid var(--border-color);
+        min-height: var(--tab-bar-height);
+      }
+
+      .tab-bar-visible {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        flex: 1;
+        overflow: hidden;
+        min-height: var(--tab-bar-height);
+      }
+
+      .tab-more-container {
+        position: relative;
+        flex-shrink: 0;
+      }
+
+      .tab-more-btn {
+        display: none;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.375rem 0.75rem;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        cursor: pointer;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        transition: all 0.3s ease;
+        margin-right: 0.5rem;
+        white-space: nowrap;
+      }
+
+      .tab-more-btn:hover {
+        background: var(--bg-primary);
+        color: var(--accent-primary);
+        border-color: var(--accent-primary);
+      }
+
+      .tab-more-btn.active {
+        background: var(--accent-primary);
+        color: white;
+        border-color: var(--accent-primary);
+      }
+
+      .tab-overflow-menu {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        min-width: 200px;
+        max-width: 280px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 1px solid var(--border-color);
+        border-radius: 0.75rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        padding: 0.5rem;
+        z-index: 1002;
+        margin-top: 0.25rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s ease;
+      }
+
+      .tab-overflow-menu.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .tab-overflow-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        transition: all 0.3s ease;
+        gap: 0.5rem;
+      }
+
+      .tab-overflow-item:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+      }
+
+      .tab-overflow-item.active {
+        background: rgba(37, 99, 235, 0.1);
+        color: var(--accent-primary);
+      }
+
+      .tab-overflow-item-title {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tab-overflow-item-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        border-radius: 50%;
+        background: none;
+        border: none;
+        cursor: pointer;
+        color: var(--text-muted);
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+      }
+
+      .tab-overflow-item-close:hover {
+        background: var(--border-color);
+        color: var(--danger);
+      }
+
+      .tab-content-area {
+        flex: 1;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        min-height: 0;
+        background: var(--bg-gradient);
+        box-sizing: border-box;
+      }
+
+      .enterprise-module {
+        display: none;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      .enterprise-module.active {
+        display: block;
+      }
+
+      .module-header {
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 1px solid var(--border-color);
+        border-radius: 1rem;
+        padding: 0.75rem 1.25rem;
+        margin: 0.75rem 1.25rem 0 1.25rem;
+        box-shadow: var(--shadow);
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 1rem;
+        flex-shrink: 0;
+      }
+
+      .module-header-content {
+        flex: 1;
+        text-align: left;
+      }
+
+      .module-title {
+        font-size: 1.25rem;
+        font-weight: 700;
+        background: var(--accent-gradient);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 0.375rem;
+        line-height: 1.2;
+      }
+
+      .module-description {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        margin-bottom: 0;
+        line-height: 1.3;
+      }
+
+      .module-actions {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        flex-wrap: wrap;
+        flex-shrink: 0;
+      }
+
+      .module-content {
+        padding: 0 1.25rem 2rem 1.25rem;
+        max-width: 100%;
+        overflow: hidden;
+      }
+
+      .layout-body.footer-hidden .module-content {
+        padding-bottom: 0;
+      }
+
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+        padding: 0.5rem 1rem;
+        font-size: 0.8rem;
+        font-weight: 500;
+        border: none;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        white-space: nowrap;
+      }
+
+      .btn-primary {
+        background: var(--accent-gradient);
+        color: white;
+        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+      }
+
+      .btn-primary:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
+      }
+
+      .btn-secondary {
+        background: var(--glass-bg);
+        color: var(--text-primary);
+        border: 1px solid var(--border-color);
+      }
+
+      .btn-secondary:hover {
+        background: var(--bg-secondary);
+        transform: translateY(-2px);
+      }
+
+      .nav-section {
+        padding: 0.75rem 0 0 0;
+        border-bottom: 1px solid var(--border-color);
+      }
+
+      .nav-section:last-child {
+        border-bottom: none;
+      }
+
+      .nav-section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border-radius: 0.75rem;
+        margin: 0 0.75rem 0.375rem 0.75rem;
+        position: relative;
+      }
+
+      .nav-section-header:hover {
+        background: var(--bg-secondary);
+      }
+
+      .nav-section-title {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.075em;
+        margin: 0;
+        flex: 1;
+      }
+
+      .nav-chevron {
+        color: var(--text-muted);
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .nav-section-header.expanded .nav-chevron {
+        transform: rotate(0deg);
+      }
+
+      .nav-section-header.collapsed .nav-chevron {
+        transform: rotate(-90deg);
+      }
+
+      .nav-section-content {
+        overflow: hidden;
+        transition: all 0.3s ease;
+        padding-bottom: 0.75rem;
+      }
+
+      .nav-section-content.expanded {
+        max-height: 500px;
+        opacity: 1;
+      }
+
+      .nav-section-content.collapsed {
+        max-height: 0;
+        opacity: 0;
+        padding-bottom: 0;
+      }
+
+      .nav-menu {
+        list-style: none;
+      }
+
+      .nav-item {
+        margin: 0 0.75rem;
+      }
+
+      .nav-link {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.5rem 0.75rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        border-radius: 0.75rem;
+        transition: all 0.3s ease;
+        font-size: 0.8rem;
+        position: relative;
+      }
+
+      .nav-link:hover,
+      .nav-link.active {
+        background: var(--accent-gradient);
+        color: white;
+        transform: translateX(4px);
+        box-shadow: var(--shadow);
+      }
+
+      /* NEW: Multi-level menu styles */
+      .nav-sub-menu {
+        margin-left: 1.5rem;
+        border-left: 1px solid var(--border-color);
+        padding-left: 0.5rem;
+        margin-top: 0.25rem;
+        list-style: none;
+      }
+
+      .nav-sub-item {
+        margin: 0 0.5rem;
+      }
+
+      .nav-sub-link {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.375rem 0.5rem;
+        color: var(--text-muted);
+        text-decoration: none;
+        border-radius: 0.5rem;
+        transition: all 0.3s ease;
+        font-size: 0.75rem;
+        position: relative;
+      }
+
+      .nav-sub-link:hover,
+      .nav-sub-link.active {
+        background: var(--accent-gradient);
+        color: white;
+        transform: translateX(2px);
+        box-shadow: var(--shadow);
+      }
+
+      .nav-item-with-children > .nav-link {
+        position: relative;
+      }
+
+      .nav-item-expand {
+        position: absolute;
+        right: 0.5rem;
+        color: var(--text-muted);
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .nav-item-expand.expanded {
+        transform: rotate(90deg);
+      }
+
+      .nav-badge {
+        background: var(--danger);
+        color: white;
+        font-size: 0.625rem;
+        padding: 0.125rem 0.3rem;
+        border-radius: 0.5rem;
+        margin-left: auto;
+        font-weight: 600;
+      }
+
+      .menu-toggle {
+        background: none;
+        border: none;
+        padding: 0.5rem;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        color: var(--text-secondary);
+        transition: all 0.3s ease;
+      }
+
+      .menu-toggle:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+      }
+
+      .persona-control {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.375rem;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        flex-shrink: 0;
+      }
+
+      .persona-control:hover {
+        background: var(--bg-secondary);
+      }
+
+      .persona-avatar {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        background: var(--accent-gradient);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 600;
+        font-size: 0.75rem;
+        flex-shrink: 0;
+      }
+
+      .persona-role {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
+
+      .persona-panel {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 300px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 2px solid rgba(203, 213, 225, 0.8);
+        border-radius: 1rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        padding: 1rem;
+        z-index: 1001;
+        margin-top: 0.5rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s ease;
+      }
+
+      .persona-panel.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .persona-panel-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding-bottom: 0.75rem;
+        margin-bottom: 0.75rem;
+        border-bottom: 2px solid rgba(226, 232, 240, 0.9);
+      }
+
+      .persona-panel-avatar {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        background: var(--accent-gradient);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 600;
+        font-size: 0.875rem;
+      }
+
+      .persona-panel-info h3 {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 0.125rem;
+      }
+
+      .persona-panel-info p {
+        font-size: 0.75rem;
+        color: var(--text-secondary);
+      }
+
+      .persona-panel-section {
+        padding-bottom: 0.75rem;
+        margin-bottom: 0.75rem;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+      }
+
+      .persona-panel-section:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .persona-panel-section h4 {
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 0.5rem;
+      }
+
+      .persona-panel-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+      }
+
+      .persona-control-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        border: 1px solid transparent;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        font-size: 0.8rem;
+      }
+
+      .persona-control-item:hover {
+        background: var(--bg-secondary);
+        border-color: rgba(203, 213, 225, 0.7);
+      }
+
+      .persona-control-item.action {
+        color: var(--text-primary);
+      }
+
+      .persona-control-item.action:hover {
+        color: var(--accent-primary);
+      }
+
+      .persona-control-item.danger:hover {
+        background: rgba(220, 38, 38, 0.1);
+        color: var(--danger);
+      }
+
+      .persona-control-label {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      /* Notification Panel */
+      .notification-bell {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        background: transparent;
+      }
+
+      .notification-bell:hover {
+        background: var(--bg-secondary);
+      }
+
+      .notification-badge {
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+        background: var(--danger);
+        color: white;
+        font-size: 0.625rem;
+        font-weight: 600;
+        min-width: 1.125rem;
+        height: 1.125rem;
+        border-radius: 0.5625rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.25rem;
+        border: 2px solid var(--glass-bg);
+      }
+
+      .notification-panel {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        width: 380px;
+        max-height: 500px;
+        background: var(--glass-bg);
+        backdrop-filter: blur(15px);
+        border: 2px solid rgba(203, 213, 225, 0.8);
+        border-radius: 1rem;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+        z-index: 1001;
+        margin-top: 0.5rem;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-10px);
+        transition: all 0.3s ease;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .notification-panel.open {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+      }
+
+      .notification-panel-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1.25rem;
+        border-bottom: 2px solid rgba(226, 232, 240, 0.9);
+      }
+
+      .notification-panel-title {
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--text-primary);
+      }
+
+      .notification-panel-actions {
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .notification-action-btn {
+        font-size: 0.75rem;
+        color: var(--primary);
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        transition: all 0.2s ease;
+      }
+
+      .notification-action-btn:hover {
+        background: rgba(37, 99, 235, 0.1);
+      }
+
+      .notification-panel-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.5rem;
+      }
+
+      .notification-item {
+        display: flex;
+        gap: 0.75rem;
+        padding: 0.875rem;
+        margin-bottom: 0.5rem;
+        border-radius: 0.75rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border: 1px solid transparent;
+      }
+
+      .notification-item:hover {
+        background: var(--bg-secondary);
+        border-color: rgba(203, 213, 225, 0.7);
+      }
+
+      .notification-item.unread {
+        background: rgba(37, 99, 235, 0.05);
+      }
+
+      .notification-icon {
+        flex-shrink: 0;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.125rem;
+      }
+
+      .notification-icon.success {
+        background: rgba(22, 163, 74, 0.1);
+        color: var(--success);
+      }
+
+      .notification-icon.info {
+        background: rgba(37, 99, 235, 0.1);
+        color: var(--primary);
+      }
+
+      .notification-icon.warning {
+        background: rgba(217, 119, 6, 0.1);
+        color: var(--warning);
+      }
+
+      .notification-icon.error {
+        background: rgba(220, 38, 38, 0.1);
+        color: var(--danger);
+      }
+
+      .notification-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .notification-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-primary);
+        margin-bottom: 0.25rem;
+      }
+
+      .notification-message {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+        margin-bottom: 0.375rem;
+        line-height: 1.4;
+      }
+
+      .notification-time {
+        font-size: 0.7rem;
+        color: var(--text-muted);
+      }
+
+      .notification-empty {
+        text-align: center;
+        padding: 3rem 2rem;
+        color: var(--text-muted);
+      }
+
+      .notification-empty-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        opacity: 0.3;
+      }
+
+      .notification-filters {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem;
+        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+        background: var(--bg-secondary);
+      }
+
+      .notification-filter-tabs {
+        display: flex;
+        gap: 0.25rem;
+        background: white;
+        border-radius: 0.5rem;
+        padding: 0.25rem;
+      }
+
+      .notification-filter-tab {
+        padding: 0.375rem 0.75rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+        background: transparent;
+        border: none;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .notification-filter-tab:hover {
+        background: var(--bg-secondary);
+      }
+
+      .notification-filter-tab.active {
+        background: var(--primary);
+        color: white;
+      }
+
+      .notification-grouping-dropdown {
+        position: relative;
+      }
+
+      .notification-grouping-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.375rem 0.625rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: var(--text-secondary);
+        background: white;
+        border: 1px solid var(--border-color);
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .notification-grouping-btn:hover {
+        border-color: var(--primary);
+        color: var(--primary);
+      }
+
+      .notification-group-header {
+        padding: 0.5rem 0.875rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        color: var(--text-secondary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        background: var(--bg-secondary);
+        border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+        margin-bottom: 0.25rem;
+      }
+
+      .view-mode-toggle {
+        display: flex;
+        align-items: center;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 0.5rem;
+        padding: 0.125rem;
+        gap: 0.125rem;
+      }
+
+      .view-mode-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        color: var(--text-secondary);
+        background: transparent;
+        border: none;
+        font-size: 0.75rem;
+      }
+
+      .view-mode-btn.active {
+        background: var(--accent-gradient);
+        color: white;
+      }
+
+      .theme-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .theme-switch {
+        position: relative;
+        width: 2.5rem;
+        height: 1.25rem;
+        background: var(--bg-secondary);
+        border: 1px solid var(--border-color);
+        border-radius: 0.625rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      .theme-switch.active {
+        background: var(--accent-primary);
+        border-color: var(--accent-primary);
+      }
+
+      .theme-switch-handle {
+        position: absolute;
+        top: 0.125rem;
+        left: 0.125rem;
+        width: 0.875rem;
+        height: 0.875rem;
+        background: white;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+
+      .theme-switch.active .theme-switch-handle {
+        transform: translateX(1.125rem);
+      }
+
+      /* Compact Mode Styles */
+      .sidebar-collapsed .nav-section-title,
+      .sidebar-collapsed .nav-badge,
+      .sidebar-collapsed .persona-role {
+        display: none;
+      }
+
+      .sidebar-collapsed .nav-link {
+        justify-content: center;
+        padding: 0.75rem;
+        margin: 0.25rem 0.5rem;
+      }
+
+      .sidebar-collapsed .nav-section-header {
+        justify-content: center;
+        padding: 0.75rem;
+        margin: 0.25rem 0.5rem;
+      }
+
+      .sidebar-collapsed .nav-chevron {
+        display: none;
+      }
+
+      .sidebar-collapsed .nav-section-content {
+        display: none;
+      }
+
+      /* Compact navigation specific styles */
+      .compact-navigation {
+        padding: 0.5rem 0;
+        width: 100%;
+        overflow: visible;
+      }
+
+      .compact-nav-item {
+        margin: 0.25rem 0.5rem;
+        position: relative;
+      }
+
+      .compact-nav-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.75rem;
+        color: var(--text-secondary);
+        text-decoration: none;
+        border-radius: 0.75rem;
+        transition: all 0.2s ease;
+        font-size: 0.8rem;
+        position: relative;
+        min-height: 3rem;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .compact-nav-link:hover,
+      .compact-nav-link.active {
+        background: var(--accent-gradient);
+        color: white;
+        box-shadow: var(--shadow);
+      }
+
+      .compact-nav-badge {
+        position: absolute;
+        top: 0.25rem;
+        right: 0.25rem;
+        background: var(--danger);
+        color: white;
+        font-size: 0.5rem;
+        padding: 0.125rem 0.25rem;
+        border-radius: 0.375rem;
+        font-weight: 600;
+        min-width: 1rem;
+        text-align: center;
+        line-height: 1;
+      }
+
+      .section-tooltip {
+        position: relative;
+      }
+
+      .section-tooltip::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        left: calc(100% + 0.75rem);
+        top: 50%;
+        transform: translateY(-50%);
+        background: var(--glass-bg);
+        color: var(--text-primary);
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        font-size: 0.75rem;
+        white-space: nowrap;
+        z-index: 1000;
+        box-shadow: var(--shadow);
+        backdrop-filter: blur(15px);
+        border: 1px solid var(--border-color);
+        opacity: 0;
+        visibility: hidden;
+        transition: all 0.2s ease;
+        pointer-events: none;
+      }
+
+      /* FIX: Only show tooltips after initialization */
+      .enterprise-layout.initialized .section-tooltip:hover::after {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Tablet responsive styles */
+      @media (max-width: 1024px) and (min-width: 769px) {
+        /* Reduce header info card padding on tablets */
+        .header-info-card {
+          padding: 0.3rem 0.6rem;
+          gap: 0.4rem;
+        }
+
+        .header-info-label {
+          font-size: 0.5rem;
+        }
+
+        .header-info-value {
+          font-size: 0.75rem;
+        }
+
+        .header-info-icon {
+          width: 1rem;
+          height: 1rem;
+        }
+
+        .notification-bell {
+          width: 2.25rem;
+          height: 2.25rem;
+        }
+
+        .logo-company {
+          font-size: 1.1rem;
+        }
+
+        .logo-tagline {
+          font-size: 0.55rem;
+        }
+      }
+
+      /* Mobile responsive styles */
+      @media (max-width: 768px) {
+        .mobile-overlay {
+          position: fixed;
+          top: var(--header-height);
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.5);
+          z-index: 1000;
+          opacity: 0;
+          visibility: hidden;
+          transition: opacity 0.3s ease, visibility 0.3s ease;
+        }
+
+        .mobile-overlay.visible {
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .layout-sidebar {
+          position: absolute;
+          top: var(--header-height);
+          left: 0;
+          height: calc(100% - var(--header-height));
+          width: 85vw;
+          max-width: var(--sidebar-width);
+          transform: translateX(-100%);
+          z-index: 1001;
+        }
+
+        .layout-sidebar.mobile-open {
+          transform: translateX(0);
+        }
+
+        .tab-bar {
+          padding: 0;
+          margin: 0;
+          width: 100%;
+        }
+
+        /* Mobile tab overflow - show only 2 tabs + more button */
+        .tab-bar-visible .tab {
+          display: none;
+        }
+
+        .tab-bar-visible .tab:nth-child(-n+2) {
+          display: flex;
+        }
+
+        .tab-more-btn {
+          display: flex;
+        }
+
+        .tab {
+          min-width: 80px;
+          max-width: 120px;
+          padding: 0.25rem 0.5rem;
+          margin: 0;
+          font-size: 0.7rem;
+        }
+
+        .single-page-header {
+          padding: 0.375rem 0.75rem;
+        }
+
+        .page-title {
+          font-size: 1rem;
+        }
+
+        .module-header {
+          margin: 1rem;
+          padding: 1rem;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.75rem;
+        }
+
+        .module-content {
+          padding: 1rem;
+        }
+
+        .footer-left,
+        .footer-right {
+          gap: 0.5rem;
+        }
+
+        .footer-environment {
+          font-size: 0.5rem;
+        }
+
+        .breadcrumb-container {
+          display: none;
+        }
+
+        .header-center {
+          display: none;
+        }
+
+        /* Hide Entity & FY info cards on mobile to make room for persona */
+        .header-info-section {
+          display: none;
+        }
+
+        /* Ensure header-right elements are properly spaced and visible */
+        .header-right {
+          gap: 0.5rem;
+          flex-wrap: nowrap;
+          flex-shrink: 0;
+        }
+
+        /* Adjust notification bell size for mobile */
+        .notification-bell {
+          width: 2.25rem;
+          height: 2.25rem;
+          flex-shrink: 0;
+        }
+
+        /* Ensure persona-control is always visible on mobile */
+        .persona-control {
+          display: flex !important;
+          flex-shrink: 0;
+          z-index: 1001;
+        }
+
+        /* Make notification panel full width on mobile */
+        .notification-panel {
+          position: fixed;
+          left: 50%;
+          right: auto;
+          transform: translateX(-50%);
+          width: calc(100vw - 2rem);
+          max-width: 380px;
+        }
+
+        .notification-panel.open {
+          transform: translateX(-50%) translateY(0);
+        }
+
+        /* Adjust persona panel for mobile - fixed position for better visibility */
+        .persona-panel {
+          position: fixed;
+          top: var(--header-height);
+          right: 0.5rem;
+          left: auto;
+          width: calc(100vw - 1rem);
+          max-width: 300px;
+          margin-top: 0.25rem;
+        }
+
+        /* Make logo smaller on mobile */
+        .logo-company {
+          font-size: 1rem;
+        }
+
+        .logo-tagline {
+          font-size: 0.5rem;
+        }
+
+        .persona-role {
+          display: none;
+        }
+      }
+
+      /* Extra small mobile (phones) */
+      @media (max-width: 480px) {
+        .layout-header {
+          padding: 0 0.5rem;
+          height: 3rem;
+        }
+
+        .header-left {
+          gap: 0.5rem;
+        }
+
+        .menu-toggle {
+          width: 2rem;
+          height: 2rem;
+          padding: 0.25rem;
+        }
+
+        .logo-company {
+          font-size: 0.875rem;
+        }
+
+        .logo-tagline {
+          display: none;
+        }
+
+        .notification-bell {
+          width: 2rem;
+          height: 2rem;
+        }
+
+        .notification-panel {
+          width: calc(100vw - 1rem);
+          max-width: 100%;
+          right: -0.25rem;
+        }
+
+        .notification-filter-tab {
+          padding: 0.25rem 0.5rem;
+          font-size: 0.65rem;
+        }
+
+        .notification-grouping-btn {
+          font-size: 0.65rem;
+          padding: 0.25rem 0.5rem;
+        }
+
+        .tab {
+          min-width: 60px;
+          max-width: 100px;
+          padding: 0.25rem 0.375rem;
+          font-size: 0.65rem;
+        }
+
+        .module-header {
+          margin: 0.75rem;
+          padding: 0.75rem;
+        }
+
+        .module-content {
+          padding: 0.75rem;
+        }
+
+        .header-right {
+          gap: 0.375rem;
+        }
+
+        /* Smaller persona avatar on extra small screens */
+        .persona-avatar {
+          width: 1.75rem;
+          height: 1.75rem;
+          font-size: 0.65rem;
+        }
+      }
+    `;
+  }, [config.branding.colors, config.layout, footerVisible]);
+
+  // Apply theme and styles
+  useEffect(() => {
+    const styleId = "enterprise-layout-styles";
+    const existingStyle = document.getElementById(styleId);
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = dynamicStyles;
+    document.head.appendChild(style);
+
+    return () => {
+      const style = document.getElementById(styleId);
+      if (style) {
+        style.remove();
+      }
+    };
+  }, [dynamicStyles]);
+
+  // Helper function to find which section contains the active tab (moved before useEffect)
+  const findActiveSectionName = useCallback(
+    (activeTabId: string): string | null => {
+      for (const section of dynamicNavigation) {
+        if (section.items.some((item) => item.id === activeTabId)) {
+          return section.section;
+        }
+      }
+      return null;
+    },
+    [dynamicNavigation]
+  );
+
+  useEffect(() => {
+    document.documentElement.setAttribute(
+      "data-theme",
+      darkMode ? "dark" : "light"
+    );
+    if (onThemeChange) {
+      onThemeChange(darkMode ? "dark" : "light");
+    }
+  }, [darkMode, onThemeChange]);
+
+  // Responsive handling
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  // Update breadcrumbs when active tab changes
+  useEffect(() => {
+    if (activeTab === "overview") {
+      setBreadcrumbs(["Dashboard", "Overview"]);
+    } else {
+      const moduleConfig = dynamicModules[activeTab];
+      if (moduleConfig && moduleConfig.breadcrumb) {
+        setBreadcrumbs(moduleConfig.breadcrumb);
+      } else {
+        setBreadcrumbs([
+          "Dashboard",
+          activeTab
+            .replace("-", " ")
+            .replace(/\b\w/g, (l: string) => l.toUpperCase()),
+        ]);
+      }
+    }
+  }, [activeTab, dynamicModules]);
+
+  useEffect(() => {
+    if (autoCollapseEnabled && !isMobile && activeTab !== "overview") {
+      setSidebarCollapsed(true);
+
+      const activeSectionName = findActiveSectionName(activeTab);
+      if (activeSectionName) {
+        setExpandedSections(new Set([activeSectionName]));
+      }
+    }
+  }, [activeTab, autoCollapseEnabled, isMobile, findActiveSectionName]);
+
+  // NEW: Helper function to recursively find if an item has active children
+  const hasActiveChild = useCallback(
+    (item: NavigationItem, activeTabId: string): boolean => {
+      if (item.id === activeTabId) return true;
+      if (item.children) {
+        return item.children.some((child) =>
+          hasActiveChild(child, activeTabId)
+        );
+      }
+      return false;
+    },
+    []
+  );
+
+  // Helper function to get items to display in compact mode
+  const getCompactModeItems = useCallback(
+    (
+      strategy: "sections-only" | "all-items" | "smart-grouping"
+    ): CompactModeItem[] => {
+      switch (strategy) {
+        case "sections-only":
+          return dynamicNavigation.map(
+            (section) =>
+              ({
+                id: `section-${section.section}`,
+                title: section.section,
+                icon: section.icon || "folder",
+                isSection: true,
+                section: section.section,
+                items: section.items,
+                sectionName: section.section,
+                badge:
+                  section.items
+                    .reduce((sum, item) => {
+                      const badgeNum = item.badge
+                        ? parseInt(item.badge) || 0
+                        : 0;
+                      return sum + badgeNum;
+                    }, 0)
+                    .toString() || undefined,
+              } as CompactModeItem)
+          );
+
+        case "all-items":
+          return dynamicNavigation.flatMap((section) =>
+            section.items.map((item) => {
+              const compactItem: CompactModeItem = {
+                ...item,
+                sectionName: section.section || "default-section",
+                children: item.children
+                  ? item.children.map(
+                      (child) =>
+                        ({
+                          ...child,
+                          sectionName: section.section || "default-section",
+                        } as CompactModeItem)
+                    )
+                  : undefined,
+              };
+              return compactItem;
+            })
+          );
+
+        case "smart-grouping":
+        default:
+          const maxItemsBeforeGrouping = 3;
+          return dynamicNavigation.flatMap((section) => {
+            if (section.items.length > maxItemsBeforeGrouping) {
+              return [
+                {
+                  id: `section-${section.section}`,
+                  title: section.section,
+                  icon: section.icon || "folder",
+                  isSection: true,
+                  section: section.section,
+                  items: section.items,
+                  sectionName: section.section || "default-section",
+                  badge:
+                    section.items
+                      .reduce((sum, item) => {
+                        const badgeNum = item.badge
+                          ? parseInt(item.badge) || 0
+                          : 0;
+                        return sum + badgeNum;
+                      }, 0)
+                      .toString() || undefined,
+                },
+              ];
+            } else {
+              return section.items.map(
+                (item) =>
+                  ({
+                    ...item,
+                    sectionName: section.section || "default-section",
+                    children: item.children
+                      ? item.children.map(
+                          (child) =>
+                            ({
+                              ...child,
+                              sectionName: section.section || "default-section",
+                            } as CompactModeItem)
+                        )
+                      : undefined,
+                  } as CompactModeItem)
+              );
+            }
+          });
+      }
+    },
+    [dynamicNavigation, config.layout.compactModeStrategy]
+  );
+
+  // Permission checking helper
+  const hasPermission = useCallback(
+    (permission: string): boolean => {
+      return (
+        dynamicUser.permissions.includes(permission) ||
+        dynamicUser.permissions.includes("admin") ||
+        dynamicUser.permissions.includes("write")
+      );
+    },
+    [dynamicUser.permissions]
+  );
+
+  // NEW: Helper function to toggle sub-item expansion
+  const toggleSubItem = useCallback((itemId: string) => {
+    setExpandedSubItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  }, []);
+
+  // Calculate how many compact items can fit in screen height
+  const [visibleCompactItems, setVisibleCompactItems] = useState<number>(10);
+
+  useEffect(() => {
+    const calculateVisibleItems = () => {
+      const headerHeight = 48;
+      const footerHeight = footerVisible ? 32 : 0;
+      const availableHeight = window.innerHeight - headerHeight - footerHeight;
+      const sidebarPadding = 16;
+      const itemHeight = 56;
+
+      const maxItems = Math.floor(
+        (availableHeight - sidebarPadding) / itemHeight
+      );
+      setVisibleCompactItems(Math.max(3, maxItems));
+    };
+
+    calculateVisibleItems();
+    window.addEventListener("resize", calculateVisibleItems);
+    return () => window.removeEventListener("resize", calculateVisibleItems);
+  }, [footerVisible]);
+
+  // Module navigation
+  const handleModuleSelect = useCallback(
+    (moduleId: string) => {
+      if (autoCollapseEnabled && !isMobile && moduleId !== "overview") {
+        setSidebarCollapsed(true);
+        const activeSectionName = findActiveSectionName(moduleId);
+        if (activeSectionName) {
+          setExpandedSections(new Set([activeSectionName]));
+        }
+      }
+
+      startTransition(() => {
+        if (tabModeEnabled) {
+          if (!openTabs.has(moduleId)) {
+            const moduleConfig = dynamicModules[moduleId] || {
+              title: moduleId
+                .replace("-", " ")
+                .replace(/\b\w/g, (l: string) => l.toUpperCase()),
+              description: `${moduleId.replace("-", " ")} module`,
+              component: null,
+              actions: ["View Details", "Configure"],
+              permissions: [],
+              breadcrumb: [],
+            };
+            const title =
+              moduleId === "overview" ? "Overview" : moduleConfig.title;
+
+            setOpenTabs((prev) =>
+              new Map(prev).set(moduleId, { title, config: moduleConfig })
+            );
+          }
+        } else {
+          if (!openTabs.has(moduleId)) {
+            const moduleConfig = dynamicModules[moduleId] || {
+              title: moduleId
+                .replace("-", " ")
+                .replace(/\b\w/g, (l: string) => l.toUpperCase()),
+              description: `${moduleId.replace("-", " ")} module`,
+              component: null,
+              actions: ["View Details", "Configure"],
+              permissions: [],
+              breadcrumb: [],
+            };
+            const title =
+              moduleId === "overview" ? "Overview" : moduleConfig.title;
+
+            setOpenTabs((prev) =>
+              new Map(prev).set(moduleId, { title, config: moduleConfig })
+            );
+          }
+        }
+
+        setActiveTab(moduleId);
+      });
+
+      if (isMobile) {
+        setMobileMenuOpen(false);
+      }
+
+      if (onModuleChange) {
+        (onModuleChange as (moduleId: string, config?: ModuleConfig) => void)(
+          moduleId,
+          dynamicModules[moduleId]
+        );
+      }
+    },
+    [
+      openTabs,
+      isMobile,
+      tabModeEnabled,
+      startTransition,
+      onModuleChange,
+      dynamicModules,
+      autoCollapseEnabled,
+      findActiveSectionName,
+    ]
+  );
+
+  // Handle tab close
+  const handleTabClose = useCallback(
+    (moduleId: string) => {
+      if (moduleId === "overview") return;
+
+      setOpenTabs((prev) => {
+        const newTabs = new Map(prev);
+        newTabs.delete(moduleId);
+        return newTabs;
+      });
+
+      if (activeTab === moduleId) {
+        const availableTabs = Array.from(openTabs.keys()).filter(
+          (id) => id !== moduleId
+        );
+        const newActiveTab = availableTabs.includes("overview")
+          ? "overview"
+          : availableTabs[0];
+        if (newActiveTab) {
+          setActiveTab(newActiveTab);
+        }
+      }
+    },
+    [activeTab, openTabs]
+  );
+
+  // Handle back to overview in single page mode
+  const handleBackToOverview = () => {
+    setActiveTab("overview");
+  };
+
+  const toggleSection = (sectionName: string) => {
+    setExpandedSections((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(sectionName)) {
+        newSet.delete(sectionName);
+      } else {
+        newSet.add(sectionName);
+      }
+      return newSet;
+    });
+  };
+
+  // Handle section click in compact mode
+  const handleSectionClick = useCallback(
+    (section: any) => {
+      if (section.items.length === 1) {
+        handleModuleSelect(section.items[0].id);
+      } else {
+        handleModuleSelect(section.items[0].id);
+      }
+    },
+    [handleModuleSelect]
+  );
+
+  const toggleTheme = () => {
+    startTransition(() => {
+      setDarkMode((prev) => !prev);
+    });
+  };
+
+  const toggleFooter = () => {
+    setFooterVisible((prev) => !prev);
+  };
+
+  const toggleAutoCollapse = () => {
+    setAutoCollapseEnabled((prev) => !prev);
+  };
+
+  // Persona panel handlers
+  const handleChangePassword = () => {
+    setPersonaPanelOpen(false);
+    if (config.hooks.onChangePassword) {
+      config.hooks.onChangePassword();
+    } else {
+      // Open the change password modal
+      setChangePasswordModalOpen(true);
+    }
+  };
+
+  // Handle change password submission
+  const handleChangePasswordSubmit = async (data: {
+    currentPassword: string;
+    newPassword: string;
+    confirmPassword: string;
+  }) => {
+    setIsChangingPassword(true);
+    try {
+      // TODO: Replace with actual API call
+      // await authService.changePassword(data);
+
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+
+      // Show success notification
+      notificationService.success(
+        'Password Changed',
+        'Your password has been changed successfully.'
+      );
+
+      setChangePasswordModalOpen(false);
+    } catch (error: any) {
+      // Show error notification
+      notificationService.error(
+        'Password Change Failed',
+        error?.message || 'Failed to change password. Please try again.'
+      );
+      throw error; // Re-throw to let the modal handle it
+    } finally {
+      setIsChangingPassword(false);
+    }
+  };
+
+  const handleLogout = () => {
+    console.log("Logout button clicked");
+    try {
+      setPersonaPanelOpen(false);
+
+      if (config.hooks.onLogout) {
+        console.log("Calling custom logout hook");
+        config.hooks.onLogout();
+      } else {
+        console.log("No custom logout hook, using default");
+        const confirmLogout = window.confirm("Are you sure you want to logout?");
+        if (confirmLogout) {
+          console.log("User confirmed logout");
+          // Clear any stored session data
+          localStorage.removeItem('authToken');
+          localStorage.removeItem('userData');
+          sessionStorage.clear();
+
+          // Show logout confirmation
+          alert("You have been logged out successfully!");
+
+          // Redirect to login page after alert is dismissed
+          console.log("Redirecting to login page...");
+          setTimeout(() => {
+            // Redirect to root path (login page)
+            window.location.href = '/';
+          }, 100); // Small delay to ensure alert is dismissed
+        } else {
+          console.log("User cancelled logout");
+        }
+      }
+    } catch (error) {
+      console.error("Error during logout:", error);
+      alert("An error occurred during logout. Please try again.");
+    }
+  };
+
+  // Environment class helper
+  const getEnvironmentClass = (env: string) => {
+    const envLower = env.toLowerCase();
+    switch (envLower) {
+      case "development":
+        return "env-development";
+      case "staging":
+        return "env-staging";
+      case "production":
+        return "env-production";
+      case "uat":
+        return "env-uat";
+      default:
+        return "env-development";
+    }
+  };
+
+  // NEW: Recursive function to render navigation items with multi-level support
+  const renderNavigationItem = useCallback(
+    (item: NavigationItem, level: number = 0) => {
+      const hasChildren = item.children && item.children.length > 0;
+      const isExpanded = expandedSubItems.has(item.id);
+      const isActive = hasActiveChild(item, activeTab);
+      const isDirectlyActive = activeTab === item.id;
+
+      if (hasChildren) {
+        return (
+          <li key={item.id} className={`nav-item nav-item-with-children`}>
+            <a
+              href="#"
+              className={`nav-link ${isDirectlyActive ? "active" : ""}`}
+              onClick={(e) => {
+                e.preventDefault();
+                toggleSubItem(item.id);
+              }}
+              title={sidebarCollapsed ? item.title : undefined}
+            >
+              {IconSystem[item.icon] && IconSystem[item.icon]()}
+              {!sidebarCollapsed && (
+                <>
+                  {item.title}
+                  {item.badge && (
+                    <span className="nav-badge">{item.badge}</span>
+                  )}
+                  <div
+                    className={`nav-item-expand ${
+                      isExpanded ? "expanded" : ""
+                    }`}
+                  >
+                    <IconSystem.chevronRight />
+                  </div>
+                </>
+              )}
+            </a>
+            {!sidebarCollapsed && item.children && (
+              <ul
+                className={`nav-sub-menu ${
+                  isExpanded ? "expanded" : "collapsed"
+                }`}
+                style={{
+                  maxHeight: isExpanded ? "300px" : "0",
+                  overflow: "hidden",
+                  transition: "all 0.3s ease",
+                  opacity: isExpanded ? 1 : 0,
+                }}
+              >
+                {item.children.map((child) =>
+                  renderNavigationItem(child, level + 1)
+                )}
+              </ul>
+            )}
+          </li>
+        );
+      } else {
+        return (
+          <li key={item.id} className={level > 0 ? "nav-sub-item" : "nav-item"}>
+            <a
+              href="#"
+              className={
+                level > 0
+                  ? `nav-sub-link ${isDirectlyActive ? "active" : ""}`
+                  : `nav-link ${isDirectlyActive ? "active" : ""}`
+              }
+              onClick={(e) => {
+                e.preventDefault();
+                if (item.onClick) {
+                  item.onClick();
+                } else {
+                  handleModuleSelect(item.id);
+                }
+              }}
+              title={sidebarCollapsed ? item.title : undefined}
+            >
+              {IconSystem[item.icon] && IconSystem[item.icon]()}
+              {!sidebarCollapsed && (
+                <>
+                  {item.title}
+                  {item.badge && (
+                    <span className="nav-badge">{item.badge}</span>
+                  )}
+                </>
+              )}
+            </a>
+          </li>
+        );
+      }
+    },
+    [
+      activeTab,
+      sidebarCollapsed,
+      expandedSubItems,
+      toggleSubItem,
+      handleModuleSelect,
+      hasActiveChild,
+      IconSystem,
+    ]
+  );
+
+  // Breadcrumb component
+  const BreadcrumbComponent = () => {
+    if (!config.layout.showBreadcrumbs || isMobile) return null;
+
+    return (
+      <div className="breadcrumb-container">
+        <nav className="breadcrumb" aria-label="Breadcrumb">
+          {breadcrumbs.map((crumb, index) => (
+            <div key={index} className="breadcrumb-item">
+              {index < breadcrumbs.length - 1 ? (
+                <>
+                  <a
+                    href="#"
+                    className="breadcrumb-link"
+                    onClick={(e) => e.preventDefault()}
+                  >
+                    {crumb}
+                  </a>
+                  <span className="breadcrumb-separator">
+                    <IconSystem.breadcrumbSeparator />
+                  </span>
+                </>
+              ) : (
+                <span className="breadcrumb-current">{crumb}</span>
+              )}
+            </div>
+          ))}
+        </nav>
+      </div>
+    );
+  };
+
+  // Logo component
+  const LogoComponent = () => {
+    const { logo } = config.branding;
+
+    return (
+      <div className="app-logo">
+        {logo?.src && (
+          <img
+            src={logo.src}
+            alt={logo.alt || `${dynamicAppTitle} Logo`}
+            className="logo-image"
+            style={{
+              width: logo.width || "28px",
+              height: logo.height || "28px",
+            }}
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = "none";
+            }}
+          />
+        )}
+        {logo?.showText !== false && <span>{dynamicAppTitle}</span>}
+      </div>
+    );
+  };
+
+  // Header Info Card Component
+  interface HeaderInfoCardProps {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+    color: 'blue' | 'green';
+    options?: string[];
+    isOpen?: boolean;
+    onToggle?: () => void;
+    onSelect?: (value: string) => void;
+  }
+
+  const HeaderInfoCard: React.FC<HeaderInfoCardProps> = ({
+    label,
+    value,
+    icon,
+    color,
+    options,
+    isOpen,
+    onToggle,
+    onSelect
+  }) => {
+    const isSelectable = options && options.length > 0;
+
+    return (
+      <div
+        className={`header-info-card header-info-card-${color} ${isSelectable ? 'selectable' : ''}`} 
+        onClick={isSelectable ? onToggle : undefined}
+      >
+        {icon && <div className="header-info-icon">{icon}</div>}
+        <div className="header-info-content">
+          <span className="header-info-label">{label}</span>
+          <span className="header-info-value">{value}</span>
+        </div>
+        {isSelectable && (
+          <>
+            <div className="header-info-chevron">
+              <IconSystem.chevronDown />
+            </div>
+            {isOpen && (
+              <div className={`header-info-dropdown header-info-dropdown-${color}`}>
+                {options.map((option) => (
+                  <div
+                  
+                    key={option}
+                    className={`header-info-dropdown-item ${option === value ? 'active' : ''}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onSelect?.(option);
+                      onToggle?.();
+                    }}
+                  >
+                    {option}
+                    {option === value && (
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="3"
+                      >
+                        <polyline points="20 6 9 17 4 12"></polyline>
+                      </svg>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    );
+  };
+
+  // Persona Control Component
+  const PersonaControlComponent = () => {
+    return (
+      <div
+        className="persona-control"
+        onClick={() => setPersonaPanelOpen(!personaPanelOpen)}
+      >
+        <div className="persona-avatar">{dynamicUser.avatar}</div>
+        {!isMobile && <div className="persona-role">{dynamicUser.role}</div>}
+        <IconSystem.chevronDown />
+
+        {/* FIX: Only render panel content after initialization */}
+        {isInitialized && (
+          <div className={`persona-panel ${personaPanelOpen ? "open" : ""}`}>
+            <div className="persona-panel-header">
+              <div className="persona-panel-avatar">{dynamicUser.avatar}</div>
+              <div className="persona-panel-info">
+                <h3>{dynamicUser.name}</h3>
+                <p>{dynamicUser.role}</p>
+              </div>
+            </div>
+
+            <div className="persona-panel-section">
+              <h4>Display Options</h4>
+              <div className="persona-panel-controls">
+                <div className="persona-control-item">
+                  <div className="persona-control-label">
+                    <IconSystem.tabs />
+                    View Mode
+                  </div>
+                  <div className="view-mode-toggle">
+                    <button
+                      className={`view-mode-btn ${
+                        tabModeEnabled ? "active" : ""
+                      }`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        startTransition(() => setTabModeEnabled(true));
+                      }}
+                    >
+                      Tabs
+                    </button>
+                    <button
+                      className={`view-mode-btn ${
+                        !tabModeEnabled ? "active" : ""
+                      }`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        startTransition(() => setTabModeEnabled(false));
+                      }}
+                    >
+                      Single
+                    </button>
+                  </div>
+                </div>
+
+                <div className="persona-control-item">
+                  <div className="persona-control-label">
+                    <IconSystem.settings />
+                    Dark Mode--3
+                  </div>
+                  <div
+                    className={`theme-switch ${darkMode ? "active" : ""}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleTheme();
+                    }}
+                  >
+                    <div className="theme-switch-handle"></div>
+                  </div>
+                </div>
+
+                <div className="persona-control-item">
+                  <div className="persona-control-label">
+                    <IconSystem.footer />
+                    Show Footer
+                  </div>
+                  <div
+                    className={`theme-switch ${footerVisible ? "active" : ""}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleFooter();
+                    }}
+                  >
+                    <div className="theme-switch-handle"></div>
+                  </div>
+                </div>
+
+                <div className="persona-control-item">
+                  <div className="persona-control-label">
+                    <IconSystem.collapse />
+                    Auto Collapse Sidebar
+                  </div>
+                  <div
+                    className={`theme-switch ${
+                      autoCollapseEnabled ? "active" : ""
+                    }`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleAutoCollapse();
+                    }}
+                  >
+                    <div className="theme-switch-handle"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="persona-panel-section">
+              <h4>Account</h4>
+              <div className="persona-panel-controls">
+                <div
+                  className="persona-control-item action"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleChangePassword();
+                  }}
+                >
+                  <div className="persona-control-label">
+                    <IconSystem.lock />
+                    Change Password
+                  </div>
+                </div>
+
+                <div
+                  className="persona-control-item action danger"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleLogout();
+                  }}
+                >
+                  <div className="persona-control-label">
+                    <IconSystem.logout />
+                    Logout
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // Click outside handler for persona panel
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (personaPanelOpen && !target.closest(".persona-control")) {
+        setPersonaPanelOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [personaPanelOpen]);
+
+  // Click outside handler for notification panel
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (notificationPanelOpen && !target.closest(".notification-bell") && !target.closest(".notification-panel")) {
+        setNotificationPanelOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [notificationPanelOpen]);
+
+  // Click outside handler for tab overflow menu
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (tabOverflowMenuOpen && !target.closest(".tab-more-container")) {
+        setTabOverflowMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [tabOverflowMenuOpen]);
+
+  // Click outside handler for header info dropdowns
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (!target.closest(".header-info-card")) {
+        setEntityDropdownOpen(false);
+        setFyDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div
+      className={`enterprise-layout ${isInitialized ? "initialized" : ""}`}
+      id={`enterprise-app-${componentId}`}
+    >
+      {/* Header */}
+      <header className="layout-header">
+        <div className="header-left">
+          <button
+            className="menu-toggle"
+            onClick={() =>
+              isMobile
+                ? setMobileMenuOpen(!mobileMenuOpen)
+                : setSidebarCollapsed(!sidebarCollapsed)
+            }
+          >
+            <IconSystem.menu />
+          </button>
+          <LogoComponent />
+          <BreadcrumbComponent />
+        </div>
+
+        <div className="header-center">{/* Reserved for future use */}</div>
+
+        <div className="header-right">
+          {/* Entity and Financial Year Info */}
+          <div className="header-info-section">
+            <HeaderInfoCard
+              label="Entity & BU"
+              value={`${currentEntity} - ${currentBusinessUnit}`}
+              color="blue"
+              options={availableEntities}
+              isOpen={entityDropdownOpen}
+              onToggle={() => {
+                setEntityDropdownOpen(!entityDropdownOpen);
+                setFyDropdownOpen(false);
+              }}
+              onSelect={(value) => setCurrentEntity(value)}
+              icon={
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <rect x="4" y="2" width="16" height="20" rx="2" />
+                  <line x1="9" y1="6" x2="9" y2="6" />
+                  <line x1="15" y1="6" x2="15" y2="6" />
+                  <line x1="9" y1="10" x2="9" y2="10" />
+                  <line x1="15" y1="10" x2="15" y2="10" />
+                  <line x1="9" y1="14" x2="9" y2="14" />
+                  <line x1="15" y1="14" x2="15" y2="14" />
+                  <line x1="9" y1="18" x2="9" y2="18" />
+                  <line x1="15" y1="18" x2="15" y2="18" />
+                </svg>
+              }
+            />
+            <HeaderInfoCard
+              label="Financial Year"
+              value={financialYear}
+              color="green"
+              options={availableFinancialYears}
+              isOpen={fyDropdownOpen}
+              onToggle={() => {
+                setFyDropdownOpen(!fyDropdownOpen);
+                setEntityDropdownOpen(false);
+              }}
+              onSelect={(value) => setFinancialYear(value)}
+              icon={
+                <svg
+                  width="18"
+                  height="18"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+                  <line x1="16" y1="2" x2="16" y2="6" />
+                  <line x1="8" y1="2" x2="8" y2="6" />
+                  <line x1="3" y1="10" x2="21" y2="10" />
+                </svg>
+              }
+            />
+          </div>
+
+          {/* Notification Bell */}
+          <div style={{ position: "relative" }}>
+            <div
+              className="notification-bell"
+              onClick={() => {
+                setNotificationPanelOpen(!notificationPanelOpen);
+                setPersonaPanelOpen(false);
+                setEntityDropdownOpen(false);
+                setFyDropdownOpen(false);
+              }}
+            >
+              <IconSystem.notification />
+              {notifications.filter(n => !n.read).length > 0 && (
+                <div className="notification-badge">
+                  {notifications.filter(n => !n.read).length}
+                </div>
+              )}
+            </div>
+
+            {/* Notification Panel */}
+            {isInitialized && (
+              <div className={`notification-panel ${notificationPanelOpen ? "open" : ""}`}>
+                <div className="notification-panel-header">
+                  <div className="notification-panel-title">Notifications</div>
+                  <div className="notification-panel-actions">
+                    <button
+                      className="notification-action-btn"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setNotifications(notifications.map(n => ({ ...n, read: true })));
+                      }}
+                    >
+                      Mark all read
+                    </button>
+                  </div>
+                </div>
+
+                {/* Filter and Grouping Bar */}
+                <div className="notification-filters">
+                  <div className="notification-filter-tabs">
+                    <button
+                      className={`notification-filter-tab ${notificationFilter === 'all' ? 'active' : ''}`}
+                      onClick={() => setNotificationFilter('all')}
+                    >
+                      All
+                    </button>
+                    <button
+                      className={`notification-filter-tab ${notificationFilter === 'unread' ? 'active' : ''}`}
+                      onClick={() => setNotificationFilter('unread')}
+                    >
+                      Unread
+                    </button>
+                    <button
+                      className={`notification-filter-tab ${notificationFilter === 'read' ? 'active' : ''}`}
+                      onClick={() => setNotificationFilter('read')}
+                    >
+                      Read
+                    </button>
+                  </div>
+                  <select
+                    className="notification-grouping-btn"
+                    value={notificationGrouping}
+                    onChange={(e) => setNotificationGrouping(e.target.value as 'none' | 'type' | 'time')}
+                  >
+                    <option value="none">No Grouping</option>
+                    <option value="type">Group by Type</option>
+                    <option value="time">Group by Time</option>
+                  </select>
+                </div>
+
+                <div className="notification-panel-content">
+                  {(() => {
+                    // Filter notifications based on selected filter
+                    const filteredNotifications = notifications.filter(n => {
+                      if (notificationFilter === 'unread') return !n.read;
+                      if (notificationFilter === 'read') return n.read;
+                      return true;
+                    });
+
+                    if (filteredNotifications.length === 0) {
+                      return (
+                        <div className="notification-empty">
+                          <div className="notification-empty-icon">🔔</div>
+                          <div>No notifications found</div>
+                        </div>
+                      );
+                    }
+
+                    // Group notifications if grouping is enabled
+                    if (notificationGrouping === 'type') {
+                      const groupedByType: { [key: string]: typeof filteredNotifications } = {};
+                      filteredNotifications.forEach(n => {
+                        if (!groupedByType[n.type]) groupedByType[n.type] = [];
+                        groupedByType[n.type].push(n);
+                      });
+
+                      return Object.entries(groupedByType).map(([type, items]) => (
+                        <React.Fragment key={type}>
+                          <div className="notification-group-header">
+                            {type.charAt(0).toUpperCase() + type.slice(1)} ({items.length})
+                          </div>
+                          {items.map((notification) => (
+                            <div
+                              key={notification.id}
+                              className={`notification-item ${!notification.read ? 'unread' : ''}`}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setNotifications(notifications.map(n =>
+                                  n.id === notification.id ? { ...n, read: true } : n
+                                ));
+                              }}
+                            >
+                              <div className={`notification-icon ${notification.type}`}>
+                                {notification.type === 'success' && '✓'}
+                                {notification.type === 'info' && 'ℹ'}
+                                {notification.type === 'warning' && '⚠'}
+                                {notification.type === 'error' && '✕'}
+                              </div>
+                              <div className="notification-content">
+                                <div className="notification-title">{notification.title}</div>
+                                <div className="notification-message">{notification.message}</div>
+                                <div className="notification-time">{notification.time}</div>
+                              </div>
+                            </div>
+                          ))}
+                        </React.Fragment>
+                      ));
+                    } else if (notificationGrouping === 'time') {
+                      const groupedByTime: { [key: string]: typeof filteredNotifications } = {
+                        'Recent': [],
+                        'Earlier Today': [],
+                        'Older': []
+                      };
+
+                      filteredNotifications.forEach(n => {
+                        if (n.time.includes('min') || n.time.includes('hour')) {
+                          groupedByTime['Recent'].push(n);
+                        } else if (n.time.includes('today')) {
+                          groupedByTime['Earlier Today'].push(n);
+                        } else {
+                          groupedByTime['Older'].push(n);
+                        }
+                      });
+
+                      return Object.entries(groupedByTime)
+                        .filter(([_, items]) => items.length > 0)
+                        .map(([time, items]) => (
+                          <React.Fragment key={time}>
+                            <div className="notification-group-header">
+                              {time} ({items.length})
+                            </div>
+                            {items.map((notification) => (
+                              <div
+                                key={notification.id}
+                                className={`notification-item ${!notification.read ? 'unread' : ''}`}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  setNotifications(notifications.map(n =>
+                                    n.id === notification.id ? { ...n, read: true } : n
+                                  ));
+                                }}
+                              >
+                                <div className={`notification-icon ${notification.type}`}>
+                                  {notification.type === 'success' && '✓'}
+                                  {notification.type === 'info' && 'ℹ'}
+                                  {notification.type === 'warning' && '⚠'}
+                                  {notification.type === 'error' && '✕'}
+                                </div>
+                                <div className="notification-content">
+                                  <div className="notification-title">{notification.title}</div>
+                                  <div className="notification-message">{notification.message}</div>
+                                  <div className="notification-time">{notification.time}</div>
+                                </div>
+                              </div>
+                            ))}
+                          </React.Fragment>
+                        ));
+                    } else {
+                      // No grouping - show flat list
+                      return filteredNotifications.map((notification) => (
+                        <div
+                          key={notification.id}
+                          className={`notification-item ${!notification.read ? 'unread' : ''}`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setNotifications(notifications.map(n =>
+                              n.id === notification.id ? { ...n, read: true } : n
+                            ));
+                          }}
+                        >
+                          <div className={`notification-icon ${notification.type}`}>
+                            {notification.type === 'success' && '✓'}
+                            {notification.type === 'info' && 'ℹ'}
+                            {notification.type === 'warning' && '⚠'}
+                            {notification.type === 'error' && '✕'}
+                          </div>
+                          <div className="notification-content">
+                            <div className="notification-title">{notification.title}</div>
+                            <div className="notification-message">{notification.message}</div>
+                            <div className="notification-time">{notification.time}</div>
+                          </div>
+                        </div>
+                      ));
+                    }
+                  })()}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <PersonaControlComponent />
+        </div>
+      </header>
+
+
+
+
+      
+
+      {/* Mobile Overlay - shown when menu is open on mobile */}
+      {isMobile && mobileMenuOpen && (
+        <div
+          className="mobile-overlay visible"
+          onClick={() => setMobileMenuOpen(false)}
+        />
+      )}
+
+      {/* Body */}
+      <div className={`layout-body ${!footerVisible ? "footer-hidden" : ""}`}>
+        {/* Sidebar */}
+        <aside
+          className={`layout-sidebar ${sidebarCollapsed ? "collapsed" : ""} ${
+            isMobile && !mobileMenuOpen ? "mobile-hidden" : ""
+          } ${mobileMenuOpen ? "mobile-open" : ""}`}
+        >
+          {sidebarCollapsed ? (
+            // Compact mode with smart grouping
+            <div className="compact-navigation">
+              {getCompactModeItems(config.layout.compactModeStrategy)
+                .slice(0, visibleCompactItems)
+                .map((item, index) => (
+                  <div key={item.id || index} className="compact-nav-item">
+                    <a
+                      href="#"
+                      className={`compact-nav-link section-tooltip ${
+                        item.isSection
+                          ? item.items?.some(
+                              (subItem: any) => subItem.id === activeTab
+                            )
+                            ? "active"
+                            : ""
+                          : activeTab === item.id
+                          ? "active"
+                          : ""
+                      }`}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        if (item.isSection) {
+                          handleSectionClick(item);
+                        } else {
+                          handleModuleSelect(item.id);
+                        }
+                      }}
+                      data-tooltip={item.title}
+                    >
+                      {IconSystem[item.icon] && IconSystem[item.icon]()}
+                      {item.badge && (
+                        <span className="compact-nav-badge">{item.badge}</span>
+                      )}
+                    </a>
+                  </div>
+                ))}
+              {getCompactModeItems(config.layout.compactModeStrategy).length >
+                visibleCompactItems && (
+                <div className="compact-nav-item">
+                  <div
+                    className="compact-nav-link section-tooltip"
+                    data-tooltip={`+${
+                      getCompactModeItems(config.layout.compactModeStrategy)
+                        .length - visibleCompactItems
+                    } more items`}
+                    style={{
+                      opacity: 0.6,
+                      cursor: "default",
+                      fontSize: "0.75rem",
+                      fontWeight: 600,
+                    }}
+                  >
+                    +
+                    {getCompactModeItems(config.layout.compactModeStrategy)
+                      .length - visibleCompactItems}
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            // Regular expanded navigation with multi-level support
+            dynamicNavigation.map((section, sectionIndex) => {
+              const isExpanded = expandedSections.has(section.section);
+
+              return (
+                <div key={sectionIndex} className="nav-section">
+                  <div
+                    className={`nav-section-header ${
+                      isExpanded ? "expanded" : "collapsed"
+                    }`}
+                    onClick={() =>
+                      !sidebarCollapsed && toggleSection(section.section)
+                    }
+                    style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+                  >
+                    {!sidebarCollapsed && (
+                      <>
+                        <div className="nav-section-title" style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                          {section.icon && IconSystem[section.icon] && (
+                            <span style={{ display: "flex", alignItems: "center", color: "var(--text-secondary)", fontSize: "0.875rem" }}>
+                              {IconSystem[section.icon]()}
+                            </span>
+                          )}
+                          <span>
+                            {section.section}
+                            <span
+                              style={{
+                                marginLeft: "0.5rem",
+                                fontSize: "0.6rem",
+                                color: "var(--text-muted)",
+                                fontWeight: "400",
+                              }}
+                            >
+                              ({section.items.length})
+                            </span>
+                          </span>
+                        </div>
+                        <div className="nav-chevron">
+                          {isExpanded ? (
+                            <IconSystem.chevronDown />
+                          ) : (
+                            <IconSystem.chevronRight />
+                          )}
+                        </div>
+                      </>
+                    )}
+                  </div>
+
+                  <div
+                    className={`nav-section-content ${
+                      isExpanded || sidebarCollapsed ? "expanded" : "collapsed"
+                    }`}
+                  >
+                    <ul className="nav-menu">
+                      {section.items.map((item) => renderNavigationItem(item))}
+                    </ul>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </aside>
+
+        {/* Main Content */}
+        <main className="layout-main">
+          <div className="content-wrapper">
+            {tabModeEnabled ? (
+              <div className="tab-bar-wrapper">
+                <div className="tab-bar-visible">
+                  {Array.from(openTabs.entries()).map(([moduleId, tabData]) => (
+                    <div
+                      key={moduleId}
+                      className={`tab ${activeTab === moduleId ? "active" : ""}`}
+                      onClick={() => setActiveTab(moduleId)}
+                    >
+                      <span className="tab-title">{tabData.title}</span>
+                      {moduleId !== "overview" && (
+                        <button
+                          className="tab-close"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleTabClose(moduleId);
+                          }}
+                        >
+                          ×
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+                {openTabs.size > 2 && (
+                  <div className="tab-more-container">
+                    <button
+                      className={`tab-more-btn ${tabOverflowMenuOpen ? "active" : ""}`}
+                      onClick={() => setTabOverflowMenuOpen(!tabOverflowMenuOpen)}
+                    >
+                      <span>More</span>
+                      <span>({openTabs.size - 2})</span>
+                      <IconSystem.chevronDown />
+                    </button>
+                    <div className={`tab-overflow-menu ${tabOverflowMenuOpen ? "open" : ""}`}>
+                      {Array.from(openTabs.entries())
+                        .slice(2)
+                        .map(([moduleId, tabData]) => (
+                          <div
+                            key={moduleId}
+                            className={`tab-overflow-item ${activeTab === moduleId ? "active" : ""}`}
+                            onClick={() => {
+                              setActiveTab(moduleId);
+                              setTabOverflowMenuOpen(false);
+                            }}
+                          >
+                            <span className="tab-overflow-item-title">{tabData.title}</span>
+                            {moduleId !== "overview" && (
+                              <button
+                                className="tab-overflow-item-close"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleTabClose(moduleId);
+                                }}
+                              >
+                                ×
+                              </button>
+                            )}
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ) : (
+              activeTab !== "overview" && (
+                <div className="single-page-header">
+                  <div className="page-title">
+                    {openTabs.get(activeTab)?.title || "Unknown Module"}
+                  </div>
+                  <button
+                    className="back-button"
+                    onClick={handleBackToOverview}
+                  >
+                    <IconSystem.arrowLeft />
+                    Back to Overview
+                  </button>
+                </div>
+              )
+            )}
+
+            <div className="tab-content-area">
+              {Array.from(openTabs.entries()).map(([moduleId, tabData]) => (
+                <div
+                  key={moduleId}
+                  className={`enterprise-module ${
+                    activeTab === moduleId ? "active" : ""
+                  }`}
+                >
+                  {activeTab === moduleId && (
+                    <>
+                      {moduleId === "overview" ? (
+                        <>
+                          <div className="module-header">
+                            <div className="module-header-content">
+                              <h1 className="module-title">
+                                Welcome to {dynamicAppTitle}
+                              </h1>
+                              <p className="module-description">
+                                Enhanced Enterprise Management System with
+                                Multi-level Navigation Support
+                              </p>
+                            </div>
+                            <div className="module-actions">
+                              <button className="btn btn-primary">
+                                <IconSystem.plus />
+                                Get Started
+                              </button>
+                              <button className="btn btn-secondary">
+                                <IconSystem.file />
+                                Documentation
+                              </button>
+                            </div>
+                          </div>
+
+                          <div className="module-content">
+                           {/* Grouped Sections with Accordion - Full Width Horizontal Layout */}
+                            <div style={{ padding: "0.75rem 0 0 0", width: "100%" }}>
+                              {dynamicNavigation
+                                .filter(section => section.section !== "Dashboard")
+                                .map((section) => {
+                                  const filteredItems = section.items.filter(item => item.id !== "overview");
+
+                                  if (filteredItems.length === 0) return null;
+
+                                  const isExpanded = expandedOverviewSections.has(section.section);
+
+                                  return (
+                                    <div
+                                      key={section.section}
+                                      style={{
+                                        marginBottom: "1rem",
+                                        background: "var(--glass-bg)",
+                                        borderRadius: "1rem",
+                                        border: "1px solid var(--border-color)",
+                                        overflow: "hidden",
+                                        width: "100%",
+                                        boxSizing: "border-box"
+                                      }}
+                                    >
+                                      {/* Accordion Header */}
+                                      <div
+                                        onClick={() => {
+                                          setExpandedOverviewSections(prev => {
+                                            const newSet = new Set(prev);
+                                            if (newSet.has(section.section)) {
+                                              newSet.delete(section.section);
+                                            } else {
+                                              newSet.add(section.section);
+                                            }
+                                            return newSet;
+                                          });
+                                        }}
+                                        style={{
+                                          padding: "1rem 1.25rem",
+                                          cursor: "pointer",
+                                          display: "flex",
+                                          alignItems: "center",
+                                          justifyContent: "space-between",
+                                          background: "linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%)",
+                                          borderBottom: isExpanded ? "1px solid var(--border-color)" : "none",
+                                          transition: "all 0.2s ease"
+                                        }}
+                                        onMouseEnter={(e) => {
+                                          e.currentTarget.style.background = "linear-gradient(135deg, rgba(224, 235, 247, 1) 0%, rgba(203, 213, 225, 0.9) 100%)";
+                                        }}
+                                        onMouseLeave={(e) => {
+                                          e.currentTarget.style.background = "linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%)";
+                                        }}
+                                      >
+                                        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+                                          <h2 style={{
+                                            fontSize: "1.1rem",
+                                            fontWeight: 600,
+                                            color: "var(--text-primary)",
+                                            margin: 0
+                                          }}>
+                                            {section.section}
+                                          </h2>
+                                          <span style={{
+                                            fontSize: "0.8rem",
+                                            color: "var(--text-secondary)",
+                                            background: "var(--accent-color-10, rgba(59, 130, 246, 0.1))",
+                                            padding: "0.2rem 0.6rem",
+                                            borderRadius: "0.5rem",
+                                            fontWeight: 500
+                                          }}>
+                                            {filteredItems.length}
+                                          </span>
+                                        </div>
+                                        <div style={{
+                                          transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                                          transition: "transform 0.3s ease",
+                                          display: "flex",
+                                          alignItems: "center",
+                                          color: "var(--text-secondary)"
+                                        }}>
+                                          <IconSystem.chevronDown />
+                                        </div>
+                                      </div>
+
+                                      {/* Accordion Content - Responsive Grid Layout */}
+                                      {isExpanded && (
+                                        <div style={{
+                                          padding: "1.25rem",
+                                          display: "grid",
+                                          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+                                          gap: "1rem",
+                                          animation: "slideDown 0.3s ease",
+                                          width: "100%",
+                                          boxSizing: "border-box"
+                                        }}>
+                                          {filteredItems.map((item) => (
+                                            <div
+                                              key={item.id}
+                                              onClick={() => handleModuleSelect(item.id)}
+                                              style={{
+                                                background: "var(--bg-secondary, rgba(255,255,255,0.02))",
+                                                backdropFilter: "blur(15px)",
+                                                border: "1px solid var(--border-color)",
+                                                borderRadius: "1rem",
+                                                padding: "1.25rem",
+                                                transition: "all 0.3s ease",
+                                                cursor: "pointer"
+                                              }}
+                                              onMouseEnter={(e) => {
+                                                (e.currentTarget as HTMLElement).style.transform = "translateY(-4px)";
+                                                (e.currentTarget as HTMLElement).style.boxShadow = "0 8px 16px rgba(0,0,0,0.1)";
+                                                (e.currentTarget as HTMLElement).style.borderColor = "var(--accent-color)";
+                                              }}
+                                              onMouseLeave={(e) => {
+                                                (e.currentTarget as HTMLElement).style.transform = "translateY(0)";
+                                                (e.currentTarget as HTMLElement).style.boxShadow = "none";
+                                                (e.currentTarget as HTMLElement).style.borderColor = "var(--border-color)";
+                                              }}
+                                            >
+                                              <div
+                                                style={{
+                                                  width: "2.5rem",
+                                                  height: "2.5rem",
+                                                  background: "var(--accent-gradient)",
+                                                  borderRadius: "0.75rem",
+                                                  display: "flex",
+                                                  alignItems: "center",
+                                                  justifyContent: "center",
+                                                  color: "white",
+                                                  marginBottom: "0.75rem",
+                                                }}
+                                              >
+                                                {IconSystem[item.icon] && IconSystem[item.icon]()}
+                                              </div>
+                                              <h3
+                                                style={{
+                                                  fontSize: "1rem",
+                                                  fontWeight: 600,
+                                                  marginBottom: "0.375rem",
+                                                  color: "var(--text-primary)",
+                                                }}
+                                              >
+                                                {item.title}
+                                              </h3>
+                                              <p
+                                                style={{
+                                                  fontSize: "0.8rem",
+                                                  color: "var(--text-secondary)",
+                                                  lineHeight: 1.5,
+                                                  margin: 0
+                                                }}
+                                              >
+                                                Click to open {item.title.toLowerCase()} module
+                                              </p>
+                                            </div>
+                                          ))}
+                                        </div>
+                                      )}
+                                    </div>
+                                  );
+                                })}
+                            </div>
+                          </div>
+                        </>
+                      ) : (
+                        <>
+                          {tabData.config?.showHeader && (
+                            <div className="module-header">
+                              <div className="module-header-content">
+                                <h1 className="module-title">
+                                  {tabData.config?.title || tabData.title}
+                                </h1>
+                                <p className="module-description">
+                                  {tabData.config?.description ||
+                                    `${tabData.title} module for managing and monitoring operations`}
+                                </p>
+                              </div>
+                            </div>
+                          )}
+
+                          {tabData.config?.component ? (
+                            React.createElement(tabData.config?.component)
+                          ) : (
+                            <div className="module-content" style={{ padding: "2rem", textAlign: "center" }}>
+                              <div style={{
+                                width: "4rem",
+                                height: "4rem",
+                                background: "var(--accent-gradient)",
+                                borderRadius: "1rem",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                color: "white",
+                                margin: "0 auto 1.5rem",
+                                fontSize: "1.5rem"
+                              }}>
+                                {IconSystem.folder && IconSystem.folder()}
+                              </div>
+                              <h2 style={{
+                                fontSize: "1.5rem",
+                                fontWeight: 600,
+                                color: "var(--text-primary)",
+                                marginBottom: "0.5rem"
+                              }}>
+                                {tabData.title}
+                              </h2>
+                              <p style={{
+                                color: "var(--text-secondary)",
+                                maxWidth: "400px",
+                                margin: "0 auto"
+                              }}>
+                                This module is available. Configure the component in your module settings.
+                              </p>
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </main>
+      </div>
+
+      {/* Footer */}
+      {config.layout.enableFooter && (
+        <footer className={`layout-footer ${!footerVisible ? "hidden" : ""}`}>
+          <div className="footer-left">
+            <div
+              className={`footer-environment ${getEnvironmentClass(
+                config.footer.environment
+              )}`}
+            >
+              {config.footer.environment}
+            </div>
+            <span>{config.footer.appVersion}</span>
+            <span>{config.footer.copyright}</span>
+          </div>
+          <div className="footer-right">
+            <a href={config.footer.supportLink} className="footer-support">
+              {config.footer.supportText}
+            </a>
+          </div>
+        </footer>
+      )}
+
+      {/* Change Password Modal */}
+      <ChangePasswordModal
+        isOpen={changePasswordModalOpen}
+        onClose={() => setChangePasswordModalOpen(false)}
+        onSubmit={handleChangePasswordSubmit}
+        username={config.user.name}
+        isLoading={isChangingPassword}
+      />
+    </div>
+  );
+};
+
+
+export default EnterpriseLayout;