ui-soxo-bootstrap-core 2.6.42 → 2.6.44

package/core/components/index.js

@@ -1,7 +1,3 @@
-
-
-
-
 import LandingAPI from './landing-api/landing-api';
 
 import ExtraInfoDetail from './extra-info/extra-info-details';
@@ -11,11 +7,6 @@ import RootApplicationAPI from './root-application-api/root-application-api';
 import { HomePageAPI } from '../modules';
 
 import { ExternalWindow } from './external-window/external-window';
+import LicenseAlert from './license-management/license-alert';
 
-export {
-    LandingAPI,
-    RootApplicationAPI,
-    ExtraInfoDetail,
-    HomePageAPI,
-    ExternalWindow
-}
+export { LandingAPI, RootApplicationAPI, ExtraInfoDetail, HomePageAPI, ExternalWindow, LicenseAlert };

package/core/components/landing-api/landing-api.js

@@ -59,11 +59,29 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
 
   const [meta, setMeta] = useState({});
   const [loadingMessage, setLoadingMessage] = useState('');
+  const [licenseData, setLicenseData] = useState(null);
+  const [licAlert, setLicAlert] = useState(false);
 
   // const [reports, setReports] = useState([]);
 
   var config = {};
 
+  //fetch license summary
+  const fetchSummary = async () => {
+    try {
+      const res = await MenusAPI.getSummary();
+      if (res?.data) {
+        setLicenseData(res?.data);
+        setLicAlert(true);
+      } else {
+        setLicenseData(null);
+        setLicAlert(false);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   // Variable decides the control of homepage
   // #TODO This is a temporary fix - Homemage
 
@@ -138,9 +156,12 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
    */
   async function initializeUserMenus() {
     // need to find what implement, with a login who has the respective value ("wug_custreportids")
+
     const report = await loadScripts(user);
 
     await loadMenus(report);
+    // fetch license summary
+    fetchSummary();
   }
 
   // const keyMap = {
@@ -292,6 +313,8 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         modules={allModules}
         user={user}
         history={history}
+        licenseData={licenseData}
+        licAlert={licAlert}
       >
         {loader ? (
           <Card className="skeleton-card">

package/core/components/license-management/license-alert.js

@@ -0,0 +1,97 @@
+import { Alert } from 'antd';
+import React, { useState, useEffect } from 'react';
+
+export default function LicenseAlert({ data }) {
+  // setting visibility of alert based on license status
+  const [visible, setVisible] = useState(true);
+  // resolve alert configuration based on license data
+  const alertConfig = resolveLicenseAlert(data);
+  // auto-hide alert after 10 seconds or when data changes
+  useEffect(() => {
+    if (alertConfig) {
+      setVisible(true);
+
+      const timer = setTimeout(() => {
+        setVisible(false);
+      }, 10000); // 10 seconds
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [data]);
+  // if no alert configuration or not visible, render nothing
+  if (!alertConfig || !visible) return null;
+
+  return (
+    // render the alert with appropriate type, message, and description
+    <Alert
+      type={alertConfig.type}
+      message={alertConfig.message}
+      description={alertConfig.description}
+      showIcon
+      closable
+      onClose={() => setVisible(false)}
+    />
+  );
+}
+// function to determine alert configuration based on license data
+function resolveLicenseAlert(data) {
+  if (!data) return null;
+  // destructure relevant fields from license data
+  const { status, expiresInDays, isExpiringSoon, gracePeriod } = data;
+
+  // ===== NOT INSTALLED =====
+  if (status === 'NOT_INSTALLED') {
+    return {
+      type: 'error',
+      message: 'License not found',
+      description: 'Please install a valid license to continue.',
+    };
+  }
+
+  // ===== GRACE PERIOD =====
+  if (gracePeriod) {
+    return {
+      type: 'warning',
+      message: 'Grace period mode',
+      description: 'License expired. Running in read-only mode.',
+    };
+  }
+
+  // ===== EXPIRING SOON =====
+  if (status === 'ACTIVE' && isExpiringSoon) {
+    let descriptionText = '';
+    // customize message based on how soon the license is expiring
+    if (expiresInDays === 0) {
+      descriptionText = 'Your license will expire today. Please renew immediately.';
+    } else {
+      descriptionText = `Your license will expire in ${expiresInDays} days. Please plan for renewal.`;
+    }
+
+    return {
+      type: 'warning',
+      message: 'License expiring soon',
+      description: descriptionText,
+    };
+  }
+
+  // ===== NOT INSTALLED =====
+  if (status === 'NOT_INSTALLED') {
+    return {
+      type: 'error',
+      message: 'License not found',
+      description: 'Please install a valid license to continue.',
+    };
+  }
+  // =====EXPIRED=====
+  if (status === 'EXPIRED') {
+    return {
+      type: 'error',
+      message: 'License expired',
+      description: 'Your license has expired. Please renew or install a new license.',
+    };
+  }
+
+  return null;
+}

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

@@ -2,136 +2,93 @@
  *
  * Global header component
  */
-
 import { useContext, useEffect, useRef, useState } from 'react';
-
 import { motion, useAnimation } from 'framer-motion';
-
 import { boxVariants } from './animations';
-
 import { GlobalContext, GlobalProvider } from './../../Store';
-
 import { Link, useLocation } from 'react-router-dom';
-
 import { Avatar, Input, Tooltip, Typography } from 'antd';
-
 import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
-
 import { Button } from '../../elements';
-
 import GenericHeader from '../header/generic-header';
-
-
 import { CustomerServiceOutlined, MenuOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
-
 import { Drawer } from 'antd';
-
 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 SettingsUtil from '../../../utils/settings.utils';
 import SpotlightSearch from '../spotlight-search/spotlight-search.component';
+import LicenseAlert from '../../../components/license-management/license-alert';
 
 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 = {},  licAlert,
+  licenseData,...props }) {
   let location = useLocation();
   // let location = {};
-
   const { isMobile, user = { locations: [] }, kiosk, state, settings } = useContext(GlobalContext);
-
   const [visible, setVisible] = useState(false);
   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 { t, i18n } = useTranslation();
-
   const spotlightRef = useRef();
-
   useEffect(() => {
     setTimeout(() => {
       i18n.changeLanguage(localStorage.selectedLanguage);
     }, 0);
   }, []);
-
   /**
    * Function to handle toggling of menu
    */
-
   const toggleCollapsed = () => {
     setVisible(true);
-
     collapsed === true ? setCollapsed(false) : setCollapsed(true);
   };
-
   const openSearchModal = () => {
     //  input to avoid typing
     SettingsUtil.openSpotlightModal();
   };
-
   /**
    * Function to remove toggling on mobile view
    */
   const hideToggle = () => {
     setVisible(true);
-
     setCollapsed(false);
   };
-
   /**
    * onClose Function
    */
-
   const onClose = () => {
     setVisible(false);
   };
-
   // const { model = {} } = menu;
-
   const { model: BaseModel = {}, menu = {} } = meta;
-
   const { model = {} } = menu;
-
   //Animations//
   const boxControls = useAnimation();
-
   async function animate() {
     await boxControls.start('entered');
-
     //await boxControls.start("show");
   }
-
   useEffect(() => {
     animate();
   }, []);
-
   useEffect(() => {}, [state.theme]);
-
   return (
+    <>
     <div
       className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
       style={{
         // background: state.theme.colors.bodyBackground,
-
-        height: 10,
+        height: auto,
       }}
     >
       {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
-
       <div className="layout-content">
         <div
           //whileHover="hover"
@@ -174,7 +131,6 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
             </Drawer>
           )}
         </div>
-
         {/* Right Section of the Component Loader */}
         <div
           className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
@@ -189,11 +145,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
               {/*  */}
               <div className="page-header-name">
                 <ProgressBar isLoading={loading} />
-
                 <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
                   <MenuOutlined />
                 </span>
-
                 {/* Back Button */}
                 {location.pathname !== '/' ? (
                   <span
@@ -206,39 +160,30 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                   </span>
                 ) : null}
                 {/* Back Button Ends */}
-
                 {location.pathname !== '/' ? (
                   <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
                     {menu.caption}
                   </h4>
                 ) : null}
               </div>
-
               {/* Page Menu Actions */}
-
               {user.role || user.id ? (
                 <div className="page-menu">
                   {/* Search Input in header start */}
                   {!isMobile && (
                     <div>
                       <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}
                   {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
-
                   {/* Search Option */}
-
                   {/* <ModalSearch /> */}
-
                   {/* Search Option Ends */}
-
                   {/* Configurator Actions */}
                   {user.isAdmin ? (
                     <>
@@ -252,13 +197,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                     </>
                   ) : null}
                   {/* Configurator Actions Ends */}
-
                   {/* Reload Button */}
-
                   <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
-
                   {/* Reload Button Ends */}
-
                   {/* Help-desk-btn */}
                   {helpDeskSetting?.showSupportBtn
                     ? (() => {
@@ -277,11 +218,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                         );
                       })()
                     : null}
-
                   {/** Switch Languages starts */}
                   {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
                   {/** Switch Languages ends */}
-
                   {/* User Profile */}
                   <div style={{ padding: '10px' }}>
                     <ProfileAvatar />
@@ -290,11 +229,9 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
                   {/* User Profile Ends */}
                 </div>
               ) : null}
-
               {/* Page Menu Actions Ends */}
             </div>
           ) : null}
-
           {/* The children is rendered */}
           {children}
           {/* The children is rendered */}
@@ -302,32 +239,40 @@ function GlobalHeaderContent({ loading, appSettings, children, isConnected, hist
         {/* Right Section of the Component Loader Ends */}
       </div>
     </div>
+     {licAlert && licenseData && (
+        <div
+          style={{
+            top: 0,
+            marginTop: '3rem',
+            right: '2%',
+            position: 'absolute',
+            zIndex: 1008,
+          }}
+        >
+          <LicenseAlert data={licenseData} />
+        </div>
+      )}
+      </>
   );
 }
-
 export default function GlobalHeader(props) {
   const context = useContext(GlobalContext);
-
   if (context.dispatch) {
     return <GlobalHeaderContent {...props} />;
   }
-
   return (
     <GlobalProvider {...props} appSettings={props.appSettings}>
       <GlobalHeaderContent {...props} />
     </GlobalProvider>
   );
 }
-
 /**
  *
  * @returns
  */
 function ProfileAvatar() {
   const { user = { locations: [] } } = useContext(GlobalContext);
-
   useEffect(() => {}, []);
-
   return (
     <Link className="profile-avatar" to="/profile">
       {user.photograph ? (
@@ -337,7 +282,6 @@ function ProfileAvatar() {
       ) : (
         <Avatar shape="square" size="small" icon={<UserOutlined />} />
       )}
-
       {/* {user.name} */}
     </Link>
   );

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

@@ -123,7 +123,9 @@
   .right-section {
     margin-top: 0px;
     width: 100%;
-    overflow-x: scroll;
+    /* `auto` so the horizontal scrollbar only appears when content genuinely
+       overflows — `scroll` forced it to show permanently on every page. */
+    overflow-x: auto;
     position: relative;
     padding: 15px;
     margin-left: calc(var(--sidemenu-width, 211px) + 1px);

package/core/models/menus/menus.js

@@ -305,6 +305,12 @@ class MenusAPI extends Base {
       // }
     ];
   };
+  // license summary api call
+  getSummary = () => {
+    return ApiUtils.get({
+      url: 'license/summary',
+    });
+  };
 }
 
 export default MenusAPI;

package/core/modules/steps/steps.js

@@ -11,7 +11,7 @@
  * - Renders a single active step view with compact breadcrumb controls.
  */
 import { ArrowLeftOutlined, ArrowRightOutlined, CompressOutlined, ExpandOutlined, SoundOutlined } from '@ant-design/icons';
-import { Empty, Select, Spin, message } from 'antd';
+import { Empty, Select, Skeleton, message } from 'antd';
 import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { ExternalWindow } from '../../components';
@@ -1507,7 +1507,9 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                   {/* <div className="steps-chat-step-component"> */}
                     {loading ? (
                       <div className="steps-chat-loading">
-                        <Spin />
+                        <div className="steps-chat-loading__card">
+                          <Skeleton active title={{ width: '32%' }} paragraph={{ rows: 6, width: ['90%', '82%', '86%', '70%', '78%', '60%'] }} />
+                        </div>
                       </div>
                     ) : null}
                     {!loading ? renderDynamicStep() : null}

package/core/modules/steps/steps.scss

@@ -3,7 +3,13 @@
 .process-steps-page {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  /* The app shell's `.right-section` is `height: 100vh` with a fixed 56px header
+     (`.page-wrapper`) on top of it plus 15px padding. A plain `height: 100%`
+     makes this page a full 100vh — so its bottom runs past the viewport under the
+     header and forces a page scroll in normal view. Bound it to the space that is
+     actually visible below the header instead. (In full screen the promoted
+     `.steps-viewport` is 100vh via the Fullscreen API, so this doesn't apply.) */
+  height: calc(100vh - 86px);
   min-height: 0;
   width: 100%;
   max-width: 100%;
@@ -171,7 +177,7 @@
   /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
      Matches the onboarding reference without the frosted-glass treatment. */
   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
-  background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
+  background: linear-gradient(180deg, #a7c2c6 100%, #eff3e3 100%);
 }
 
 .steps-breadcrumb-strip {
@@ -179,8 +185,12 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 52px;
+  /* `safe center` keeps the steps centered when they fit, but falls back to
+     start-aligned when there are too many to fit (>6). Plain `center` would clip
+     BOTH ends on overflow — cutting off the active step's label (e.g. "Guest
+     Details") and making it unreachable even though the strip scrolls. */
+  justify-content: safe center;
+  gap: clamp(28px, 3vw, 52px);
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
@@ -332,13 +342,14 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-/* Thin connecting line drawn into the gap toward the next step. */
+/* Thin connecting line drawn into the gap toward the next step.
+   Width matches the strip's gap so it spans the space without overhanging. */
 .steps-breadcrumb-item:not(:last-child)::after {
   content: '';
   position: absolute;
   left: 100%;
   top: 50%;
-  width: 52px;
+  width: clamp(28px, 3vw, 52px);
   height: 1px;
   background: rgba(37, 58, 91, 0.2);
   transform: translateY(-50%);
@@ -826,10 +837,29 @@
 }
 
 .steps-chat-loading {
+  flex: 1 1 auto;
   min-height: 120px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Frosted skeleton card that fills the stage while a step loads (replaces the
+   old centered spinner) — matches the soft gradient step surfaces. */
+.steps-chat-loading__card {
+  width: 100%;
+  max-width: 1100px;
+  align-self: stretch;
+  padding: 28px 32px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 2px 10px rgba(20, 50, 64, 0.05);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 /* ── Narration bar (hidden by default via NARRATION_CONTROLS_ENABLED) ── */

package/package.json

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