ui-soxo-bootstrap-core 2.4.25-dev.15 → 2.4.25-dev.16

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

@@ -13,7 +13,7 @@
 }
 
 .ant-collapse > .ant-collapse-item {
-  margin-bottom: 14px;              // GAP between each panel
+  margin-bottom: 6px;              // GAP between each panel
   // border: none !important;
 }
 

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

@@ -34,7 +34,8 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
   const [models, setModels] = useState([]);
   const [menuList, setMenuList] = useState([]);
   const [showMenus, setShowMenus] = useState(false);
-  const [originalMenus, setOriginalMenus] = useState([]); // for deselected menu for editing
+  // for deselected menu for editing
+  const [originalMenus, setOriginalMenus] = useState([]);
 
   // Selected menus (array of IDs)
   const [selectedMenus, setSelectedMenus] = useState([]);
@@ -57,7 +58,8 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
       let menus = formContent.menu_ids;
 
       setSelectedMenus(menus);
-      setOriginalMenus(menus); // keep original copy for deselect comparison
+      // keep original copy for deselect comparison
+      setOriginalMenus(menus); 
     }
 
     setLoading(false);
@@ -174,58 +176,18 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
             <Input placeholder="Enter description" />
           </Form.Item>
 
-          {/* MENUS COLLAPSE */}
+          {/* MENU TREE */}
           {showMenus && menuList.length > 0 && (
             <div style={{ marginTop: 30 }}>
-              <Title level={5} style={{ marginBottom: 16 }}>
-                Menu List
-              </Title>
-              <p style={{ marginTop: -10, marginBottom: 20, color: '#999' }}>Choose menus and set permissions</p>
-
-              <Collapse expandIconPosition="left" style={{ marginBottom: '4px' }}>
-                {menuList.map((item) => {
-                  const hasChildren = item.sub_menus && item.sub_menus.length > 0;
-
-                  if (!hasChildren) {
-                    // 👉 NO collapse icon
-                    return (
-                      <div
-                        key={item.id}
-                        style={{
-                          padding: '12px 16px',
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: 8,
-                          borderBottom: '1px solid #f0f0f0',
-                        }}
-                      >
-                        <Checkbox checked={selectedMenus.includes(item.id)} onChange={(e) => toggleMenu(item.id, e.target.checked)} />
-                        <span>{item.title || item.caption}</span>
-                      </div>
-                    );
-                  }
-
-                  // 👉 WITH collapse icon
-                  return (
-                    <Panel
-                      key={item.id}
-                      header={
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid #f0f0f0' }}>
-                          <Checkbox checked={selectedMenus.includes(item.id)} onChange={(e) => toggleMenu(item.id, e.target.checked)} />
-                          <span>{item.title || item.caption}</span>
-                        </div>
-                      }
-                    >
-                      <NestedMenu parentId={item.id} step={step + 1} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
-                    </Panel>
-                  );
-                })}
-              </Collapse>
+              <Title level={5}>Menu List</Title>
+              <p style={{ color: '#999' }}>Choose menus and set permissions</p>
+
+              <MenuTree menus={menuList} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
             </div>
           )}
 
           {/* Submit Button */}
-          <Form.Item>
+          <Form.Item style={{ marginTop: 20 }}>
             <Button loading={loading} htmlType="submit" type="primary">
               Save
             </Button>
@@ -241,45 +203,52 @@ export default RoleAdd;
 // ------------------------
 // Recursive Nested Menu Component
 // ------------------------
-const NestedMenu = ({ parentId, step, selectedMenus, toggleMenu }) => {
-  const [items, setItems] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    MenusAPI.get({
-      queries: [
-        { field: 'header_id', value: parentId },
-        { field: 'step', value: step },
-      ],
-    })
-      .then((res) => {
-        setItems(res.result || []);
-        setLoading(false);
-      })
-      .catch(() => setLoading(false));
-  }, [parentId, step]);
-
-  if (loading) return <Skeleton active />;
-  if (!items.length) return null;
-
+const MenuTree = ({ menus, selectedMenus, toggleMenu }) => {
   return (
-    <Collapse ghost>
-      {items.map((menu) => (
-        <Panel
-          key={menu.id}
-          header={
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <Checkbox
-                checked={selectedMenus.includes(Number(menu.id))} // ensure number
-                onChange={(e) => toggleMenu(Number(menu.id), e.target.checked)}
-              />
+    <>
+      {menus.map((menu) => {
+        const hasChildren = Array.isArray(menu.sub_menus) && menu.sub_menus.length > 0;
+
+        //  NO CHILD → SIMPLE ROW (NO COLLAPSE)
+        if (!hasChildren) {
+          return (
+            <div
+              key={menu.id}
+              style={{
+                padding: '10px 16px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                borderBottom: '1px solid #f0f0f0',
+              }}
+            >
+              <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => toggleMenu(menu.id, e.target.checked)} />
               <span>{menu.title || menu.caption}</span>
             </div>
-          }
-        >
-          <NestedMenu parentId={menu.id} step={step + 1} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
-        </Panel>
-      ))}
-    </Collapse>
+          );
+        }
+
+        //  HAS CHILD → COLLAPSE WITH ICON
+        return (
+          <Collapse key={menu.id} collapsible="icon" style={{ marginBottom: '4px' }}>
+            <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)}
+                  />
+                  <span>{menu.title || menu.caption}</span>
+                </div>
+              }
+            >
+              <MenuTree menus={menu.sub_menus} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
+            </Panel>
+          </Collapse>
+        );
+      })}
+    </>
   );
 };

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js

@@ -1042,7 +1042,8 @@ function GuestList({
           ) : (
             <TableComponent
               size="small"
-              scroll={{ x: true }}
+              scroll={{ x: true, y: '60vh' }}
+              sticky
               rowKey={(record) => record.OpNo}
               dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data
               columns={cols}

package/package.json

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