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

package/core/models/menus/components/menu-lists/menu-lists.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message } from 'antd';
+import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag } from 'antd';
 import { ReloadOutlined, DeleteOutlined, EditOutlined, PlusCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { Button, Card, Switch, DraggableWrapper } from '../../../../lib';
 //  for draggable menu list import { DndProvider } from "react-dnd";
@@ -55,7 +55,6 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
       .catch(() => setLoading(false));
   };
 
-  console.log('record', records);
   /**
    *
    */
@@ -206,7 +205,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
 
   const filtered = records.filter((r) => r.name?.toUpperCase().includes(query.toUpperCase()));
 
-  const visibleItems = dragMode ? records : filtered;
+  const visibleItems = filtered;
 
   const onSearch = (event) => {
     setQuery(event.target.value);
@@ -440,7 +439,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
 function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord) {
   return (
     <Space onClick={(e) => e.stopPropagation()}>
-      {/* ⭐ NEW BUTTON — Add Submenu */}
+      <Tag color={item.is_visible === true ? 'green' : 'blue'}>{item.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
       <Button
         size="small"
         type="dashed"
@@ -459,7 +458,6 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         <PlusCircleFilled />
         Add Sub Menu
       </Button>
-
       {model.ModalAddComponent && (
         <Button
           size="small"
@@ -473,8 +471,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
           <EditOutlined />
         </Button>
       )}
-
-      {/* <Button
+      <Button
         size="small"
         type="default"
         onClick={() => {
@@ -484,8 +481,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         }}
       >
         <CopyOutlined />
-      </Button> */}
-
+      </Button>
       <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
         <Button danger size="small" type="default">
           <DeleteOutlined />

package/core/models/menus/menus.js

@@ -177,28 +177,47 @@ class MenusAPI extends Base {
    * @param {*} menu
    * @returns
    */
-  getMenus = (config) => {
+  getMenus = (config, dbPtr = null) => {
     // Use 'core-menus' endpoint if REACT_APP_USE_CORE_MENUS is true (used for Matria)
     const url =
       process.env.REACT_APP_USE_CORE_MENUS === 'true'
         ? 'core-menus/get-menus' // Matria
         : 'menus/get-menus'; // NURA
 
+    if (!dbPtr) dbPtr = localStorage.db_ptr;
+
     return this.get({
       url,
       config,
+      headers: {
+        db_ptr: dbPtr,
+      },
+    }).then((result) => result);
+  };
+
+  getMenubyUser = (user_id) => {
+    const url = `menus/get-menus?userId=${user_id}`;
+    return this.get({
+      url,
     }).then((result) => result);
   };
 
   // get core-menu list with submenu
   getCoreMenuLists = () => {
     const url = 'core-menus/core-menus?step=1&header_id=null';
-
     return this.get({
       url,
     }).then((result) => result);
   };
 
+  getCoreMenuByRoleId = async (role_id) => {
+    const url = `menus/get-menus-by-role/${role_id}`;
+    const result = await this.get({
+      url,
+    });
+    return result;
+  };
+
   getCoreMenus = () => {
     return [
       // {

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/roles/roles.js

@@ -155,6 +155,15 @@ class RolesAPI extends BaseAPI {
 
   /**
    * Cutsom Api for creating user
+  getRole = () => {
+    return ApiUtils.get({
+      url: `core-roles/get-core-roles?active=Y`,
+    });
+  };
+
+
+  /**
+   * Cutsom Api for updating user
    *
    * @param {*} values
    * @returns

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>