ui-soxo-bootstrap-core 2.6.39 → 2.6.40-dev.1

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

@@ -2,136 +2,92 @@
  *
  * 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';
 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 +130,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 +144,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 +159,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 +196,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 +217,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 +228,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 +238,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,8 +281,7 @@ function ProfileAvatar() {
       ) : (
         <Avatar shape="square" size="small" icon={<UserOutlined />} />
       )}
-
       {/* {user.name} */}
     </Link>
   );
-}
+}

package/core/lib/components/index.js

@@ -109,7 +109,7 @@ import ConsentComponent from './consent/consent'
 import TaskOverviewLegacy from './../models/process/components/task-overview-legacy/task-overview-legacy'
 
 import ReportingDashboard from '../../modules/reporting/components/reporting-dashboard/reporting-dashboard';
-
+import ReportingTable from '../../modules/reporting/components/reporting-dashboard/reporting-table'
 import ProcessStepsPage from '../../modules/steps/steps'
 export {
 
@@ -198,7 +198,7 @@ export {
   TaskOverviewLegacy,
   // WebCamera,
   ConsentComponent,
-
+ReportingTable,
   ReportingDashboard,
   ProcessStepsPage
 

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -1,26 +1,27 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 
-export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
-  const autoScrollWindow = (monitor) => {
-    const offset = monitor.getClientOffset();
-    if (!offset) return;
-
-    const EDGE = 80;
-    const SPEED = 20;
-
-    const viewportHeight = window.innerHeight;
-
-    // 🔼 scroll UP
-    if (offset.y < EDGE) {
-      window.scrollBy(0, -SPEED);
-    }
+// Walk up the DOM to find the nearest vertically-scrollable ancestor.
+// Returns null when the page (window) is the scroller.
+function getScrollableAncestor(node) {
+  let el = node?.parentElement;
+  while (el) {
+    const { overflowY } = window.getComputedStyle(el);
+    const scrollable = overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
+    if (scrollable && el.scrollHeight > el.clientHeight) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
 
-    // 🔽 scroll DOWN
-    if (offset.y > viewportHeight - EDGE) {
-      window.scrollBy(0, SPEED);
-    }
-  };
+export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
+  // Root DOM node, used to locate the scrollable ancestor at drag time
+  const rootRef = useRef(null);
+  // Latest pointer Y, fed by a document-level `dragover` listener (see effect below)
+  const pointerY = useRef(0);
+  const rafRef = useRef(null);
+  // The scrollable container to auto-scroll (resolved when a drag starts)
+  const scrollContainerRef = useRef(null);
 
   const [{ isDragging }, drag] = useDrag({
     type: 'PANEL',
@@ -31,12 +32,78 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
     }),
   });
 
+  /**
+   * Continuous edge auto-scroll while THIS item is being dragged.
+   *
+   * Driven by a document-level `dragover` listener + requestAnimationFrame loop
+   * rather than the drop target's `hover` handler. `hover` only fires while the
+   * pointer is over a droppable panel and only on movement, so scrolling UP
+   * failed: the top of the viewport is the (non-droppable) header, and holding
+   * the pointer still at an edge produced no events. The rAF loop keeps
+   * scrolling from the last known pointer position regardless of what's beneath.
+   *
+   * The list may scroll inside an overflow container rather than the window, so
+   * we resolve the nearest scrollable ancestor and scroll that (falling back to
+   * the window), computing the edges from the container's own bounds.
+   */
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const EDGE = 80;
+    const SPEED = 20;
+
+    scrollContainerRef.current = getScrollableAncestor(rootRef.current);
+
+    const onDragOver = (e) => {
+      pointerY.current = e.clientY;
+    };
+
+    const tick = () => {
+      const y = pointerY.current;
+
+      if (y > 0) {
+        const container = scrollContainerRef.current;
+
+        if (container) {
+          const rect = container.getBoundingClientRect();
+          // near container top
+          if (y < rect.top + EDGE) {
+            container.scrollTop -= SPEED;
+          }
+          // near container bottom
+          else if (y > rect.bottom - EDGE) {
+            container.scrollTop += SPEED;
+          }
+        } else {
+          const viewportHeight = window.innerHeight;
+          // near viewport top
+          if (y < EDGE) {
+            window.scrollBy(0, -SPEED);
+          }
+          // near viewport bottom
+          else if (y > viewportHeight - EDGE) {
+            window.scrollBy(0, SPEED);
+          }
+        }
+      }
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    window.addEventListener('dragover', onDragOver);
+    rafRef.current = requestAnimationFrame(tick);
+
+    return () => {
+      window.removeEventListener('dragover', onDragOver);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      pointerY.current = 0;
+      scrollContainerRef.current = null;
+    };
+  }, [isDragging]);
+
   const [{ isOver, canDrop }, drop] = useDrop({
     accept: 'PANEL',
     hover: (dragItem, monitor) => {
-      //  THIS FIXES BOTTOM → TOP
-      autoScrollWindow(monitor);
-
       if (dragItem.index === index) return;
 
       if (dragItem.level === level && dragItem.parentId === parentId) {
@@ -85,7 +152,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
   const childZoneBackgroundColor = isOverChild && canDropChild ? '#d4f4dd' : 'transparent';
 
   return (
-    <div style={{ width: '100%', display: 'flex' }}>
+    <div ref={rootRef} style={{ width: '100%', display: 'flex' }}>
       {/* HEADER DROP — reorder only */}
       <div ref={drop}>
         <div