ui-soxo-bootstrap-core 2.6.40 → 2.6.41

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

@@ -385,6 +385,71 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
 
   const rootSubmenuKeys = Menus.screenMenus(modules, 'order').map((m) => m.id || m.path || m.caption);
 
+  /**
+   * Recursively renders the menu tree to any depth. Any menu that has visible
+   * children is rendered as a <SubMenu>; everything else becomes a clickable
+   * leaf <Menu.Item>. This replaces the old hard-coded 3-level rendering so
+   * menus nested 4, 5, 6+ levels deep all show up.
+   *
+   * Keys are kept identical to the previous implementation
+   * (SubMenu => id || path || caption, leaf => path || caption) so the
+   * openKeys / selectedKeys / onOpenChange logic continues to work.
+   */
+  const renderMenuTree = (items, { isRoot = false, parentKey } = {}) => {
+    const visibleItems = Menus.screenMenus(items, 'order').filter((record) => {
+      // Drop entries without a caption — they have no label to render.
+      const hasCaption = typeof record.caption === 'string' && record.caption.trim().length > 0;
+      if (!hasCaption) return false;
+
+      // The visibility / icon rule only applies to top-level menus, matching the
+      // previous behaviour; nested items just need a caption.
+      if (!isRoot) return true;
+
+      if (record.id) {
+        if (record.is_visible) return true;
+        return !!record.icon_name;
+      }
+
+      return true;
+    });
+
+    return visibleItems.map((menu, index) => {
+      const icon = menu.icon_name || 'fa-solid fas fa-user';
+
+      // Children that actually have something to show (a caption).
+      const children =
+        menu && menu.sub_menus
+          ? Menus.screenMenus(menu.sub_menus, 'order').filter((s) => typeof s.caption === 'string' && s.caption.trim().length > 0)
+          : [];
+
+      if (children.length) {
+        return (
+          <SubMenu
+            className="popup"
+            style={{ color: state.theme.colors.leftSectionColor }}
+            key={menu.id || menu.path || menu.caption}
+            title={
+              <span>
+                <CollapsedIconMenu menu={menu} caption={menu.caption} icon={icon} collapsed={collapsed} />
+              </span>
+            }
+          >
+            {renderMenuTree(menu.sub_menus, { isRoot: false, parentKey: menu.path || menu.caption })}
+          </SubMenu>
+        );
+      }
+
+      return (
+        <Menu.Item
+          key={menu.path || menu.caption}
+          onClick={() => onMenuClick({ ...menu, parentKey: parentKey || menu.path || menu.caption, isRoot }, index)}
+        >
+          <CollapsedIconMenu menu={menu} caption={menu.caption} icon={icon} collapsed={collapsed} />
+        </Menu.Item>
+      );
+    });
+  };
+
   return (
     <div className="sidemenu">
       {loading ? (
@@ -490,153 +555,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
               })
             } */}
 
-            {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>
-                  );
-                }
-              })}
+            {renderMenuTree(modules, { isRoot: true })}
 
             {loading ? (
               <div class="skeleton-wrapper"></div>

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

@@ -1,26 +1,27 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } 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 EDGE = 80;
-    const SPEED = 20;
-
-    const viewportHeight = window.innerHeight;
-
-    // 🔼 scroll UP
-    if (offset.y < EDGE) {
-      window.scrollBy(0, -SPEED);
-    }
+// Walk up the DOM to find the nearest vertically-scrollable ancestor.
+// Returns null when the page (window) is the scroller.
+function getScrollableAncestor(node) {
+  let el = node?.parentElement;
+  while (el) {
+    const { overflowY } = window.getComputedStyle(el);
+    const scrollable = overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
+    if (scrollable && el.scrollHeight > el.clientHeight) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
 
-    // 🔽 scroll DOWN
-    if (offset.y > viewportHeight - EDGE) {
-      window.scrollBy(0, SPEED);
-    }
-  };
+export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
+  // Root DOM node, used to locate the scrollable ancestor at drag time
+  const rootRef = useRef(null);
+  // Latest pointer Y, fed by a document-level `dragover` listener (see effect below)
+  const pointerY = useRef(0);
+  const rafRef = useRef(null);
+  // The scrollable container to auto-scroll (resolved when a drag starts)
+  const scrollContainerRef = useRef(null);
 
   const [{ isDragging }, drag] = useDrag({
     type: 'PANEL',
@@ -31,12 +32,78 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
     }),
   });
 
+  /**
+   * Continuous edge auto-scroll while THIS item is being dragged.
+   *
+   * Driven by a document-level `dragover` listener + requestAnimationFrame loop
+   * rather than the drop target's `hover` handler. `hover` only fires while the
+   * pointer is over a droppable panel and only on movement, so scrolling UP
+   * failed: the top of the viewport is the (non-droppable) header, and holding
+   * the pointer still at an edge produced no events. The rAF loop keeps
+   * scrolling from the last known pointer position regardless of what's beneath.
+   *
+   * The list may scroll inside an overflow container rather than the window, so
+   * we resolve the nearest scrollable ancestor and scroll that (falling back to
+   * the window), computing the edges from the container's own bounds.
+   */
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const EDGE = 80;
+    const SPEED = 20;
+
+    scrollContainerRef.current = getScrollableAncestor(rootRef.current);
+
+    const onDragOver = (e) => {
+      pointerY.current = e.clientY;
+    };
+
+    const tick = () => {
+      const y = pointerY.current;
+
+      if (y > 0) {
+        const container = scrollContainerRef.current;
+
+        if (container) {
+          const rect = container.getBoundingClientRect();
+          // near container top
+          if (y < rect.top + EDGE) {
+            container.scrollTop -= SPEED;
+          }
+          // near container bottom
+          else if (y > rect.bottom - EDGE) {
+            container.scrollTop += SPEED;
+          }
+        } else {
+          const viewportHeight = window.innerHeight;
+          // near viewport top
+          if (y < EDGE) {
+            window.scrollBy(0, -SPEED);
+          }
+          // near viewport bottom
+          else if (y > viewportHeight - EDGE) {
+            window.scrollBy(0, SPEED);
+          }
+        }
+      }
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    window.addEventListener('dragover', onDragOver);
+    rafRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      window.removeEventListener('dragover', onDragOver);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      pointerY.current = 0;
+      scrollContainerRef.current = null;
+    };
+  }, [isDragging]);
+
   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) {
@@ -85,7 +152,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
   const childZoneBackgroundColor = isOverChild && canDropChild ? '#d4f4dd' : 'transparent';
 
   return (
-    <div style={{ width: '100%', display: 'flex' }}>
+    <div ref={rootRef} style={{ width: '100%', display: 'flex' }}>
       {/* HEADER DROP — reorder only */}
       <div ref={drop}>
         <div

package/core/lib/models/menus/components/menu-add/menu-add.js

@@ -158,7 +158,7 @@ export default function MenuAdd({ model, edit, history, match, formContent, call
 
                     {/* Model */}
                     <Form.Item label="Model" name="model_id">
-                        <Select style={{ width: '100%' }}>
+                        <Select allowClear style={{ width: '100%' }}>
                             {models.map((model, key) => (
                                 <Option key={key} value={model.id}>{model.name}</Option>
                             ))}
@@ -168,7 +168,7 @@ export default function MenuAdd({ model, edit, history, match, formContent, call
 
                     {/* Page */}
                     <Form.Item label="Page" name="page_id">
-                        <Select style={{ width: '100%' }}>
+                        <Select allowClear style={{ width: '100%' }}>
                             {pages.map((page, key) => (
                                 <Option key={key} value={page.id}>{page.name}</Option>
                             ))}

package/core/models/menus/components/menu-add/menu-add.js

@@ -116,6 +116,13 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
       values.step = formContent.step || step;
     }
 
+    //  Cleared selects come back as undefined; send null so the backend clears them
+    ['model_id', 'page_id', 'header_id'].forEach((field) => {
+      if (values[field] === undefined) {
+        values[field] = null;
+      }
+    });
+
     if (values.attributes && typeof values === 'object') {
       values = {
         ...values,
@@ -183,7 +190,7 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
               {/* Model */}
               <Form.Item label="Models" name={'model_id'}>
                 {/* <ReferenceSelect value={model.id} label={model.name} model={Models} /> */}
-                <Select showSearch style={{ width: '100%' }} placeholder="Select a Page" optionFilterProp="label">
+                <Select showSearch style={{ width: '100%' }} placeholder="Select a Page" optionFilterProp="label" allowClear>
                   {models.map((model, key) => (
                     <Option key={key} label={model.name} value={model.id}>
                       {model.name}
@@ -198,7 +205,7 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
               <Form.Item label="Pages" name={'page_id'}>
                 {/* <ReferenceSelect value={pages.id} label={pages.name} model={Pages} /> */}
 
-                <Select showSearch optionFilterProp="children" style={{ width: '100%' }}>
+                <Select showSearch optionFilterProp="children" style={{ width: '100%' }} allowClear>
                   {pages.map((model, key) => (
                     <Option key={key} value={model.id}>
                       {model.name}
@@ -229,13 +236,33 @@ const MenuAdd = ({ model, callback, edit, history, formContent, match, additiona
               {/* Pages Ends */}
 
               {/* Path */}
-              <Form.Item name="path" label="Path" rules={[{ required: true, message: 'Path is required' }]}>
+              <Form.Item
+                name="path"
+                label="Path"
+                rules={[
+                  { required: true, message: 'Path is required' },
+                  {
+                    pattern: /^\//,
+                    message: 'Path must start with /',
+                  },
+                ]}
+              >
                 <Input placeholder="Enter path" />
               </Form.Item>
               {/* Path Ends */}
 
               {/* Route */}
-              <Form.Item name="route" label="Route" rules={[{ required: true, message: 'Route is required' }]}>
+              <Form.Item
+                name="route"
+                label="Route"
+                rules={[
+                  { required: false, message: 'Route is required' },
+                  {
+                    pattern: /^\//,
+                    message: 'Route must start with /',
+                  },
+                ]}
+              >
                 <Input placeholder="Enter route" />
               </Form.Item>
               {/* Route Ends */}

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

@@ -30,6 +30,9 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
   const [query, setQuery] = useState('');
   const [dragMode, setDragMode] = useState(false);
   const [orderChanged, setOrderChanged] = useState(false);
+  // keys of currently-expanded top-level panels. Seeded from the search results
+  // when the query changes, but the user can freely toggle panels afterwards.
+  const [openKeys, setOpenKeys] = useState([]);
 
   const [nextId, setNextId] = useState(10000);
 
@@ -181,6 +184,16 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
         return;
       }
 
+      // Prevent moving a menu into one of its own descendants
+      // (e.g. A > B, C — A cannot be dropped under B or C).
+      if (targetParentId) {
+        const draggedNode = findMenuById(records, draggedItem.id);
+        if (draggedNode && findMenuById(draggedNode.sub_menus || [], targetParentId)) {
+          message.warning('Cannot move a menu into its own sub menu');
+          return;
+        }
+      }
+
       // Remove item from original location
       const { newItems: itemsAfterRemove, foundItem } = findAndRemoveItem(records, draggedItem.id);
 
@@ -194,7 +207,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
 
       setRecords(finalItems);
       setOrderChanged(true);
-      message.success(`Moved "${foundItem.name}" to level ${targetLevel}`);
+      message.success(`Moved "${foundItem.caption}" to level ${targetLevel}`);
     },
     [records]
   );
@@ -203,9 +216,42 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
     model.delete(rec).then(loadMenus);
   };
 
-  const filtered = records.filter((r) => r.caption?.toUpperCase().includes(query.toUpperCase()));
+  // Recursively filter the menu tree by caption. A menu is kept if its own
+  // caption matches OR any descendant matches. When the menu itself matches we
+  // keep its full subtree; when only a descendant matches we keep just the
+  // pruned path so the matching item stays reachable.
+  const filterMenus = (menus, q) => {
+    if (!q) return menus || [];
+    const lower = q.toLowerCase();
+
+    return (menus || []).reduce((acc, menu) => {
+      const selfMatch = (menu.caption || '').toLowerCase().includes(lower);
+      if (selfMatch) {
+        acc.push({ ...menu });
+        return acc;
+      }
+      const subFiltered = filterMenus(menu.sub_menus || [], q);
+      if (subFiltered.length) {
+        acc.push({ ...menu, sub_menus: subFiltered });
+      }
+      return acc;
+    }, []);
+  };
+
+  // Ids of items (at one level) that have sub_menus — used to auto-expand
+  // every branch leading to a search match.
+  const expandableKeys = (items) => (items || []).filter((m) => m.sub_menus && m.sub_menus.length > 0).map((m) => String(m.id));
 
-  const visibleItems = filtered;
+  const searchActive = !!query;
+  const visibleItems = filterMenus(records, query);
+
+  // When the query changes, seed the open panels from the search results (every
+  // branch on the path to a match) so the matched sub-menu is revealed. After
+  // that the user can collapse/expand freely via the Collapse onChange below.
+  useEffect(() => {
+    setOpenKeys(query ? expandableKeys(filterMenus(records, query)) : []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
 
   const onSearch = (event) => {
     setQuery(event.target.value);
@@ -305,12 +351,12 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
     <Card className="generic-list">
       <div style={{ marginBottom: 16 }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-          <Search placeholder="Enter Search Value" allowClear style={{ width: 300, marginBottom: '0px' }} onChange={onSearch} />
+          <Search placeholder="Search menus & sub-menus…" allowClear style={{ width: 300, marginBottom: '0px' }} onChange={onSearch} />
 
           <Space size="small">
-            <Button onClick={getRecords} size={'small'} type="default">
+            {/* <Button onClick={getRecords} size={'small'} type="default">
               <ReloadOutlined />
-            </Button>
+            </Button> */}
 
             <Switch checked={dragMode} onChange={toggleDragMode} checkedChildren="Order On" unCheckedChildren="Order Off" />
 
@@ -361,7 +407,11 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
             {/* {!view ? ( */}
             <Card>
               <DndProvider backend={HTML5Backend}>
-                <Collapse accordion>
+                <Collapse
+                  accordion={!searchActive}
+                  activeKey={openKeys}
+                  onChange={(keys) => setOpenKeys(Array.isArray(keys) ? keys : keys ? [keys] : [])}
+                >
                   {visibleItems && visibleItems.length > 0 ? (
                     visibleItems.map((item, index) => (
                       <Panel
@@ -389,6 +439,8 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
                             items={item.sub_menus || []}
                             model={model}
                             dragMode={dragMode}
+                            searchActive={searchActive}
+                            query={query}
                             setSelectedRecord={setSelectedRecord}
                             setDrawerTitle={setDrawerTitle}
                             setDrawerVisible={setDrawerVisible}
@@ -437,7 +489,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
   );
 };
 /* -----------------------------------------------------------------------
-   PANEL ACTIONS 
+   PANEL ACTIONS
 ------------------------------------------------------------------------ */
 function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord) {
   return (
@@ -500,6 +552,8 @@ function NestedMenu({
   items,
   model,
   dragMode,
+  searchActive,
+  query,
   setSelectedRecord,
   setDrawerTitle,
   setDrawerVisible,
@@ -508,15 +562,22 @@ function NestedMenu({
   onCrossLevelMove,
   onChange,
 }) {
-  // do not render Collapse
-  if (!items || items.length === 0) return null;
-
   const [localItems, setLocalItems] = useState(items);
+  // keys of currently-expanded sub-panels. Seeded from the search results when
+  // the query changes, but the user can freely toggle panels afterwards.
+  const [openKeys, setOpenKeys] = useState([]);
 
   useEffect(() => {
     setLocalItems(items);
   }, [items]);
 
+  // Seed the open sub-panels from the search path when the query changes; keep
+  // the user's toggles otherwise so a search-opened panel can be closed.
+  useEffect(() => {
+    setOpenKeys(searchActive ? (items || []).filter((c) => c.sub_menus && c.sub_menus.length > 0).map((c) => String(c.id)) : []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query, searchActive]);
+
   const moveSubMenu = useCallback(
     (from, to) => {
       if (!dragMode || from === to) return;
@@ -536,7 +597,7 @@ function NestedMenu({
   }
 
   return (
-    <Collapse accordion>
+    <Collapse accordion={!searchActive} activeKey={openKeys} onChange={(keys) => setOpenKeys(Array.isArray(keys) ? keys : keys ? [keys] : [])}>
       {localItems.map((child, index) => (
         <Panel
           key={child.id}
@@ -563,6 +624,8 @@ function NestedMenu({
             step={step + 1}
             items={child.sub_menus || []}
             dragMode={dragMode}
+            searchActive={searchActive}
+            query={query}
             setSelectedRecord={setSelectedRecord}
             setDrawerTitle={setDrawerTitle}
             setDrawerVisible={setDrawerVisible}

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

@@ -0,0 +1,14 @@
+// ------------------------
+// Menu caption + path label
+// ------------------------
+const MenuLabel = ({ menu }) => {
+  const path = menu.path || menu.route;
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8, lineHeight: 1.3 }}>
+      <span>{menu.caption}</span>
+      {path ? <span style={{ color: '#999', fontSize: 12 }}>{path}</span> : null}
+    </div>
+  );
+};
+
+export default MenuLabel;

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

@@ -0,0 +1,127 @@
+import { Collapse, Checkbox, Tag } from 'antd';
+
+import MenuLabel from './menu-label';
+
+const { Panel } = Collapse;
+
+// ------------------------
+// Recursive Nested Menu Component
+// ------------------------
+const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null, searchActive = false }) => {
+  // 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 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
+              style={{
+                justifyContent: 'space-between',
+                display: 'flex',
+                alignItems: 'center',
+                border: '1px solid rgba(198, 195, 195, 0.85)',
+                // borderRadius: 6,
+                padding: '12px 16px',
+                marginBottom: 6,
+                background: '#fff',
+              }}
+            >
+              <div
+                key={menu.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                }}
+              >
+                <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);
+                    }
+                  }}
+                />
+                <MenuLabel menu={menu} />
+              </div>
+              <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
+            </div>
+          );
+        }
+
+        return (
+          <Collapse
+            // remount when search toggles so panels open while searching and collapse when cleared
+            key={`${menu.id}-${searchActive}`}
+            style={{ marginBottom: 6 }}
+            defaultActiveKey={searchActive ? [menu.id] : undefined}
+          >
+            <Panel
+              key={menu.id}
+              header={
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
+                    <MenuLabel menu={menu} />
+                  </div>
+                  <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
+                </div>
+              }
+            >
+              <div style={{ paddingLeft: 20 }}>
+                <MenuTree menus={children} selectedMenus={selectedMenus} toggleMenu={toggleMenu} parentId={menu.id} searchActive={searchActive} />
+              </div>
+            </Panel>
+          </Collapse>
+        );
+      })}
+    </>
+  );
+};
+
+export default MenuTree;

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

@@ -1,15 +1,14 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { Skeleton, Typography, message, Form, Input, Collapse, Checkbox, Tag } from 'antd';
+import { Skeleton, Typography, message, Form, Input } from 'antd';
 import { GlobalContext } from './../../../../lib';
-import { Button } from './../../../../lib';
 import { ModelsAPI, PagesAPI, RolesAPI, MenusAPI } from '../../..';
+import MenuTree from './menu-tree';
 import './role-add.scss';
 
 const { Title } = Typography;
-const { Panel } = Collapse;
 
-const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_queries = [] }) => {
+const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_queries = [], onSubmittingChange, formRef }) => {
   let mode = 'Add';
   if (formContent.id) mode = 'Edit';
   else if (formContent.copy) mode = 'copy';
@@ -31,8 +30,10 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
 
   const isEdit = !!(formContent.id || formContent.copy);
   const [initialLoading, setInitialLoading] = useState(isEdit);
-  const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
+
+  // expose the form instance so the Drawer footer Save button can submit it
+  if (formRef) formRef.current = form;
   const [pages, setPages] = useState([]);
   const [models, setModels] = useState([]);
   const [menuList, setMenuList] = useState([]);
@@ -43,6 +44,9 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
   // Selected menus (array of IDs)
   const [selectedMenus, setSelectedMenus] = useState([]);
 
+  // Search term for filtering the menu list
+  const [menuSearch, setMenuSearch] = useState('');
+
   const location = useLocation();
   const query = new URLSearchParams(location.search);
   let step = parseInt(query.get('step')) || 1;
@@ -97,40 +101,28 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
     setSelectedMenus((prev) => (checked ? [...prev, id] : prev.filter((m) => m !== id)));
   };
 
-  // Submit handler
-  //   const onSubmit = (values) => {
-  //     setLoading(true);
-
-  //     const payload = {
-  //       ...values,
-  //       menu_ids
-  // : selectedMenus,
-  //       attributes: JSON.stringify(values.attributes || {}),
-  //     };
-
-  //     if (formContent.id) {
-  //       RolesAPI.updateRole({ id: formContent.id, formBody: payload })
-  //         .then(() => {
-  //           message.success('Role Updated');
-  //           setLoading(false);
-  //           callback();
-  //         })
-  //         .catch(() => setLoading(false));
-  //     } else {
-  //       additional_queries.forEach(({ field, value }) => {
-  //         payload[field] = value;
-  //       });
-  //       RolesAPI.createRole(payload)
-  //         .then(() => {
-  //           message.success('Role Added');
-  //           setLoading(false);
-  //           callback();
-  //         })
-  //         .catch(() => setLoading(false));
-  //     }
-  //   };
+  // Recursively filter menus by caption. A menu is kept if its caption matches
+  // the search term, or if any of its descendants match (ancestors are kept so
+  // the matching child stays reachable).
+  const filterMenus = (menus, term) => {
+    if (!term) return menus;
+    const lower = term.toLowerCase();
+
+    return menus.reduce((acc, menu) => {
+      const children = filterMenus(menu.sub_menus || [], term);
+      const selfMatch = (menu.caption || '').toLowerCase().includes(lower);
+
+      if (selfMatch || children.length > 0) {
+        acc.push({ ...menu, sub_menus: children });
+      }
+      return acc;
+    }, []);
+  };
+
+  const filteredMenuList = filterMenus(menuList, menuSearch);
+
   const onSubmit = async (values) => {
-    setLoading(true);
+    onSubmittingChange?.(true);
 
     // Find menus that were originally selected but now deselected
     const deselectedMenus = originalMenus.filter((id) => !selectedMenus.includes(id));
@@ -153,13 +145,21 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
     });
 
     try {
-      await RolesAPI.createRole(payload); //  single API
+      const res = await RolesAPI.createRole(payload); //  single API
+
+      // it via success: false — show that message as a warning.
+      if (res?.success === false) {
+        message.warning(res.message || 'Failed to save role');
+        return;
+      }
+
       message.success(formContent?.id ? 'Role Updated' : 'Role Added');
       callback();
     } catch (err) {
-      // message.error('Something went wrong');
+      // Surface any unexpected backend error message as a warning.
+      message.warning(err?.message || err?.result?.message || 'Failed to save role');
     } finally {
-      setLoading(false);
+      onSubmittingChange?.(false);
     }
   };
 
@@ -194,6 +194,7 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
                   display: 'flex',
                   justifyContent: 'space-between',
                   alignItems: 'center',
+                  gap: 16,
                   marginBottom: 16,
                 }}
               >
@@ -204,14 +205,20 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
                   <p style={{ color: '#999', marginBottom: 0 }}>Choose menus and set permissions</p>
                 </div>
 
-                <Form.Item style={{ marginBottom: 0 }}>
-                  <Button loading={loading} htmlType="submit" type="primary">
-                    Save
-                  </Button>
-                </Form.Item>
+                <Input.Search
+                  allowClear
+                  placeholder="Search menus"
+                  value={menuSearch}
+                  onChange={(e) => setMenuSearch(e.target.value)}
+                  style={{ maxWidth: 260 }}
+                />
               </div>
 
-              <MenuTree menus={menuList} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+              {filteredMenuList.length > 0 ? (
+                <MenuTree menus={filteredMenuList} selectedMenus={selectedMenus} toggleMenu={toggleMenu} searchActive={!!menuSearch} />
+              ) : (
+                <p style={{ color: '#999', textAlign: 'center', padding: '16px 0' }}>No menus found</p>
+              )}
             </div>
           )}
         </Form>
@@ -221,125 +228,3 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
 };
 
 export default RoleAdd;
-
-// ------------------------
-// Recursive Nested Menu Component
-// ------------------------
-// ------------------------
-// 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 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
-              style={{
-                justifyContent: 'space-between',
-                display: 'flex',
-                alignItems: 'center',
-                border: '1px solid rgba(198, 195, 195, 0.85)',
-                // borderRadius: 6,
-                padding: '12px 16px',
-                marginBottom: 6,
-                background: '#fff',
-              }}
-            >
-              <div
-                key={menu.id}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 8,
-                }}
-              >
-                <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.caption}</span>
-              </div>
-              <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
-            </div>
-          );
-        }
-
-        return (
-          <Collapse
-            key={menu.id}
-            style={{ marginBottom: 6 }}
-            // defaultActiveKey={[menu.id]}
-          >
-            <Panel
-              key={menu.id}
-              header={
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <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.caption}</span>
-                  </div>
-                  <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
-                </div>
-              }
-            >
-              <div style={{ paddingLeft: 20 }}>
-                <MenuTree menus={children} selectedMenus={selectedMenus} toggleMenu={toggleMenu} parentId={menu.id} />
-              </div>
-            </Panel>
-          </Collapse>
-        );
-      })}
-    </>
-  );
-};

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

@@ -40,6 +40,12 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
 
   const [single, setSingle] = useState({});
 
+  // tracks RoleAdd form submission so the Drawer footer button shows loading
+  const [submitting, setSubmitting] = useState(false);
+
+  // holds the RoleAdd form instance so the Drawer footer Save button can submit it
+  const formRef = useRef(null);
+
   var [queryValue, setQueryValue] = useState('');
 
   const { Search } = Input;
@@ -360,12 +366,26 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
         destroyOnClose
         onClose={closeModal}
         bodyStyle={{ paddingBottom: 80 }}
+        footer={
+          <div style={{ textAlign: 'right' }}>
+            <Space size="small">
+              <Button type="default" onClick={closeModal}>
+                Cancel
+              </Button>
+              <Button type="primary" loading={submitting} onClick={() => formRef.current?.submit()}>
+                Save
+              </Button>
+            </Space>
+          </div>
+        }
       >
         <model.ModalAddComponent
           match={match}
           model={model}
           additional_queries={additional_queries}
           formContent={single}
+          formRef={formRef}
+          onSubmittingChange={setSubmitting}
           callback={(event) => {
             closeModal();
             getRecords();

package/core/models/roles/roles.js

@@ -163,6 +163,9 @@ class RolesAPI extends BaseAPI {
     return ApiUtils.post({
       url: `core-roles/save-core-role`,
       formBody,
+      // Let the caller surface the backend message (as a warning) instead of
+      // the default red error toast from the http layer.
+      hideError: true,
     });
   };
 

package/core/models/users/components/assign-role/assign-role.js

@@ -160,7 +160,7 @@ export default function AssignRole() {
     const role_id = role.id;
     try {
       const res = await MenusAPI.getCoreMenuByRoleId(role_id);
-      const allMenus = res.result || [];
+      const allMenus = Array.isArray(res?.result) ? res.result : [];
 
       setModules(allMenus);
     } catch (e) {
@@ -264,11 +264,12 @@ export default function AssignRole() {
   const handleViewAll = async () => {
     setLoadingMenus(true);
     setModules([]);
-    setActiveRole({ name: 'All Roles' });
+    setActiveRole({ name: 'All Roles', isViewAll: true });
 
     try {
       const res = await MenusAPI.getMenubyUser(id);
-      setModules(res?.result?.menus ?? []);
+      const userMenus = Array.isArray(res?.result?.menus) ? res.result.menus : [];
+      setModules(userMenus);
       setLoadingMenus(false);
     } catch (err) {
       setLoadingMenus(false);
@@ -277,6 +278,18 @@ export default function AssignRole() {
     }
   };
 
+  /**
+   * Context-specific empty-state message for the right (menus) panel:
+   * - View Access for a user with no roles → no role assigned
+   * - A selected role with no menus → no menus assigned
+   * - Nothing selected yet → prompt to pick a role
+   */
+  const emptyMenusMessage = !activeRole
+    ? 'Select a role to view menus'
+    : activeRole.isViewAll
+    ? 'No role has been assigned to this user.'
+    : 'No menus have been assigned to this role.';
+
   return (
     <section className="assign-role">
       {/* LEFT PANEL */}
@@ -383,17 +396,19 @@ export default function AssignRole() {
           padding: 16,
         }}
       >
-        <div className="menus-header">
-          <div className="title">Menus {activeRole ? `– ${activeRole.name}` : ''}</div>
-          <div className="sub-text">You don’t have permission to edit this here. Update it in Role Settings.</div>
-        </div>
+        {modules.length > 0 && (
+          <div className="menus-header">
+            <div className="title">Menus {activeRole ? `– ${activeRole.name}` : ''}</div>
+            <div className="sub-text">You don’t have permission to edit this here. Update it in Role Settings.</div>
+          </div>
+        )}
 
         <div className="menus-content">
           {loadingMenus ? (
             <Skeleton active paragraph={{ rows: 6 }} />
           ) : modules.length === 0 ? (
             <div className="empty-state">
-              <Empty description="Select a role to view menus" />
+              <Empty description={emptyMenusMessage} />
             </div>
           ) : (
             <MenuTree menus={modules} selectedMenus={selectedMenus} toggleMenu={toggleMenu} showCheckbox={false} />

package/package.json

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