ui-soxo-bootstrap-core 2.6.40-dev.0 → 2.6.40-dev.11

package/core/components/landing-api/landing-api.js

@@ -1,547 +1,707 @@
-import { useContext, useEffect, useRef, useState } from 'react';
-
-import { Route, Switch } from 'react-router-dom';
-
-import { Skeleton } from 'antd';
-
-import { Card, ChangePassword, GlobalContext, GlobalHeader, ModuleRoutes, Profile, SettingsUtil, SpotlightSearch, useTranslation } from '../../lib';
-
-import './landing-api.scss';
-
-import HomePageAPI from '../../pages/homepage-api/homepage-api';
-
-import MenuTemplate from '../menu-template-api/menu-template-api';
-
-import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
-
-import PropTypes from 'prop-types';
-
-import { CoreScripts, MenusAPI } from '../../models';
-
-const motivatingMessages = [
-  'Setting things up for a great start...',
-  'Good things are loading. Stay with us.',
-  'Almost there. Preparing your workspace.',
-  'You are one moment away from your dashboard.',
-  'Getting everything ready for you.',
-  'Great care takes a second. Loading now.',
-];
-
-function getRandomMessage(previousMessage = '') {
-  const options = motivatingMessages.filter((message) => message !== previousMessage);
-
-  if (!options.length) {
-    return motivatingMessages[0];
-  }
-
-  const randomIndex = Math.floor(Math.random() * options.length);
-  return options[randomIndex];
-}
-
-/**
- * Landing API
- *
- * @param {*} param0
- * @returns
- */
-export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, transitionPending = false, onHomeReady, ...props }) {
-  const [loader, setLoader] = useState(false);
-
-  // const [modules, setModules] = useState([]);
-
-  const [connected] = useState();
-
-  const { dispatch, user = {} } = useContext(GlobalContext);
-
-  const [allModules, setAllModules] = useState();
-  const homeReadyNotifiedRef = useRef(false);
-  const messageIntervalRef = useRef(null);
-
-  const [meta, setMeta] = useState({});
-  const [loadingMessage, setLoadingMessage] = useState('');
-
-  // const [reports, setReports] = useState([]);
-
-  var config = {};
-
-  // Variable decides the control of homepage
-  // #TODO This is a temporary fix - Homemage
-
-  let disableHomepage = false;
-
-  if (process.env.REACT_APP_DISABLEHOMEPAGE) {
-    disableHomepage = JSON.parse(process.env.REACT_APP_DISABLEHOMEPAGE);
-  }
-
-  // useEffect(() => {
-
-  //     // Initialize the menus for the logged in user
-  //     initializeUserMenus();
-
-  // }, [selectedBranch]);
-
-  //These change is done to fix when refreshing the report menu missing, but it removed because,makes another issue, ie there is continuos loading occurs for 2 times
-  // useEffect(() => {
-
-  //     if (loader) {
-  //         initializeUserMenus();
-  //     }
-  // }, [loader]);
-
-  useEffect(() => {
-    // Initialize the menus for the logged in user
-    initializeUserMenus();
-  }, []);
-
-  useEffect(() => {
-    if (!transitionPending) {
-      homeReadyNotifiedRef.current = false;
-      return;
-    }
-
-    if (!loader && allModules && !homeReadyNotifiedRef.current) {
-      homeReadyNotifiedRef.current = true;
-      if (typeof onHomeReady === 'function') {
-        onHomeReady();
-      }
-    }
-  }, [transitionPending, loader, allModules, onHomeReady]);
-
-  useEffect(() => {
-    if (!loader) {
-      setLoadingMessage('');
-
-      if (messageIntervalRef.current) {
-        clearInterval(messageIntervalRef.current);
-        messageIntervalRef.current = null;
-      }
-
-      return;
-    }
-
-    setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
-
-    messageIntervalRef.current = setInterval(() => {
-      setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
-    }, 2200);
-
-    return () => {
-      if (messageIntervalRef.current) {
-        clearInterval(messageIntervalRef.current);
-        messageIntervalRef.current = null;
-      }
-    };
-  }, [loader]);
-
-  /**
-   * Initialize the user menus
-   */
-  async function initializeUserMenus() {
-    // need to find what implement, with a login who has the respective value ("wug_custreportids")
-    const report = await loadScripts(user);
-
-    await loadMenus(report);
-  }
-
-  // const keyMap = {
-  //     moveUp: 'Shift+B',
-  //     spotlight: 'Shift+F'
-  // }
-
-  let coreModules;
-
-  // Reports length
-  let reportMenus = [];
-
-  /**
-   *
-   *
-   * @param reports
-   */
-  async function loadMenus(reports) {
-    setLoader(true);
-
-    // setReports(report)
-
-    const result = await MenusAPI.getMenus(user);
-
-    // console.log(result);
-
-    if (result && Array.isArray(result.result) && result.result.length) {
-      // setModules(result.result);
-      // result.result.map((ele) => {
-      //     let languageString = JSON.parse(ele.attributes)
-      //     console.log('language_string', languageString);
-      //     if (languageString && languageString.languages) {
-      //         const language = i18n.language;
-      //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
-      //     }
-      // })
-    }
-    // Check if the 'settings' property exists in the 'result' object
-    if (result.result.settings) {
-      // Dispatch an action to update the settings in the store
-      dispatch({ type: 'settings', payload: result.result.settings });
-    }
-
-    // Reports length
-    if (reports.length) {
-      reportMenus = [
-        {
-          page: { path: 'ManageReports', identifier: null },
-          path: '/manage-reports',
-          caption: 'Reports',
-          sub_menus: reports,
-        },
-      ];
-    }
-
-    coreModules = [
-      {
-        caption: 'Preferences',
-        sub_menus: [
-          {
-            path: '/change-password',
-            caption: 'Change Password',
-          },
-        ],
-      },
-    ];
-
-    /**If there is roles assigned to the user */
-    // for matria
-    const useCoreMenus = process.env.REACT_APP_USE_CORE_MENUS === 'true';
-    if (useCoreMenus) {
-      if (result && result.result && reportMenus) {
-        setAllModules([...result.result, ...reportMenus, ...coreModules]);
-      } else {
-        //If there is no roles assigned to the user
-        setAllModules([...coreModules]);
-      }
-    } else {
-      //  for nura
-      if (result && result.result.menus && reportMenus) {
-        setAllModules([...result.result.menus, ...reportMenus, ...coreModules]);
-      } else {
-        //If there is no roles assigned to the user
-        setAllModules([...coreModules]);
-      }
-    }
-    setLoader(false);
-  }
-
-  /**
-   * Load the scripts
-   *
-   * @param {*} user
-   * @returns
-   */
-  const loadScripts = async (user) => {
-    if (user.user_group && user.user_group.wug_custreportids && user.user_group.wug_custreportids !== '') {
-      // Saving the report ids to a variable
-      let reportIds = user.user_group.wug_custreportids;
-
-      var reportIdKeys = reportIds.split(',');
-
-      const reports = await Promise.all(reportIdKeys.map((id) => CoreScripts.getReportMenu({ id })));
-
-      let filtered = reports
-        .filter((record) => record.active === 'Y')
-        .map((result) => {
-          return {
-            ...result,
-          };
-        });
-
-      // setReports(filtered);
-
-      return filtered;
-    } else {
-      return [];
-    }
-  };
-
-  // setAllModules([...modules, ...reportMenus, ...coreModules])
-
-  // let coreModules = [];
-
-  // // Reports length
-  // let reportMenus = []
-
-  // // Reports length
-  // if (reports.length) {
-
-  //     reportMenus = [{
-  //         page: { path: "ManageReports", identifier: null },
-  //         path: '/manage-reports',
-  //         caption: 'Reports',
-  //         sub_menus: reports
-  //     }]
-  // }
-
-  return (
-    <section className="landing">
-      {/* <HotKeys focused={true} attach={window} keyMap={keyMap} handlers={handlers}> */}
-
-      <GlobalHeader
-        loading={loader}
-        appSettings={appSettings}
-        meta={meta}
-        isConnected={connected}
-        reload={initializeUserMenus}
-        modules={allModules}
-        user={user}
-        history={history}
-      >
-        {loader ? (
-          <Card className="skeleton-card">
-            <div className="skeleton-wrapper">
-              <Skeleton paragraph={{ rows: 4 }} />
-              <p className="motivating-text">{loadingMessage}</p>
-            </div>
-          </Card>
-        ) : (
-          <>
-            {/* <Switch> */}
-
-            {/* Homepage */}
-            {!disableHomepage ? <Route exact key={'home'} path={'/'} render={(props) => <HomePageAPI config={config} {...props} />} /> : null}
-            {/* Homepage Ends */}
-
-            <Route exact key={'profile'} path={'/profile'} render={(props) => <Profile {...props} />} />
-
-            <Route path={'/menus/:id'} render={() => <ModuleRoutes model={MenusAPI} />} />
-
-            {/* <Switch> */}
-            {/* Modules and Menus */}
-            <DefineRoute
-              menus={allModules}
-              CustomComponents={CustomComponents}
-              CustomModels={CustomModels}
-              settings={appSettings}
-              callback={(props) => {
-                setMeta({
-                  ...props,
-                });
-              }}
-            />
-
-            {/* <Route path={'/users'} render={() => <ModuleRoutes model={UsersAPI} />} /> */}
-
-            <Route path={'/reports/:id'} render={(props) => <ReportingDashboard CustomComponents={CustomComponents} {...props} />} />
-
-            <Route exact key={'change-password'} path={'/change-password'} render={(props) => <ChangePassword {...props} />} />
-
-            {/* </Switch> */}
-          </>
-        )}
-      </GlobalHeader>
-
-      {/* </HotKeys> */}
-
-      <SpotlightSearch config={props.searchConfig} ref={(elem) => SettingsUtil.registerModal(elem)} />
-    </section>
-  );
-}
-
-/**
- * Define PropTypes for the component
- */
-LandingApi.propTypes = {
-  history: PropTypes.history,
-  CustomModels: PropTypes.object,
-  appSettings: PropTypes.object,
-  props: PropTypes.array,
-};
-
-/**
- *
- *
- * @param {*} param0
- * @returns
- */
-function DefineRoute({ menus, CustomComponents, CustomModels, settings, callback }) {
-  const [routes, setRoutes] = useState([]);
-
-  const [languageString, setLanguagestring] = useState({});
-
-  const { i18n } = useTranslation();
-
-  useEffect(() => {
-    buildRoutes(menus);
-  }, []);
-
-  /**
-   *
-   * @param menus
-   */
-  async function buildRoutes(menus) {
-    let dynamicRoutes = prepareRoutes(menus);
-
-    // console.log(dynamicRoutes);
-
-    SettingsUtil.registerMenus(dynamicRoutes);
-
-    // Prepare the language bundle
-    prepareLanguageBundle({ menus: dynamicRoutes });
-
-    setRoutes(dynamicRoutes);
-  }
-
-  let dynamic = [];
-
-  /**
-   * Prepare the routes
-   *
-   * @param {*} menus
-   * @returns
-   */
-  function prepareRoutes(menus) {
-    if (menus && menus.length) {
-      menus.forEach((menu) => {
-        dynamic.push(menu);
-
-        if (menu.sub_menus && menu.sub_menus.length) {
-          return prepareRoutes(menu.sub_menus);
-        }
-      });
-    }
-
-    return dynamic;
-  }
-
-  /**
-   * Prepare the language bundle that accepts the menus and prepares the bundle
-   *
-   * @param {*} param0
-   */
-  function prepareLanguageBundle({ menus }) {
-    let languageString = {};
-
-    const language = i18n.language;
-
-    // Load the language String from each
-    menus.forEach((menu) => {
-      if (menu.attributes) {
-        // try {
-        // Menu Attributes
-        let attributes = JSON.parse(menu.attributes);
-
-        if (attributes && attributes.languages) {
-          let keys = Object.keys(attributes.languages);
-
-          keys.forEach((key) => {
-            // languageString = {
-            //     [key]:{
-            //         ...attributes.languages[key]
-            //     }
-
-            // }
-
-            languageString[key] = {
-              ...languageString[key],
-              ...attributes.languages[key],
-            };
-
-            // languageString = {
-            //     [key]:{
-            //         ...attributes.languages[key]
-            //     }
-
-            // }
-
-            i18n.addResourceBundle(key, 'translation', languageString[key]);
-          });
-
-          setLanguagestring(languageString);
-
-          // languageString = {
-
-          //     ...languageString,
-          //     [menu.name]:{
-          //         ...attributes.languages
-          //     }
-
-          // }
-
-          // Object.keys(languageString).forEach((key)=>{
-
-          //     i18n.addResourceBundle(key, 'translation', languageString[key]);
-
-          // })
-        }
-        // } catch (error) {
-
-        //     console.log(error);
-
-        // }
-      }
-    });
-
-    i18n.addResourceBundle(language, 'translation', languageString[i18n.language]);
-  }
-
-  /**
-   * Print the route
-   *
-   * @param {*} menu
-   * @param {*} index
-   * @param {*} CustomComponents
-   * @param {*} CustomModels
-   * @param {*} callback
-   * @returns
-   */
-  function printRoute(menu, index, CustomComponents, CustomModels, callback) {
-    // From the path we remove any query parameters that exist in the url
-    //
-    let paths = [];
-
-    //There will be path for normal menus
-    if (menu?.path) {
-      paths = menu.path.split('?');
-    } else if (Array.isArray(menu?.sub_menus)) {
-      for (const subMenu of menu.sub_menus) {
-        if (subMenu?.path) {
-          paths = subMenu.path.split('?');
-          break;
-        }
-      }
-    }
-
-    // Find the route path
-    let path = paths[0];
-
-    return (
-      <Route
-        exact
-        key={index}
-        path={path}
-        render={(props) => {
-          return (
-            <MenuTemplate
-              menu={menu}
-              {...menu.attributes}
-              {...props}
-              CustomModels={CustomModels}
-              CustomComponents={CustomComponents}
-              settings={settings}
-              callback={(props) => {
-                callback(props);
-              }}
-            />
-          );
-        }}
-      />
-    );
-  }
-
-  return (
-    <>
-      <Switch>
-        {routes.map((menu, index) => {
-          return printRoute(menu, index, CustomComponents, CustomModels, callback);
-        })}
-      </Switch>
-    </>
-  );
-}
+import { useContext, useEffect, useRef, useState } from 'react';
+
+import { Route, Switch } from 'react-router-dom';
+
+import { Skeleton, message, Modal } from 'antd';
+
+import {
+  GlobalHeader,
+  ChangePassword,
+  useTranslation,
+  GlobalContext,
+  ModuleRoutes,
+  SpotlightSearch,
+  SettingsUtil,
+  Profile,
+  Card,
+  safeJSON,
+} from '../../lib';
+
+import './landing-api.scss';
+
+import HomePageAPI from '../../pages/homepage-api/homepage-api';
+
+import MenuTemplate from '../menu-template-api/menu-template-api';
+
+import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
+
+import PropTypes from 'prop-types';
+
+import { CoreScripts, MenusAPI } from '../../models';
+
+const motivatingMessages = [
+  'Setting things up for a great start...',
+  'Good things are loading. Stay with us.',
+  'Almost there. Preparing your workspace.',
+  'You are one moment away from your dashboard.',
+  'Getting everything ready for you.',
+  'Great care takes a second. Loading now.',
+];
+
+function getRandomMessage(previousMessage = '') {
+  const options = motivatingMessages.filter((message) => message !== previousMessage);
+
+  if (!options.length) {
+    return motivatingMessages[0];
+  }
+
+  const randomIndex = Math.floor(Math.random() * options.length);
+  return options[randomIndex];
+}
+
+/**
+ * Landing API
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, transitionPending = false, onHomeReady, ...props }) {
+  const [loader, setLoader] = useState(false);
+  // const [modules, setModules] = useState([]);
+
+  const [connected] = useState();
+
+  const { dispatch, user = {} } = useContext(GlobalContext);
+
+  const [allModules, setAllModules] = useState();
+  const homeReadyNotifiedRef = useRef(false);
+  const messageIntervalRef = useRef(null);
+
+  const [meta, setMeta] = useState({});
+  const [loadingMessage, setLoadingMessage] = useState('');
+  const [licenseData, setLicenseData] = useState(null);
+
+  const [licAlert, setLicAlert] = useState(false);
+  // License data state
+
+  // const [reports, setReports] = useState([]);
+
+  var config = {};
+
+  //fetch license summary
+  // const fetchSummary = async () => {
+  //   try {
+  //     const res = await MenusAPI.getSummary();
+  //     if (res?.data) {
+  //       setLicenseData(res?.data);
+  //       setLicAlert(true);
+  //     } else {
+  //       setLicenseData(null);
+  //       setLicAlert(false);
+  //     }
+  //   } catch (err) {
+  //     console.error(err);
+  //   }
+  // };
+
+  // Variable decides the control of homepage
+  // #TODO This is a temporary fix - Homemage
+
+  let disableHomepage = false;
+
+  if (process.env.REACT_APP_DISABLEHOMEPAGE) {
+    disableHomepage = JSON.parse(process.env.REACT_APP_DISABLEHOMEPAGE);
+  }
+
+  /**
+   * Normalizes the user's branch access list from `organization_details`.
+   *
+   * The API can return `organization_details` as a JSON string, so we always
+   * parse it through `safeJSON` before reading the branch collection.
+   *
+   * @returns {Array} List of branches the current user can access.
+   */
+  const getAccessibleBranches = () => {
+    const orgDetails = safeJSON(user?.organization_details);
+    return Array.isArray(orgDetails?.branch) ? orgDetails.branch : [];
+  };
+
+  /**
+   * Resolves the currently selected branch record using the persisted db pointer.
+   *
+   * @param {Array} branches
+   * @returns {Object|null}
+   */
+  const getCurrentBranchRecord = (branches) => {
+    const currentDbPtr = localStorage.getItem('db_ptr');
+    return branches.find((branch) => String(branch.dbPtr) === String(currentDbPtr)) || null;
+  };
+
+  /**
+   * Resolves the target branch from the URL `index` query parameter.
+   *
+   * @param {Array} branches
+   * @param {string|null} branchId
+   * @returns {Object|null}
+   */
+  const getBranchRecordById = (branches, branchId) => {
+    return branches.find((branch) => String(branch.branch_id) === String(branchId)) || null;
+  };
+
+  /**
+   * Persists branch-specific auth data after a successful switch.
+   *
+   * @param {Object} tokenBundle
+   * @param {string} dbPtr
+   */
+  const persistBranchSession = (tokenBundle, dbPtr) => {
+    const accessToken = tokenBundle?.access_token;
+    const refreshToken = tokenBundle?.refresh_token;
+
+    if (accessToken) localStorage.setItem('access_token', accessToken);
+    if (refreshToken) localStorage.setItem('refresh_token', refreshToken);
+    if (dbPtr) localStorage.setItem('db_ptr', dbPtr);
+  };
+
+  const fetchSummary = async () => {
+    try {
+      const res = await MenusAPI.getSummary();
+      if (res?.data) {
+        setLicenseData(res?.data);
+        setLicAlert(true);
+      } else {
+        setLicenseData(null);
+        setLicAlert(false);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  // useEffect(() => {
+
+  //     // Initialize the menus for the logged in user
+  //     initializeUserMenus();
+
+  // }, [selectedBranch]);
+
+  //These change is done to fix when refreshing the report menu missing, but it removed because,makes another issue, ie there is continuos loading occurs for 2 times
+  // useEffect(() => {
+
+  //     if (loader) {
+  //         initializeUserMenus();
+  //     }
+  // }, [loader]);
+
+  /**
+   * Synchronizes the active branch with the `index` query parameter.
+   *
+   * Flow:
+   * 1. Read the target branch id from the URL.
+   * 2. Compare it against the branch represented by the current `db_ptr`.
+   * 3. Switch branch only when the user has access and the branch actually differs.
+   * 4. Refresh auth/profile state and reload menus for the new branch context.
+   */
+  useEffect(() => {
+    const handleUrlBranchSwitch = async () => {
+      const searchParams = new URLSearchParams(history.location.search);
+      const urlDbPtr = searchParams.get('index');
+      if (!urlDbPtr) return;
+
+      const accessibleBranches = getAccessibleBranches();
+      const currentBranch = getCurrentBranchRecord(accessibleBranches);
+      const targetBranch = getBranchRecordById(accessibleBranches, urlDbPtr);
+
+      if (!targetBranch || String(currentBranch?.branch_id) === String(urlDbPtr)) return;
+
+      setLoader(true);
+
+      try {
+        const switchResult = await MenusAPI.switchBranch(
+          {
+            firm_id: targetBranch.firm_ptr,
+            branch_id: targetBranch.branch_id,
+          },
+          targetBranch.dbPtr
+        );
+
+        if (!switchResult?.success) {
+          Modal.error({
+            title: 'Branch Switch Failed',
+            content: switchResult?.message || 'An error occurred while attempting to switch branches.',
+          });
+          return;
+        }
+
+        persistBranchSession(switchResult?.token, targetBranch.dbPtr);
+        window.dispatchEvent(new CustomEvent('branchChanged', { detail: targetBranch.dbPtr }));
+
+        const accessToken = switchResult?.token?.access_token;
+        const profileResult = await MenusAPI.getProfile(accessToken);
+        const updatedUser = { ...profileResult, loggedCheckDone: true };
+
+        dispatch({ type: 'user', payload: updatedUser });
+        localStorage.setItem('userInfo', JSON.stringify(updatedUser));
+
+        await initializeUserMenus();
+      } catch (error) {
+        console.error('Auto branch switch failed:', error);
+      } finally {
+        setLoader(false);
+      }
+    };
+
+    if (user?.id && history?.location) handleUrlBranchSwitch();
+  }, [history?.location?.search, user?.id]);
+
+  useEffect(() => {
+    // Initialize the menus for the logged in user
+    initializeUserMenus();
+  }, []);
+
+  useEffect(() => {
+    if (!transitionPending) {
+      homeReadyNotifiedRef.current = false;
+      return;
+    }
+
+    if (!loader && allModules && !homeReadyNotifiedRef.current) {
+      homeReadyNotifiedRef.current = true;
+      if (typeof onHomeReady === 'function') {
+        onHomeReady();
+      }
+    }
+  }, [transitionPending, loader, allModules, onHomeReady]);
+
+  useEffect(() => {
+    if (!loader) {
+      setLoadingMessage('');
+
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+
+      return;
+    }
+
+    setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+
+    messageIntervalRef.current = setInterval(() => {
+      setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+    }, 2200);
+
+    return () => {
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+    };
+  }, [loader]);
+
+  /**
+   * Initialize the user menus
+   */
+  async function initializeUserMenus() {
+    // need to find what implement, with a login who has the respective value ("wug_custreportids")
+
+    const report = await loadScripts(user);
+
+    await loadMenus(report);
+    // fetch license summary
+    fetchSummary();
+  }
+
+  // const keyMap = {
+  //     moveUp: 'Shift+B',
+  //     spotlight: 'Shift+F'
+  // }
+
+  let coreModules;
+
+  // Reports length
+  let reportMenus = [];
+
+  /**
+   *
+   *
+   * @param reports
+   */
+  async function loadMenus(reports) {
+    setLoader(true);
+
+    // setReports(report)
+    fetchSummary();
+    const result = await MenusAPI.getMenus(user);
+
+    // console.log(result);
+
+    if (result && Array.isArray(result.result) && result.result.length) {
+      // setModules(result.result);
+      // result.result.map((ele) => {
+      //     let languageString = JSON.parse(ele.attributes)
+      //     console.log('language_string', languageString);
+      //     if (languageString && languageString.languages) {
+      //         const language = i18n.language;
+      //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
+      //     }
+      // })
+    }
+    // Check if the 'settings' property exists in the 'result' object
+    if (result.result.settings) {
+      // Dispatch an action to update the settings in the store
+      dispatch({ type: 'settings', payload: result.result.settings });
+    }
+
+    // Reports length
+    if (reports.length) {
+      reportMenus = [
+        {
+          page: { path: 'ManageReports', identifier: null },
+          path: '/manage-reports',
+          caption: 'Reports',
+          sub_menus: reports,
+        },
+      ];
+    }
+
+    coreModules = [
+      {
+        caption: 'Preferences',
+        sub_menus: [
+          {
+            path: '/change-password',
+            caption: 'Change Password',
+          },
+        ],
+      },
+    ];
+
+    /**If there is roles assigned to the user */
+    // for matria
+    const useCoreMenus = process.env.REACT_APP_USE_CORE_MENUS === 'true';
+    if (useCoreMenus) {
+      if (result && result.result && reportMenus) {
+        setAllModules([...result.result, ...reportMenus, ...coreModules]);
+      } else {
+        //If there is no roles assigned to the user
+        setAllModules([...coreModules]);
+      }
+    } else {
+      //  for nura
+      if (result && result.result.menus && reportMenus) {
+        setAllModules([...result.result.menus, ...reportMenus, ...coreModules]);
+      } else {
+        //If there is no roles assigned to the user
+        setAllModules([...coreModules]);
+      }
+    }
+    setLoader(false);
+  }
+
+  /**
+   * Load the scripts
+   *
+   * @param {*} user
+   * @returns
+   */
+  const loadScripts = async (user) => {
+    if (user.user_group && user.user_group.wug_custreportids && user.user_group.wug_custreportids !== '') {
+      // Saving the report ids to a variable
+      let reportIds = user.user_group.wug_custreportids;
+
+      var reportIdKeys = reportIds.split(',');
+
+      const reports = await Promise.all(reportIdKeys.map((id) => CoreScripts.getReportMenu({ id })));
+
+      let filtered = reports
+        .filter((record) => record.active === 'Y')
+        .map((result) => {
+          return {
+            ...result,
+          };
+        });
+
+      // setReports(filtered);
+
+      return filtered;
+    } else {
+      return [];
+    }
+  };
+
+  // setAllModules([...modules, ...reportMenus, ...coreModules])
+
+  // let coreModules = [];
+
+  // // Reports length
+  // let reportMenus = []
+
+  // // Reports length
+  // if (reports.length) {
+
+  //     reportMenus = [{
+  //         page: { path: "ManageReports", identifier: null },
+  //         path: '/manage-reports',
+  //         caption: 'Reports',
+  //         sub_menus: reports
+  //     }]
+  // }
+
+  return (
+    <section className="landing">
+      {/* <HotKeys focused={true} attach={window} keyMap={keyMap} handlers={handlers}> */}
+
+      <GlobalHeader
+        loading={loader}
+        appSettings={appSettings}
+        meta={meta}
+        isConnected={connected}
+        reload={initializeUserMenus}
+        modules={allModules}
+        user={user}
+        history={history}
+        licenseData={licenseData}
+        licAlert={licAlert}
+      >
+        {loader ? (
+          <Card className="skeleton-card">
+            <div className="skeleton-wrapper">
+              <Skeleton paragraph={{ rows: 4 }} />
+              <p className="motivating-text">{loadingMessage}</p>
+            </div>
+          </Card>
+        ) : (
+          <>
+            {/* <Switch> */}
+
+            {/* Homepage */}
+            {!disableHomepage ? <Route exact key={'home'} path={'/'} render={(props) => <HomePageAPI config={config} {...props} />} /> : null}
+            {/* Homepage Ends */}
+
+            <Route exact key={'profile'} path={'/profile'} render={(props) => <Profile {...props} />} />
+
+            <Route path={'/menus/:id'} render={() => <ModuleRoutes model={MenusAPI} />} />
+
+            {/* <Switch> */}
+            {/* Modules and Menus */}
+            <DefineRoute
+              menus={allModules}
+              CustomComponents={CustomComponents}
+              CustomModels={CustomModels}
+              settings={appSettings}
+              callback={(props) => {
+                setMeta({
+                  ...props,
+                });
+              }}
+            />
+
+            {/* <Route path={'/users'} render={() => <ModuleRoutes model={UsersAPI} />} /> */}
+
+            <Route path={'/reports/:id'} render={(props) => <ReportingDashboard CustomComponents={CustomComponents} {...props} />} />
+
+            <Route exact key={'change-password'} path={'/change-password'} render={(props) => <ChangePassword {...props} />} />
+
+            {/* </Switch> */}
+          </>
+        )}
+      </GlobalHeader>
+
+      {/* </HotKeys> */}
+
+      <SpotlightSearch config={props.searchConfig} ref={(elem) => SettingsUtil.registerModal(elem)} />
+    </section>
+  );
+}
+
+/**
+ * Define PropTypes for the component
+ */
+LandingApi.propTypes = {
+  history: PropTypes.history,
+  CustomModels: PropTypes.object,
+  appSettings: PropTypes.object,
+  props: PropTypes.array,
+};
+
+/**
+ *
+ *
+ * @param {*} param0
+ * @returns
+ */
+function DefineRoute({ menus, CustomComponents, CustomModels, settings, callback }) {
+  const [routes, setRoutes] = useState([]);
+
+  const [languageString, setLanguagestring] = useState({});
+
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    buildRoutes(menus);
+  }, []);
+
+  /**
+   *
+   * @param menus
+   */
+  async function buildRoutes(menus) {
+    let dynamicRoutes = prepareRoutes(menus);
+
+    // console.log(dynamicRoutes);
+
+    SettingsUtil.registerMenus(dynamicRoutes);
+
+    // Prepare the language bundle
+    prepareLanguageBundle({ menus: dynamicRoutes });
+
+    setRoutes(dynamicRoutes);
+  }
+
+  let dynamic = [];
+
+  /**
+   * Prepare the routes
+   *
+   * @param {*} menus
+   * @returns
+   */
+  function prepareRoutes(menus) {
+    if (menus && menus.length) {
+      menus.forEach((menu) => {
+        dynamic.push(menu);
+
+        if (menu.sub_menus && menu.sub_menus.length) {
+          return prepareRoutes(menu.sub_menus);
+        }
+      });
+    }
+
+    return dynamic;
+  }
+
+  /**
+   * Prepare the language bundle that accepts the menus and prepares the bundle
+   *
+   * @param {*} param0
+   */
+  function prepareLanguageBundle({ menus }) {
+    let languageString = {};
+
+    const language = i18n.language;
+
+    // Load the language String from each
+    menus.forEach((menu) => {
+      if (menu.attributes) {
+        // try {
+        // Menu Attributes
+        let attributes = JSON.parse(menu.attributes);
+
+        if (attributes && attributes.languages) {
+          let keys = Object.keys(attributes.languages);
+
+          keys.forEach((key) => {
+            // languageString = {
+            //     [key]:{
+            //         ...attributes.languages[key]
+            //     }
+
+            // }
+
+            languageString[key] = {
+              ...languageString[key],
+              ...attributes.languages[key],
+            };
+
+            // languageString = {
+            //     [key]:{
+            //         ...attributes.languages[key]
+            //     }
+
+            // }
+
+            i18n.addResourceBundle(key, 'translation', languageString[key]);
+          });
+
+          setLanguagestring(languageString);
+
+          // languageString = {
+
+          //     ...languageString,
+          //     [menu.name]:{
+          //         ...attributes.languages
+          //     }
+
+          // }
+
+          // Object.keys(languageString).forEach((key)=>{
+
+          //     i18n.addResourceBundle(key, 'translation', languageString[key]);
+
+          // })
+        }
+        // } catch (error) {
+
+        //     console.log(error);
+
+        // }
+      }
+    });
+
+    i18n.addResourceBundle(language, 'translation', languageString[i18n.language]);
+  }
+
+  /**
+   * Print the route
+   *
+   * @param {*} menu
+   * @param {*} index
+   * @param {*} CustomComponents
+   * @param {*} CustomModels
+   * @param {*} callback
+   * @returns
+   */
+  function printRoute(menu, index, CustomComponents, CustomModels, callback) {
+    // From the path we remove any query parameters that exist in the url
+    //
+    let paths = [];
+
+    //There will be path for normal menus
+    if (menu?.path) {
+      paths = menu.path.split('?');
+    } else if (Array.isArray(menu?.sub_menus)) {
+      for (const subMenu of menu.sub_menus) {
+        if (subMenu?.path) {
+          paths = subMenu.path.split('?');
+          break;
+        }
+      }
+    }
+
+    // Find the route path
+    let path = paths[0];
+
+    return (
+      <Route
+        exact
+        key={index}
+        path={path}
+        render={(props) => {
+          return (
+            <MenuTemplate
+              menu={menu}
+              {...menu.attributes}
+              {...props}
+              CustomModels={CustomModels}
+              CustomComponents={CustomComponents}
+              settings={settings}
+              callback={(props) => {
+                callback(props);
+              }}
+            />
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Switch>
+        {routes.map((menu, index) => {
+          return printRoute(menu, index, CustomComponents, CustomModels, callback);
+        })}
+      </Switch>
+    </>
+  );
+}