ui-soxo-bootstrap-core 2.4.25-dev.14 → 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/models/users/components/user-add/user-add.js

@@ -160,6 +160,17 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
       }
     }
   }, []);
+
+  useEffect(() => {
+    if (!loading && formContent?.role_id && roles.length > 0) {
+      const roleId = Number(formContent.role_id);
+
+      if (!Number.isNaN(roleId)) {
+        form.setFieldsValue({ role_id: roleId });
+      }
+    }
+  }, [loading, formContent, roles]);
+
   /**
    *Define the options dynamically
    */
@@ -203,7 +214,6 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
         }
       })
       .catch((error) => {
-        console.error('Error fetching designations:', error);
         setDesignations([]);
       })
       .finally(() => setLoading(false));
@@ -215,16 +225,10 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
   function getRoles() {
     RolesAPI.getRole()
       .then((res) => {
-        // if API returns { statusCode: 200, result: [...] }
-        if (Array.isArray(res.result)) {
-          setRoles(res.result.filter((r) => r.active === 'Y')); // optional: only active roles
-        } else {
-          setRoles([]);
-        }
+        const activeRoles = Array.isArray(res.result) ? res.result.filter((r) => r.active === 'Y') : [];
+        setRoles(activeRoles);
       })
-      .catch((err) => {
-        setRoles([]);
-      });
+      .catch(() => setRoles([]));
   }
 
   /** Get Department List */
@@ -243,7 +247,6 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
         }
       })
       .catch((error) => {
-        console.error('Error fetching departments:', error);
         setDepartments([]);
       })
       .finally(() => setLoading(false));
@@ -320,25 +323,24 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
         form.setFieldsValue({ staff_code: formContent.staff_code });
       }
     }
-    if (formContent?.id && formContent?.organization_details) {
-      try {
-        const org = JSON.parse(formContent.organization_details);
-        const branchIds = org.branch_ids?.map((b) => b.id) || [];
-        const defaultBranchObj = org.branch_ids?.find((b) => b.DefaultBranch === 'true');
-        const defaultBr = defaultBranchObj?.id || null;
-
-        setSelectedBranches(branchIds);
-        setDefaultBranch(defaultBr);
-
-        form.setFieldsValue({
-          selectedBranches: branchIds,
-          defaultBranch: defaultBr,
-        });
-      } catch (err) {
-        console.error('Invalid organization_details JSON', err);
-      }
-    }
-  }, [formContent]);
+    if (!formContent) return;
+
+    // normalize branch ids to NUMBER
+    const org =
+      typeof formContent.organization_details === 'string' ? JSON.parse(formContent.organization_details) : formContent.organization_details;
+
+    const branchIds = (org?.branch_ids || []).map(Number);
+    const defaultBr = formContent.defaultBranch ? Number(formContent.defaultBranch) : null;
+
+    // state (for filtering)
+    setSelectedBranches(branchIds);
+
+    // form (source of truth)
+    form.setFieldsValue({
+      selectedBranches: branchIds,
+      defaultBranch: defaultBr,
+    });
+  }, [formContent, form]);
   // Generate branch options for Select component
   const branchOptions = branches.map((branch) => ({
     label: branch.br_desc,
@@ -349,6 +351,8 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
    * Submit values
    */
   const onSubmit = (values) => {
+    values.defaultBranch = String(values.defaultBranch);
+
     /**If PanelOpen is open and edit mode then password will be existing password else new password*/
     if (!isPasswordVisible && mode === 'Edit') {
       values.password = body.password;
@@ -377,6 +381,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     if (props?.ldap && selectedOption && selectedOption.value) {
       values = {
         ...values,
+
         addAllBranches: props.ldap.addAllBranches,
         auth_user: selectedOption.value,
         auth_type: 'LDAP',
@@ -387,6 +392,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     if (values.attributes && typeof values === 'object') {
       values = {
         ...values,
+
         auth_type: 'LDAP',
 
         attributes: JSON.stringify(values.attributes),
@@ -624,22 +630,19 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                 <Select
                   mode="multiple"
                   placeholder="Select Branches"
-                  value={selectedBranches}
+                  options={branchOptions}
+                  allowClear
+                  showSearch
+                  optionFilterProp="label"
                   onChange={(value) => {
-                    setSelectedBranches(value);
+                    const normalized = value.map(Number);
+                    setSelectedBranches(normalized);
 
-                    // ⬅NEW: remove defaultBranch if it’s not in selectedBranches
-                    if (!value.includes(defaultBranch)) {
-                      setDefaultBranch(undefined);
+                    const currentDefault = form.getFieldValue('defaultBranch');
+                    if (currentDefault && !normalized.includes(currentDefault)) {
                       form.setFieldsValue({ defaultBranch: undefined });
                     }
                   }}
-                  options={branchOptions}
-                  allowClear
-                  showSearch
-                  optionFilterProp="label"
-                  maxTagCount={5} // Show only 5 tags
-                  maxTagPlaceholder={(omittedValues) => `+${omittedValues.length}`} // Show "+n"
                 />
               </Form.Item>
             </Col>
@@ -648,9 +651,9 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
               <Form.Item label="Default Branch" name="defaultBranch" rules={[{ required: true, message: 'Please select default branch' }]}>
                 <Select placeholder="Select Default Branch" onChange={setDefaultBranch}>
                   {branchOptions
-                    .filter((opt) => selectedBranches.includes(opt.value))
+                    .filter((opt) => selectedBranches.includes(Number(opt.value))) 
                     .map((opt) => (
-                      <Option key={opt.value} value={opt.value}>
+                      <Option key={opt.value} value={Number(opt.value)}>
                         {opt.label}
                       </Option>
                     ))}
@@ -726,8 +729,8 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
               </Form.Item>
             </Col>
             <Col span={8}>
-              <Form.Item name="role_id" label="Role" rules={[{ required: true, message: 'Please Input Role' }]}>
-                <Select placeholder="Select Role" style={{ width: '100%' }}>
+              <Form.Item name="role_id" label="Role" rules={[{ required: true, message: 'Please select a Role' }]}>
+                <Select placeholder="Select Role">
                   {roles.map((role) => (
                     <Option key={role.id} value={role.id}>
                       {role.name}

package/core/models/users/components/user-add/user-edit.js

@@ -11,7 +11,6 @@ export default function UserEdit(record) {
   // Handle edit button click
   const handleEditClick = () => {
     if (!record.id) {
-      console.warn('Invalid record: Missing ID');
       return;
     }
 
@@ -29,9 +28,7 @@ export default function UserEdit(record) {
             // Try parsing other_details, handle error if invalid JSON
             try {
               otherDetails = JSON.parse(apiData.other_details);
-            } catch (err) {
-              console.warn('Failed to parse other_details:', apiData.other_details);
-            }
+            } catch (err) {}
           }
           let orgDetails = {};
           try {
@@ -50,8 +47,10 @@ export default function UserEdit(record) {
             designation: apiData.designation_code,
             department: apiData.department_id,
             // Handle selected branches and default branch
+            organization_details: orgDetails,
             selectedBranches: orgDetails.branch_ids || [],
-            defaultBranch: apiData.firm_id || null,
+            defaultBranch: apiData.branch_id || null,
+            role_id: apiData.role_id,
             password: apiData.password,
             user_group: apiData.user_group,
             // Handle doctor codes

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.14",
+  "version": "2.4.25-dev.16",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"