ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

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

@@ -1,428 +1,428 @@
-/**
- * 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 { getAvatarProps } from './avatar-props';
-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 [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([]);
-
-  const userAvatar = getAvatarProps(user?.name);
-
-  /**
-   * 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 () => {
-    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(roleList.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');
-    }
-  };
-
-  /**
-   * 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);
-
-    const role_id = role.id;
-    try {
-      const res = await MenusAPI.getCoreMenuByRoleId(role_id);
-      const allMenus = Array.isArray(res?.result) ? res.result : [];
-
-      setModules(allMenus);
-    } 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);
-    }
-  };
-
-  // Role Change
-  const rolesChanged = useMemo(() => {
-    // Length mismatch means roles were added or removed
-    if (initialRoles.length !== selectedRoles.length) return true;
-
-    // Sort both arrays before comparison (order should not matter)
-    const sortedInitial = [...initialRoles].sort();
-    const sortedSelected = [...selectedRoles].sort();
-
-    // Check for any value difference
-    return sortedInitial.some((value, index) => value !== sortedSelected[index]);
-  }, [initialRoles, selectedRoles]);
-
-  // View All Role
-  const handleViewAll = async () => {
-    setLoadingMenus(true);
-    setModules([]);
-    setActiveRole({ name: 'All Roles', isViewAll: true });
-
-    try {
-      const res = await MenusAPI.getMenubyUser(id);
-      const userMenus = Array.isArray(res?.result?.menus) ? res.result.menus : [];
-      setModules(userMenus);
-      setLoadingMenus(false);
-    } catch (err) {
-      setLoadingMenus(false);
-      console.error(err);
-      setModules([]);
-    }
-  };
-
-  /**
-   * Context-specific empty-state message for the right (menus) panel:
-   * - View Access for a user with no roles → no role assigned
-   * - A selected role with no menus → no menus assigned
-   * - Nothing selected yet → prompt to pick a role
-   */
-  const emptyMenusMessage = !activeRole
-    ? 'Select a role to view menus'
-    : activeRole.isViewAll
-    ? 'No role has been assigned to this user.'
-    : 'No menus have been assigned to this role.';
-
-  return (
-    <section className="assign-role">
-      {/* LEFT PANEL */}
-      <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 className="name">{user?.name || '--'}</div>
-            <Text className="user-id">ID : {user?.id || '--'}</Text>
-          </div>
-        </div>
-
-        <div className="role-list-header">
-          <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="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}
-              dataSource={[...filteredRoles].sort((a, b) => {
-                const aSelected = selectedRoles.includes(a.id);
-                const bSelected = selectedRoles.includes(b.id);
-
-                if (aSelected === bSelected) return 0;
-                return aSelected ? -1 : 1;
-              })}
-              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"
-        bodyStyle={{
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          padding: 16,
-        }}
-      >
-        {modules.length > 0 && (
-          <div className="menus-header">
-            <div className="title">Menus {activeRole ? `– ${activeRole.name}` : ''}</div>
-            <div className="sub-text">You don’t have permission to edit this here. Update it in Role Settings.</div>
-          </div>
-        )}
-
-        <div className="menus-content">
-          {loadingMenus ? (
-            <Skeleton active paragraph={{ rows: 6 }} />
-          ) : modules.length === 0 ? (
-            <div className="empty-state">
-              <Empty description={emptyMenusMessage} />
-            </div>
-          ) : (
-            <MenuTree menus={modules} selectedMenus={selectedMenus} toggleMenu={toggleMenu} showCheckbox={false} />
-          )}
-        </div>
-
-        <div className="footer-actions">
-          {rolesChanged && (
-            <Button type="primary" onClick={handleSaveUserRole} loading={saving}>
-              Save Changes
-            </Button>
-          )}
-        </div>
-      </Card>
-    </section>
-  );
-}
+/**
+ * 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 { getAvatarProps } from './avatar-props';
+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 [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([]);
+
+  const userAvatar = getAvatarProps(user?.name);
+
+  /**
+   * 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 () => {
+    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(roleList.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');
+    }
+  };
+
+  /**
+   * 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);
+
+    const role_id = role.id;
+    try {
+      const res = await MenusAPI.getCoreMenuByRoleId(role_id);
+      const allMenus = Array.isArray(res?.result) ? res.result : [];
+
+      setModules(allMenus);
+    } 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);
+    }
+  };
+
+  // Role Change
+  const rolesChanged = useMemo(() => {
+    // Length mismatch means roles were added or removed
+    if (initialRoles.length !== selectedRoles.length) return true;
+
+    // Sort both arrays before comparison (order should not matter)
+    const sortedInitial = [...initialRoles].sort();
+    const sortedSelected = [...selectedRoles].sort();
+
+    // Check for any value difference
+    return sortedInitial.some((value, index) => value !== sortedSelected[index]);
+  }, [initialRoles, selectedRoles]);
+
+  // View All Role
+  const handleViewAll = async () => {
+    setLoadingMenus(true);
+    setModules([]);
+    setActiveRole({ name: 'All Roles', isViewAll: true });
+
+    try {
+      const res = await MenusAPI.getMenubyUser(id);
+      const userMenus = Array.isArray(res?.result?.menus) ? res.result.menus : [];
+      setModules(userMenus);
+      setLoadingMenus(false);
+    } catch (err) {
+      setLoadingMenus(false);
+      console.error(err);
+      setModules([]);
+    }
+  };
+
+  /**
+   * Context-specific empty-state message for the right (menus) panel:
+   * - View Access for a user with no roles → no role assigned
+   * - A selected role with no menus → no menus assigned
+   * - Nothing selected yet → prompt to pick a role
+   */
+  const emptyMenusMessage = !activeRole
+    ? 'Select a role to view menus'
+    : activeRole.isViewAll
+    ? 'No role has been assigned to this user.'
+    : 'No menus have been assigned to this role.';
+
+  return (
+    <section className="assign-role">
+      {/* LEFT PANEL */}
+      <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 className="name">{user?.name || '--'}</div>
+            <Text className="user-id">ID : {user?.id || '--'}</Text>
+          </div>
+        </div>
+
+        <div className="role-list-header">
+          <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="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}
+              dataSource={[...filteredRoles].sort((a, b) => {
+                const aSelected = selectedRoles.includes(a.id);
+                const bSelected = selectedRoles.includes(b.id);
+
+                if (aSelected === bSelected) return 0;
+                return aSelected ? -1 : 1;
+              })}
+              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"
+        bodyStyle={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 16,
+        }}
+      >
+        {modules.length > 0 && (
+          <div className="menus-header">
+            <div className="title">Menus {activeRole ? `– ${activeRole.name}` : ''}</div>
+            <div className="sub-text">You don’t have permission to edit this here. Update it in Role Settings.</div>
+          </div>
+        )}
+
+        <div className="menus-content">
+          {loadingMenus ? (
+            <Skeleton active paragraph={{ rows: 6 }} />
+          ) : modules.length === 0 ? (
+            <div className="empty-state">
+              <Empty description={emptyMenusMessage} />
+            </div>
+          ) : (
+            <MenuTree menus={modules} selectedMenus={selectedMenus} toggleMenu={toggleMenu} showCheckbox={false} />
+          )}
+        </div>
+
+        <div className="footer-actions">
+          {rolesChanged && (
+            <Button type="primary" onClick={handleSaveUserRole} loading={saving}>
+              Save Changes
+            </Button>
+          )}
+        </div>
+      </Card>
+    </section>
+  );
+}