ui-soxo-bootstrap-core 2.6.0 → 2.6.1-dev.10

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 })]);
@@ -93,15 +93,13 @@ export default function AssignRole() {
       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)))];
+      const roleIds = [...new Set(roleList.filter((item) => item.role_id && item.active === 'Y').map((item) => Number(item.role_id)))];
 
       setSelectedRoles(roleIds);
-      setInitialRoles(roleIds); 
+      setInitialRoles(roleIds);
     } 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.getCoreMenuByRoleId(role_id);
       const allMenus = res.result || [];
-      const filteredMenus = filterAndSortMenus(allMenus, role.menu_ids);
-      setModules(filteredMenus);
+
+      setModules(allMenus);
     } catch (e) {
       console.error(e);
       setModules([]);
@@ -206,10 +206,10 @@ export default function AssignRole() {
    * @returns {Promise<void>}
    */
   const handleSaveUserRole = async () => {
-   if (!id) {
-    message.error('Invalid user');
-    return;
-  }
+    if (!id) {
+      message.error('Invalid user');
+      return;
+    }
     // start button spinner
     setSaving(true);
 
@@ -236,9 +236,8 @@ export default function AssignRole() {
       // Only show success AFTER all saves
 
       message.success('User roles updated successfully');
-      
-      await loadUser();
 
+      await loadUser();
     } catch (err) {
       console.error(err);
       message.error('Failed to save user roles');
@@ -248,69 +247,165 @@ export default function AssignRole() {
     }
   };
 
+  // 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' });
+
+    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}
+              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">
+      <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">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 ? (
-            <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} />
           )}
         </div>
 
         <div className="footer-actions">
-          <Button type="primary" onClick={handleSaveUserRole} loading={saving} disabled={!selectedRoles.length}>
-            Save
-          </Button>
+          {rolesChanged && (
+            <Button type="primary" onClick={handleSaveUserRole} loading={saving}>
+              Save Changes
+            </Button>
+          )}
         </div>
       </Card>
     </section>

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;
         }
       }
     }
@@ -27,23 +84,86 @@
     .role-list-header {
       display: flex;
       justify-content: space-between;
-      margin-bottom: 12px;
-      strong {
-        font-weight: 600;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .count {
+        font-size: 12px;
+        color: #888;
       }
     }
 
+    .view-all-btn {
+      cursor: pointer;
+      color: #1677ff;
+      font-weight: 500;
+    }
+
     .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 {
@@ -52,66 +172,110 @@
 
       .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;
+      scrollbar-width: thin; /* Firefox */
+      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+      &::-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);
+      }
+    }
+
+    .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,
+    },
+  };
+};