ui-soxo-bootstrap-core 2.6.1-dev.2 → 2.6.1-dev.20

package/core/models/roles/components/role-add/role-add.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { Skeleton, Typography, message, Form, Input, Collapse, Checkbox } from 'antd';
+import { Skeleton, Typography, message, Form, Input, Collapse, Checkbox, Tag } from 'antd';
 import { GlobalContext } from './../../../../lib';
 import { Button } from './../../../../lib';
 import { ModelsAPI, PagesAPI, RolesAPI, MenusAPI } from '../../..';
@@ -29,7 +29,9 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
     formContent.attributes = {};
   }
 
-  const [loading, setLoading] = useState(true);
+  const isEdit = !!(formContent.id || formContent.copy);
+  const [initialLoading, setInitialLoading] = useState(isEdit);
+  const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [pages, setPages] = useState([]);
   const [models, setModels] = useState([]);
@@ -49,36 +51,43 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
 
   // On component mount
   useEffect(() => {
-    getPages();
-    getModels();
-    loadMenus();
-    setShowMenus(true);
-
-    // Preselect menus when editing
-    if (formContent && formContent.menu_ids) {
-      let menus = formContent.menu_ids;
-
-      setSelectedMenus(menus);
-      // keep original copy for deselect comparison
-      setOriginalMenus(menus);
-    }
+    const fetchData = async () => {
+      if (isEdit) setInitialLoading(true);
+      try {
+        await Promise.all([getPages(), getModels(), loadMenus()]);
+        setShowMenus(true);
+
+        // Preselect menus when editing
+        if (formContent && formContent.menu_ids) {
+          let menus = formContent.menu_ids;
+
+          setSelectedMenus(menus);
+          // keep original copy for deselect comparison
+          setOriginalMenus(menus);
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      } finally {
+        setInitialLoading(false);
+      }
+    };
 
-    setLoading(false);
-  }, [formContent]);
+    fetchData();
+  }, [formContent, isEdit]);
 
   // Load pages
   const getPages = () => {
-    PagesAPI.getPages().then((res) => setPages(res.result || []));
+    return PagesAPI.getPages().then((res) => setPages(res.result || []));
   };
 
   // Load models
   const getModels = () => {
-    ModelsAPI.get().then((res) => setModels(res.result || []));
+    return ModelsAPI.get().then((res) => setModels(res.result || []));
   };
 
   // Load top-level menus
   const loadMenus = () => {
-    MenusAPI.getCoreMenuLists()
+    return MenusAPI.getCoreMenuLists()
       .then((res) => setMenuList(res.result || []))
       .catch(console.error);
   };
@@ -156,13 +165,13 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
 
   return (
     <section className="collection-add">
-      {loading ? (
-        <Skeleton />
+      {initialLoading ? (
+        <Skeleton active paragraph={{ rows: 12 }} />
       ) : (
         <Form initialValues={{ ...formContent }} form={form} layout="vertical" onFinish={onSubmit}>
           {/* Role Name */}
           <Form.Item name="name" label="Enter Role Name" rules={[{ required: true, message: 'Role name is required' }]}>
-            <Input placeholder="Enter name" />
+            <Input placeholder="Enter name" autoocus />
           </Form.Item>
 
           {/* Description */}
@@ -180,19 +189,31 @@ const RoleAdd = ({ model, callback, edit, formContent = {}, match, additional_qu
           {/* MENU TREE */}
           {showMenus && menuList.length > 0 && (
             <div style={{ marginTop: 30 }}>
-              <Title level={5}>Menu List</Title>
-              <p style={{ color: '#999' }}>Choose menus and set permissions</p>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                  marginBottom: 16,
+                }}
+              >
+                <div>
+                  <Title level={5} style={{ marginBottom: 0 }}>
+                    Menu List
+                  </Title>
+                  <p style={{ color: '#999', marginBottom: 0 }}>Choose menus and set permissions</p>
+                </div>
+
+                <Form.Item style={{ marginBottom: 0 }}>
+                  <Button loading={loading} htmlType="submit" type="primary">
+                    Save
+                  </Button>
+                </Form.Item>
+              </div>
 
               <MenuTree menus={menuList} selectedMenus={selectedMenus} toggleMenu={toggleMenu} />
             </div>
           )}
-
-          {/* Submit Button */}
-          <Form.Item style={{ marginTop: 20 }}>
-            <Button loading={loading} htmlType="submit" type="primary">
-              Save
-            </Button>
-          </Form.Item>
         </Form>
       )}
     </section>
@@ -248,32 +269,41 @@ const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
         if (children.length === 0) {
           return (
             <div
-              key={menu.id}
               style={{
+                justifyContent: 'space-between',
+                display: 'flex',
+                alignItems: 'center',
                 border: '1px solid rgba(198, 195, 195, 0.85)',
                 // borderRadius: 6,
                 padding: '12px 16px',
                 marginBottom: 6,
                 background: '#fff',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 8,
               }}
             >
-              <Checkbox
-                checked={selectedMenus.includes(menu.id)}
-                onChange={(e) => {
-                  const checked = e.target.checked;
-
-                  toggleMenu(menu.id, checked);
-
-                  // ✅ FORCE parent selection
-                  if (checked && parentId) {
-                    toggleMenu(parentId, true);
-                  }
+              <div
+                key={menu.id}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
                 }}
-              />
-              <span>{menu.title || menu.caption}</span>
+              >
+                <Checkbox
+                  checked={selectedMenus.includes(menu.id)}
+                  onChange={(e) => {
+                    const checked = e.target.checked;
+
+                    toggleMenu(menu.id, checked);
+
+                    //  FORCE parent selection
+                    if (checked && parentId) {
+                      toggleMenu(parentId, true);
+                    }
+                  }}
+                />
+                <span>{menu.caption}</span>
+              </div>
+              <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
             </div>
           );
         }
@@ -287,16 +317,19 @@ const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
             <Panel
               key={menu.id}
               header={
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 8,
-                  }}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
-                  <span>{menu.title || menu.caption}</span>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
+                    <span>{menu.caption}</span>
+                  </div>
+                  <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
                 </div>
               }
             >

package/core/models/roles/components/role-list/role-list.js

@@ -331,7 +331,7 @@ const RoleList = ({ model, match, relativeAdd = false, additional_queries = [],
       {/* Table Header Ends */}
 
       {loading ? (
-        <Skeleton />
+        <Skeleton active paragraph={{ rows: 10 }} />
       ) : (
         <>
           <>

package/core/models/staff/components/staff-add/staff-add.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 
 import { Modal, Tabs, Input, Form, Row, Col, message, Checkbox, Select } from 'antd';
-import { useTranslation, Button } from './../../../../lib/';
+import { useTranslation, Button, CountryPhoneInput, phoneValidator as libPhoneValidator, formatPhoneForForm } from './../../../../lib/';
 import { UsersAPI } from '../../..';
+import { formatPhoneWithCountryCode } from '../../../../lib/utils/common/common.utils';
 
 const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   const [form] = Form.useForm();
@@ -61,18 +62,6 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
     }
   }, [visible]);
 
-  const phoneValidator = (_, value) => {
-    if (!value) {
-      return Promise.resolve(); // not required
-    }
-
-    if (!/^\d{10}$/.test(value)) {
-      return Promise.reject('Phone number must be 10 digits');
-    }
-
-    return Promise.resolve();
-  };
-
   /** -------------------------------
    *  API CALL – Designations
    * ------------------------------- */
@@ -201,8 +190,8 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
       shortName: data.shortName,
       description: data.description,
       designation: data.designationPtr,
-      phone1: data.phone || data.mobile,
-      phone2: data.alternateMobile,
+      phone1: formatPhoneForForm(data.phone || data.mobile),
+      phone2: formatPhoneForForm(data.alternateMobile),
       email1: data.email,
       email2: data.alternateEmail,
       slno: data.slNo,
@@ -223,14 +212,17 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   const handleFinish = async (values) => {
     setLoading(true);
 
+    let phone1Value = formatPhoneWithCountryCode(values.phone1);
+    let phone2Value = formatPhoneWithCountryCode(values.phone2);
+
     const payload = {
       id: values.id,
       shortName: values.shortName,
       description: values.description,
       designationPtr: values.designation ?? existing.designationPtr ?? null,
-      phone: values.phone1 ?? existing.phone ?? null,
-      mobile: values.phone1 ?? existing.mobile ?? null,
-      alternateMobile: values.phone2 ?? existing.alternateMobile ?? null,
+      phone: phone1Value ?? existing.phone ?? null,
+      mobile: phone1Value ?? existing.mobile ?? null,
+      alternateMobile: phone2Value ?? existing.alternateMobile ?? null,
       email: values.email1 ?? existing.email ?? null,
       alternateEmail: values.email2 ?? existing.alternateEmail ?? null,
       remarks: values.remarks ?? existing.remarks ?? null,
@@ -331,26 +323,22 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
                 </Form.Item>
               </Col> */}
               <Col span={6}>
-                <Form.Item label="Phone Number" name="phone1" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    autoComplete="off"
-                    placeholder="Enter Phone Number"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                <Form.Item label="Phone Number" name="phone1" validateTrigger="onBlur" rules={[{ validator: libPhoneValidator }]}>
+                  <CountryPhoneInput
+                    defaultCountryCode={process.env.REACT_APP_COUNTRYCODE}
+                    enableSearch
+                    inputStyle={{ width: '100%' }}
                     onKeyDown={handleEnterKey}
                   />
                 </Form.Item>
               </Col>
 
               <Col span={6}>
-                <Form.Item label="Alternate Phone Number" name="phone2" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    placeholder="Enter Phone Number"
-                    autoComplete="off"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                <Form.Item label="Alternate Phone Number" name="phone2" validateTrigger="onBlur" rules={[{ validator: libPhoneValidator }]}>
+                  <CountryPhoneInput
+                    defaultCountryCode={process.env.REACT_APP_COUNTRYCODE}
+                    enableSearch
+                    inputStyle={{ width: '100%' }}
                     onKeyDown={handleEnterKey}
                   />
                 </Form.Item>

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>