ui-soxo-bootstrap-core 2.5.6 → 2.5.7

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

@@ -0,0 +1,318 @@
+/**
+ * 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);
+  // for save
+  const [saving, setSaving] = useState(false);
+
+  const [selectedMenus, setSelectedMenus] = useState([]);
+  const [search, setSearch] = useState('');
+
+  // for initial roles
+  const [initialRoles, setInitialRoles] = 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 {
+      // Call both APIs in parallel
+      const [userRes, roleRes] = await Promise.all([UsersAPI.getUser({ id }), UsersAPI.getUserRole({ id })]);
+
+      /* ---------- USER DETAILS ---------- */
+      const userData = userRes?.result;
+      if (userData) {
+        setUser({
+          id: userData.id,
+          name: userData.name,
+        });
+      } else {
+        setUser(null);
+      }
+
+      /* ---------- USER ROLES ---------- */
+      const roleList = Array.isArray(roleRes?.result) ? roleRes.result : [];
+
+      //  Extract VALID role IDs (ignore nulls & duplicates)
+      const roleIds = [...new Set(list.filter((item) => item.role_id && item.active === 'Y').map((item) => Number(item.role_id)))];
+
+      setSelectedRoles(roleIds);
+      setInitialRoles(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 = []) => {
+    if (!Array.isArray(menus) || !Array.isArray(allowedIds)) return [];
+    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) {
+    message.error('Invalid user');
+    return;
+  }
+    // start button spinner
+    setSaving(true);
+
+    try {
+      // roles to ADD
+      const role_ids = selectedRoles.filter((rid) => !initialRoles.includes(rid));
+
+      // roles to REMOVE
+      const update_ids = initialRoles.filter((rid) => !selectedRoles.includes(rid));
+
+      if (!role_ids.length && !update_ids.length) {
+        message.info('No changes to save');
+        return;
+      }
+
+      const payload = {
+        user_id: id,
+        role_ids,
+        update_ids,
+      };
+
+      await UserRolesAPI.addUserRoleSave(payload);
+
+      // Only show success AFTER all saves
+
+      message.success('User roles updated successfully');
+      
+      await loadUser();
+
+    } catch (err) {
+      console.error(err);
+      message.error('Failed to save user roles');
+    } finally {
+      // stop button spinner
+      setSaving(false);
+    }
+  };
+
+  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} loading={saving} disabled={!selectedRoles.length}>
+            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-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/models/users/components/user-list/user-list.js

@@ -365,7 +365,7 @@ const UserList = ({ model, match, relativeAdd = false, additional_queries = [],
             )}
 
             {/* Add Modal */}
-            <Modal destroyOnClose confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
+            <Modal destroyOnClose={false} confirmLoading={loading} visible={visible} onCancel={closeModal} footer={null}>
                 <model.ModalAddComponent
                     match={match}
                     model={model}

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}&active=Y` });
+
   };
 
   /**

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