ui-soxo-bootstrap-core 2.6.1-dev.5 → 2.6.1-dev.7

package/core/models/base/base.js

@@ -88,9 +88,13 @@ class BaseAPI {
      * Get the data from the table
      */
     get(config = {}) {
-        // Get the records from firebase
-
-        return ApiUtils.get({ url: config.url || this.endpoint, config });
+        const { url, headers, ...rest } = config;
+        return ApiUtils.get({
+            url: url || this.endpoint,
+            headers,
+            config: rest,
+            ...rest,
+        });
     }
 
     getRelations(id) {

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

@@ -474,7 +474,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         </Button>
       )}
 
-      {/* <Button
+      <Button
         size="small"
         type="default"
         onClick={() => {
@@ -484,7 +484,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         }}
       >
         <CopyOutlined />
-      </Button> */}
+      </Button>
 
       <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
         <Button danger size="small" type="default">

package/core/models/menus/menus.js

@@ -177,23 +177,34 @@ class MenusAPI extends Base {
    * @param {*} menu
    * @returns
    */
-  getMenus = (config) => {
+  getMenus = (config, dbPtr = null) => {
     // Use 'core-menus' endpoint if REACT_APP_USE_CORE_MENUS is true (used for Matria)
     const url =
       process.env.REACT_APP_USE_CORE_MENUS === 'true'
         ? 'core-menus/get-menus' // Matria
         : 'menus/get-menus'; // NURA
 
+    if (!dbPtr) dbPtr = localStorage.db_ptr;
+
     return this.get({
       url,
       config,
+      headers: {
+        db_ptr: dbPtr,
+      },
     }).then((result) => result);
   };
 
-  // get core-menu list with submenu
-  getCoreMenuLists = () => {
-    const url = 'core-menus/core-menus?step=1&header_id=null';
+  getMenubyUser = (user_id) => {
+    const url = `menus/get-menus?userId=${user_id}`;
+    return this.get({
+      url,
+    }).then((result) => result);
+  };
 
+  // get core-menu list with submenu
+  getCoreMenuLists = (role_id) => {
+    const url = `menus/get-menus-by-role/${role_id}`;
     return this.get({
       url,
     }).then((result) => result);

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

@@ -21,6 +21,7 @@ import { UserRolesAPI } from '../../..';
 import { useParams } from 'react-router-dom';
 import { Button } from '../../../../lib';
 import { MenuTree } from '../../../../lib/elements/basic/menu-tree/menu-tree';
+import { getAvatarProps } from './avatar-props';
 import './assign-role.scss';
 
 const { Text } = Typography;
@@ -42,7 +43,6 @@ export default function AssignRole() {
   const [modules, setModules] = useState([]);
   // loading
   const [selectedRoles, setSelectedRoles] = useState([]);
-  const [loadingUser, setLoadingUser] = useState(false);
   const [loadingRoles, setLoadingRoles] = useState(false);
   const [loadingMenus, setLoadingMenus] = useState(false);
   // for save
@@ -54,6 +54,8 @@ export default function AssignRole() {
   // for initial roles
   const [initialRoles, setInitialRoles] = useState([]);
 
+  const userAvatar = getAvatarProps(user?.name);
+
   /**
    * Load user details and assigned roles when user ID changes
    */
@@ -72,8 +74,6 @@ export default function AssignRole() {
    */
 
   const loadUser = async () => {
-    setLoadingUser(true);
-
     try {
       // Call both APIs in parallel
       const [userRes, roleRes] = await Promise.all([UsersAPI.getUser({ id }), UsersAPI.getUserRole({ id })]);
@@ -100,8 +100,6 @@ export default function AssignRole() {
     } catch (e) {
       console.error(e);
       message.error('Unable to load user details');
-    } finally {
-      setLoadingUser(false);
     }
   };
 
@@ -158,11 +156,13 @@ export default function AssignRole() {
     setActiveRole(role);
     setSelectedMenus(role.menu_ids || []);
     setLoadingMenus(true);
+
+    const role_id = role.id;
     try {
-      const res = await MenusAPI.getCoreMenuLists();
+      const res = await MenusAPI.getCoreMenuLists(role_id);
       const allMenus = res.result || [];
-      const filteredMenus = filterAndSortMenus(allMenus, role.menu_ids);
-      setModules(filteredMenus);
+
+      setModules(allMenus);
     } catch (e) {
       console.error(e);
       setModules([]);
@@ -260,60 +260,134 @@ export default function AssignRole() {
     return sortedInitial.some((value, index) => value !== sortedSelected[index]);
   }, [initialRoles, selectedRoles]);
 
+  // View All Role
+  const handleViewAll = async () => {
+    setLoadingMenus(true);
+    setModules([]);
+    setActiveRole({ name: 'All Roles' });
+
+    try {
+      const res = await MenusAPI.getMenubyUser(id);
+      setModules(res?.result?.menus ?? []);
+      setLoadingMenus(false);
+    } catch (err) {
+      setLoadingMenus(false);
+      console.error(err);
+      setModules([]);
+    }
+  };
+
   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>
+      <Card
+        className="left-panel"
+        bodyStyle={{
+          padding: 16,
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <div className="user-card">
+          <Avatar size={44} style={userAvatar.style}>
+            {userAvatar.letter}
+          </Avatar>
 
           <div className="user-info">
-            <div>{user?.name || '--'}</div>
+            <div className="name">{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>
+            <Text strong>Role List</Text>
+            <div className="count">{roles.length} roles</div>
+          </div>
+
+          <Button size="small" onClick={handleViewAll}>
+            View Access
+          </Button>
         </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>
+        <Search placeholder="Search roles..." allowClear onChange={(e) => setSearch(e.target.value)} className="role-search" />
+
+        <div className="selected-summary">{selectedRoles.length} selected</div>
+
+        {/* SCROLL AREA */}
+        <div className="role-list-wrapper">
+          {loadingRoles ? (
+            <div className="role-skeleton">
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className="role-skeleton-item">
+                  <Skeleton.Avatar active size={32} shape="circle" />
+
+                  <div className="meta">
+                    <Skeleton.Input active size="small" style={{ width: 140 }} />
+                    <Skeleton.Input active size="small" style={{ width: 200 }} />
+                  </div>
+
+                  <Skeleton.Button active size="small" shape="square" />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <List
+              itemLayout="horizontal"
+              dataSource={filteredRoles}
+              className="role-list"
+              renderItem={(role) => {
+                const roleAvatar = getAvatarProps(role?.name);
+
+                return (
+                  <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 style={roleAvatar.style}>{roleAvatar?.letter}</Avatar>}
+                      title={role.name}
+                      description={role.description}
+                    />
+                  </List.Item>
+                );
+              }}
+            />
           )}
-        />
+        </div>
       </Card>
 
       {/* RIGHT PANEL */}
-      <Card className="right-panel">
+      <Card
+        className="right-panel"
+        bodyStyle={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 16,
+        }}
+      >
         <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 className="title">Menus {activeRole ? `– ${activeRole.name}` : ''}</div>
+          <div className="sub-text">Not editable here. Go to role settings to modify.</div>
         </div>
 
         <div className="menus-content">
           {loadingMenus ? (
             <Skeleton active paragraph={{ rows: 6 }} />
           ) : modules.length === 0 ? (
-            <Empty description="Click a role to view menus" />
+            <div className="empty-state">
+              <Empty description="Select a role to view menus" />
+            </div>
           ) : (
             <MenuTree menus={modules} selectedMenus={selectedMenus} toggleMenu={toggleMenu} showCheckbox={false} />
           )}
@@ -322,7 +396,7 @@ export default function AssignRole() {
         <div className="footer-actions">
           {rolesChanged && (
             <Button type="primary" onClick={handleSaveUserRole} loading={saving}>
-              Save
+              Save Changes
             </Button>
           )}
         </div>

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

@@ -1,25 +1,82 @@
 .assign-role {
   display: flex;
-  gap: 6px;
+  gap: 8px;
 
+  /* Checkbox Color Override */
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: rgb(68, 106, 169);
+    border-color: rgb(68, 106, 169);
+  }
+
+  .ant-checkbox:hover .ant-checkbox-inner,
+  .ant-checkbox-wrapper:hover .ant-checkbox-inner {
+    border-color: rgb(68, 106, 169);
+  }
+
+  .ant-checkbox-checked::after {
+    border-color: rgb(68, 106, 169);
+  }
+
+  /* TAKE FULL SCREEN HEIGHT */
+  height: calc(100vh - 80px);
+  min-height: 0;
+
+  .ant-card {
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: none;
+  }
+
+  /* LEFT PANEL */
   .left-panel {
-    width: 340px;
+    width: 360px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
 
+    /* User Card */
     .user-card {
-      margin-bottom: 12px;
-      background: #fafafa;
-      border: none;
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 8px;
+      padding: 14px;
+
+      background: #ffffff;
+      border-radius: 10px;
+
+      border: 1px solid #f0f0f0;
+
+      box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.06),
+        0 6px 16px rgba(0, 0, 0, 0.04);
+
+      margin-bottom: 16px;
+
+      transition: all 0.2s ease;
+
+      &:hover {
+        box-shadow:
+          0 4px 10px rgba(0, 0, 0, 0.08),
+          0 10px 22px rgba(0, 0, 0, 0.06);
+        transform: translateY(-1px);
+      }
 
       .user-info {
-        font-weight: 500;
+        display: flex;
+        flex-direction: column;
+        line-height: 1.2;
+
+        .name {
+          font-weight: 600;
+          font-size: 14px;
+          color: #1f1f1f;
+        }
 
         .user-id {
           font-size: 12px;
-          color: rgba(0, 0, 0, 0.45);
+          color: #8c8c8c;
+          margin-top: 2px;
         }
       }
     }
@@ -28,8 +85,11 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      strong {
-        font-weight: 600;
+      margin-bottom: 10px;
+
+      .count {
+        font-size: 12px;
+        color: #888;
       }
     }
 
@@ -40,16 +100,70 @@
     }
 
     .role-search {
-      margin: 12px 0;
+      margin-bottom: 10px;
+    }
+
+    .selected-summary {
+      font-size: 12px;
+      color: rgb(68, 106, 169);
+      margin-bottom: 10px;
+      font-weight: 500;
+    }
+
+    /* SCROLL AREA */
+    .role-list-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+      padding-right: 4px;
+    }
+
+    /* Scrollbar */
+    .role-list-wrapper,
+    .menus-content {
+      scrollbar-width: thin; /* Firefox */
+      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0);
+      }
+
+      &:hover::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.25);
+      }
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.4);
+      }
     }
 
     .role-item {
       cursor: pointer;
       border-radius: 6px;
-      padding: 8px 12px;
+      padding: 10px 12px;
+      transition: 0.2s;
+
+      &:hover {
+        background: #f5f7fa;
+      }
 
       &.active {
-        background: #e6f7ff;
+        background: #e6f4ff;
+        // border-left: 3px solid rgb(68, 106, 169);
       }
 
       .ant-list-item-meta-title {
@@ -58,66 +172,90 @@
 
       .ant-list-item-meta-description {
         font-size: 12px;
-        color: rgba(0, 0, 0, 0.45);
+        color: #777;
+      }
+    }
+
+    /* Skeleton Loader */
+    .role-skeleton {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 2px;
+
+      .role-skeleton-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        border-radius: 6px;
+
+        background: #fff;
+        border: 1px solid #f0f0f0;
+
+        .meta {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          flex: 1;
+        }
       }
     }
   }
 
+  /* RIGHT PANEL */
   .right-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    padding: 16px;
+    height: 100%;
+    min-height: 0;
 
     .menus-header {
-      font-weight: 500;
-      margin-bottom: 4px;
-      color: #000;
+      margin-bottom: 12px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+      }
 
       .sub-text {
         font-size: 12px;
         color: #888;
-        margin-top: 4px;
       }
     }
 
     .menus-content {
-      margin-top: 16px;
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+      padding: 8px 4px;
+    }
+
+    .empty-state {
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .footer-actions {
-      margin-top: 16px;
       display: flex;
       justify-content: flex-end;
-      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid #f0f0f0;
     }
   }
 
-  /* ===============================
-   📱 iPad Mini (481px – 768px)
-   =============================== */
+  /* TABLET / MOBILE */
   @media (max-width: 768px) {
-    .assign-role {
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .assign-role .left-panel {
-      width: 100%;
-    }
+    flex-direction: column;
+    height: auto;
 
-    .assign-role .right-panel {
+    .left-panel,
+    .right-panel {
       width: 100%;
-    }
-
-    /* Better spacing for tablets */
-    .assign-role .right-panel {
-      padding: 14px;
-    }
-
-    .assign-role .footer-actions {
-      justify-content: flex-end;
+      height: auto;
     }
   }
 }

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

@@ -0,0 +1,45 @@
+const avatarColors = [
+  '#5B8FF9',
+  '#61DDAA',
+  '#65789B',
+  '#a0d911',
+  '#F6BD16',
+  '#7262FD',
+  '#faad14',
+  '#78D3F8',
+  '#9661BC',
+  '#F6903D',
+  '#008685',
+  '#F08BB4',
+  '#722ed1',
+  '#eb2f96',
+  '#13c2c2',
+  '#eb2f96',
+  '#fa8c16',
+  '#52c41a',
+];
+
+export const getAvatarProps = (name) => {
+  const safeName = (name ?? '').toString().trim();
+
+  // Find first alphabetic character
+  const match = safeName.match(/[A-Za-z]/);
+  const letter = match ? match[0].toUpperCase() : '-';
+
+  // deterministic color based on string
+  let hash = 0;
+  for (let i = 0; i < safeName.length; i++) {
+    hash = safeName.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  const color = avatarColors[Math.abs(hash) % avatarColors.length] || '#999';
+
+  return {
+    letter,
+    style: {
+      backgroundColor: color,
+      color: '#fff',
+      fontWeight: 600,
+    },
+  };
+};

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

@@ -269,7 +269,7 @@ export default function ReportingDashboard({
     getPatientDetails();
   }
 
-  const fetchReportData = async (id, values, dbPtr, pagination, parsedColumns,paramsString) => {
+  const fetchReportData = async (id, values, dbPtr, pagination, parsedColumns, paramsString) => {
     const { current, pageSize } = pagination || {};
     // If card script id is exist load that id otherwise load id
     const coreScriptId = scriptId.current ? scriptId.current : id;
@@ -314,8 +314,12 @@ export default function ReportingDashboard({
 
       // Fetch result
       const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
+
+      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
+
       // Handle both result formats
-      let resultDetails = result[0];
+      let resultDetails = apiData[0] || [];
+
       if (result?.result && result?.result[0]) {
         resultDetails = result.result[0];
       }
@@ -346,7 +350,6 @@ export default function ReportingDashboard({
       }
     } catch (error) {
       console.error('Error fetching report data:', error);
-      message.warn('Please try again');
     } finally {
       // Always runs, success or error
       setLoading(false);
@@ -445,7 +448,7 @@ export default function ReportingDashboard({
 
     // Call API
     try {
-      await fetchReportData(id, values, dbPtr, paginationData, parsedColumns,paramsString);
+      await fetchReportData(id, values, dbPtr, paginationData, parsedColumns, paramsString);
     } finally {
       setLoading(false);
       setCardLoading(false);
@@ -608,7 +611,6 @@ function GuestList({
   attributes,
   fetchReportData,
 }) {
-  
   /**
    * @param {*} propValues
    */

package/package.json

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