ui-soxo-bootstrap-core 2.6.1-dev.17 → 2.6.1-dev.18

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

@@ -17,6 +17,7 @@ import ReportingDashboard from '../../modules/reporting/components/reporting-das
 import PropTypes from 'prop-types';
 
 import { MenusAPI, CoreScripts } from '../../models';
+import LicenseAlert from '../license-management/license-alert';
 
 const motivatingMessages = [
   'Setting things up for a great start...',
@@ -59,11 +60,23 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
 
   const [meta, setMeta] = useState({});
   const [loadingMessage, setLoadingMessage] = useState('');
+  // License data state
+  const [licenseData, setLicenseData] = useState({});
 
   // const [reports, setReports] = useState([]);
 
   var config = {};
-
+  //fetch license summary
+  const fetchSummary = async () => {
+    try {
+      const res = await MenusAPI.getSummary();
+      if (res?.data) {
+        setLicenseData(res?.data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
   // Variable decides the control of homepage
   // #TODO This is a temporary fix - Homemage
 
@@ -138,9 +151,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 = {
@@ -159,7 +175,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
    * @param reports
    */
   async function loadMenus(reports) {
-
     setLoader(true);
 
     // setReports(report)
@@ -169,16 +184,12 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     // console.log(result);
 
     if (result && Array.isArray(result.result) && result.result.length) {
-
       // setModules(result.result);
-
       // result.result.map((ele) => {
       //     let languageString = JSON.parse(ele.attributes)
       //     console.log('language_string', languageString);
       //     if (languageString && languageString.languages) {
-
       //         const language = i18n.language;
-
       //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
       //     }
       // })
@@ -189,7 +200,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
       dispatch({ type: 'settings', payload: result.result.settings });
     }
 
-
     // Reports length
     if (reports.length) {
       reportMenus = [
@@ -224,7 +234,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         //If there is no roles assigned to the user
         setAllModules([...coreModules]);
       }
-
     } else {
       //  for nura
       if (result && result.result.menus && reportMenus) {
@@ -233,14 +242,10 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         //If there is no roles assigned to the user
         setAllModules([...coreModules]);
       }
-
-
     }
     setLoader(false);
-
   }
 
-
   /**
    * Load the scripts
    *
@@ -313,6 +318,18 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
           </Card>
         ) : (
           <>
+            {licenseData && (
+              <div
+                style={{
+                  marginTop: '4rem',
+                  right: '2%',
+                  position: 'fixed',
+                  zIndex: 999,
+                }}
+              >
+                <LicenseAlert data={licenseData} />
+              </div>
+            )}
             {/* <Switch> */}
 
             {/* Homepage */}

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 === 1) {
+      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/animations.js

@@ -1,18 +1,92 @@
 export const boxVariants = {
-    entering: { x: -50, opacity: 0},
+    entering: { x: -24, opacity: 0, scale: 0.985 },
     entered: {
         x: 0,
         opacity: 1,
+        scale: 1,
         transition: {
             x: {
-                duration: 0.5,
+                duration: 0.45,
                 ease: [.62,.28,.23,.99]
             },
             opacity: {
-                duration: 0.5,
+                duration: 0.35,
                 ease: [.62,.28,.23,.99]
+            },
+            scale: {
+                duration: 0.45,
+                ease: [.22,1,.36,1]
             }
         },
         
     }
-  }
+  };
+
+export const headerShellVariants = {
+  hidden: {
+    y: -14,
+    opacity: 0,
+    scale: 0.995,
+    filter: 'blur(6px)',
+  },
+  visible: {
+    y: 0,
+    opacity: 1,
+    scale: 1,
+    filter: 'blur(0px)',
+    transition: {
+      duration: 0.45,
+      ease: [.22,1,.36,1],
+      when: 'beforeChildren',
+      staggerChildren: 0.045,
+    },
+  },
+};
+
+export const headerClusterVariants = {
+  hidden: { opacity: 0, x: -12 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.32,
+      ease: [.22,1,.36,1],
+    },
+  },
+};
+
+export const headerActionsVariants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.05,
+      delayChildren: 0.08,
+    },
+  },
+};
+
+export const headerActionItemVariants = {
+  hidden: { opacity: 0, y: -8, scale: 0.98 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.28,
+      ease: [.22,1,.36,1],
+    },
+  },
+};
+
+export const contentRevealVariants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.35,
+      ease: [.22,1,.36,1],
+      delay: 0.08,
+    },
+  },
+};

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

@@ -5,10 +5,15 @@
 
 import React, { useState, useEffect, useContext,useRef } from "react";
 
-import { animationControls, motion, useAnimation } from "framer-motion";
+import { motion, useAnimation, useReducedMotion } from "framer-motion";
 
 import {
   boxVariants,
+  contentRevealVariants,
+  headerActionItemVariants,
+  headerActionsVariants,
+  headerClusterVariants,
+  headerShellVariants,
 } from "./animations"
 
 import { GlobalContext } from "./../../Store";
@@ -94,6 +99,8 @@ export default function GlobalHeader({
   const { globalCustomerHeader = () => { } } = appSettings;
 
   const { t, i18n } = useTranslation();
+  const reduceMotion = useReducedMotion();
+  const shouldAnimate = !reduceMotion;
 
   const spotlightRef = useRef();
 
@@ -156,6 +163,11 @@ export default function GlobalHeader({
   const boxControls = useAnimation();
 
   async function animate() {
+    if (!shouldAnimate) {
+      boxControls.set("entered");
+      return;
+    }
+
     await boxControls.start("entered");
 
     //await boxControls.start("show");
@@ -164,7 +176,7 @@ export default function GlobalHeader({
   useEffect(() => {
 
     animate();
-  }, [])
+  }, [shouldAnimate])
 
   useEffect(() => {
 
@@ -176,6 +188,8 @@ export default function GlobalHeader({
   
 
 
+  const motionProps = shouldAnimate ? { initial: "hidden", animate: "visible" } : { initial: false, animate: false };
+
   return (
     <div
       className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? "connected" : ""
@@ -250,11 +264,14 @@ export default function GlobalHeader({
           {/* For not connected section */}
           {!isConnected && !kiosk ? (
 
-            <div className={`page-wrapper ${!collapsed ? "open" : "close"}`}
+            <motion.div
+              variants={headerShellVariants}
+              {...motionProps}
+              className={`page-wrapper ${!collapsed ? "open" : "close"}`}
             // style={{ background: state.theme.colors.headerBg }}
             >
               {/*  */}
-              <div className="page-header-name">
+              <motion.div className="page-header-name" variants={headerClusterVariants}>
 
                 <ProgressBar isLoading={loading} />
 
@@ -285,16 +302,15 @@ export default function GlobalHeader({
                     {menu.caption}
                   </h4>
                 ) : null}
-              </div>
+              </motion.div>
 
               {/* Page Menu Actions */}
               
               {user.role || user.id ? (
-                <div className="page-menu">
+                <motion.div className="page-menu" variants={headerActionsVariants}>
                    {/* Search Input in header start */}
                  { !isMobile && (
-                              
-                    <div>
+                    <motion.div className="header-action header-action-search" variants={headerActionItemVariants}>
                     <Input
                             placeholder="Search (Shift + F)"
                             prefix={<SearchOutlined />}
@@ -307,14 +323,14 @@ export default function GlobalHeader({
 
                       <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)}  props={props}/>
                     
-                    </div>
+                    </motion.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>
+  <motion.div className="branch-switcher header-action" variants={headerActionItemVariants}>{globalCustomerHeader()}</motion.div>
 ):null} 
                   {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
 
@@ -330,12 +346,14 @@ export default function GlobalHeader({
                     <>
                       {/* Models */}
                       {menu && menu.id ? (
-                        <Link to={`/menus/${menu.id}`}>
+                        <motion.div className="header-action" variants={headerActionItemVariants}>
+                          <Link to={`/menus/${menu.id}`}>
 
-                          <Button type="default" size={"small"} icon={<SettingOutlined />}>
+                            <Button type="default" size={"small"} icon={<SettingOutlined />}>
 
-                          </Button>
-                        </Link>
+                            </Button>
+                          </Link>
+                        </motion.div>
                       ) : null}
                       {/* Models Ends */}
                     </>
@@ -349,31 +367,39 @@ export default function GlobalHeader({
 
                   {/* Reload Button */}
 
-                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
+                  <motion.div className="header-action" variants={headerActionItemVariants}>
+                    <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
 
-                  </Button>
+                    </Button>
+                  </motion.div>
 
                   {/* Reload Button Ends */}
 
                   {/** Switch Languages starts */}
-                  {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
+                  {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? (
+                    <motion.div className="header-action" variants={headerActionItemVariants}>
+                      <LanguageSwitcher />
+                    </motion.div>
+                  ) : null}
                   {/** Switch Languages ends */}
 
                   {/* User Profile */}
-                  <div style={{ padding: "10px" }}>
+                  <motion.div className="header-profile-wrap header-action" variants={headerActionItemVariants}>
                     <ProfileAvatar />
-                    <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
-                  </div>
+                    <span className="header-profile-name" style={{ color: state.theme.colors.colorText }}> {user.name} </span>
+                  </motion.div>
                   {/* User Profile Ends */}
-                </div>
+                </motion.div>
               ) : null}
 
               {/* Page Menu Actions Ends */}
-            </div>
+            </motion.div>
           ) : null}
 
           {/* The children is rendered */}
-          {children}
+          <motion.div className="page-content-stage" variants={contentRevealVariants} {...motionProps}>
+            {children}
+          </motion.div>
           {/* The children is rendered */}
         </div>
         {/* Right Section of the Component Loader Ends */}