ui-soxo-bootstrap-core 2.6.24 → 2.6.26

package/core/lib/components/global-header/global-header.js

@@ -3,116 +3,72 @@
  * Global header component
  */
 
-import React, { useState, useEffect, useContext, useRef } from "react";
+import { useContext, useEffect, useRef, useState } from 'react';
 
-import { animationControls, motion, useAnimation } from "framer-motion";
+import { motion, useAnimation } from 'framer-motion';
 
-import {
-  boxVariants,
-} from "./animations"
+import { boxVariants } from './animations';
 
-import { GlobalContext, GlobalProvider } from "./../../Store";
+import { GlobalContext, GlobalProvider } from './../../Store';
 
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
 
-import { Typography, Avatar, Input, Tooltip } from "antd";
+import { Avatar, Input, Tooltip, Typography } from 'antd';
 
+import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
 
+import { Button } from '../../elements';
 
-import ProgressBar from "../progress-bar/progress-bar"; // Adjust the path as needed
+import GenericHeader from '../header/generic-header';
 
-import { Button } from "../../elements";
+import * as AntIcons from '@ant-design/icons';
 
+import { CustomerServiceOutlined, MenuOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
 
+import { Drawer } from 'antd';
 
-import GenericHeader from "../header/generic-header";
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 
-import {
-  MenuOutlined,
-  UserOutlined,
-  SettingOutlined,
-  QuestionOutlined,
-} from "@ant-design/icons";
+import SideMenu from './../sidemenu/sidemenu';
 
-import { Drawer } from "antd";
+import './global-header.scss';
 
-import { ReloadOutlined, SearchOutlined } from "@ant-design/icons";
-
-import SideMenu from "./../sidemenu/sidemenu";
-
-import "./global-header.scss";
-
-import LanguageSwitcher from "../language-switcher/language-switcher";
-
-import { useTranslation } from "react-i18next";
-
-
-import BorderStyle from "pdf-lib/cjs/core/annotation/BorderStyle";
-
-import SettingsUtil from "../../../utils/settings.utils";
-import SpotlightSearch from "../spotlight-search/spotlight-search.component";
+import LanguageSwitcher from '../language-switcher/language-switcher';
 
+import { useTranslation } from 'react-i18next';
 
+import SettingsUtil from '../../../utils/settings.utils';
+import SpotlightSearch from '../spotlight-search/spotlight-search.component';
 
 const { Title } = Typography;
 
-
-
-
-function GlobalHeaderContent({
-  loading,
-  appSettings,
-  children,
-  isConnected,
-  history,
-  modules = [],
-  sidemenu = [],
-  reload,
-  meta = {},
-  ...props
-}) {
-
+function GlobalHeaderContent({ loading, appSettings, children, isConnected, history, modules = [], sidemenu = [], reload, meta = {}, ...props }) {
   let location = useLocation();
   // let location = {};
 
-
-
   const { isMobile, user = { locations: [] }, kiosk, state, settings } = useContext(GlobalContext);
 
-
-
   const [visible, setVisible] = useState(false);
-  const helpDeskSetting = settings?.HELPATR || {}
+  const helpDeskSetting = settings?.HELPATR || {};
 
   // Variable to handle toggling of menu
   const [collapsed, setCollapsed] = useState(false);
   // varibale handle branch switcher
 
-
-
   // const [searchModalVisible, setSearchModalVisible] = useState(false);
 
-
-  const { globalCustomerHeader = () => { } } = appSettings;
+  const { globalCustomerHeader = () => {} } = appSettings;
 
   const { t, i18n } = useTranslation();
 
   const spotlightRef = useRef();
 
   useEffect(() => {
-
     setTimeout(() => {
-
       i18n.changeLanguage(localStorage.selectedLanguage);
-
-    }, 0)
-
-
+    }, 0);
   }, []);
 
-
-
-
   /**
    * Function to handle toggling of menu
    */
@@ -128,9 +84,6 @@ function GlobalHeaderContent({
     SettingsUtil.openSpotlightModal();
   };
 
-
-
-
   /**
    * Function to remove toggling on mobile view
    */
@@ -158,58 +111,42 @@ function GlobalHeaderContent({
   const boxControls = useAnimation();
 
   async function animate() {
-    await boxControls.start("entered");
+    await boxControls.start('entered');
 
     //await boxControls.start("show");
   }
 
   useEffect(() => {
-
     animate();
-  }, [])
-
-  useEffect(() => {
-
-  }, [state.theme]);
-
-
-
-
-
+  }, []);
 
+  useEffect(() => {}, [state.theme]);
 
   return (
     <div
-      className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? "connected" : ""
-        }`}
+      className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
       style={{
-
         // background: state.theme.colors.bodyBackground,
 
         height: 10,
-
       }}
     >
       {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
 
       <div className="layout-content">
         <div
-
           //whileHover="hover"
           //whileTap="tap"
-          className={`left-bar ${!isConnected && !isMobile ? "" : "hide"}${!collapsed ? "open" : "close"}${kiosk && !isConnected ? "kioskon" : ""}`}
-        // style={{ background: state.theme.colors.leftSectionBackground }}
+          className={`left-bar ${!isConnected && !isMobile ? '' : 'hide'}${!collapsed ? 'open' : 'close'}${kiosk && !isConnected ? 'kioskon' : ''}`}
+          // style={{ background: state.theme.colors.leftSectionBackground }}
         >
-
           {!isMobile && !isConnected ? (
             <motion.div
               variants={boxVariants}
-              initial={["entering"]}
+              initial={['entering']}
               animate={boxControls}
-              className={`sidebar-container ${!collapsed ? "open" : "close"}${kiosk ? "" : "kioskon"}`}
-
+              className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
             >
-
               <SideMenu
                 // isOpen={isOpen}
                 collapsed={collapsed}
@@ -220,18 +157,10 @@ function GlobalHeaderContent({
                 modules={modules}
                 history={history}
               />
-
             </motion.div>
           ) : (
-            <Drawer
-              placement="left"
-              onClose={onClose}
-              visible={visible}
-              className="side-drawer-content"
-            >
-              <div
-                className={`sidebar-container ${!collapsed ? "open" : "close"}`}
-              >
+            <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
+              <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
                 <SideMenu
                   // isOpen={isOpen}
                   collapsed={collapsed}
@@ -248,28 +177,26 @@ function GlobalHeaderContent({
         </div>
 
         {/* Right Section of the Component Loader */}
-        <div className={`right-section ${!collapsed ? "open" : "close"} ${kiosk ? "kioskon" : ""}`} style={{ background: state.theme.colors.bodyBackground }}>
+        <div
+          className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
+          style={{ background: state.theme.colors.bodyBackground }}
+        >
           {/* For not connected section */}
           {!isConnected && !kiosk ? (
-
-            <div className={`page-wrapper ${!collapsed ? "open" : "close"}`}
-            // style={{ background: state.theme.colors.headerBg }}
+            <div
+              className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
+              // style={{ background: state.theme.colors.headerBg }}
             >
               {/*  */}
               <div className="page-header-name">
-
                 <ProgressBar isLoading={loading} />
 
-                <span type
-                  onClick={!isMobile ? toggleCollapsed : hideToggle}
-                  className="toggle-box toggle-menu"
-                >
+                <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
                   <MenuOutlined />
-
                 </span>
 
                 {/* Back Button */}
-                {location.pathname !== "/" ? (
+                {location.pathname !== '/' ? (
                   <span
                     className="toggle-box"
                     onClick={() => {
@@ -281,8 +208,7 @@ function GlobalHeaderContent({
                 ) : null}
                 {/* Back Button Ends */}
 
-
-                {location.pathname !== "/" ? (
+                {location.pathname !== '/' ? (
                   <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
                     {menu.caption}
                   </h4>
@@ -295,32 +221,19 @@ function GlobalHeaderContent({
                 <div className="page-menu">
                   {/* Search Input in header start */}
                   {!isMobile && (
-
                     <div>
-                      <Input
-                        placeholder="Search (Shift + F)"
-                        prefix={<SearchOutlined />}
-                        onClick={openSearchModal}
-
-                        readOnly
-                        style={{ width: 250 }}
-                      />
-
+                      <Input placeholder="Search (Shift + F)" prefix={<SearchOutlined />} onClick={openSearchModal} readOnly style={{ width: 250 }} />
 
                       <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
-
                     </div>
                   )}
                   {/* Search Input in header start */}
 
                   {/** branchswitcher Option  */}
                   {/* branch switcher controlled with env for matria and nura */}
-                  {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? (
-                    <div className="branch-switcher">{globalCustomerHeader()}</div>
-                  ) : null}
+                  {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? <div className="branch-switcher">{globalCustomerHeader()}</div> : null}
                   {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
 
-
                   {/* Search Option */}
 
                   {/* <ModalSearch /> */}
@@ -333,10 +246,7 @@ function GlobalHeaderContent({
                       {/* Models */}
                       {menu && menu.id ? (
                         <Link to={`/menus/${menu.id}`}>
-
-                          <Button type="default" size={"small"} icon={<SettingOutlined />}>
-
-                          </Button>
+                          <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
                         </Link>
                       ) : null}
                       {/* Models Ends */}
@@ -344,37 +254,37 @@ function GlobalHeaderContent({
                   ) : null}
                   {/* Configurator Actions Ends */}
 
-
-
-
-
-
                   {/* Reload Button */}
 
-                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
-
-                  </Button>
+                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
 
                   {/* Reload Button Ends */}
 
                   {/* Help-desk-btn */}
-                  {helpDeskSetting?.showSupportBtn ? <Tooltip title={helpDeskSetting?.toolTipText}>
-                    <span>
-                      <Button
-                        onClick={() => window.open(helpDeskSetting?.helpDeskLink ?? '', '_blank')}
-                        icon={<QuestionOutlined />}
-                        type="default"
-                        size="small"
-                      />
-                    </span>
-                  </Tooltip> : null}
+                  {helpDeskSetting?.showSupportBtn
+                    ? (() => {
+                        const HelpIcon = AntIcons[helpDeskSetting?.icon] ?? CustomerServiceOutlined;
+                        return (
+                          <Tooltip title={helpDeskSetting?.toolTipText} overlayClassName="modern-tooltip">
+                            <span>
+                              <Button
+                                onClick={() => window.open(helpDeskSetting?.helpDeskLink ?? '', '_blank')}
+                                icon={<HelpIcon />}
+                                type="default"
+                                size="small"
+                              />
+                            </span>
+                          </Tooltip>
+                        );
+                      })()
+                    : null}
 
                   {/** Switch Languages starts */}
                   {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
                   {/** Switch Languages ends */}
 
                   {/* User Profile */}
-                  <div style={{ padding: "10px" }}>
+                  <div style={{ padding: '10px' }}>
                     <ProfileAvatar />
                     <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
                   </div>
@@ -396,7 +306,6 @@ function GlobalHeaderContent({
   );
 }
 
-
 export default function GlobalHeader(props) {
   const context = useContext(GlobalContext);
 
@@ -411,27 +320,20 @@ export default function GlobalHeader(props) {
   );
 }
 
-
-
 /**
- * 
- * @returns 
+ *
+ * @returns
  */
 function ProfileAvatar() {
-
   const { user = { locations: [] } } = useContext(GlobalContext);
 
-  useEffect(() => { }, []);
+  useEffect(() => {}, []);
 
   return (
     <Link className="profile-avatar" to="/profile">
       {user.photograph ? (
         <>
-          <img
-            className="profile-picture"
-            src={user.photograph}
-            alt={"user photograph"}
-          />
+          <img className="profile-picture" src={user.photograph} alt={'user photograph'} />
         </>
       ) : (
         <Avatar shape="square" size="small" icon={<UserOutlined />} />

package/core/lib/components/global-header/global-header.scss

@@ -155,12 +155,10 @@
       }
     }
 
-   @media only screen and (max-width: 768px) {
+    @media only screen and (max-width: 768px) {
       margin-left: 0 !important; // remove left margin on mobile
       padding: 10px !important;
     }
-
-
   }
 
   .profile-avatar {
@@ -220,17 +218,16 @@
       left: 212px;
     }
 
-  @media only screen and (max-width: 768px) {
-    padding: 8px 10px 8px 14px !important;
-    left: 0 !important;
-    width: 100% !important;
-
-    &.open {
-      width: 100% !important;
+    @media only screen and (max-width: 768px) {
+      padding: 8px 10px 8px 14px !important;
       left: 0 !important;
-    }
-  }
+      width: 100% !important;
 
+      &.open {
+        width: 100% !important;
+        left: 0 !important;
+      }
+    }
 
     .page-header-name {
       display: flex;
@@ -289,7 +286,7 @@
       .branch-selection {
         margin: 0px 10px;
       }
-       .branch-switcher {
+      .branch-switcher {
         .branches {
           .ant-select {
             min-width: 150px;
@@ -317,13 +314,44 @@
   }
 }
 
+// Tooltip — must be top-level because antd Tooltip renders in a portal on document.body
+.modern-tooltip {
+  .ant-tooltip-inner {
+    background: #ffffff;
+    color: #1f1f1f;
+    font-size: 13px;
+    padding: 8px 14px;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+    line-height: 1.4;
+    letter-spacing: 0.2px;
+    min-height: auto;
+  }
+
+  .ant-tooltip-arrow {
+    --antd-arrow-background-color: #ffffff;
+
+    &::before {
+      background: #ffffff !important;
+    }
+  }
+
+  .ant-tooltip-arrow-content {
+    background: #ffffff !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+    &::before {
+      background: #ffffff !important;
+    }
+  }
+}
+
 .side-drawer-content-wrapper {
   .drawer-content {
     .ant-drawer-body {
       padding: 0px;
     }
   }
- 
 }
 
 .sidebar-container {
@@ -361,7 +389,7 @@
       .ant-drawer-body {
         padding: 0px;
       }
-      .ant-drawer-header{
+      .ant-drawer-header {
         padding: 2px 20px;
       }
     }

package/core/lib/models/forms/components/form-creator/form-creator.js

@@ -600,7 +600,7 @@ function UserInput({ field, onUpload, selectedInformation, onChange, onFieldUpda
 
                         > */}
             {isVisible === true ? (
-                <div className="form-item-element">
+                <div className={`form-item-element ${field.type === 'search' ? 'form-item-element-search' : ''}`}>
 
                     {/* <Button
                                 size="small"

package/core/lib/models/forms/components/form-creator/form-creator.scss

@@ -28,6 +28,11 @@
     }
   }
 
+  .form-item-element-search {
+    min-width: 170px;
+    flex: 0 1 200px;
+  }
+
   .submit-button {
     margin-top: 34px;
   }

package/core/modules/reporting/components/reporting-dashboard/adavance-search/advance-search.js

@@ -5,6 +5,7 @@ import { CoreScripts } from "../../../../../models";
 import "./advance-search.scss";
 
 const { Search } = Input;
+const advancedSearchCache = {};
 
 export default function AdvancedSearchSelect({ reportId, onReset, field, value, onChange, style, ...rest }) {
   // Normalize the configuration. 
@@ -17,14 +18,31 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
   const isSearchQuery = !!config.search_query;
   const fieldName = isObjectMode ? field.field : field;
   const caption = config.caption;
+  const cacheKey = `${finalReportId || "no-report"}::${fieldName || "no-field"}`;
 
   const safeValue = Array.isArray(value) ? value : [];
+  const cachedState = advancedSearchCache[cacheKey] || { optionLabels: {}, displayOptions: [] };
 
   const [searchResults, setSearchResults] = useState([]);
-  const [displayOptions, setDisplayOptions] = useState([]);
-  const [optionLabels, setOptionLabels] = useState({});
+  const [displayOptions, setDisplayOptions] = useState(cachedState.displayOptions);
+  const [optionLabels, setOptionLabels] = useState(cachedState.optionLabels);
   const [loading, setLoading] = useState(false);
   const debounceRef = useRef(null);
+  const missingLabelsFetchRef = useRef("");
+
+  const mergeDisplayOptions = (apiOptions = [], selectedValues = safeValue, labels = optionLabels) => {
+    const selectedOptions = selectedValues
+      .filter((item) => labels[item])
+      .map((item) => ({
+        search_value: item,
+        display_value: labels[item],
+      }));
+
+    return [...selectedOptions, ...apiOptions].filter(
+      (item, index, array) =>
+        array.findIndex((entry) => entry.search_value === item.search_value) === index
+    );
+  };
 
   const loadOptions = async (searchText = "") => {
     try {
@@ -38,24 +56,21 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
 
       const res = await CoreScripts.getQuerySeacch(formBody);
       const data = Array.isArray(res.data) ? res.data : [];
-      const apiValues = data.map((item) => item.search_value);
-
-      setSearchResults(apiValues);
-      setDisplayOptions(data);
-      setOptionLabels((prev) => ({
-        ...prev,
+      const nextLabels = {
+        ...optionLabels,
         ...data.reduce((acc, item) => {
           acc[item.search_value] = item.display_value;
           return acc;
         }, {}),
-      }));
+      };
 
-      // Refresh display options only when new search results arrive to keep the list stable during interaction
-      // setDisplayOptions([
-      //   ...safeValue,
-      //   ...apiValues
-      //   // ...apiValues.filter((item) => !safeValue.includes(item)),
-      // ]);
+      setSearchResults(data.map((item) => item.search_value));
+      setOptionLabels(nextLabels);
+      setDisplayOptions(mergeDisplayOptions(data, safeValue, nextLabels));
+      advancedSearchCache[cacheKey] = {
+        optionLabels: nextLabels,
+        displayOptions: mergeDisplayOptions(data, safeValue, nextLabels),
+      };
     } catch (error) {
       console.error("Search API error", error);
     } finally {
@@ -64,26 +79,58 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
   };
 
   useEffect(() => {
-    // Clear search results when the field or report context changes, 
-    // but do not load automatically on mount.
+    // Restore cached labels/options for the current field after remounts like submit refreshes.
     setSearchResults([]);
-  }, [fieldName, finalReportId]);
+    setOptionLabels(cachedState.optionLabels || {});
+    setDisplayOptions(cachedState.displayOptions || []);
+    missingLabelsFetchRef.current = "";
+  }, [cacheKey]);
 
   useEffect(() => {
     // FormCreator can remount this field after submit with only search_value(s).
     // If any selected value is missing a label, fetch the option list once to recover display_value.
-    const hasMissingLabels = safeValue.some((item) => !optionLabels[item]);
+    const missingValues = safeValue.filter((item) => !optionLabels[item]);
+    const missingKey = missingValues.join("||");
 
-    if (isSearchQuery && safeValue.length > 0 && hasMissingLabels) {
+    if (!isSearchQuery || safeValue.length === 0 || missingValues.length === 0) {
+      missingLabelsFetchRef.current = "";
+      return;
+    }
+
+    if (missingLabelsFetchRef.current === missingKey) {
+      return;
+    }
+
+    missingLabelsFetchRef.current = missingKey;
+    if (isSearchQuery && safeValue.length > 0) {
       loadOptions("");
     }
   }, [isSearchQuery, safeValue, optionLabels]);
 
+  useEffect(() => {
+    if (!isSearchQuery || safeValue.length === 0) return;
+
+    setDisplayOptions((prev) => {
+      const nextDisplayOptions = mergeDisplayOptions(prev, safeValue, optionLabels);
+      advancedSearchCache[cacheKey] = {
+        optionLabels,
+        displayOptions: nextDisplayOptions,
+      };
+      return nextDisplayOptions;
+    });
+  }, [cacheKey, isSearchQuery, safeValue, optionLabels]);
+
   const handleSearch = (text) => {
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => loadOptions(text), 400);
   };
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
   const toggleValue = (checked, item) => {
     let newValues;
 
@@ -143,6 +190,7 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
       className={`advanced-search-select ${isActive ? "advanced-search-active" : ""}`}
       style={style}
       mode="multiple"
+      showSearch={false}
       value={safeValue}
       options={selectOptions}
       placeholder={caption}
@@ -152,10 +200,7 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
         } else {
           // When closing, re-sort selected items to the top so they are visible next time it opens
           const currentResults = displayOptions.length > 0 ? displayOptions : [];
-          setDisplayOptions([
-            ...currentResults.filter((item) => safeValue.includes(item.search_value)),
-            ...currentResults.filter((item) => !safeValue.includes(item.search_value)),
-          ]);
+          setDisplayOptions(mergeDisplayOptions(currentResults, safeValue, optionLabels));
         }
       }}
       allowClear
@@ -171,6 +216,10 @@ export default function AdvancedSearchSelect({ reportId, onReset, field, value,
           <Search
             placeholder={`Search ${caption}`}
             onChange={(e) => handleSearch(e.target.value)}
+            onKeyDown={(e) => {
+              // Prevent the parent Select from treating backspace as "remove last selected tag".
+              e.stopPropagation();
+            }}
           />
 
           <div className="dropdown-options-list">

package/package.json

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