ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

package/core/lib/components/sidemenu/sidemenu.js

@@ -1,713 +1,713 @@
-/**
- *
- * Sidemenu component
- *
- * @author Ashique Mohammed
- * @co-author Sneha
- *
- *
- */
-
-import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';
-
-import { animationControls, motion, useAnimation } from 'framer-motion';
-
-import { GlobalContext } from './../../Store';
-
-import { Menu, message, Skeleton, Space, Popover } from 'antd';
-
-import FirebaseUtils from './../../utils/firebase.utils';
-
-import { useHistory } from 'react-router-dom';
-
-import { useTranslation, Trans } from 'react-i18next';
-
-import { Menus } from '../../models';
-
-import { expandFaAliases, ensureFontAwesomeAvailable } from '../../utils/font-awesome.utils';
-
-import './sidemenu.scss';
-
-const { SubMenu } = Menu;
-
-const SIDEMENU_WIDTH_KEY = 'soxo:sidemenu-width';
-const DEFAULT_SIDEMENU_WIDTH = 211;
-const MIN_SIDEMENU_WIDTH = 180;
-const MAX_SIDEMENU_WIDTH = 420;
-
-/**
- * Renders the menu's image if present, falling back to the Font Awesome icon.
- * The FA icon is rendered immediately so something is always visible during
- * a slow image fetch (e.g. cold reload, route change before the image is
- * cached). The image takes over only after it successfully loads; if it
- * fails, the FA icon stays.
- */
-function MenuIcon({ menu, icon, size = 25 }) {
-  const src = menu && typeof menu.image_path === 'string' ? menu.image_path.trim() : '';
-  const [imageStatus, setImageStatus] = useState(src ? 'loading' : 'none');
-  const imgRef = useRef(null);
-
-  // Reset and probe whenever src changes. This covers two cases that were
-  // breaking icon rendering on direct URL navigation / reload:
-  //   1. Cached images: the browser may fire `load` synchronously before
-  //      React attaches the onLoad handler, leaving status stuck at
-  //      'loading'. We re-check `img.complete` after mount.
-  //   2. Broken responses (200 with empty/corrupt body, CSP blocked, etc.)
-  //      that fire `load` but with naturalWidth=0 — treat as failed so the
-  //      Font Awesome fallback shows instead of an invisible <img>.
-  useEffect(() => {
-    if (!src) {
-      setImageStatus('none');
-      return;
-    }
-    const img = imgRef.current;
-    if (img && img.complete) {
-      setImageStatus(img.naturalWidth > 0 ? 'loaded' : 'failed');
-    } else {
-      setImageStatus('loading');
-    }
-  }, [src]);
-
-  const handleLoad = () => {
-    const img = imgRef.current;
-    setImageStatus(img && img.naturalWidth > 0 ? 'loaded' : 'failed');
-  };
-
-  const showImage = src && imageStatus !== 'failed';
-  const showIcon = !showImage || imageStatus !== 'loaded';
-
-  return (
-    <>
-      {showIcon && <i className={`fa-solid fas ${expandFaAliases(icon)}`} />}
-      {showImage && (
-        <img
-          ref={imgRef}
-          style={{ width: size, display: imageStatus === 'loaded' ? 'inline-block' : 'none' }}
-          src={src}
-          alt=""
-          onLoad={handleLoad}
-          onError={() => setImageStatus('failed')}
-        />
-      )}
-    </>
-  );
-}
-
-/**
- *
- * @param {*} collapsed
- * @param {*} icon
- * @param {*} caption
- * @returns
- */
-function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
-  // Import t and i18n from useTranslation
-  const { t, i18n } = useTranslation();
-  const { state } = useContext(GlobalContext);
-  const [isMobile, setIsMobile] = useState(false);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
-    };
-
-    handleResize(); // Set initial value
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const hasCaption = typeof caption === 'string' && caption.length > 0;
-  const menuText = hasCaption ? t(caption) : '';
-  const menuContent = (
-    <>
-      {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
-      {!collapsed ? (
-        <div className="menu-collapsed">
-          <div>
-            <MenuIcon menu={menu} icon={icon} />
-          </div>
-
-          <div style={{ color: state.theme.colors.leftSectionColor }}>
-            <span className="caption">
-              {menuText}
-            </span>
-          </div>
-        </div>
-      ) : (
-        <div className="menu-collapsed">
-          <span className="anticon">
-            <MenuIcon menu={menu} icon={icon} />
-          </span>
-
-          <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
-            {menuText}
-          </span>
-        </div>
-      )}
-    </>
-  );
-
-  // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
-  return isMobile || collapsed || !hasCaption ? (
-    menuContent
-  ) : (
-    <Popover content={menuText} placement="right">
-      {menuContent}
-    </Popover>
-  );
-}
-
-export default function SideMenu({ loading, modules = [], callback, appSettings, collapsed }) {
-  const { brandLogo, footerLogo, renderCustomHeader = () => {} } = appSettings;
-
-  let history = useHistory();
-
-  //  const [selected, setSelected] = useState([1]);
-
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [openKeys, setOpenKeys] = useState([]);
-  const [menu, setMenu] = useState({});
-
-  const [sidebarWidth, setSidebarWidth] = useState(() => {
-    const saved = parseInt(typeof window !== 'undefined' ? localStorage.getItem(SIDEMENU_WIDTH_KEY) : null, 10);
-    return Number.isFinite(saved) && saved >= MIN_SIDEMENU_WIDTH && saved <= MAX_SIDEMENU_WIDTH ? saved : DEFAULT_SIDEMENU_WIDTH;
-  });
-  const [isDragging, setIsDragging] = useState(false);
-
-  const { user = { locations: [] }, dispatch, state } = useContext(GlobalContext);
-
-  // Expose the current expanded sidebar width as a CSS variable so the
-  // surrounding layout (right-section, page-wrapper) can follow the drag.
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-    document.documentElement.style.setProperty('--sidemenu-width', `${sidebarWidth}px`);
-  }, [sidebarWidth]);
-
-  // Make sure Font Awesome is actually rendering glyphs in this app; if the
-  // host hasn't loaded it (or shipped a broken build), inject FA6 from a CDN
-  // so menu icons appear.
-  useEffect(() => {
-    ensureFontAwesomeAvailable();
-  }, []);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    localStorage.setItem(SIDEMENU_WIDTH_KEY, String(sidebarWidth));
-  }, [sidebarWidth]);
-
-  useEffect(() => {
-    if (!isDragging) return;
-
-    const handleMouseMove = (e) => {
-      const next = Math.min(Math.max(e.clientX, MIN_SIDEMENU_WIDTH), MAX_SIDEMENU_WIDTH);
-      setSidebarWidth(next);
-    };
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isDragging]);
-
-  const handleResizeStart = useCallback((e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  useEffect(() => {
-    // Here we have to consider three cases now ,
-    // One is firebase for which it is primarly designed for
-    // Then Nura Old Schema
-    // Saudi New Schema
-    // Bringing all to one structure is the ideal
-    // if (user.role || user.ID) {
-    //     setLoading(false);
-    // }
-  }, [user]);
-
-  // Keep current menu item selected after reload or navigation
-  useEffect(() => {
-    const currentPath = history.location.pathname;
-    setSelectedKeys([currentPath]);
-  }, [history.location.pathname]);
-
-  /**
-   * Logout Function
-   */
-  async function handleLogout() {
-    // let dbPtrValue = appSettings.headers.db_ptr;
-    const isEnvThemeTrue = process.env.REACT_APP_THEME === 'true';
-
-    //  Only clear localStorage if theme is not 'true'
-    if (!isEnvThemeTrue) {
-      localStorage.clear();
-    }
-
-    // localStorage.clear();
-
-    if (process.env.REACT_APP_PRIMARY_BACKEND === 'SQL') {
-      // const result = Users.logout()
-      localStorage.clear();
-
-      // localStorage.setItem('db_ptr', dbPtrValue);
-
-      let userInfo = {
-        dms: {},
-        locations: [],
-        ...{ loggedCheckDone: true },
-      };
-
-      dispatch({ type: 'user', payload: userInfo });
-
-      history.push('/login');
-
-      message.success('You have logged out successfully.');
-    } else {
-      FirebaseUtils.logout().then(() => {
-        history.push('/login');
-
-        message.success('You have logged out successfully.');
-      });
-    }
-  }
-
-  /**
-   * Menu Click Function
-   */
-
-  // const onMenuClick = (menu, index) => {
-  //   setSelected([index]);
-
-  //   history.push(menu.path);
-
-  //   setMenu(menu);
-
-  //   callback();
-  // };
-
-  const onMenuClick = (menu, index) => {
-    const key = menu.path || `menu-${menu.id || index}`;
-
-    if (menu.isRoot) {
-      setOpenKeys([]);
-    }
-
-    setSelectedKeys([key]);
-
-    if (menu.path) {
-      history.push(menu.path);
-    }
-
-    setMenu(menu);
-    if (callback) callback();
-  };
-
-  /**
-   * Controls submenu open/close behavior.
-   *
-   * - Detects the most recently opened menu key.
-   * - When opening a submenu, keeps only its full parent path expanded
-   *   (accordion behavior).
-   * - When closing a submenu, updates state without recalculating paths.
-   *
-   * @param {string[]} keys - Currently open menu keys from the Menu component.
-   *
-   * Assumptions:
-   * - Menu keys are stable and unique.
-   * - Only one menu branch should be open at a time.
-   */
-  const onOpenChange = (keys) => {
-    const latestOpenKey = keys.find((k) => !openKeys.includes(k));
-
-    if (!latestOpenKey) {
-      setOpenKeys(keys);
-      return;
-    }
-
-    const findPath = (items) => {
-      const sortedItems = Menus.screenMenus(items, 'order');
-      for (const item of sortedItems) {
-        const key = String(item.id || item.path || item.caption);
-        if (key === latestOpenKey) {
-          return [key];
-        }
-        if (item.sub_menus) {
-          const childPath = findPath(item.sub_menus);
-          if (childPath) {
-            return [key, ...childPath];
-          }
-        }
-      }
-      return null;
-    };
-
-    const path = findPath(modules);
-    if (path) {
-      setOpenKeys(path);
-    } else {
-      setOpenKeys(keys);
-    }
-  };
-
-  /**
-   * Function renders the footer logo
-   *
-   * @param {*} footerLogo
-   */
-  function renderFooter(footerLogo) {
-    return (
-      <div className={`sidebar-footer ${!collapsed ? 'open' : 'close'}`}>
-        <img className="footer-logo" src={footerLogo} alt={'footer-logo'} />
-      </div>
-    );
-  }
-
-  let icon;
-
-  let index = 0;
-
-  useEffect(() => {
-    // Dynamically set the CSS variables based on the current theme
-    // document.documentElement.style.setProperty('--custom-bg-color', state.theme.colors.leftSectionBackground);
-    // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
-  }, [state.theme]);
-
-  const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
-
-  return (
-    <div className="sidemenu">
-      {loading ? (
-        <Space className="side-loader">
-          <Skeleton.Avatar />
-          <Skeleton.Button />
-          {/* <Skeleton.Input  /> */}
-        </Space>
-      ) : (
-        <div
-          className="intro"
-          style={{ backgroundColor: state.theme.colors.leftSectionBackground, borderBottom: `2px solid ${state.theme.colors.borderColor}` }}
-        >
-          {/* Logo Bar */}
-          <div className="logo-wrapper">
-            {/* Changing the size of logo bar according to the value of collapsed */}
-            <img
-              className={`sidemenu-brand-logo ${!collapsed ? 'open' : 'close'}`}
-              onClick={() => {
-                history.push('/');
-              }}
-              src={brandLogo}
-              alt="Logo"
-            />
-
-            {/* <button class="openbtn" onclick={()=>{openNav()}}>☰</button>   */}
-
-            {/* If value of collapsed is true show version else not showing */}
-
-            {!collapsed && process.env.REACT_APP_package_version && (
-              <small
-                style={{
-                  color: state.theme.colors.leftSectionColor,
-                }}
-              >
-                {process.env.REACT_APP_package_version}
-              </small>
-            )}
-          </div>
-          {/* Logo Bar Ends */}
-
-          {/* If value of collapsed is true render header else not rendering */}
-
-          {!collapsed ? renderCustomHeader() : ''}
-        </div>
-      )}
-
-      {/* Intro Component */}
-      {/* Intro Component Ends */}
-
-      {/* Search for Queries */}
-
-      {/* <div className="menu-search">
- 
-                 <small level={5}>Search</small>
- 
-                 <Input placeholder="Search" />
-             </div> */}
-
-      {/* Search for Queries Ends */}
-
-      <div className={`menu-item ${!collapsed ? 'open' : 'close'}`} style={{ backgroundColor: state.theme.colors.leftSectionBackground }}>
-        {loading ? (
-          <></>
-        ) : (
-          <Menu
-            // selectedKeys={[selected]}
-            // style={{ width: 256 }}
-            // defaultSelectedKeys={selected}
-            // defaultOpenKeys={['']}
-            inlineCollapsed={collapsed}
-            mode="inline"
-            theme={process.env.REACT_APP_THEME}
-            selectedKeys={selectedKeys}
-            openKeys={openKeys}
-            onOpenChange={onOpenChange}
-            style={{ backgroundColor: state.theme.colors.leftSectionBackground, color: state.theme.colors.leftSectionColor }}
-            // theme={''}
-          >
-            {/* <Menu.Item
-              onClick={() => {
-                setSelected([1]);
-                history.push("/");
-                setMenu({ caption: "Home" });
-                callback();
-              }}
-              key="home-menu"
-            >
-              If value of collapsed is true show caption & icon else hiding caption and showing only icon
-
-              <CollapsedIconMenu
-                menu={menu}
-                caption="Home"
-                icon="fa-solid fa-house"
-                collapsed={collapsed}
-              />
-            </Menu.Item> */}
-
-            {/* {
-              Menus.screenMenus(modules).map((menu, index) => {
-
-                return <MenuItem history={history} menu={menu} index={index} />
-              })
-            } */}
-
-            {Menus.screenMenus(modules, 'order')
-
-              .filter((record) => {
-                icon = record;
-
-                // Drop entries without a caption — they have no permission/label
-                // to render, so showing just an icon is misleading.
-                const hasCaption = typeof record.caption === 'string' && record.caption.trim().length > 0;
-                if (!hasCaption) return false;
-
-                if (record.id) {
-                  if (record.is_visible) {
-                    return true;
-                  }
-
-                  if (record.icon_name) {
-                    return true;
-                  } else {
-                    return false;
-                  }
-                } else {
-                  return true;
-                }
-              })
-              .map((menu, index) => {
-                // return <MenuItem menu={menu} index={index} />
-
-                let sub_menus = menu && menu.sub_menus
-                  ? Menus.screenMenus(menu.sub_menus).filter((s) => typeof s.caption === 'string' && s.caption.trim().length > 0)
-                  : [];
-
-                if (menu && sub_menus && sub_menus.length) {
-                  // let randomIndex = parseInt(Math.random() * 10000000000);
-
-                  return (
-                    <SubMenu
-                      className="popup"
-                      style={{ color: state.theme.colors.leftSectionColor }}
-                      // key={`first-level-${randomIndex}-${menu.caption}`}
-
-                      key={menu.id || menu.path || menu.caption}
-                      title={
-                        <>
-                          <CollapsedIconMenu
-                            menu={menu}
-                            caption={menu.caption}
-                            icon={menu.icon_name || 'fa-solid fas fa-user'}
-                            collapsed={collapsed}
-                          />
-                        </>
-                      }
-                    >
-                      {sub_menus.map((submenu, innerIndex) => {
-                        // let randomIndex = parseInt(Math.random() * 10000000000);
-
-                        let third_menus = submenu && submenu.sub_menus ? Menus.screenMenus(submenu.sub_menus) : [];
-
-                        if (third_menus && third_menus.length) {
-                          return (
-                            <SubMenu
-                              className="popup"
-                              // key={`second-level-${randomIndex}-${submenu.id}`}
-
-                              key={submenu.id || submenu.path || submenu.caption}
-                              title={
-                                <span>
-                                  <CollapsedIconMenu
-                                    menu={menu}
-                                    caption={submenu.caption}
-                                    icon={submenu.icon_name || 'fa-solid fas fa-user'}
-                                    collapsed={collapsed}
-                                  />
-                                </span>
-                              }
-                            >
-                              {third_menus.map((menu) => {
-                                // let randomIndex = parseInt(Math.random() * 10000000000);
-
-                                return (
-                                  <Menu.Item
-                                    // onClick={() => {
-                                    //   onMenuClick(menu, index);
-                                    // }}
-                                    onClick={() => {
-                                      onMenuClick({ ...menu, parentKey: submenu.path || submenu.caption }, index);
-                                    }}
-                                    // key={`second-level-${randomIndex}-${index}`}
-
-                                    key={menu.path || menu.caption}
-                                  >
-                                    <CollapsedIconMenu
-                                      menu={menu}
-                                      caption={menu.caption}
-                                      icon={menu.icon_name || 'fa-solid fas fa-user'}
-                                      collapsed={collapsed}
-                                    />
-                                  </Menu.Item>
-                                );
-                              })}
-                            </SubMenu>
-                          );
-                        } else {
-                          // let randomIndex = parseInt(Math.random() * 10000000000);
-
-                          return (
-                            <Menu.Item
-                              // onClick={() => {
-                              //   onMenuClick(submenu, index);
-                              // }}
-                              onClick={() => {
-                                onMenuClick({ ...submenu, parentKey: menu.path || menu.caption }, index);
-                              }}
-                              // key={`first-level-${randomIndex}-${innerIndex}`}
-                              key={submenu.path || submenu.caption}
-                            >
-                              <CollapsedIconMenu
-                                menu={menu}
-                                caption={submenu.caption}
-                                icon={submenu.icon_name || 'fa-solid fas fa-user'}
-                                collapsed={collapsed}
-                              />
-                            </Menu.Item>
-                          );
-                        }
-                      })}
-                    </SubMenu>
-                  );
-                } else {
-                  // let randomIndex = parseInt(Math.random() * 10000000000);
-
-                  return (
-                    <Menu.Item
-                      // onClick={() => {
-                      //   onMenuClick(menu, index);
-                      // }}
-
-                      onClick={() => {
-                        onMenuClick({ ...menu, parentKey: menu.path || menu.caption, isRoot: true }, index);
-                      }}
-                      // key={`${menu.id}-${randomIndex}`}
-                      key={menu.path || menu.caption}
-                    >
-                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-solid fas fa-user'} collapsed={collapsed} />
-                    </Menu.Item>
-                  );
-                }
-              })}
-
-            {loading ? (
-              <div class="skeleton-wrapper"></div>
-            ) : (
-              <Menu.Item onClick={handleLogout} key="logout-button">
-                <CollapsedIconMenu caption="Logout" icon="fa-solid fas fa-user" collapsed={collapsed} />
-              </Menu.Item>
-            )}
-          </Menu>
-        )}
-
-        {/* Footer Logo */}
-        {/* {renderFooter(footerLogo)} */}
-        {/* Footer Logo Ends */}
-      </div>
-
-      {!collapsed && (
-        <div
-          className={`sidemenu-resize-handle${isDragging ? ' dragging' : ''}`}
-          onMouseDown={handleResizeStart}
-          role="separator"
-          aria-orientation="vertical"
-          aria-label="Resize sidebar"
-          title="Drag to resize"
-        />
-      )}
-    </div>
-  );
-}
-
-/**
- * The Menu Item Takes a menu and creates more
- * sub menus
- */
-function MenuItem({ menu, index, history }) {
-  function renderMenus({ menu, index }) {
-    let sub_menus = [];
-
-    if (menu.sub_menus) {
-      sub_menus = Menus.screenMenus(menu.sub_menus);
-    }
-
-    if (menu && sub_menus && sub_menus.length) {
-      // return 'hello';
-      return (
-        <SubMenu
-          key={menu.id}
-          title={
-            <span>
-              <span>{menu.caption}</span>
-            </span>
-          }
-        >
-          {menu.sub_menus.map((menu, index) => {
-            return <MenuItem menu={menu} index={menu.id} />;
-          })}
-        </SubMenu>
-      );
-    } else {
-      return (
-        <Menu.Item
-          onClick={() => {
-            history.push(menu.path);
-          }}
-          key={`${menu.id}`}
-        >
-          {menu.caption} {menu.id}
-        </Menu.Item>
-      );
-    }
-  }
-
-  return renderMenus({ menu, index });
-}
+/**
+ *
+ * Sidemenu component
+ *
+ * @author Ashique Mohammed
+ * @co-author Sneha
+ *
+ *
+ */
+
+import React, { useState, useEffect, useContext, useCallback, useRef } from 'react';
+
+import { animationControls, motion, useAnimation } from 'framer-motion';
+
+import { GlobalContext } from './../../Store';
+
+import { Menu, message, Skeleton, Space, Popover } from 'antd';
+
+import FirebaseUtils from './../../utils/firebase.utils';
+
+import { useHistory } from 'react-router-dom';
+
+import { useTranslation, Trans } from 'react-i18next';
+
+import { Menus } from '../../models';
+
+import { expandFaAliases, ensureFontAwesomeAvailable } from '../../utils/font-awesome.utils';
+
+import './sidemenu.scss';
+
+const { SubMenu } = Menu;
+
+const SIDEMENU_WIDTH_KEY = 'soxo:sidemenu-width';
+const DEFAULT_SIDEMENU_WIDTH = 211;
+const MIN_SIDEMENU_WIDTH = 180;
+const MAX_SIDEMENU_WIDTH = 420;
+
+/**
+ * Renders the menu's image if present, falling back to the Font Awesome icon.
+ * The FA icon is rendered immediately so something is always visible during
+ * a slow image fetch (e.g. cold reload, route change before the image is
+ * cached). The image takes over only after it successfully loads; if it
+ * fails, the FA icon stays.
+ */
+function MenuIcon({ menu, icon, size = 25 }) {
+  const src = menu && typeof menu.image_path === 'string' ? menu.image_path.trim() : '';
+  const [imageStatus, setImageStatus] = useState(src ? 'loading' : 'none');
+  const imgRef = useRef(null);
+
+  // Reset and probe whenever src changes. This covers two cases that were
+  // breaking icon rendering on direct URL navigation / reload:
+  //   1. Cached images: the browser may fire `load` synchronously before
+  //      React attaches the onLoad handler, leaving status stuck at
+  //      'loading'. We re-check `img.complete` after mount.
+  //   2. Broken responses (200 with empty/corrupt body, CSP blocked, etc.)
+  //      that fire `load` but with naturalWidth=0 — treat as failed so the
+  //      Font Awesome fallback shows instead of an invisible <img>.
+  useEffect(() => {
+    if (!src) {
+      setImageStatus('none');
+      return;
+    }
+    const img = imgRef.current;
+    if (img && img.complete) {
+      setImageStatus(img.naturalWidth > 0 ? 'loaded' : 'failed');
+    } else {
+      setImageStatus('loading');
+    }
+  }, [src]);
+
+  const handleLoad = () => {
+    const img = imgRef.current;
+    setImageStatus(img && img.naturalWidth > 0 ? 'loaded' : 'failed');
+  };
+
+  const showImage = src && imageStatus !== 'failed';
+  const showIcon = !showImage || imageStatus !== 'loaded';
+
+  return (
+    <>
+      {showIcon && <i className={`fa-solid fas ${expandFaAliases(icon)}`} />}
+      {showImage && (
+        <img
+          ref={imgRef}
+          style={{ width: size, display: imageStatus === 'loaded' ? 'inline-block' : 'none' }}
+          src={src}
+          alt=""
+          onLoad={handleLoad}
+          onError={() => setImageStatus('failed')}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ *
+ * @param {*} collapsed
+ * @param {*} icon
+ * @param {*} caption
+ * @returns
+ */
+function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
+  // Import t and i18n from useTranslation
+  const { t, i18n } = useTranslation();
+  const { state } = useContext(GlobalContext);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768); // Common breakpoint for mobile
+    };
+
+    handleResize(); // Set initial value
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const hasCaption = typeof caption === 'string' && caption.length > 0;
+  const menuText = hasCaption ? t(caption) : '';
+  const menuContent = (
+    <>
+      {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
+      {!collapsed ? (
+        <div className="menu-collapsed">
+          <div>
+            <MenuIcon menu={menu} icon={icon} />
+          </div>
+
+          <div style={{ color: state.theme.colors.leftSectionColor }}>
+            <span className="caption">
+              {menuText}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="menu-collapsed">
+          <span className="anticon">
+            <MenuIcon menu={menu} icon={icon} />
+          </span>
+
+          <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
+            {menuText}
+          </span>
+        </div>
+      )}
+    </>
+  );
+
+  // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
+  return isMobile || collapsed || !hasCaption ? (
+    menuContent
+  ) : (
+    <Popover content={menuText} placement="right">
+      {menuContent}
+    </Popover>
+  );
+}
+
+export default function SideMenu({ loading, modules = [], callback, appSettings, collapsed }) {
+  const { brandLogo, footerLogo, renderCustomHeader = () => {} } = appSettings;
+
+  let history = useHistory();
+
+  //  const [selected, setSelected] = useState([1]);
+
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [openKeys, setOpenKeys] = useState([]);
+  const [menu, setMenu] = useState({});
+
+  const [sidebarWidth, setSidebarWidth] = useState(() => {
+    const saved = parseInt(typeof window !== 'undefined' ? localStorage.getItem(SIDEMENU_WIDTH_KEY) : null, 10);
+    return Number.isFinite(saved) && saved >= MIN_SIDEMENU_WIDTH && saved <= MAX_SIDEMENU_WIDTH ? saved : DEFAULT_SIDEMENU_WIDTH;
+  });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const { user = { locations: [] }, dispatch, state } = useContext(GlobalContext);
+
+  // Expose the current expanded sidebar width as a CSS variable so the
+  // surrounding layout (right-section, page-wrapper) can follow the drag.
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    document.documentElement.style.setProperty('--sidemenu-width', `${sidebarWidth}px`);
+  }, [sidebarWidth]);
+
+  // Make sure Font Awesome is actually rendering glyphs in this app; if the
+  // host hasn't loaded it (or shipped a broken build), inject FA6 from a CDN
+  // so menu icons appear.
+  useEffect(() => {
+    ensureFontAwesomeAvailable();
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(SIDEMENU_WIDTH_KEY, String(sidebarWidth));
+  }, [sidebarWidth]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handleMouseMove = (e) => {
+      const next = Math.min(Math.max(e.clientX, MIN_SIDEMENU_WIDTH), MAX_SIDEMENU_WIDTH);
+      setSidebarWidth(next);
+    };
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const handleResizeStart = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  useEffect(() => {
+    // Here we have to consider three cases now ,
+    // One is firebase for which it is primarly designed for
+    // Then Nura Old Schema
+    // Saudi New Schema
+    // Bringing all to one structure is the ideal
+    // if (user.role || user.ID) {
+    //     setLoading(false);
+    // }
+  }, [user]);
+
+  // Keep current menu item selected after reload or navigation
+  useEffect(() => {
+    const currentPath = history.location.pathname;
+    setSelectedKeys([currentPath]);
+  }, [history.location.pathname]);
+
+  /**
+   * Logout Function
+   */
+  async function handleLogout() {
+    // let dbPtrValue = appSettings.headers.db_ptr;
+    const isEnvThemeTrue = process.env.REACT_APP_THEME === 'true';
+
+    //  Only clear localStorage if theme is not 'true'
+    if (!isEnvThemeTrue) {
+      localStorage.clear();
+    }
+
+    // localStorage.clear();
+
+    if (process.env.REACT_APP_PRIMARY_BACKEND === 'SQL') {
+      // const result = Users.logout()
+      localStorage.clear();
+
+      // localStorage.setItem('db_ptr', dbPtrValue);
+
+      let userInfo = {
+        dms: {},
+        locations: [],
+        ...{ loggedCheckDone: true },
+      };
+
+      dispatch({ type: 'user', payload: userInfo });
+
+      history.push('/login');
+
+      message.success('You have logged out successfully.');
+    } else {
+      FirebaseUtils.logout().then(() => {
+        history.push('/login');
+
+        message.success('You have logged out successfully.');
+      });
+    }
+  }
+
+  /**
+   * Menu Click Function
+   */
+
+  // const onMenuClick = (menu, index) => {
+  //   setSelected([index]);
+
+  //   history.push(menu.path);
+
+  //   setMenu(menu);
+
+  //   callback();
+  // };
+
+  const onMenuClick = (menu, index) => {
+    const key = menu.path || `menu-${menu.id || index}`;
+
+    if (menu.isRoot) {
+      setOpenKeys([]);
+    }
+
+    setSelectedKeys([key]);
+
+    if (menu.path) {
+      history.push(menu.path);
+    }
+
+    setMenu(menu);
+    if (callback) callback();
+  };
+
+  /**
+   * Controls submenu open/close behavior.
+   *
+   * - Detects the most recently opened menu key.
+   * - When opening a submenu, keeps only its full parent path expanded
+   *   (accordion behavior).
+   * - When closing a submenu, updates state without recalculating paths.
+   *
+   * @param {string[]} keys - Currently open menu keys from the Menu component.
+   *
+   * Assumptions:
+   * - Menu keys are stable and unique.
+   * - Only one menu branch should be open at a time.
+   */
+  const onOpenChange = (keys) => {
+    const latestOpenKey = keys.find((k) => !openKeys.includes(k));
+
+    if (!latestOpenKey) {
+      setOpenKeys(keys);
+      return;
+    }
+
+    const findPath = (items) => {
+      const sortedItems = Menus.screenMenus(items, 'order');
+      for (const item of sortedItems) {
+        const key = String(item.id || item.path || item.caption);
+        if (key === latestOpenKey) {
+          return [key];
+        }
+        if (item.sub_menus) {
+          const childPath = findPath(item.sub_menus);
+          if (childPath) {
+            return [key, ...childPath];
+          }
+        }
+      }
+      return null;
+    };
+
+    const path = findPath(modules);
+    if (path) {
+      setOpenKeys(path);
+    } else {
+      setOpenKeys(keys);
+    }
+  };
+
+  /**
+   * Function renders the footer logo
+   *
+   * @param {*} footerLogo
+   */
+  function renderFooter(footerLogo) {
+    return (
+      <div className={`sidebar-footer ${!collapsed ? 'open' : 'close'}`}>
+        <img className="footer-logo" src={footerLogo} alt={'footer-logo'} />
+      </div>
+    );
+  }
+
+  let icon;
+
+  let index = 0;
+
+  useEffect(() => {
+    // Dynamically set the CSS variables based on the current theme
+    // document.documentElement.style.setProperty('--custom-bg-color', state.theme.colors.leftSectionBackground);
+    // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
+  }, [state.theme]);
+
+  const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
+
+  return (
+    <div className="sidemenu">
+      {loading ? (
+        <Space className="side-loader">
+          <Skeleton.Avatar />
+          <Skeleton.Button />
+          {/* <Skeleton.Input  /> */}
+        </Space>
+      ) : (
+        <div
+          className="intro"
+          style={{ backgroundColor: state.theme.colors.leftSectionBackground, borderBottom: `2px solid ${state.theme.colors.borderColor}` }}
+        >
+          {/* Logo Bar */}
+          <div className="logo-wrapper">
+            {/* Changing the size of logo bar according to the value of collapsed */}
+            <img
+              className={`sidemenu-brand-logo ${!collapsed ? 'open' : 'close'}`}
+              onClick={() => {
+                history.push('/');
+              }}
+              src={brandLogo}
+              alt="Logo"
+            />
+
+            {/* <button class="openbtn" onclick={()=>{openNav()}}>☰</button>   */}
+
+            {/* If value of collapsed is true show version else not showing */}
+
+            {!collapsed && process.env.REACT_APP_package_version && (
+              <small
+                style={{
+                  color: state.theme.colors.leftSectionColor,
+                }}
+              >
+                {process.env.REACT_APP_package_version}
+              </small>
+            )}
+          </div>
+          {/* Logo Bar Ends */}
+
+          {/* If value of collapsed is true render header else not rendering */}
+
+          {!collapsed ? renderCustomHeader() : ''}
+        </div>
+      )}
+
+      {/* Intro Component */}
+      {/* Intro Component Ends */}
+
+      {/* Search for Queries */}
+
+      {/* <div className="menu-search">
+ 
+                 <small level={5}>Search</small>
+ 
+                 <Input placeholder="Search" />
+             </div> */}
+
+      {/* Search for Queries Ends */}
+
+      <div className={`menu-item ${!collapsed ? 'open' : 'close'}`} style={{ backgroundColor: state.theme.colors.leftSectionBackground }}>
+        {loading ? (
+          <></>
+        ) : (
+          <Menu
+            // selectedKeys={[selected]}
+            // style={{ width: 256 }}
+            // defaultSelectedKeys={selected}
+            // defaultOpenKeys={['']}
+            inlineCollapsed={collapsed}
+            mode="inline"
+            theme={process.env.REACT_APP_THEME}
+            selectedKeys={selectedKeys}
+            openKeys={openKeys}
+            onOpenChange={onOpenChange}
+            style={{ backgroundColor: state.theme.colors.leftSectionBackground, color: state.theme.colors.leftSectionColor }}
+            // theme={''}
+          >
+            {/* <Menu.Item
+              onClick={() => {
+                setSelected([1]);
+                history.push("/");
+                setMenu({ caption: "Home" });
+                callback();
+              }}
+              key="home-menu"
+            >
+              If value of collapsed is true show caption & icon else hiding caption and showing only icon
+
+              <CollapsedIconMenu
+                menu={menu}
+                caption="Home"
+                icon="fa-solid fa-house"
+                collapsed={collapsed}
+              />
+            </Menu.Item> */}
+
+            {/* {
+              Menus.screenMenus(modules).map((menu, index) => {
+
+                return <MenuItem history={history} menu={menu} index={index} />
+              })
+            } */}
+
+            {Menus.screenMenus(modules, 'order')
+
+              .filter((record) => {
+                icon = record;
+
+                // Drop entries without a caption — they have no permission/label
+                // to render, so showing just an icon is misleading.
+                const hasCaption = typeof record.caption === 'string' && record.caption.trim().length > 0;
+                if (!hasCaption) return false;
+
+                if (record.id) {
+                  if (record.is_visible) {
+                    return true;
+                  }
+
+                  if (record.icon_name) {
+                    return true;
+                  } else {
+                    return false;
+                  }
+                } else {
+                  return true;
+                }
+              })
+              .map((menu, index) => {
+                // return <MenuItem menu={menu} index={index} />
+
+                let sub_menus = menu && menu.sub_menus
+                  ? Menus.screenMenus(menu.sub_menus).filter((s) => typeof s.caption === 'string' && s.caption.trim().length > 0)
+                  : [];
+
+                if (menu && sub_menus && sub_menus.length) {
+                  // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                  return (
+                    <SubMenu
+                      className="popup"
+                      style={{ color: state.theme.colors.leftSectionColor }}
+                      // key={`first-level-${randomIndex}-${menu.caption}`}
+
+                      key={menu.id || menu.path || menu.caption}
+                      title={
+                        <>
+                          <CollapsedIconMenu
+                            menu={menu}
+                            caption={menu.caption}
+                            icon={menu.icon_name || 'fa-solid fas fa-user'}
+                            collapsed={collapsed}
+                          />
+                        </>
+                      }
+                    >
+                      {sub_menus.map((submenu, innerIndex) => {
+                        // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                        let third_menus = submenu && submenu.sub_menus ? Menus.screenMenus(submenu.sub_menus) : [];
+
+                        if (third_menus && third_menus.length) {
+                          return (
+                            <SubMenu
+                              className="popup"
+                              // key={`second-level-${randomIndex}-${submenu.id}`}
+
+                              key={submenu.id || submenu.path || submenu.caption}
+                              title={
+                                <span>
+                                  <CollapsedIconMenu
+                                    menu={menu}
+                                    caption={submenu.caption}
+                                    icon={submenu.icon_name || 'fa-solid fas fa-user'}
+                                    collapsed={collapsed}
+                                  />
+                                </span>
+                              }
+                            >
+                              {third_menus.map((menu) => {
+                                // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                                return (
+                                  <Menu.Item
+                                    // onClick={() => {
+                                    //   onMenuClick(menu, index);
+                                    // }}
+                                    onClick={() => {
+                                      onMenuClick({ ...menu, parentKey: submenu.path || submenu.caption }, index);
+                                    }}
+                                    // key={`second-level-${randomIndex}-${index}`}
+
+                                    key={menu.path || menu.caption}
+                                  >
+                                    <CollapsedIconMenu
+                                      menu={menu}
+                                      caption={menu.caption}
+                                      icon={menu.icon_name || 'fa-solid fas fa-user'}
+                                      collapsed={collapsed}
+                                    />
+                                  </Menu.Item>
+                                );
+                              })}
+                            </SubMenu>
+                          );
+                        } else {
+                          // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                          return (
+                            <Menu.Item
+                              // onClick={() => {
+                              //   onMenuClick(submenu, index);
+                              // }}
+                              onClick={() => {
+                                onMenuClick({ ...submenu, parentKey: menu.path || menu.caption }, index);
+                              }}
+                              // key={`first-level-${randomIndex}-${innerIndex}`}
+                              key={submenu.path || submenu.caption}
+                            >
+                              <CollapsedIconMenu
+                                menu={menu}
+                                caption={submenu.caption}
+                                icon={submenu.icon_name || 'fa-solid fas fa-user'}
+                                collapsed={collapsed}
+                              />
+                            </Menu.Item>
+                          );
+                        }
+                      })}
+                    </SubMenu>
+                  );
+                } else {
+                  // let randomIndex = parseInt(Math.random() * 10000000000);
+
+                  return (
+                    <Menu.Item
+                      // onClick={() => {
+                      //   onMenuClick(menu, index);
+                      // }}
+
+                      onClick={() => {
+                        onMenuClick({ ...menu, parentKey: menu.path || menu.caption, isRoot: true }, index);
+                      }}
+                      // key={`${menu.id}-${randomIndex}`}
+                      key={menu.path || menu.caption}
+                    >
+                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-solid fas fa-user'} collapsed={collapsed} />
+                    </Menu.Item>
+                  );
+                }
+              })}
+
+            {loading ? (
+              <div class="skeleton-wrapper"></div>
+            ) : (
+              <Menu.Item onClick={handleLogout} key="logout-button">
+                <CollapsedIconMenu caption="Logout" icon="fa-solid fas fa-user" collapsed={collapsed} />
+              </Menu.Item>
+            )}
+          </Menu>
+        )}
+
+        {/* Footer Logo */}
+        {/* {renderFooter(footerLogo)} */}
+        {/* Footer Logo Ends */}
+      </div>
+
+      {!collapsed && (
+        <div
+          className={`sidemenu-resize-handle${isDragging ? ' dragging' : ''}`}
+          onMouseDown={handleResizeStart}
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize sidebar"
+          title="Drag to resize"
+        />
+      )}
+    </div>
+  );
+}
+
+/**
+ * The Menu Item Takes a menu and creates more
+ * sub menus
+ */
+function MenuItem({ menu, index, history }) {
+  function renderMenus({ menu, index }) {
+    let sub_menus = [];
+
+    if (menu.sub_menus) {
+      sub_menus = Menus.screenMenus(menu.sub_menus);
+    }
+
+    if (menu && sub_menus && sub_menus.length) {
+      // return 'hello';
+      return (
+        <SubMenu
+          key={menu.id}
+          title={
+            <span>
+              <span>{menu.caption}</span>
+            </span>
+          }
+        >
+          {menu.sub_menus.map((menu, index) => {
+            return <MenuItem menu={menu} index={menu.id} />;
+          })}
+        </SubMenu>
+      );
+    } else {
+      return (
+        <Menu.Item
+          onClick={() => {
+            history.push(menu.path);
+          }}
+          key={`${menu.id}`}
+        >
+          {menu.caption} {menu.id}
+        </Menu.Item>
+      );
+    }
+  }
+
+  return renderMenus({ menu, index });
+}