ui-soxo-bootstrap-core 2.4.25-dev.30 → 2.4.25-dev.32

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -0,0 +1,114 @@
+/**
+ * MenuTree Component
+ *
+ * @description
+ * Renders a hierarchical menu structure with optional checkboxes.
+ * Supports:
+ * - Recursive menu rendering
+ * - Parent–child checkbox synchronization
+ * - Indeterminate state for partially selected parents
+ *
+ * Common use cases:
+ * - Role-based menu preview
+ * - Permission assignment trees
+ *
+ * @param {Object} props
+ * @param {Array<Object>} props.menus - Menu tree data
+ * @param {Array<number>} props.selectedMenus - Selected menu IDs
+ * @param {(menuId:number, checked:boolean) => void} props.toggleMenu - Callback for menu selection
+ * @param {number|null} props.parentId - Parent menu ID (used internally for recursion)
+ * @param {boolean} props.showCheckbox - Whether to display checkboxes
+ *
+ * @returns {JSX.Element}
+ */
+
+import React from 'react';
+import { Checkbox, Collapse } from 'antd';
+
+const { Panel } = Collapse;
+
+export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = null, showCheckbox = true }) => {
+  const renderTree = (menuList, parentId = null) => {
+    return menuList.map((menu) => {
+      const children = menu.sub_menus || [];
+
+      /**
+       * Toggle menu selection recursively for all child menus
+       *
+       * @param {Object} m - Menu object
+       * @param {boolean} checked - Checkbox state
+       */
+      const toggleMenuRecursive = (m, checked) => {
+        toggleMenu && toggleMenu(m.id, checked);
+        if (m.sub_menus && m.sub_menus.length > 0) {
+          m.sub_menus.forEach((c) => toggleMenuRecursive(c, checked));
+        }
+      };
+
+      /**
+       * Handle parent checkbox change
+       * - Updates parent menu
+       * - Cascades selection to all children
+       *
+       * @param {boolean} checked
+       */
+
+      const onParentChange = (checked) => {
+        toggleMenu && toggleMenu(menu.id, checked);
+        children.forEach((c) => toggleMenuRecursive(c, checked));
+      };
+
+      /**
+       * Leaf menu (no sub-menus)
+       */
+
+      if (children.length === 0) {
+        return (
+          <div
+            key={menu.id}
+            style={{
+              border: '1px solid rgba(198, 195, 195, 0.85)',
+              padding: '12px 16px',
+              marginBottom: 6,
+              background: '#fff',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
+            <span>{menu.title || menu.caption}</span>
+          </div>
+        );
+      }
+
+      /**
+       * Parent menu (with sub-menus)
+       */
+
+      return (
+        <Collapse key={menu.id} style={{ marginBottom: 6 }}>
+          <Panel
+            key={menu.id}
+            header={
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {showCheckbox && (
+                  <Checkbox
+                    checked={children.every((c) => selectedMenus.includes(c.id))}
+                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
+                    onChange={(e) => onParentChange(e.target.checked)}
+                  />
+                )}
+                <span>{menu.title || menu.caption}</span>
+              </div>
+            }
+          >
+            <div style={{ paddingLeft: 20 }}>{renderTree(children, menu.id)}</div>
+          </Panel>
+        </Collapse>
+      );
+    });
+  };
+
+  return <>{renderTree(menus, parentId)}</>;
+};

package/core/models/doctor/components/doctor-add/doctor-add.js

@@ -105,6 +105,11 @@ const DoctorAdd = ({ visible, onCancel, attributes, doctorId, doctorData, onSucc
       return Promise.resolve();
     }
 
+    if (!/^[a-zA-Z0-9]*$/.test(value)) {
+      setCodeStatus({ status: 'error', message: 'Code can only contain letters and numbers.' });
+      return Promise.reject(new Error('Code can only contain letters and numbers.'));
+    }
+
     if (editMode && doctorData?.do_code === value) {
       setCodeStatus({ status: 'success', message: 'Code is unchanged' });
       return Promise.resolve();
@@ -218,7 +223,17 @@ const DoctorAdd = ({ visible, onCancel, attributes, doctorId, doctorData, onSucc
           {/* NAME + CODE */}
           <Row gutter={16}>
             <Col span={12}>
-              <Form.Item label="Name" name="name" rules={[{ required: true }]}>
+              <Form.Item
+                label="Name"
+                name="name"
+                rules={[
+                  { required: true },
+                  {
+                    pattern: /^[A-Za-z]+$/,
+                    message: 'Name should contain only alphabets',
+                  },
+                ]}
+              >
                 <Input autoComplete="off" ref={nameInputRef} placeholder="Enter Name" onKeyDown={handleEnterKey} />
               </Form.Item>
             </Col>
@@ -369,7 +384,11 @@ const DoctorAdd = ({ visible, onCancel, attributes, doctorId, doctorData, onSucc
                 </Col>
 
                 <Col span={8}>
-                  <Form.Item label="Email ID" name="email_id">
+                  <Form.Item
+                    label="Email ID"
+                    name="email_id"
+                    rules={[{ type: 'email', message: 'Please enter a valid email address' }]}
+                  >
                     <Input placeholder="Enter Email ID" onKeyDown={handleEnterKey} />
                   </Form.Item>
                 </Col>

package/core/models/staff/components/staff-add/staff-add.js

@@ -13,6 +13,7 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
    * ------------------------------- */
   const [loading, setLoading] = useState(false);
   const [designations, setDesignations] = useState([]);
+  const [staffList, setStaffList] = useState([]);
   const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
   const [codeStatus, setCodeStatus] = useState({ status: '', message: '' });
 
@@ -47,6 +48,7 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   useEffect(() => {
     if (visible) {
       getDesignations();
+      if (!editMode) getStaffList();
     }
   }, [visible]);
 
@@ -95,6 +97,18 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
       .finally(() => setLoading(false));
   };
 
+  /** -------------------------------
+   *  API CALL – Staff List
+   * ------------------------------- */
+  const getStaffList = () => {
+    UsersAPI.getAllStaff()
+      .then((res) => {
+        if (Array.isArray(res)) {
+          setStaffList(res);
+        }
+      })
+      .catch((err) => console.error(err));
+  };
 
   /** -------------------------------
    *  VALIDATION – Input
@@ -149,6 +163,16 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
     return Promise.resolve();
   };
 
+  const validateSerial = (_, value) => {
+    if (!value) {
+      return Promise.resolve();
+    }
+    const exists = staffList.some((staff) => String(staff.slNo) === value);
+    if (exists) {
+      return Promise.reject('Serial Number already exists');
+    }
+    return Promise.resolve();
+  };
 
   /** -------------------------------
    *  UTIL – Enter Key Navigation
@@ -350,7 +374,11 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
               </Col>
 
               <Col span={8}>
-                <Form.Item label="Serial Number" name="slno" rules={[{ message: 'only numbers are allowed', pattern: /^\d*$/ }]}>
+                <Form.Item
+                  label="Serial Number"
+                  name="slno"
+                  rules={[{ message: 'only numbers are allowed', pattern: /^\d*$/ }, { validator: validateSerial }]}
+                >
                   <Input autoComplete="off" maxLength={5} placeholder="Enter Serial Number" onKeyDown={handleEnterKey} disabled={editMode} />
                 </Form.Item>
               </Col>

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

@@ -0,0 +1,298 @@
+/**
+ * AssignRole Component
+ *
+ * @description
+ * Allows administrators to:
+ * - View user details
+ * - Assign one or more roles to a user
+ * - View menus associated with a selected role (read-only)
+ *
+ * UI Layout:
+ * - Left Panel: User info + role list with search and checkboxes
+ * - Right Panel: Menu tree preview for the selected role
+ *
+ * @returns {JSX.Element}
+ */
+import React, { useMemo, useState, useEffect } from 'react';
+import { Checkbox, Input, Typography, Empty, Avatar, List, Card, message, Skeleton } from 'antd';
+
+import { UsersAPI, RolesAPI, MenusAPI } from '../../..';
+import { UserRolesAPI } from '../../..';
+import { useParams } from 'react-router-dom';
+import { Button } from '../../../../lib';
+import { MenuTree } from '../../../../lib/elements/basic/menu-tree/menu-tree';
+import './assign-role.scss';
+
+const { Text } = Typography;
+
+const { Search } = Input;
+
+export default function AssignRole() {
+  /**
+   * User ID from route params
+   * @type {{ id: string }}
+   */
+  const { id } = useParams();
+  // for user
+  const [user, setUser] = useState(null);
+  // for roles
+  const [roles, setRoles] = useState([]);
+  // for active roles
+  const [activeRole, setActiveRole] = useState(null);
+  const [modules, setModules] = useState([]);
+  // loading
+  const [selectedRoles, setSelectedRoles] = useState([]);
+  const [loadingUser, setLoadingUser] = useState(false);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+  const [loadingMenus, setLoadingMenus] = useState(false);
+
+  const [selectedMenus, setSelectedMenus] = useState([]);
+  const [search, setSearch] = useState('');
+
+  /**
+   * Load user details and assigned roles when user ID changes
+   */
+  useEffect(() => {
+    if (id) loadUser();
+  }, [id]);
+
+  /**
+   * Fetch user details and assigned roles
+   *
+   * - Extracts user info from first record
+   * - Deduplicates role IDs
+   *
+   * @async
+   * @returns {Promise<void>}
+   */
+
+  const loadUser = async () => {
+    setLoadingUser(true);
+    try {
+      const res = await UsersAPI.getUserRole({ id });
+      const list = Array.isArray(res?.result) ? res.result : [];
+
+      if (!list.length) {
+        setUser(null);
+        setSelectedRoles([]);
+        return;
+      }
+
+      //  Extract user from first record
+      const userInfo = list[0].user;
+      setUser({
+        id: userInfo.id,
+        name: userInfo.name,
+      });
+
+      //  Extract VALID role IDs (ignore nulls & duplicates)
+      const roleIds = [...new Set(list.filter((item) => item.role_id).map((item) => Number(item.role_id)))];
+
+      setSelectedRoles(roleIds);
+    } catch (e) {
+      console.error(e);
+      message.error('Unable to load user details');
+    } finally {
+      setLoadingUser(false);
+    }
+  };
+
+  /**
+   * Load active roles on component mount
+   */
+  useEffect(() => {
+    getRoles();
+  }, []);
+
+  /**
+   * Fetch all active roles
+   *
+   * @async
+   * @returns {Promise<void>}
+   */
+
+  const getRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      const res = await RolesAPI.getRole();
+      const activeRoles = Array.isArray(res?.result) ? res.result.filter((r) => r.active === 'Y') : [];
+      setRoles(activeRoles);
+    } catch (e) {
+      console.error(e);
+      setRoles([]);
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+
+  /**
+   * Recursively filter menus by allowed menu IDs
+   *
+   * @param {Array<Object>} menus - Full menu tree
+   * @param {Array<number>} allowedIds - Menu IDs assigned to role
+   * @returns {Array<Object>}
+   */
+
+  const filterAndSortMenus = (menus, allowedIds) => {
+    return menus
+      .filter((m) => allowedIds.includes(m.id))
+      .map((m) => ({
+        ...m,
+        sub_menus: filterAndSortMenus(m.sub_menus || [], allowedIds),
+      }));
+  };
+
+  /**
+   * Load menus for a selected role
+   *
+   * @param {Object} role - Selected role object
+   * @async
+   * @returns {Promise<void>}
+   */
+
+  const loadRoleMenus = async (role) => {
+    setActiveRole(role);
+    setSelectedMenus(role.menu_ids || []);
+    setLoadingMenus(true);
+    try {
+      const res = await MenusAPI.getCoreMenuLists();
+      const allMenus = res.result || [];
+      const filteredMenus = filterAndSortMenus(allMenus, role.menu_ids);
+      setModules(filteredMenus);
+    } catch (e) {
+      console.error(e);
+      setModules([]);
+    } finally {
+      setLoadingMenus(false);
+    }
+  };
+
+  /**
+   * Toggle menu selection (currently read-only usage)
+   *
+   * @param {number} menuId
+   * @param {boolean} checked
+   */
+  const toggleMenu = (menuId, checked) => {
+    setSelectedMenus((prev) => (checked ? [...prev, menuId] : prev.filter((id) => id !== menuId)));
+  };
+
+  /** Filtered roles */
+  const filteredRoles = useMemo(() => {
+    if (!search) return roles;
+    return roles.filter((r) => r.name.toLowerCase().includes(search.toLowerCase()));
+  }, [roles, search]);
+
+  /**
+   * Toggle role selection
+   *
+   * @param {number} roleId
+   * @param {boolean} checked
+   */
+
+  const toggleRole = (roleId, checked) => {
+    const next = checked ? [...selectedRoles, roleId] : selectedRoles.filter((v) => v !== roleId);
+    setSelectedRoles(next);
+  };
+
+  /**
+   * Save selected roles for the user
+   *
+   * @async
+   * @returns {Promise<void>}
+   */
+  const handleSaveUserRole = async () => {
+    if (!id || !selectedRoles.length) {
+      message.warning('User or roles missing');
+      return;
+    }
+
+    try {
+      message.loading({ key: 'save', content: 'Saving user roles...' });
+
+      await Promise.all(
+        selectedRoles.map((roleId) =>
+          UserRolesAPI.addUserRole({
+            values: {
+              user_id: id,
+              role_id: roleId,
+            },
+          })
+        )
+      );
+
+      message.success({ key: 'save', content: 'User roles saved successfully' });
+    } catch (err) {
+      console.error(err);
+      message.error({ key: 'save', content: 'Failed to save user roles' });
+    }
+  };
+
+  return (
+    <section className="assign-role">
+      {/* LEFT PANEL */}
+      <Card className="left-panel" bodyStyle={{ padding: 12 }}>
+        <div size="small" className="user-card">
+          <Avatar size={40}>{user?.name[0]}</Avatar>
+
+          <div className="user-info">
+            <div>{user?.name || '--'}</div>
+            <Text className="user-id">ID : {user?.id || '--'}</Text>
+          </div>
+        </div>
+
+        <div className="role-list-header">
+          <Text strong>Role List ({roles.length})</Text>
+        </div>
+
+        <Search placeholder="Enter Search Value" allowClear style={{ width: 300, marginBottom: '0px' }} onChange={(e) => setSearch(e.target.value)} />
+        {/* <Input className="role-search" placeholder="Search Here" allowClear value={search} onChange={(e) => setSearch(e.target.value)} /> */}
+
+        <List
+          itemLayout="horizontal"
+          dataSource={filteredRoles}
+          renderItem={(role) => (
+            <List.Item
+              key={role.id}
+              onClick={() => loadRoleMenus(role)}
+              className={`role-item ${activeRole?.id === role.id ? 'active' : ''}`}
+              actions={[
+                <Checkbox
+                  checked={selectedRoles.includes(role.id)}
+                  onChange={(e) => toggleRole(role.id, e.target.checked)}
+                  onClick={(e) => e.stopPropagation()}
+                />,
+              ]}
+            >
+              <List.Item.Meta avatar={<Avatar size={28}>{role.name[0]}</Avatar>} title={role.name} description={role.description} />
+            </List.Item>
+          )}
+        />
+      </Card>
+
+      {/* RIGHT PANEL */}
+      <Card className="right-panel">
+        <div className="menus-header">
+          <Text>Menus {activeRole ? `– ${activeRole.name}` : ''}</Text>
+          <div className="sub-text">It's not editable. To edit it, go to the role editing page.</div>
+        </div>
+
+        <div className="menus-content">
+          {loadingMenus ? (
+            <Skeleton active paragraph={{ rows: 6 }} />
+          ) : modules.length === 0 ? (
+            <Empty description="Click a role to view menus" />
+          ) : (
+            <MenuTree menus={modules} selectedMenus={selectedMenus} toggleMenu={toggleMenu} showCheckbox={false} />
+          )}
+        </div>
+
+        <div className="footer-actions">
+          <Button type="primary" onClick={handleSaveUserRole}>
+            Save
+          </Button>
+        </div>
+      </Card>
+    </section>
+  );
+}

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

@@ -0,0 +1,117 @@
+.assign-role {
+  display: flex;
+  gap: 6px;
+
+  .left-panel {
+    width: 340px;
+
+    .user-card {
+      margin-bottom: 12px;
+      background: #fafafa;
+      border: none;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+
+      .user-info {
+        font-weight: 500;
+
+        .user-id {
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+    }
+
+    .role-list-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      strong {
+        font-weight: 600;
+      }
+    }
+
+    .role-search {
+      margin: 12px 0;
+    }
+
+    .role-item {
+      cursor: pointer;
+      border-radius: 6px;
+      padding: 8px 12px;
+
+      &.active {
+        background: #e6f7ff;
+      }
+
+      .ant-list-item-meta-title {
+        font-weight: 500;
+      }
+
+      .ant-list-item-meta-description {
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.45);
+      }
+    }
+  }
+
+  .right-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 16px;
+
+    .menus-header {
+      font-weight: 500;
+      margin-bottom: 4px;
+      color: #000;
+
+      .sub-text {
+        font-size: 12px;
+        color: #888;
+        margin-top: 4px;
+      }
+    }
+
+    .menus-content {
+      margin-top: 16px;
+    }
+
+    .footer-actions {
+      margin-top: 16px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+  }
+
+  /* ===============================
+   📱 iPad Mini (481px – 768px)
+   =============================== */
+  @media (max-width: 768px) {
+    .assign-role {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .assign-role .left-panel {
+      width: 100%;
+    }
+
+    .assign-role .right-panel {
+      width: 100%;
+    }
+
+    /* Better spacing for tablets */
+    .assign-role .right-panel {
+      padding: 14px;
+    }
+
+    .assign-role .footer-actions {
+      justify-content: flex-end;
+    }
+  }
+}

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

@@ -728,7 +728,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                 <Input placeholder="Enter User Group" />
               </Form.Item>
             </Col>
-            <Col span={8}>
+            {/* <Col span={8}>
               <Form.Item name="role_id" label="Role" rules={[{ required: true, message: 'Please select a Role' }]}>
                 <Select placeholder="Select Role">
                   {roles.map((role) => (
@@ -738,7 +738,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                   ))}
                 </Select>
               </Form.Item>
-            </Col>
+            </Col> */}
 
             {/* <Form.Item name="mobile" label="Mobile" required={mobileRequired}>
             <Input placeholder="Enter Mobile" />

package/core/models/users/users.js

@@ -273,8 +273,23 @@ class Users extends Base {
   updateUser = ({ id, formBody }) => {
     return ApiUtils.put({ url: `users/update-user/${id}`, formBody });
   };
+  
+  /* The `getUser` method is a function that takes an object with an `id` property as a parameter. It
+  then uses the `ApiUtils.get` function to make a GET request to the endpoint `users/` to fetch
+  user data based on the provided `id`. This method is used to retrieve a specific user's
+  information from the API. */
+
   getUser = ({ id }) => {
     return ApiUtils.get({ url: `users/${id}` });
+  };
+   /* The `getUserRole` method is a function that takes an object with an `id` property as a parameter.
+  It then uses the `ApiUtils.get` function to make a GET request to the endpoint `core-user-roles`
+  with the `user_id` parameter set to the provided `id`. This method is used to fetch the role or
+  roles associated with a specific user from the API. */
+  
+  getUserRole = ({ id }) => {
+    return ApiUtils.get({ url: `core-user-roles?user_id=${id}` });
+
   };
 
   /**

package/core/modules/index.js

@@ -8,6 +8,8 @@ import GenericDetail from './generic/components/generic-detail/generic-detail';
 
 import ModuleRoutes from './module-routes/module-routes';
 
+import { AssignRole } from './reporting/components';
+
 // All Dashboard Components
 
 import DashboardCard from './dashboard/components/dashboard-card/dashboard-card';
@@ -30,6 +32,7 @@ export {
   GenericDetail,
   ModuleRoutes,
   DashboardCard,
+  AssignRole,
   PopQueryDashboard,
   HomePageAPI,
   ReportingDashboard,

package/core/modules/reporting/components/index.js

@@ -1,5 +1,6 @@
 import UserEdit from '../../../models/users/components/user-add/user-edit';
 
 import UserAdd from '../../../models/users/components/user-add/user-add';
+import AssignRole from '../../../models/users/components/assign-role/assign-role';
 
-export { UserEdit, UserAdd };
+export { UserEdit, UserAdd, AssignRole };

package/package.json

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