ui-soxo-bootstrap-core 2.6.1-dev.20 → 2.6.1-dev.22

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

@@ -10,11 +10,11 @@
 
 import React, { useState, useEffect, useContext } from 'react';
 
-import { motion, useReducedMotion } from 'framer-motion';
+import { animationControls, motion, useAnimation } from 'framer-motion';
 
 import { GlobalContext } from './../../Store';
 
-import { Menu, message, Popover } from 'antd';
+import { Menu, message, Skeleton, Space, Popover } from 'antd';
 
 import FirebaseUtils from './../../utils/firebase.utils';
 
@@ -24,15 +24,6 @@ import { useTranslation, Trans } from 'react-i18next';
 
 import { Menus } from '../../models';
 
-import {
-  sidebarGroupVariants,
-  sidebarIntroVariants,
-  sidebarItemRevealVariants,
-  sidebarLoaderContainerVariants,
-  sidebarLoaderRowVariants,
-  sidebarMenuSurfaceVariants,
-} from './animations';
-
 import './sidemenu.scss';
 
 const { SubMenu } = Menu;
@@ -48,8 +39,7 @@ 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);
-    const [iconImageFailed, setIconImageFailed] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -62,110 +52,39 @@ function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
-    useEffect(() => {
-      setIconImageFailed(false);
-    }, [menu?.image_path]);
-
-  const normalizeIconClass = (iconValue) => {
-    const raw = (iconValue || 'fa-user').trim();
-    const tokens = (raw || 'fa-user').split(/\s+/).filter(Boolean);
-    const tokenSet = new Set(tokens);
-
-    const modernToLegacyStyleMap = {
-      'fa-solid': 'fas',
-      'fa-regular': 'far',
-      'fa-light': 'fal',
-      'fa-brands': 'fab',
-    };
-    const fa6ToFa5IconMap = {
-      'fa-house': 'fa-home',
-      'fa-house-user': 'fa-home',
-      'fa-gauge': 'fa-tachometer-alt',
-      'fa-location-dot': 'fa-map-marker-alt',
-    };
-    const styleTokens = ['fa', 'fas', 'far', 'fal', 'fab', 'fa-solid', 'fa-regular', 'fa-light', 'fa-brands'];
-
-    const iconTokens = tokens.filter((token) => token.startsWith('fa-') && !styleTokens.includes(token));
-    const hasAnyStyleToken = tokens.some((token) => styleTokens.includes(token));
-
-    tokenSet.add('fa');
-
-    tokens.forEach((token) => {
-      if (modernToLegacyStyleMap[token]) {
-        tokenSet.add(modernToLegacyStyleMap[token]);
-      }
-    });
-
-    if (!hasAnyStyleToken) {
-      tokenSet.add('fas');
-    }
-
-    if (!iconTokens.length) {
-      const normalizedName = raw && !raw.includes(' ') ? (raw.startsWith('fa-') ? raw : `fa-${raw}`) : 'fa-user';
-      tokenSet.add(fa6ToFa5IconMap[normalizedName] || normalizedName);
-    } else {
-      iconTokens.forEach((token) => {
-        const mapped = fa6ToFa5IconMap[token];
-        if (mapped) {
-          tokenSet.add(mapped);
-        }
-      });
-    }
-
-    return Array.from(tokenSet).join(' ');
-  };
-
-  const renderMenuGlyph = () => {
-    if (menu && menu.image_path && !iconImageFailed) {
-      return (
-        <img
-          className="menu-image-icon"
-          src={menu.image_path}
-          alt={menu?.caption || caption || 'menu-icon'}
-          onError={() => setIconImageFailed(true)}
-          loading="lazy"
-        />
-      );
-    }
-
-    return <i className={normalizeIconClass(icon)} aria-hidden="true" />;
-  };
-
   const menuText = t(caption);
   const menuContent = (
-    <motion.div variants={sidebarItemRevealVariants} className="menu-collapsed">
+    <>
       {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
       {!collapsed ? (
-        <>
-          <div className="menu-icon-wrap">
-            {renderMenuGlyph()}
+        <div className="menu-collapsed">
+          <div>
+            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
           </div>
 
-          <div className="menu-label-wrap" style={{ color: state.theme.colors.leftSectionColor }} title={menuText}>
-            <span className="caption" title={menuText}>
+          <div style={{ color: state.theme.colors.leftSectionColor }}>
+            <span className="caption">
               {/* {caption} */}
               {/* <Trans i18nKey="Appointments"></Trans> */}
               {t(`${caption}`)}
             </span>
           </div>
-        </>
+        </div>
       ) : (
-        <>
-          <span className="anticon menu-icon-wrap">
-            {renderMenuGlyph()}
+        <div className="menu-collapsed">
+          <span className="anticon">
+            {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
           </span>
 
-          <span className="menu-label-wrap" style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }} title={menuText}>
+          <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
             {/* <>{caption}</> */}
             {t(`${caption}`)}
           </span>
-        </>
+        </div>
       )}
-    </motion.div>
+    </>
   );
 
-    // Show tooltip labels on desktop collapsed mode, hide on mobile / expanded mode.
-    // return isMobile || !collapsed ? menuContent : <Popover content={menuText} placement="right">{menuContent}</Popover>;
   // On mobile, or when the menu is collapsed (based on original logic), don't show the popover tooltip.
   return isMobile || collapsed ? (
     menuContent
@@ -348,31 +267,17 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
   }, [state.theme]);
 
   const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
-  const prefersReducedMotion = useReducedMotion();
-  const shouldAnimate = !prefersReducedMotion;
-  const loaderRows = collapsed ? 5 : 7;
 
   return (
     <div className="sidemenu">
       {loading ? (
-        <motion.div
-          className="side-loader-shell"
-          variants={sidebarLoaderContainerVariants}
-          initial={shouldAnimate ? 'hidden' : false}
-          animate={shouldAnimate ? 'visible' : false}
-        >
-          {[...Array(4)].map((_, index) => (
-            <motion.div key={`intro-loader-${index}`} className="side-loader-chip" variants={sidebarLoaderRowVariants}>
-              <span className="side-loader-dot" />
-              <span className="side-loader-line" />
-            </motion.div>
-          ))}
-        </motion.div>
+        <Space className="side-loader">
+          <Skeleton.Avatar />
+          <Skeleton.Button />
+          {/* <Skeleton.Input  /> */}
+        </Space>
       ) : (
-        <motion.div
-          variants={sidebarIntroVariants}
-          initial={shouldAnimate ? 'hidden' : false}
-          animate={shouldAnimate ? 'visible' : false}
+        <div
           className="intro"
           style={{ backgroundColor: state.theme.colors.leftSectionBackground, borderBottom: `2px solid ${state.theme.colors.borderColor}` }}
         >
@@ -407,7 +312,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
           {/* If value of collapsed is true render header else not rendering */}
 
           {!collapsed ? renderCustomHeader() : ''}
-        </motion.div>
+        </div>
       )}
 
       {/* Intro Component */}
@@ -424,49 +329,25 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
 
       {/* Search for Queries Ends */}
 
-      <motion.div
-        className={`menu-item ${!collapsed ? 'open' : 'close'}`}
-        style={{ backgroundColor: state.theme.colors.leftSectionBackground }}
-        variants={sidebarMenuSurfaceVariants}
-        initial={shouldAnimate ? 'hidden' : false}
-        animate={shouldAnimate ? 'visible' : false}
-      >
+      <div className={`menu-item ${!collapsed ? 'open' : 'close'}`} style={{ backgroundColor: state.theme.colors.leftSectionBackground }}>
         {loading ? (
-          <motion.div
-            className="side-loader-list"
-            variants={sidebarLoaderContainerVariants}
-            initial={shouldAnimate ? 'hidden' : false}
-            animate={shouldAnimate ? 'visible' : false}
-          >
-            {[...Array(loaderRows)].map((_, rowIndex) => (
-              <motion.div key={`menu-loader-${rowIndex}`} className="side-loader-row" variants={sidebarLoaderRowVariants}>
-                <span className="side-loader-dot" />
-                <span className="side-loader-line" />
-              </motion.div>
-            ))}
-          </motion.div>
+          <></>
         ) : (
-          <motion.div
-            className="menu-motion-shell"
-            variants={sidebarGroupVariants}
-            initial={shouldAnimate ? 'hidden' : false}
-            animate={shouldAnimate ? 'visible' : false}
+          <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
-              // 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
+            {/* <Menu.Item
               onClick={() => {
                 setSelected([1]);
                 history.push("/");
@@ -531,7 +412,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                           <CollapsedIconMenu
                             menu={menu}
                             caption={menu.caption}
-                            icon={menu.icon_name || 'fa-user'}
+                            icon={menu.icon_name || 'fa-solid fas fa-user'}
                             collapsed={collapsed}
                           />
                         </>
@@ -552,9 +433,9 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                               title={
                                 <span>
                                   <CollapsedIconMenu
-                                    menu={submenu}
+                                    menu={menu}
                                     caption={submenu.caption}
-                                    icon={submenu.icon_name || 'fa-user'}
+                                    icon={submenu.icon_name || 'fa-solid fas fa-user'}
                                     collapsed={collapsed}
                                   />
                                 </span>
@@ -578,7 +459,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                                     <CollapsedIconMenu
                                       menu={menu}
                                       caption={menu.caption}
-                                      icon={menu.icon_name || 'fa-user'}
+                                      icon={menu.icon_name || 'fa-solid fas fa-user'}
                                       collapsed={collapsed}
                                     />
                                   </Menu.Item>
@@ -601,9 +482,9 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                               key={submenu.path || submenu.caption}
                             >
                               <CollapsedIconMenu
-                                menu={submenu}
+                                menu={menu}
                                 caption={submenu.caption}
-                                icon={submenu.icon_name || 'fa-user'}
+                                icon={submenu.icon_name || 'fa-solid fas fa-user'}
                                 collapsed={collapsed}
                               />
                             </Menu.Item>
@@ -627,27 +508,26 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                       // key={`${menu.id}-${randomIndex}`}
                       key={menu.path || menu.caption}
                     >
-                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-user'} collapsed={collapsed} />
+                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-solid fas fa-user'} collapsed={collapsed} />
                     </Menu.Item>
                   );
                 }
               })}
 
-              {loading ? (
-                <div className="skeleton-wrapper"></div>
-              ) : (
-                <Menu.Item onClick={handleLogout} key="logout-button">
-                  <CollapsedIconMenu caption="Logout" icon="fa-user" collapsed={collapsed} />
-                </Menu.Item>
-              )}
-            </Menu>
-          </motion.div>
+            {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 */}
-      </motion.div>
+      </div>
     </div>
   );
 }

package/core/lib/components/sidemenu/sidemenu.scss

@@ -1,52 +1,4 @@
 .sidemenu {
-  .side-loader-shell {
-    margin: 14px 12px 10px;
-    padding: 10px;
-    border-radius: 14px;
-    border: 1px solid rgba(222, 229, 239, 0.9);
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 255, 0.95) 100%);
-    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.05);
-    display: grid;
-    gap: 8px;
-  }
-
-  .side-loader-chip,
-  .side-loader-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-height: 30px;
-  }
-
-  .side-loader-dot {
-    width: 14px;
-    height: 14px;
-    border-radius: 999px;
-    background: linear-gradient(90deg, #eef1f5 0%, #f7f8fb 50%, #eef1f5 100%);
-    background-size: 220% 100%;
-    animation: side-shimmer 1.4s linear infinite;
-    flex: 0 0 auto;
-  }
-
-  .side-loader-line {
-    height: 10px;
-    border-radius: 999px;
-    width: 100%;
-    background: linear-gradient(90deg, #edf0f4 0%, #f8f9fb 50%, #edf0f4 100%);
-    background-size: 220% 100%;
-    animation: side-shimmer 1.4s linear infinite;
-  }
-
-  .side-loader-list {
-    margin: 8px;
-    padding: 8px 6px 18px;
-    border-radius: 14px;
-    border: 1px solid rgba(229, 234, 242, 0.85);
-    background: rgba(255, 255, 255, 0.88);
-    display: grid;
-    gap: 4px;
-  }
-
   .intro {
     .logo-wrapper {
       border-bottom: none;
@@ -88,26 +40,18 @@
     padding: 5px 16px;
     position: fixed;
     z-index: 1000;
-    // width: 17%;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
+    width: 17%;
+    background: #fff;
     // border-bottom: 1.5px solid #24aeb8;
     &.close {
       width: 6% !important;
     }
 
     .logo-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
       // height: 15px;
       // border-bottom: 1px solid #eaeaea;
 
       .sidemenu-brand-logo {
-        transition:
-          transform 220ms ease,
-          filter 220ms ease;
         // width: 50%;
         // margin: 10px;
         // width: 200px;
@@ -131,11 +75,6 @@
         }
 
         cursor: pointer;
-
-        &:hover {
-          transform: translateY(-1px) scale(1.01);
-          filter: saturate(1.05);
-        }
       }
     }
 
@@ -155,22 +94,20 @@
   }
 
   .menu-item {
-    padding-top: 8px;
+    padding-top: 10px;
     // height: calc(100vh - 48px); /* Adjust height */
     height: 100vh;
     margin-top: 0px;
     width: 256px;
     top: 48px;
-    border-right: 1px solid rgba(226, 231, 239, 0.9);
-    border-bottom: 1px solid rgba(240, 243, 248, 0.8);
+    border-bottom: 1px solid #f0f0f0;
     position: fixed;
     height: 100vh;
     margin-top: 0;
     overflow-y: scroll;
     overflow-x: hidden;
     width: 211px;
-    padding-bottom: 24px;
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(249, 250, 252, 0.98) 100%);
+    padding-bottom: 50px;
 
     /* Custom Scrollbar like macOS */
     scrollbar-width: thin; /* For Firefox */
@@ -205,57 +142,18 @@
       margin: 80px;
     }
 
-    .menu-motion-shell {
-      padding: 6px 6px 14px;
-    }
-
     .ant-menu-inline {
       border: none !important;
     }
 
     .menu-collapsed {
-      width: 100%;
-      min-width: 0;
+      width: 81px;
       display: flex;
       align-items: center;
       gap: 8px;
       cursor: pointer;
     }
 
-    .menu-icon-wrap {
-      width: 24px;
-      height: 24px;
-      min-width: 24px;
-      border-radius: 8px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: inherit;
-      transition:
-        background-color 220ms ease,
-        transform 220ms ease;
-    }
-
-    .menu-image-icon {
-      width: 18px;
-      height: 18px;
-      object-fit: contain;
-      display: block;
-    }
-
-    .menu-label-wrap {
-      min-width: 0;
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .caption,
-    .menu-label-wrap {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     .menu-collapsed .anticon {
       margin-right: 8px;
     }
@@ -280,102 +178,6 @@
     /* Style selected item */
     .ant-menu {
       background-color: transparent !important;
-      padding: 4px 0 28px;
-    }
-
-    .ant-menu-item,
-    .ant-menu-submenu-title {
-      width: calc(100% - 12px) !important;
-      margin: 3px 6px !important;
-      padding-right: 10px !important;
-      border-radius: 12px;
-      height: 40px !important;
-      line-height: 40px !important;
-      transition:
-        background-color 180ms ease,
-        box-shadow 180ms ease,
-        transform 180ms ease;
-      border: 1px solid transparent;
-    }
-
-    .ant-menu-item::after,
-    .ant-menu-submenu-title::after {
-      display: none !important;
-    }
-
-    .ant-menu-submenu-arrow {
-      transition:
-        transform 200ms ease,
-        opacity 200ms ease;
-    }
-
-    .ant-menu-item:hover,
-    .ant-menu-submenu-title:hover {
-      background: linear-gradient(180deg, rgba(247, 248, 251, 0.98) 0%, rgba(242, 244, 248, 0.98) 100%) !important;
-      border-color: rgba(224, 229, 238, 0.95);
-      transform: translateX(1px);
-    }
-
-    .ant-menu-item:hover .menu-icon-wrap,
-    .ant-menu-submenu-title:hover .menu-icon-wrap {
-      background: rgba(100, 116, 139, 0.1);
-      transform: scale(1.03);
-    }
-
-    .ant-menu-item-selected,
-    .ant-menu-submenu-selected > .ant-menu-submenu-title {
-      background: linear-gradient(180deg, rgba(244, 247, 251, 0.98) 0%, rgba(238, 242, 247, 0.98) 100%) !important;
-      border-color: rgba(214, 222, 233, 0.95) !important;
-      box-shadow:
-        inset 0 1px 0 rgba(255, 255, 255, 0.7),
-        0 2px 8px rgba(71, 85, 105, 0.08);
-    }
-
-    .ant-menu-item-selected::before,
-    .ant-menu-submenu-selected > .ant-menu-submenu-title::before {
-      content: '';
-      position: absolute;
-      left: 6px;
-      top: 8px;
-      bottom: 8px;
-      width: 3px;
-      border-radius: 999px;
-      background: linear-gradient(180deg, #64748b 0%, #475569 100%);
-      opacity: 0.95;
-    }
-
-    .ant-menu-sub.ant-menu-inline {
-      background: transparent !important;
-      padding-top: 2px;
-    }
-
-    .ant-menu-sub.ant-menu-inline > .ant-menu-item {
-      height: 36px !important;
-      line-height: 36px !important;
-      border-radius: 10px;
-      margin-left: 18px !important;
-      width: calc(100% - 24px) !important;
-    }
-
-    .ant-menu-inline-collapsed > .ant-menu-item,
-    .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
-      padding-inline: calc(50% - 12px) !important;
-      width: calc(100% - 12px) !important;
-      margin: 4px 6px !important;
-    }
-
-    .ant-menu-inline-collapsed .menu-collapsed {
-      justify-content: center;
-      gap: 0;
-    }
-
-    .ant-menu-inline-collapsed .menu-label-wrap {
-      display: none !important;
-    }
-
-    .ant-menu-inline-collapsed .menu-icon-wrap,
-    .ant-menu-inline-collapsed .menu-collapsed .anticon {
-      margin-right: 0 !important;
     }
     // .ant-menu-inline .ant-menu-item::after{
     //   border-right: none;
@@ -430,15 +232,6 @@
     }
   }
 }
-
-@keyframes side-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -20% 0;
-  }
-}
 @media only screen and (max-width: 768px) {
   .sidemenu {
     // width: 100% !important;
@@ -452,7 +245,7 @@
     .intro {
       width: 210px;
       height: 60px;
-      padding: 6px 8px;
+      padding: 0px;
       // width: 100% !important;
       // padding: 10px 16px;
     }
@@ -460,7 +253,6 @@
     .menu-item {
       width: 100% !important;
       top: 62px;
-      border-right: none;
     }
 
     .sidebar-footer {
@@ -469,16 +261,17 @@
   }
 }
 
+.ant-menu-item:hover {
+  background-color: #e6f7ff !important;
+  color: #1a90ff9e !important;
+}
+
 /* Tooltip styling if needed */
 .ant-tooltip-inner {
   max-width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: rgba(255, 255, 255, 0.98) !important;
-  color: #111827 !important;
-  border: 1px solid rgba(224, 229, 238, 0.95);
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
-  border-radius: 10px;
-  font-weight: 500;
+  background-color: #ffffff !important;
+  color: #000000 !important;
 }

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -26,7 +26,6 @@ export default function CountryPhoneInput({
   const hasInitializedRef = useRef(false); // IMPORTANT
 
   const [phone, setPhone] = useState('');
-
   /**
    * run ONLY ONCE when initial value has dial code
    */