ui-soxo-bootstrap-core 2.6.40-dev.11 → 2.6.40-dev.13

package/PUBLISHING.md

@@ -0,0 +1,333 @@
+# Publishing `ui-soxo-bootstrap-core` to npm
+
+Complete guide for developers.
+
+---
+
+## Table of contents
+
+1. [Quick reference](#quick-reference)
+2. [Branch & version strategy](#branch--version-strategy)
+3. [`npm version` keys explained](#npm-version-keys-explained)
+4. [Publishing a dev pre-release (from `develop`)](#publishing-a-dev-pre-release-from-develop)
+5. [Publishing a stable release (from `master`)](#publishing-a-stable-release-from-master)
+6. [Verifying & installing](#verifying--installing)
+7. [Rules & dos / don'ts](#rules--dos--donts)
+8. [How auth works](#how-auth-works)
+9. [Troubleshooting](#troubleshooting)
+
+---
+
+## Quick reference
+
+| Branch    | Version format    | npm dist-tag | Example          | Who installs                          |
+| --------- | ----------------- | ------------ | ---------------- | ------------------------------------- |
+| `develop` | `X.Y.Z-dev.N`     | `dev`        | `2.6.40-dev.11`  | Devs testing pre-releases             |
+| `master`  | `X.Y.Z`           | `latest`     | `2.6.40`         | Default install for everyone          |
+
+---
+
+## Branch & version strategy
+
+```
+feature branches  ──►  develop  ──►  master
+                       (dev tag)    (latest tag)
+```
+
+- All day-to-day work merges into `develop`.
+- Each meaningful commit on `develop` can be published as a `-dev.N` pre-release for QA / integration testing.
+- When the code is ready for production, **merge `develop` → `master`**, then bump and tag a stable version on `master`.
+- `master` is the source of `latest` on npm. End users get this by default.
+
+---
+
+## `npm version` keys explained
+
+`npm version <key>` bumps `package.json`, creates a commit, **and** creates a git tag in one shot. Use it instead of editing `package.json` by hand.
+
+### Stable bumps (use on `master`)
+
+| Key       | From    | To       | When to use                                       |
+| --------- | ------- | -------- | ------------------------------------------------- |
+| `patch`   | 2.6.40  | 2.6.41   | Bug fixes only, no API change                     |
+| `minor`   | 2.6.40  | 2.7.0    | New features, backwards-compatible                |
+| `major`   | 2.6.40  | 3.0.0    | Breaking changes (consumers must update code)     |
+
+```bash
+npm version patch   # → 2.6.41
+npm version minor   # → 2.7.0
+npm version major   # → 3.0.0
+```
+
+### Pre-release bumps (use on `develop`)
+
+| Key                                | From            | To                  | When to use                                 |
+| ---------------------------------- | --------------- | ------------------- | ------------------------------------------- |
+| `prerelease --preid=dev`           | 2.6.40-dev.10   | 2.6.40-dev.11       | Another iteration of the current pre-release |
+| `prepatch --preid=dev`             | 2.6.40          | 2.6.41-dev.0        | Start pre-releases for the next patch       |
+| `preminor --preid=dev`             | 2.6.40          | 2.7.0-dev.0         | Start pre-releases for the next minor       |
+| `premajor --preid=dev`             | 2.6.40          | 3.0.0-dev.0         | Start pre-releases for the next major       |
+
+```bash
+npm version prerelease --preid=dev   # → 2.6.40-dev.11 (most common on develop)
+npm version preminor   --preid=dev   # → 2.7.0-dev.0   (kick off next minor cycle)
+```
+
+### Explicit version
+
+If you know the exact string you want:
+
+```bash
+npm version 2.6.40-dev.12
+npm version 2.7.0
+```
+
+### Useful flags
+
+| Flag                  | Effect                                                         |
+| --------------------- | -------------------------------------------------------------- |
+| `--no-git-tag-version` | Bump `package.json` only — no commit, no tag (rarely needed)   |
+| `-m "Release %s"`     | Custom commit message; `%s` is replaced with the new version   |
+
+---
+
+## Publishing a dev pre-release (from `develop`)
+
+Use this for every internal QA / integration build.
+
+### Step 1 — Make sure `develop` is up to date
+
+```bash
+git checkout develop
+git pull
+```
+
+### Step 2 — Bump the version
+
+Pick **one**:
+
+```bash
+# Common case: next dev iteration of current version
+npm version prerelease --preid=dev
+# Example: 2.6.40-dev.10 → 2.6.40-dev.11
+```
+
+```bash
+# Starting a new patch/minor/major cycle
+npm version preminor --preid=dev
+# Example: 2.6.40 → 2.7.0-dev.0
+```
+
+```bash
+# Or explicit
+npm version 2.6.40-dev.12
+```
+
+`npm version` automatically:
+- Updates `package.json`
+- Creates a commit `2.6.40-dev.11`
+- Creates a git tag `v2.6.40-dev.11`
+
+### Step 3 — Push commit & tag
+
+```bash
+git push origin develop --follow-tags
+```
+
+### Step 4 — Create a GitHub Release
+
+1. Go to https://github.com/soxo-tech/bootstrap-core/releases
+2. Click **Draft a new release**
+3. **Choose a tag** → pick the tag you just pushed (e.g. `v2.6.40-dev.11`)
+4. Title: same as the tag (`v2.6.40-dev.11`)
+5. Description: short summary of what's in this build (optional but recommended)
+6. ✅ Tick **Set as a pre-release** (so it's flagged as not stable)
+7. Click **Publish release**
+
+GitHub Actions will run the `npm-publish.yml` workflow and publish to npm with `dist-tag: dev`.
+
+### Step 5 — Verify
+
+Wait ~1–2 minutes, then:
+
+```bash
+npm view ui-soxo-bootstrap-core dist-tags
+# Expect: { latest: '<some stable>', dev: '2.6.40-dev.11' }
+```
+
+---
+
+## Publishing a stable release (from `master`)
+
+Use this when a `develop` snapshot has been QA'd and is ready for production.
+
+### Step 1 — Merge `develop` into `master`
+
+```bash
+git checkout master
+git pull
+git merge develop
+git push
+```
+
+Resolve any conflicts as you normally would. Don't squash unless you have a reason to.
+
+### Step 2 — Bump the version on `master`
+
+Pick the bump that matches the change scope (relative to the last **stable** version on npm):
+
+```bash
+npm version patch    # 2.6.40 → 2.6.41  (bug fixes)
+npm version minor    # 2.6.40 → 2.7.0   (new features)
+npm version major    # 2.6.40 → 3.0.0   (breaking changes)
+```
+
+This creates a commit and a tag like `v2.6.41` (no `-dev` suffix).
+
+### Step 3 — Push commit & tag
+
+```bash
+git push origin master --follow-tags
+```
+
+### Step 4 — Create a GitHub Release
+
+1. Go to https://github.com/soxo-tech/bootstrap-core/releases
+2. **Draft a new release**
+3. **Choose a tag** → pick the stable tag (e.g. `v2.6.41`)
+4. Title: `v2.6.41`
+5. Description: changelog — what's new, what's fixed, any breaking changes
+6. ❌ Do **not** tick "Set as a pre-release"
+7. Click **Publish release**
+
+GitHub Actions publishes to npm with `dist-tag: latest`.
+
+### Step 5 — Verify
+
+```bash
+npm view ui-soxo-bootstrap-core dist-tags
+# Expect: { latest: '2.6.41', dev: '...' }
+```
+
+### Step 6 (optional but recommended) — Sync `develop`
+
+After a stable release, fast-forward `develop` to include the new version commit so the next dev cycle starts from the right place:
+
+```bash
+git checkout develop
+git merge master
+git push
+```
+
+---
+
+## Verifying & installing
+
+### Check what's published
+
+```bash
+npm view ui-soxo-bootstrap-core dist-tags
+npm view ui-soxo-bootstrap-core versions --json
+```
+
+### Install in another project
+
+```bash
+# Latest stable (from master)
+npm install ui-soxo-bootstrap-core
+
+# Latest dev pre-release (from develop)
+npm install ui-soxo-bootstrap-core@dev
+
+# Specific version
+npm install ui-soxo-bootstrap-core@2.6.40-dev.11
+```
+
+---
+
+## Rules & dos / don'ts
+
+| ✅ Do                                                  | ❌ Don't                                          |
+| ----------------------------------------------------- | ------------------------------------------------ |
+| Use `npm version` to bump (it tags atomically)        | Edit `package.json` version by hand              |
+| Tag matches `package.json` exactly                    | Publish manually from your laptop                |
+| `develop` → only `-dev.N` versions                    | Tag a stable `2.6.40` from `develop`             |
+| `master` → only stable versions                       | Tag a `-dev` version from `master`               |
+| Push with `--follow-tags`                             | Forget to push the tag (Release won't find it)   |
+| Create a GitHub Release to trigger publish            | Reuse / move existing tags                       |
+
+---
+
+## How auth works
+
+Publishing uses **OIDC trusted publishing** — no `NPM_TOKEN` secret to rotate.
+
+When the workflow runs:
+1. GitHub Actions issues a short-lived OIDC token identifying the workflow + repo + ref.
+2. The npm CLI exchanges that token for a one-time publish credential.
+3. npm validates against the Trusted Publisher config on npmjs.com (`soxo-tech/bootstrap-core` + `npm-publish.yml`).
+4. Publish succeeds.
+
+If you ever need to inspect or change auth:
+- https://www.npmjs.com/package/ui-soxo-bootstrap-core/access — Trusted Publisher config
+- [.github/workflows/npm-publish.yml](.github/workflows/npm-publish.yml) — the workflow
+
+---
+
+## Troubleshooting
+
+### "Release tag does not match `package.json` version"
+
+The workflow checks that the git tag is exactly `v<package.json version>`. If they don't match, the workflow fails fast.
+
+**Fix:** Delete the Release & tag, run `npm version <correct>` to bump cleanly, push, and re-create the Release.
+
+### Workflow runs but `npm publish` fails with 404
+
+Likely auth issue. Check:
+1. **Trusted Publisher exists** on https://www.npmjs.com/package/ui-soxo-bootstrap-core/access
+2. **Repository** field is `bootstrap-core` (not `soxo-bootstrap-core`)
+3. **Workflow filename** is `npm-publish.yml` (just the filename, not the path)
+4. **Organization or user** is `soxo-tech`
+
+### Workflow fails with 422 "Unsupported source repository visibility: private"
+
+Someone added `--provenance` to the publish step. Provenance requires a public repo. Remove `--provenance` from the `npm publish` line in [.github/workflows/npm-publish.yml](.github/workflows/npm-publish.yml).
+
+### Version already exists on npm
+
+You can't republish the same version. Bump again and create a new Release.
+
+### Tag pushed but no Release auto-publishes
+
+The workflow trigger is `on: release: [created]` — pushing a tag alone doesn't publish. You must **create a Release on GitHub** for the workflow to fire.
+
+---
+
+## Diagram of the full flow
+
+```
+   ┌─────────────────┐
+   │  feature/*       │
+   └────────┬─────────┘
+            │ merge
+            ▼
+   ┌─────────────────┐
+   │  develop          │
+   │                   │ ── npm version prerelease --preid=dev
+   │                   │ ── git push --follow-tags
+   │                   │ ── GitHub Release (pre-release)
+   │                   │     ↓
+   │                   │  workflow publishes  →  npm @dev
+   └────────┬─────────┘
+            │ merge (when stable)
+            ▼
+   ┌─────────────────┐
+   │  master           │
+   │                   │ ── npm version patch | minor | major
+   │                   │ ── git push --follow-tags
+   │                   │ ── GitHub Release (stable)
+   │                   │     ↓
+   │                   │  workflow publishes  →  npm @latest
+   └─────────────────┘
+```

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/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 searchActive = !!query;
+  const visibleItems = filterMenus(records, query);
 
-  const visibleItems = filtered;
+  // 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,7 +351,7 @@ 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">
@@ -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}
@@ -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,11 @@ 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 +628,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/role-add.js

@@ -145,11 +145,19 @@ 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 {
       onSubmittingChange?.(false);
     }

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/package.json

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