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

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

@@ -17,7 +17,6 @@ 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...',
@@ -61,22 +60,12 @@ 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
 
@@ -156,7 +145,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
 
     await loadMenus(report);
     // fetch license summary
-    fetchSummary();
   }
 
   // const keyMap = {
@@ -318,18 +306,6 @@ 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/lib/components/global-header/global-header.js

@@ -3,9 +3,9 @@
  * Global header component
  */
 
-import React, { useState, useEffect, useContext,useRef } from "react";
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
-import { motion, useAnimation, useReducedMotion } from "framer-motion";
+import { motion, useAnimation, useReducedMotion } from 'framer-motion';
 
 import {
   boxVariants,
@@ -14,55 +14,43 @@ import {
   headerActionsVariants,
   headerClusterVariants,
   headerShellVariants,
-} from "./animations"
+} from './animations';
 
-import { GlobalContext } from "./../../Store";
+import { GlobalContext } from './../../Store';
 
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from 'react-router-dom';
 
-import { Typography, Avatar ,Input} from "antd";
+import { Typography, Avatar, Input } 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 { MenuOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
 
+import { Drawer } from 'antd';
 
+import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 
-import GenericHeader from "../header/generic-header";
+import SideMenu from './../sidemenu/sidemenu';
 
-import {
-  MenuOutlined,
-  UserOutlined,
-  SettingOutlined,
-} 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 './global-header.scss';
 
-import { useTranslation } from "react-i18next";
+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 BorderStyle from 'pdf-lib/cjs/core/annotation/BorderStyle';
 
+import SettingsUtil from '../../../utils/settings.utils';
+import SpotlightSearch from '../spotlight-search/spotlight-search.component';
+import { LicenseAlert } from '../../../components';
+import { MenusAPI } from '../../../models';
 
 const { Title } = Typography;
 
-
-
-
 export default function GlobalHeader({
   loading,
   appSettings,
@@ -75,48 +63,45 @@ export default function GlobalHeader({
   meta = {},
   ...props
 }) {
-
   let location = useLocation();
   // let location = {};
 
-
-
   const { isMobile, user = { locations: [] }, kiosk, state } = useContext(GlobalContext);
 
-
-
   const [visible, setVisible] = useState(false);
 
   // 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 reduceMotion = useReducedMotion();
   const shouldAnimate = !reduceMotion;
-
+  const [licenseData, setLicenseData] = useState({});
+
+  const fetchSummary = async () => {
+    console.log('fetching summary');
+    try {
+      const res = await MenusAPI.getSummary();
+      if (res?.data) {
+        setLicenseData(res?.data);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
   const spotlightRef = useRef();
 
   useEffect(() => {
-
     setTimeout(() => {
-
       i18n.changeLanguage(localStorage.selectedLanguage);
-
-    }, 0)
-
-
+    }, 0);
+    fetchSummary();
   }, []);
- 
-  
-
 
   /**
    * Function to handle toggling of menu
@@ -132,9 +117,6 @@ export default function GlobalHeader({
     //  input to avoid typing
     SettingsUtil.openSpotlightModal();
   };
-  
- 
-  
 
   /**
    * Function to remove toggling on mobile view
@@ -164,85 +146,48 @@ export default function GlobalHeader({
 
   async function animate() {
     if (!shouldAnimate) {
-      boxControls.set("entered");
+      boxControls.set('entered');
       return;
     }
 
-    await boxControls.start("entered");
+    await boxControls.start('entered');
 
     //await boxControls.start("show");
   }
 
   useEffect(() => {
-
     animate();
-  }, [shouldAnimate])
-
-  useEffect(() => {
-
-  }, [state.theme]);
-
- 
-  
-  
-  
+  }, [shouldAnimate]);
 
+  useEffect(() => {}, [state.theme]);
 
-  const motionProps = shouldAnimate ? { initial: "hidden", animate: "visible" } : { initial: false, animate: false };
+  const motionProps = shouldAnimate ? { initial: 'hidden', animate: 'visible' } : { initial: false, animate: false };
 
   return (
-    <div
-      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 }}
-        >
-
-          {!isMobile && !isConnected ? (
-            <motion.div
-              variants={boxVariants}
-              initial={["entering"]}
-              animate={boxControls}
-              className={`sidebar-container ${!collapsed ? "open" : "close"}${kiosk ? "" : "kioskon"}`}
-
-            >
-
-              <SideMenu
-                // isOpen={isOpen}
-                collapsed={collapsed}
-                setCollapsed={setCollapsed}
-                loading={loading}
-                appSettings={appSettings}
-                callback={onClose}
-                modules={modules}
-                history={history}
-              />
-
-            </motion.div>
-          ) : (
-            <Drawer
-              placement="left"
-              onClose={onClose}
-              visible={visible}
-              className="side-drawer-content"
-            >
-              <div
-                className={`sidebar-container ${!collapsed ? "open" : "close"}`}
+    <>
+      <div
+        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 }}
+          >
+            {!isMobile && !isConnected ? (
+              <motion.div
+                variants={boxVariants}
+                initial={['entering']}
+                animate={boxControls}
+                className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
               >
                 <SideMenu
                   // isOpen={isOpen}
@@ -254,180 +199,188 @@ export default function GlobalHeader({
                   modules={modules}
                   history={history}
                 />
-              </div>
-            </Drawer>
-          )}
-        </div>
-
-        {/* Right Section of the Component Loader */}
-        <div className={`right-section ${!collapsed ? "open" : "close"} ${kiosk ? "kioskon" : ""}`} style={{ background: state.theme.colors.bodyBackground }}>
-          {/* For not connected section */}
-          {!isConnected && !kiosk ? (
-
-            <motion.div
-              variants={headerShellVariants}
-              {...motionProps}
-              className={`page-wrapper ${!collapsed ? "open" : "close"}`}
-            // style={{ background: state.theme.colors.headerBg }}
-            >
-              {/*  */}
-              <motion.div className="page-header-name" variants={headerClusterVariants}>
-
-                <ProgressBar isLoading={loading} />
-
-                <span type
-                  onClick={!isMobile ? toggleCollapsed : hideToggle}
-                  className="toggle-box toggle-menu"
-                >
-                  <MenuOutlined />
-
-                </span>
-
-                {/* Back Button */}
-                {location.pathname !== "/" ? (
-                  <span
-                    className="toggle-box"
-                    onClick={() => {
-                      history && history.goBack();
-                    }}
-                  >
-                    <GenericHeader />
-                  </span>
-                ) : null}
-                {/* Back Button Ends */}
-
-
-                {location.pathname !== "/" ? (
-                  <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
-                    {menu.caption}
-                  </h4>
-                ) : null}
               </motion.div>
+            ) : (
+              <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
+                <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
+                  <SideMenu
+                    // isOpen={isOpen}
+                    collapsed={collapsed}
+                    setCollapsed={setCollapsed}
+                    loading={loading}
+                    appSettings={appSettings}
+                    callback={onClose}
+                    modules={modules}
+                    history={history}
+                  />
+                </div>
+              </Drawer>
+            )}
+          </div>
+
+          {/* Right Section of the Component Loader */}
+          <div
+            className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
+            style={{ background: state.theme.colors.bodyBackground }}
+          >
+            {/* For not connected section */}
+            {!isConnected && !kiosk ? (
+              <motion.div
+                variants={headerShellVariants}
+                {...motionProps}
+                className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
+                // style={{ background: state.theme.colors.headerBg }}
+              >
+                {/*  */}
+                <motion.div className="page-header-name" variants={headerClusterVariants}>
+                  <ProgressBar isLoading={loading} />
 
-              {/* Page Menu Actions */}
-              
-              {user.role || user.id ? (
-                <motion.div className="page-menu" variants={headerActionsVariants}>
-                   {/* Search Input in header start */}
-                 { !isMobile && (
-                    <motion.div className="header-action header-action-search" variants={headerActionItemVariants}>
-                    <Input
-                            placeholder="Search (Shift + F)"
-                            prefix={<SearchOutlined />}
-                            onClick={openSearchModal}
-                          
-                            readOnly
-                            style={{ width: 250 }}
-                          />
-                    
-
-                      <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)}  props={props}/>
-                    
-                    </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 ? (
-  <motion.div className="branch-switcher header-action" variants={headerActionItemVariants}>{globalCustomerHeader()}</motion.div>
-):null} 
-                  {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
-
-
-                  {/* Search Option */}
-
-                  {/* <ModalSearch /> */}
-
-                  {/* Search Option Ends */}
-
-                  {/* Configurator Actions */}
-                  {user.isAdmin ? (
-                    <>
-                      {/* Models */}
-                      {menu && menu.id ? (
-                        <motion.div className="header-action" variants={headerActionItemVariants}>
-                          <Link to={`/menus/${menu.id}`}>
-
-                            <Button type="default" size={"small"} icon={<SettingOutlined />}>
+                  <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
+                    <MenuOutlined />
+                  </span>
 
-                            </Button>
-                          </Link>
-                        </motion.div>
-                      ) : null}
-                      {/* Models Ends */}
-                    </>
+                  {/* Back Button */}
+                  {location.pathname !== '/' ? (
+                    <span
+                      className="toggle-box"
+                      onClick={() => {
+                        history && history.goBack();
+                      }}
+                    >
+                      <GenericHeader />
+                    </span>
                   ) : null}
-                  {/* Configurator Actions Ends */}
-
-                 
-
-
+                  {/* Back Button Ends */}
 
+                  {location.pathname !== '/' ? (
+                    <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
+                      {menu.caption}
+                    </h4>
+                  ) : null}
+                </motion.div>
 
-                  {/* Reload Button */}
-
-                  <motion.div className="header-action" variants={headerActionItemVariants}>
-                    <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
+                {/* Page Menu Actions */}
 
-                    </Button>
-                  </motion.div>
+                {user.role || user.id ? (
+                  <motion.div className="page-menu" variants={headerActionsVariants}>
+                    {/* Search Input in header start */}
+                    {!isMobile && (
+                      <motion.div className="header-action header-action-search" variants={headerActionItemVariants}>
+                        <Input
+                          placeholder="Search (Shift + F)"
+                          prefix={<SearchOutlined />}
+                          onClick={openSearchModal}
+                          readOnly
+                          style={{ width: 250 }}
+                        />
+
+                        <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
+                      </motion.div>
+                    )}
+                    {/* Search Input in header start */}
 
-                  {/* Reload Button Ends */}
+                    {/** branchswitcher Option  */}
+                    {/* branch switcher controlled with env for matria and nura */}
+                    {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? (
+                      <motion.div className="branch-switcher header-action" variants={headerActionItemVariants}>
+                        {globalCustomerHeader()}
+                      </motion.div>
+                    ) : null}
+                    {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
+
+                    {/* Search Option */}
+
+                    {/* <ModalSearch /> */}
+
+                    {/* Search Option Ends */}
+
+                    {/* Configurator Actions */}
+                    {user.isAdmin ? (
+                      <>
+                        {/* Models */}
+                        {menu && menu.id ? (
+                          <motion.div className="header-action" variants={headerActionItemVariants}>
+                            <Link to={`/menus/${menu.id}`}>
+                              <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
+                            </Link>
+                          </motion.div>
+                        ) : null}
+                        {/* Models Ends */}
+                      </>
+                    ) : null}
+                    {/* Configurator Actions Ends */}
+
+                    {/* Reload Button */}
 
-                  {/** Switch Languages starts */}
-                  {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? (
                     <motion.div className="header-action" variants={headerActionItemVariants}>
-                      <LanguageSwitcher />
+                      <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
                     </motion.div>
-                  ) : null}
-                  {/** Switch Languages ends */}
 
-                  {/* User Profile */}
-                  <motion.div className="header-profile-wrap header-action" variants={headerActionItemVariants}>
-                    <ProfileAvatar />
-                    <span className="header-profile-name" style={{ color: state.theme.colors.colorText }}> {user.name} </span>
+                    {/* Reload Button Ends */}
+
+                    {/** Switch Languages starts */}
+                    {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? (
+                      <motion.div className="header-action" variants={headerActionItemVariants}>
+                        <LanguageSwitcher />
+                      </motion.div>
+                    ) : null}
+                    {/** Switch Languages ends */}
+
+                    {/* User Profile */}
+                    <motion.div className="header-profile-wrap header-action" variants={headerActionItemVariants}>
+                      <ProfileAvatar />
+                      <span className="header-profile-name" style={{ color: state.theme.colors.colorText }}>
+                        {' '}
+                        {user.name}{' '}
+                      </span>
+                    </motion.div>
+                    {/* User Profile Ends */}
                   </motion.div>
-                  {/* User Profile Ends */}
-                </motion.div>
-              ) : null}
+                ) : null}
 
-              {/* Page Menu Actions Ends */}
-            </motion.div>
-          ) : null}
+                {/* Page Menu Actions Ends */}
+              </motion.div>
+            ) : null}
 
-          {/* The children is rendered */}
-          <motion.div className="page-content-stage" variants={contentRevealVariants} {...motionProps}>
-            {children}
-          </motion.div>
-          {/* The children is rendered */}
+            {/* The children is rendered */}
+            <motion.div className="page-content-stage" variants={contentRevealVariants} {...motionProps}>
+              {children}
+            </motion.div>
+            {/* The children is rendered */}
+          </div>
+          {/* Right Section of the Component Loader Ends */}
         </div>
-        {/* Right Section of the Component Loader Ends */}
       </div>
-    </div>
+      {licenseData && (
+        <div
+          style={{
+            marginTop: '3rem',
+            right: '2%',
+            position: 'absolute',
+            zIndex: 999,
+          }}
+        >
+          <LicenseAlert data={licenseData} />
+        </div>
+      )}
+    </>
   );
 }
 
-
 /**
- * 
- * @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/package.json

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