ui-soxo-bootstrap-core 2.4.25-dev.29 → 2.4.25-dev.31

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

@@ -0,0 +1,78 @@
+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 || [];
+
+      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));
+        }
+      };
+
+      const onParentChange = (checked) => {
+        toggleMenu && toggleMenu(menu.id, checked);
+        children.forEach((c) => toggleMenuRecursive(c, checked));
+      };
+
+      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>
+        );
+      }
+
+      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,228 @@
+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() {
+  const { id } = useParams();
+
+  const [user, setUser] = useState(null);
+  const [roles, setRoles] = useState([]);
+  const [activeRole, setActiveRole] = useState(null);
+  const [modules, setModules] = useState([]);
+  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 by id */
+  useEffect(() => {
+    if (id) loadUser();
+  }, [id]);
+
+  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;
+      }
+
+      // 1️⃣ Extract user from first record
+      const userInfo = list[0].user;
+      setUser({
+        id: userInfo.id,
+        name: userInfo.name,
+      });
+
+      // 2️⃣ Extract VALID role IDs (ignore nulls & duplicates)
+      const roleIds = [
+        ...new Set(
+          list
+            .filter((item) => item.role_id) // ignore null 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 roles */
+  useEffect(() => {
+    getRoles();
+  }, []);
+
+  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);
+    }
+  };
+
+  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 role */
+  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 */
+  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 */
+  const toggleRole = (roleId, checked) => {
+    const next = checked ? [...selectedRoles, roleId] : selectedRoles.filter((v) => v !== roleId);
+    setSelectedRoles(next);
+  };
+
+  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,90 @@
+.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;
+    }
+  }
+}

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/core/modules/steps/action-buttons.js

@@ -3,9 +3,10 @@
  * Handles navigation and action controls for a multi-step process,
  * including dynamic content rendering and process completion actions.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Skeleton } from 'antd';
 import { Button } from '../../lib';
+import './action-buttons.scss';
 
 export default function ActionButtons({
   loading,
@@ -21,63 +22,50 @@ export default function ActionButtons({
   nextProcessId,
   timelineCollapsed,
 }) {
+  const [showNextProcess, setShowNextProcess] = useState(false);
+
   return (
     <>
       <div style={{ minHeight: 300 }}>{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
       <>
-        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-start', gap: '10px' }}>
+        <div className="action-buttons-container">
           {/* Back button */}
-          <Button disabled={activeStep === 0} onClick={handlePrevious} style={{ marginRight: 8, borderRadius: 4 }}>
+          <Button disabled={activeStep === 0} onClick={handlePrevious}>
             Back
           </Button>
 
           {/* Skip button */}
           {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
-            <Button
-              type="default"
-              onClick={handleSkip}
-              style={{
-                borderRadius: 4,
-              }}
-              disabled={activeStep === steps.length - 1}
-            >
+            <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>
               Skip
             </Button>
           )}
 
           {/* Next / Finish / Start Next */}
           {steps[activeStep]?.order_seqtype === 'E' ? (
-            nextProcessId?.next_process_id ? (
-              <Button
-                type="primary"
-                style={{
-                  borderRadius: 4,
-                }}
-                onClick={handleStartNextProcess}
-              >
-                Start Next {nextProcessId.next_process_name}
-              </Button>
-            ) : (
-              <Button
-                type="primary"
-                style={{
-                  borderRadius: 4,
-                }}
-                onClick={handleFinish}
-              >
-                Finish
-              </Button>
-            )
+            <>
+              {!showNextProcess && (
+                <Button
+                  type="primary"
+                  onClick={async () => {
+                    const success = await handleFinish();
+                    if (success && nextProcessId?.next_process_id) {
+                      setShowNextProcess(true);
+                    }
+                  }}
+                >
+                  Finish
+                </Button>
+              )}
+              
+              {showNextProcess && nextProcessId?.next_process_id && (
+                <Button type="primary" onClick={handleStartNextProcess}>
+                  Start {nextProcessId.next_process_name}
+                </Button>
+              )}
+            </>
           ) : (
-            <Button
-              type="primary"
-              // shape="round"
-              style={{
-                borderRadius: 4,
-              }}
-              disabled={activeStep === steps.length - 1 || !isStepCompleted}
-              onClick={handleNext}
-            >
+            <Button type="primary" disabled={activeStep === steps.length - 1 || !isStepCompleted} onClick={handleNext}>
               Next →
             </Button>
           )}

package/core/modules/steps/action-buttons.scss

@@ -0,0 +1,16 @@
+.action-buttons-container {
+  margin-top: 38px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  position: sticky;
+  bottom: 0;
+  z-index: 1000;
+  background: #fff;
+  padding: 10px 0;
+  border-top: 1px solid #f0f0f0;
+
+  .ant-btn {
+    border-radius: 4px;
+  }
+}

package/core/modules/steps/steps.js

@@ -204,7 +204,9 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
    */
   const handleFinish = async () => {
     const final = recordStepTime();
-    if (await handleProcessSubmit(final)) props.history?.goBack();
+    const success = await handleProcessSubmit(final);
+    if (success && !nextProcessId) props.history?.goBack();
+    return success;
   };
   /**
    * Start Next Process
@@ -268,6 +270,7 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
    * and external window view.
    */
   const renderContent = () => (
+    <div>
     <Card>
       <Row gutter={20}>
         <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
@@ -303,6 +306,7 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
         </Col>
       </Row>
     </Card>
+    </div>
   );
   /**
    * Renders content in both the main window and an external window

package/core/modules/steps/steps.scss

@@ -1,7 +1,8 @@
 .timeline-card .ant-card-body {
-  padding: 20px;
+  // padding: 20px;
+  border: none;
   min-height: 400px;
-  position: fixed; /* For positioning the arrow */
+  // position: fixed; /* For positioning the arrow */
 }
 
 .timeline-sidebar {
@@ -46,7 +47,7 @@
 
 .vertical-line {
   width: 2px;
-  height: 40px;
+  height: 20px;
   background: #d9d9d9;
 }
 

package/package.json

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