Centralize layout configuration in single constants file

shesha-reactjs/src/app/(main)/layout.tsx

@@ -2,13 +2,14 @@
 
 import React from 'react';
 import { useLayoutSelection } from '@/hooks/useLayoutSelection';
+import { LAYOUT_MODE } from '@/components/mainLayout/constant';
 
 export default function CommonLayout({
   children,
 }: {
   children: React.ReactNode;
 }): JSX.Element {
-  const { LayoutComponent } = useLayoutSelection('defaultLayout');
+  const { LayoutComponent } = useLayoutSelection(LAYOUT_MODE);
 
   return (
     <LayoutComponent noPadding>

shesha-reactjs/src/app/login/page.tsx

@@ -2,12 +2,11 @@
 
 import React from 'react';
 import { ConfigurableForm } from '@/components';
-import { LOGIN_CONFIGURATION } from '@/components/mainLayout/constant';
-import { FormFullName } from '@/providers';
+import { ACTIVE_LOGIN } from '@/components/mainLayout/constant';
 import { PageWithLayout } from '@/index';
 
 const Login: PageWithLayout = () => (
-  <ConfigurableForm mode="edit" formId={LOGIN_CONFIGURATION as FormFullName} />
+  <ConfigurableForm mode="edit" formId={ACTIVE_LOGIN} />
 );
 
 export default Login;

shesha-reactjs/src/app/page.tsx

@@ -7,6 +7,7 @@ import { CollapsiblePanel } from '@/components';
 import styled from 'styled-components';
 import { PageWithLayout } from '@/interfaces';
 import { useLayoutSelection } from '@/hooks';
+import { LAYOUT_MODE } from '@/components/mainLayout/constant';
 
 /**
  * There was an error
@@ -22,7 +23,7 @@ const StyledAlert: any = styled(Alert)`
 `;
 
 const Home: PageWithLayout = () => {
-  const { LayoutComponent } = useLayoutSelection('defaultLayout');
+  const { LayoutComponent } = useLayoutSelection(LAYOUT_MODE);
 
   return (
     <LayoutComponent>

shesha-reactjs/src/components/horizontalLayout/index.tsx

@@ -14,7 +14,7 @@ import { useTheme } from '@/providers';
 import { withAuth } from '@/hocs';
 import { useStyles } from './styles';
 import { ConfigurableForm } from '../configurableForm';
-import { FOOTER_CONFIGURATION, HEADER_CONFIGURATION } from '../mainLayout/constant';
+import { ACTIVE_FOOTER, ACTIVE_HEADER } from '../mainLayout/constant';
 
 const { Content, Footer } = Layout;
 
@@ -74,7 +74,7 @@ const DefaultHorizontalLayout: FC<PropsWithChildren<IHorizontalLayoutProps>> = (
       <div>
         <ConfigurableForm
           mode="readonly"
-          formId={HEADER_CONFIGURATION}
+          formId={ACTIVE_HEADER}
           showFormInfoOverlay={false}
           showDataLoadingIndicator={false}
           showMarkupLoadingIndicator={false}
@@ -111,7 +111,7 @@ const DefaultHorizontalLayout: FC<PropsWithChildren<IHorizontalLayoutProps>> = (
         ) : (
           <ConfigurableForm
             mode="readonly"
-            formId={FOOTER_CONFIGURATION}
+            formId={ACTIVE_FOOTER}
             showFormInfoOverlay={false}
             showDataLoadingIndicator={false}
             showMarkupLoadingIndicator={false}

shesha-reactjs/src/components/mainLayout/constant.ts

@@ -1,11 +1,41 @@
+import { LayoutMode } from '@/hooks';
 import { FormFullName } from '@/providers';
 
 export const SIDEBAR_COLLAPSE = 'SIDEBAR_COLLAPSE';
 
-//#region Fixed Configuration Names
+//#region Available Form Configurations
+/**
+ * These are all available form configurations.
+ * DO NOT modify these - they represent the actual forms available in your system.
+ */
 export const HEADER_CONFIGURATION: FormFullName = { name: 'header', module: 'Shesha' };
 export const HEADER_PUB_PORTAL_CONFIGURATION: FormFullName = { name: 'header-public-portal', module: 'Shesha' };
 export const LOGIN_CONFIGURATION: FormFullName = { name: 'login', module: 'Shesha' };
 export const LOGIN_PUB_PORTAL_CONFIGURATION: FormFullName = { name: 'login-public-portal', module: 'Shesha' };
 export const FOOTER_CONFIGURATION: FormFullName = { name: 'footer-public-portal', module: 'Shesha' };
 //#endregion
+
+//#region Active Layout Configuration
+/**
+ * CUSTOMIZE YOUR APPLICATION LAYOUT HERE
+ *
+ * These constants control which layout components and forms are used throughout your application.
+ * To change your app's layout, header, login page, or footer, simply modify the values below.
+ *
+ * Available layout modes: 'defaultLayout' | 'horizontalLayout'
+ * - 'defaultLayout': Traditional sidebar layout with collapsible menu
+ * - 'horizontalLayout': Horizontal top navigation layout
+ */
+
+/** The layout mode to use throughout the application */
+export const LAYOUT_MODE: LayoutMode = 'defaultLayout';
+
+/** The header form to display in the layout */
+export const ACTIVE_HEADER: FormFullName = HEADER_CONFIGURATION;
+
+/** The login form to display on the login page */
+export const ACTIVE_LOGIN: FormFullName = LOGIN_CONFIGURATION;
+
+/** The footer form to display in the layout */
+export const ACTIVE_FOOTER: FormFullName = FOOTER_CONFIGURATION;
+//#endregion

shesha-reactjs/src/components/mainLayout/header.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import classNames from 'classnames';
 import { ConfigurableForm } from '@/components';
 import { useStyles } from './styles/styles';
-import { HEADER_CONFIGURATION } from './constant';
+import { ACTIVE_HEADER } from './constant';
 import { FormFullName } from '@/providers';
 
 interface ILayoutHeaderProps {
@@ -13,7 +13,7 @@ interface ILayoutHeaderProps {
 const LayoutHeader: FC<ILayoutHeaderProps> = ({ collapsed, headerFormId }) => {
   const { styles } = useStyles();
 
-  const localHeaderFormId = headerFormId ?? HEADER_CONFIGURATION;
+  const localHeaderFormId = headerFormId ?? ACTIVE_HEADER;
   return (
     <div className={classNames(styles.layoutHeader, { collapsed })}>
       <div className={styles.headerWrapper}>