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

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

@@ -1,5 +1,29 @@
-import React from "react";
-import { Checkbox, Collapse } from "antd";
+/**
+ * MenuTree Component
+ *
+ * @description
+ * Renders a hierarchical menu structure with optional checkboxes.
+ * Supports:
+ * - Recursive menu rendering
+ * - Parent–child checkbox synchronization
+ * - Indeterminate state for partially selected parents
+ *
+ * Common use cases:
+ * - Role-based menu preview
+ * - Permission assignment trees
+ *
+ * @param {Object} props
+ * @param {Array<Object>} props.menus - Menu tree data
+ * @param {Array<number>} props.selectedMenus - Selected menu IDs
+ * @param {(menuId:number, checked:boolean) => void} props.toggleMenu - Callback for menu selection
+ * @param {number|null} props.parentId - Parent menu ID (used internally for recursion)
+ * @param {boolean} props.showCheckbox - Whether to display checkboxes
+ *
+ * @returns {JSX.Element}
+ */
+
+import React from 'react';
+import { Checkbox, Collapse } from 'antd';
 
 const { Panel } = Collapse;
 
@@ -8,6 +32,12 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
     return menuList.map((menu) => {
       const children = menu.sub_menus || [];
 
+      /**
+       * Toggle menu selection recursively for all child menus
+       *
+       * @param {Object} m - Menu object
+       * @param {boolean} checked - Checkbox state
+       */
       const toggleMenuRecursive = (m, checked) => {
         toggleMenu && toggleMenu(m.id, checked);
         if (m.sub_menus && m.sub_menus.length > 0) {
@@ -15,49 +45,57 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
         }
       };
 
+      /**
+       * Handle parent checkbox change
+       * - Updates parent menu
+       * - Cascades selection to all children
+       *
+       * @param {boolean} checked
+       */
+
       const onParentChange = (checked) => {
         toggleMenu && toggleMenu(menu.id, checked);
         children.forEach((c) => toggleMenuRecursive(c, checked));
       };
 
+      /**
+       * Leaf menu (no sub-menus)
+       */
+
       if (children.length === 0) {
         return (
           <div
             key={menu.id}
             style={{
-              border: "1px solid rgba(198, 195, 195, 0.85)",
-              padding: "12px 16px",
+              border: '1px solid rgba(198, 195, 195, 0.85)',
+              padding: '12px 16px',
               marginBottom: 6,
-              background: "#fff",
-              display: "flex",
-              alignItems: "center",
+              background: '#fff',
+              display: 'flex',
+              alignItems: 'center',
               gap: 8,
             }}
           >
-            {showCheckbox && (
-              <Checkbox
-                checked={selectedMenus.includes(menu.id)}
-                onChange={(e) => onParentChange(e.target.checked)}
-              />
-            )}
+            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
             <span>{menu.title || menu.caption}</span>
           </div>
         );
       }
 
+      /**
+       * Parent menu (with sub-menus)
+       */
+
       return (
         <Collapse key={menu.id} style={{ marginBottom: 6 }}>
           <Panel
             key={menu.id}
             header={
-              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <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))
-                    }
+                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
                     onChange={(e) => onParentChange(e.target.checked)}
                   />
                 )}
@@ -65,9 +103,7 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
               </div>
             }
           >
-            <div style={{ paddingLeft: 20 }}>
-              {renderTree(children, menu.id)}
-            </div>
+            <div style={{ paddingLeft: 20 }}>{renderTree(children, menu.id)}</div>
           </Panel>
         </Collapse>
       );

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

@@ -1,3 +1,18 @@
+/**
+ * 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';
 
@@ -13,24 +28,44 @@ 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 [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 */
+  /**
+   * 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 {
@@ -43,21 +78,15 @@ export default function AssignRole() {
         return;
       }
 
-      // 1️⃣ Extract user from first record
+      //  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))
-        ),
-      ];
+      //  Extract VALID role IDs (ignore nulls & duplicates)
+      const roleIds = [...new Set(list.filter((item) => item.role_id).map((item) => Number(item.role_id)))];
 
       setSelectedRoles(roleIds);
     } catch (e) {
@@ -68,11 +97,20 @@ export default function AssignRole() {
     }
   };
 
-  /** Load roles */
+  /**
+   * Load active roles on component mount
+   */
   useEffect(() => {
     getRoles();
   }, []);
 
+  /**
+   * Fetch all active roles
+   *
+   * @async
+   * @returns {Promise<void>}
+   */
+
   const getRoles = async () => {
     setLoadingRoles(true);
     try {
@@ -87,6 +125,14 @@ export default function AssignRole() {
     }
   };
 
+  /**
+   * 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) => {
     return menus
       .filter((m) => allowedIds.includes(m.id))
@@ -96,7 +142,14 @@ export default function AssignRole() {
       }));
   };
 
-  /** Load menus for a role */
+  /**
+   * 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 || []);
@@ -114,7 +167,12 @@ export default function AssignRole() {
     }
   };
 
-  /** Toggle menu selection */
+  /**
+   * 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)));
   };
@@ -125,12 +183,24 @@ export default function AssignRole() {
     return roles.filter((r) => r.name.toLowerCase().includes(search.toLowerCase()));
   }, [roles, search]);
 
-  /** Toggle role selection */
+  /**
+   * 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 || !selectedRoles.length) {
       message.warning('User or roles missing');

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

@@ -87,4 +87,31 @@
       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/package.json

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