ui-soxo-bootstrap-core 2.4.25-dev.26 → 2.4.25-dev.28

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

@@ -214,7 +214,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
     // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
   }, [state.theme]);
 
-  const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.path || m.caption);
+  const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
 
   return (
     <div className="sidemenu">
@@ -354,7 +354,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                       style={{ color: state.theme.colors.leftSectionColor }}
                       // key={`first-level-${randomIndex}-${menu.caption}`}
 
-                      key={menu.path || menu.caption}
+                      key={menu.id || menu.path || menu.caption}
                       title={
                         <>
                           <CollapsedIconMenu
@@ -377,7 +377,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
                               className="popup"
                               // key={`second-level-${randomIndex}-${submenu.id}`}
 
-                              key={submenu.path || submenu.caption}
+                              key={submenu.id || submenu.path || submenu.caption}
                               title={
                                 <span>
                                   <CollapsedIconMenu

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

@@ -2,26 +2,25 @@ import React, { useRef } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
 export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
-
   const autoScrollWindow = (monitor) => {
-  const offset = monitor.getClientOffset();
-  if (!offset) return;
+    const offset = monitor.getClientOffset();
+    if (!offset) return;
 
-  const EDGE = 80;
-  const SPEED = 20;
+    const EDGE = 80;
+    const SPEED = 20;
 
-  const viewportHeight = window.innerHeight;
+    const viewportHeight = window.innerHeight;
 
-  // 🔼 scroll UP
-  if (offset.y < EDGE) {
-    window.scrollBy(0, -SPEED);
-  }
+    // 🔼 scroll UP
+    if (offset.y < EDGE) {
+      window.scrollBy(0, -SPEED);
+    }
 
-  // 🔽 scroll DOWN
-  if (offset.y > viewportHeight - EDGE) {
-    window.scrollBy(0, SPEED);
-  }
-};
+    // 🔽 scroll DOWN
+    if (offset.y > viewportHeight - EDGE) {
+      window.scrollBy(0, SPEED);
+    }
+  };
 
   const [{ isDragging }, drag] = useDrag({
     type: 'PANEL',
@@ -34,36 +33,30 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
 
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: 'PANEL',
-     hover: (dragItem, monitor) => {
-    //  THIS FIXES BOTTOM → TOP
-    autoScrollWindow(monitor); 
-
-    if (dragItem.index === index) return;
-
-    if (
-      dragItem.level === level &&
-      dragItem.parentId === parentId
-    ) {
-      movePanel(dragItem.index, index);
-      dragItem.index = index; //  keep in sync
-    }
-  },
+    hover: (dragItem, monitor) => {
+      //  THIS FIXES BOTTOM → TOP
+      autoScrollWindow(monitor);
+
+      if (dragItem.index === index) return;
+
+      if (dragItem.level === level && dragItem.parentId === parentId) {
+        movePanel(dragItem.index, index);
+        dragItem.index = index; //  keep in sync
+      }
+    },
 
     canDrop: (item) => dragEnabled,
-     drop: (dragItem, monitor) => {
-    if (monitor.didDrop()) return;
-
-    if (
-      dragItem.level !== level ||
-      dragItem.parentId !== parentId
-    ) {
-      onCrossLevelMove?.(dragItem, {
-        targetLevel: level,
-        targetParentId: parentId,
-        targetIndex: index,
-      });
-    }
-  },
+    drop: (dragItem, monitor) => {
+      if (monitor.didDrop()) return;
+
+      if (dragItem.level !== level || dragItem.parentId !== parentId) {
+        onCrossLevelMove?.(dragItem, {
+          targetLevel: level,
+          targetParentId: parentId,
+          targetIndex: index,
+        });
+      }
+    },
     collect: (monitor) => ({
       isOver: monitor.isOver({ shallow: true }),
       canDrop: monitor.canDrop(),
@@ -75,7 +68,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
     accept: 'PANEL',
     canDrop: (item) => dragEnabled && item.id !== id && canAcceptChildren,
     drop: (item, monitor) => {
-      if (monitor.didDrop()) return;
+      // if (monitor.didDrop()) return;
 
       if (onCrossLevelMove && item.id !== id) {
         // Drop as child of this item
@@ -88,51 +81,56 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
     }),
   });
 
-  const backgroundColor = isOver && canDrop ? '#bae7ff' : isDragging ? '#e6f7ff' : 'transparent';
+  const backgroundColor = isOver && canDrop ? '#bae7ff' : isDragging ? '#ffff' : 'transparent';
   const childZoneBackgroundColor = isOverChild && canDropChild ? '#d4f4dd' : 'transparent';
 
   return (
-    <div ref={drop} style={{ width: '100%' }}>
-      <div
-        ref={drag}
-        style={{
-          opacity: isDragging ? 0.5 : 1,
-          cursor: dragEnabled ? 'move' : 'default',
-          // padding: '8px',
-          backgroundColor,
-          transition: 'all 0.2s ease',
-          border: isOver && canDrop ? '2px dashed #1890ff' : '2px solid transparent',
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <div style={{ flex: 1 }}>
-          {dragEnabled && <span style={{ marginRight: 8, color: '#999' }}>⋮⋮</span>}
-          <strong>{item.name}</strong>
-          {dragEnabled ?( <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>):(<span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>{item.path}</span>)}
-        </div>
-
-        {canAcceptChildren && dragEnabled && (
-          <div
-            ref={dropChild}
-            onClick={(e) => e.stopPropagation()}
-            style={{
-              padding: '4px 12px',
-              marginLeft: 8,
-              backgroundColor: childZoneBackgroundColor,
-              border: isOverChild && canDropChild ? '2px solid #52c41a' : '1px dashed #d9d9d9',
-              borderRadius: 4,
-              fontSize: 11,
-              color: isOverChild && canDropChild ? '#52c41a' : '#999',
-              cursor: 'default',
-              transition: 'all 0.2s ease',
-            }}
-          >
-            {isOverChild && canDropChild ? '✓ Drop as child' : '↳ Drop here'}
+    <div style={{ width: '100%', display: 'flex' }}>
+      {/* HEADER DROP — reorder only */}
+      <div ref={drop}>
+        <div
+          ref={drag}
+          style={{
+            opacity: isDragging ? 0.5 : 1,
+            cursor: dragEnabled ? 'move' : 'default',
+            backgroundColor,
+            border: isOver && canDrop ? '2px dashed #1890ff' : '2px solid transparent',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ flex: 1 }}>
+            {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
+            <span>{item.name}</span>
+            {dragEnabled ? (
+              <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
+            ) : (
+              <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>{item.path}</span>
+            )}
           </div>
-        )}
+        </div>
       </div>
+
+      {/* CHILD DROP — nesting */}
+      {canAcceptChildren && dragEnabled && (
+        <div
+          ref={dropChild}
+          style={{
+            marginLeft: 8,
+            //  flex:1,
+            // marginTop: 4,
+            padding: '4px 12px',
+            backgroundColor: isOverChild && canDropChild ? '#d4f4dd' : 'transparent',
+            border: isOverChild && canDropChild ? '2px solid #52c41a' : '1px dashed #d9d9d9',
+            borderRadius: 4,
+            fontSize: 11,
+            color: isOverChild && canDropChild ? '#52c41a' : '#999',
+          }}
+        >
+          {isOverChild && canDropChild ? '✓ Drop as child' : '↳ Drop here'}
+        </div>
+      )}
     </div>
   );
 }

package/core/models/menus/components/menu-lists/menu-lists.scss

@@ -4,7 +4,7 @@
 }
 
 .ant-collapse {
-   background-color: #fafafa !important;
+   background-color: #ffff !important;
   border: none !important;
 }
 .ant-collapse > .ant-collapse-item {
@@ -39,7 +39,8 @@
   box-shadow: 0 1px 4px rgba(0,0,0,0.04);
 }
 .ant-collapse > .ant-collapse-item > .ant-collapse-heade{
-  align-items: center;
+  align-items: center !important;
 }
 
 
+

package/core/models/roles/components/role-add/role-add.js

@@ -4,6 +4,7 @@ import { Skeleton, Typography, message, Form, Input, Collapse, Checkbox } from '
 import { GlobalContext } from './../../../../lib';
 import { Button } from './../../../../lib';
 import { ModelsAPI, PagesAPI, RolesAPI, MenusAPI } from '../../..';
+import './role-add.scss';
 
 const { Title } = Typography;
 const { Panel } = Collapse;
@@ -59,7 +60,7 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
 
       setSelectedMenus(menus);
       // keep original copy for deselect comparison
-      setOriginalMenus(menus); 
+      setOriginalMenus(menus);
     }
 
     setLoading(false);
@@ -203,48 +204,105 @@ export default RoleAdd;
 // ------------------------
 // Recursive Nested Menu Component
 // ------------------------
-const MenuTree = ({ menus, selectedMenus, toggleMenu }) => {
+// ------------------------
+// Recursive Nested Menu Component
+// ------------------------
+const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
+  // Helper: check if parent should be checked
+  const isParentChecked = (menu) => {
+    if (!menu.sub_menus || menu.sub_menus.length === 0) {
+      return selectedMenus.includes(menu.id);
+    }
+    const allChildIds = menu.sub_menus.map((c) => c.id);
+    return allChildIds.every((id) => selectedMenus.includes(id));
+  };
+
+  // Helper: check if parent is indeterminate
+  const isParentIndeterminate = (menu) => {
+    if (!menu.sub_menus || menu.sub_menus.length === 0) return false;
+    const allChildIds = menu.sub_menus.map((c) => c.id);
+    const checkedCount = allChildIds.filter((id) => selectedMenus.includes(id)).length;
+    return checkedCount > 0 && checkedCount < allChildIds.length;
+  };
+
   return (
     <>
       {menus.map((menu) => {
-        const hasChildren = Array.isArray(menu.sub_menus) && menu.sub_menus.length > 0;
-
-        //  NO CHILD → SIMPLE ROW (NO COLLAPSE)
-        if (!hasChildren) {
+        const children = menu.sub_menus || [];
+        const parentChecked = isParentChecked(menu);
+        const parentIndeterminate = isParentIndeterminate(menu);
+
+        const onParentChange = (checked) => {
+          toggleMenu(menu.id, checked);
+          // toggle children recursively
+          children.forEach((c) => toggleMenuRecursive(c, checked));
+        };
+
+        const toggleMenuRecursive = (menu, checked) => {
+          toggleMenu(menu.id, checked);
+          if (menu.sub_menus && menu.sub_menus.length > 0) {
+            menu.sub_menus.forEach((c) => toggleMenuRecursive(c, checked));
+          }
+        };
+
+        if (children.length === 0) {
           return (
             <div
               key={menu.id}
               style={{
-                padding: '10px 16px',
+                border: '1px solid rgba(198, 195, 195, 0.85)',
+                // borderRadius: 6,
+                padding: '12px 16px',
+                marginBottom: 6,
+                background: '#fff',
                 display: 'flex',
                 alignItems: 'center',
                 gap: 8,
-                borderBottom: '1px solid #f0f0f0',
               }}
             >
-              <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => toggleMenu(menu.id, e.target.checked)} />
+              <Checkbox
+                checked={selectedMenus.includes(menu.id)}
+                onChange={(e) => {
+                  const checked = e.target.checked;
+
+                  toggleMenu(menu.id, checked);
+
+                  // ✅ FORCE parent selection
+                  if (checked && parentId) {
+                    toggleMenu(parentId, true);
+                  }
+                }}
+              />
               <span>{menu.title || menu.caption}</span>
             </div>
           );
         }
 
-        //  HAS CHILD → COLLAPSE WITH ICON
         return (
-          <Collapse key={menu.id} collapsible="icon" style={{ marginBottom: '4px' }}>
+          <Collapse
+            key={menu.id}
+            style={{ marginBottom: 6 }}
+            // defaultActiveKey={[menu.id]}
+          >
             <Panel
               key={menu.id}
               header={
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <Checkbox
-                    checked={selectedMenus.includes(menu.id)}
-                    onClick={(e) => e.stopPropagation()}
-                    onChange={(e) => toggleMenu(menu.id, e.target.checked)}
-                  />
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                  }}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
                   <span>{menu.title || menu.caption}</span>
                 </div>
               }
             >
-              <MenuTree menus={menu.sub_menus} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+              <div style={{ paddingLeft: 20 }}>
+                <MenuTree menus={children} selectedMenus={selectedMenus} toggleMenu={toggleMenu} parentId={menu.id} />
+              </div>
             </Panel>
           </Collapse>
         );

package/core/models/roles/components/role-add/role-add.scss

@@ -0,0 +1,4 @@
+.ant-checkbox-indeterminate .ant-checkbox-inner::after {
+  height: 2.5px;
+  opacity: 0.85;
+}

package/core/modules/index.js

@@ -16,8 +16,6 @@ import PopQueryDashboard from './dashboard/components/pop-query-dashboard/pop-qu
 
 import HomePageAPI from './../pages/homepage-api/homepage-api';
 
-import { Profile, ChangePassword } from './../lib';
-
 import ReportingDashboard from '../modules/reporting/components/reporting-dashboard/reporting-dashboard';
 
 import ChangeInfo from './Informations/change-info/change-info';
@@ -34,9 +32,7 @@ export {
   DashboardCard,
   PopQueryDashboard,
   HomePageAPI,
-  Profile,
   ReportingDashboard,
-  ChangePassword,
   ChangeInfo,
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.26",
+  "version": "2.4.25-dev.28",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"