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

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

@@ -1,4 +1,52 @@
 .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;
@@ -40,18 +88,26 @@
     padding: 5px 16px;
     position: fixed;
     z-index: 1000;
-    width: 17%;
-    background: #fff;
+    // width: 17%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
     // 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;
@@ -75,6 +131,11 @@
         }
 
         cursor: pointer;
+
+        &:hover {
+          transform: translateY(-1px) scale(1.01);
+          filter: saturate(1.05);
+        }
       }
     }
 
@@ -94,20 +155,22 @@
   }
 
   .menu-item {
-    padding-top: 10px;
+    padding-top: 8px;
     // height: calc(100vh - 48px); /* Adjust height */
     height: 100vh;
     margin-top: 0px;
     width: 256px;
     top: 48px;
-    border-bottom: 1px solid #f0f0f0;
+    border-right: 1px solid rgba(226, 231, 239, 0.9);
+    border-bottom: 1px solid rgba(240, 243, 248, 0.8);
     position: fixed;
     height: 100vh;
     margin-top: 0;
     overflow-y: scroll;
     overflow-x: hidden;
     width: 211px;
-    padding-bottom: 50px;
+    padding-bottom: 24px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(249, 250, 252, 0.98) 100%);
 
     /* Custom Scrollbar like macOS */
     scrollbar-width: thin; /* For Firefox */
@@ -142,18 +205,57 @@
       margin: 80px;
     }
 
+    .menu-motion-shell {
+      padding: 6px 6px 14px;
+    }
+
     .ant-menu-inline {
       border: none !important;
     }
 
     .menu-collapsed {
-      width: 81px;
+      width: 100%;
+      min-width: 0;
       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;
     }
@@ -178,6 +280,102 @@
     /* 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;
@@ -232,6 +430,15 @@
     }
   }
 }
+
+@keyframes side-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -20% 0;
+  }
+}
 @media only screen and (max-width: 768px) {
   .sidemenu {
     // width: 100% !important;
@@ -245,7 +452,7 @@
     .intro {
       width: 210px;
       height: 60px;
-      padding: 0px;
+      padding: 6px 8px;
       // width: 100% !important;
       // padding: 10px 16px;
     }
@@ -253,6 +460,7 @@
     .menu-item {
       width: 100% !important;
       top: 62px;
+      border-right: none;
     }
 
     .sidebar-footer {
@@ -261,17 +469,16 @@
   }
 }
 
-.ant-menu-item:hover {
-  background-color: #e6f7ff !important;
-  color: #1677ff !important;
-}
-
 /* Tooltip styling if needed */
 .ant-tooltip-inner {
   max-width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: #ffffff !important;
-  color: #000000 !important;
+  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;
 }

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

@@ -11,7 +11,17 @@ import 'react-phone-input-2/lib/style.css';
 import PropTypes from 'prop-types';
 import './phone-input.scss';
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur,className }) {
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+  defaultCountryCode,
+  onBlur,
+  className,
+  onKeyDown,
+}) {
   const inputRef = useRef();
   const hasInitializedRef = useRef(false); // IMPORTANT
 
@@ -21,11 +31,7 @@ export default function CountryPhoneInput({ value, onChange, disabled, disableCo
    * run ONLY ONCE when initial value has dial code
    */
   useEffect(() => {
-    if (
-      !hasInitializedRef.current &&
-      value?.code?.dialCode &&
-      value?.value
-    ) {
+    if (!hasInitializedRef.current && value?.code?.dialCode && value?.value) {
       setPhone(value.code.dialCode + value.value);
       hasInitializedRef.current = true; // 👈 mark as done
     }
@@ -54,7 +60,7 @@ export default function CountryPhoneInput({ value, onChange, disabled, disableCo
         // country={disableCountryCode ? false : 'in'}
         value={phone}
         onChange={handleInput}
-        inputProps={{ required: required }}
+        inputProps={{ required: required, onKeyDown: onKeyDown }}
         disabled={disabled}
         onBlur={onBlur}
       />
@@ -73,4 +79,4 @@ CountryPhoneInput.propTypes = {
   disableCountryCode: PropTypes.bool,
   /** A boolean indicating whether the input is required or not. This prop is optional. */
   required: PropTypes.bool,
-};
+};

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -102,7 +102,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
         >
           <div style={{ flex: 1 }}>
             {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
-            <span>{item.name}</span>
+            <span>{item.caption}</span>
             {dragEnabled ? (
               <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
             ) : (

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -23,7 +23,7 @@
  */
 
 import React from 'react';
-import { Checkbox, Collapse } from 'antd';
+import { Checkbox, Collapse, Tag } from 'antd';
 
 const { Panel } = Collapse;
 
@@ -73,11 +73,15 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
               background: '#fff',
               display: 'flex',
               alignItems: 'center',
-              gap: 8,
+              justifyContent: 'space-between',
             }}
           >
-            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
-            <span>{menu.title || menu.caption}</span>
+            {/* Left Side */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
+              <span>{menu.caption}</span>
+            </div>
+            <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
           </div>
         );
       }
@@ -91,15 +95,24 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
           <Panel
             key={menu.id}
             header={
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                {showCheckbox && (
-                  <Checkbox
-                    checked={children.every((c) => selectedMenus.includes(c.id))}
-                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
-                    onChange={(e) => onParentChange(e.target.checked)}
-                  />
-                )}
-                <span>{menu.title || menu.caption}</span>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  {showCheckbox && (
+                    <Checkbox
+                      checked={children.every((c) => selectedMenus.includes(c.id))}
+                      indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
+                      onChange={(e) => onParentChange(e.target.checked)}
+                    />
+                  )}
+                  <span>{menu.caption}</span>
+                </div>
+                <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
               </div>
             }
           >

package/core/lib/models/forms/components/form-creator/form-creator.scss

@@ -4,7 +4,7 @@
     }
 
     .new-record {
-            gap: 10px !important;
+        gap: 10px !important;
     }
 
     .form-item-element {
@@ -22,9 +22,10 @@
                 // right: 0px;
             }
         }
-     
+
     }
-    .submit-button{
+
+    .submit-button {
         margin-top: 10px;
     }
 }