ui-soxo-bootstrap-core 2.6.15 → 2.6.16

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { Route, Switch } from 'react-router-dom';
 
@@ -18,13 +18,33 @@ import PropTypes from 'prop-types';
 
 import { MenusAPI, CoreScripts } from '../../models';
 
+const motivatingMessages = [
+  'Setting things up for a great start...',
+  'Good things are loading. Stay with us.',
+  'Almost there. Preparing your workspace.',
+  'You are one moment away from your dashboard.',
+  'Getting everything ready for you.',
+  'Great care takes a second. Loading now.',
+];
+
+function getRandomMessage(previousMessage = '') {
+  const options = motivatingMessages.filter((message) => message !== previousMessage);
+
+  if (!options.length) {
+    return motivatingMessages[0];
+  }
+
+  const randomIndex = Math.floor(Math.random() * options.length);
+  return options[randomIndex];
+}
+
 /**
  * Landing API
  *
  * @param {*} param0
  * @returns
  */
-export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, ...props }) {
+export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, transitionPending = false, onHomeReady, ...props }) {
   const [loader, setLoader] = useState(false);
 
   // const [modules, setModules] = useState([]);
@@ -34,8 +54,11 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
   const { dispatch, user = {} } = useContext(GlobalContext);
 
   const [allModules, setAllModules] = useState();
+  const homeReadyNotifiedRef = useRef(false);
+  const messageIntervalRef = useRef(null);
 
   const [meta, setMeta] = useState({});
+  const [loadingMessage, setLoadingMessage] = useState('');
 
   // const [reports, setReports] = useState([]);
 
@@ -70,6 +93,46 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     initializeUserMenus();
   }, []);
 
+  useEffect(() => {
+    if (!transitionPending) {
+      homeReadyNotifiedRef.current = false;
+      return;
+    }
+
+    if (!loader && allModules && !homeReadyNotifiedRef.current) {
+      homeReadyNotifiedRef.current = true;
+      if (typeof onHomeReady === 'function') {
+        onHomeReady();
+      }
+    }
+  }, [transitionPending, loader, allModules, onHomeReady]);
+
+  useEffect(() => {
+    if (!loader) {
+      setLoadingMessage('');
+
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+
+      return;
+    }
+
+    setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+
+    messageIntervalRef.current = setInterval(() => {
+      setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+    }, 2200);
+
+    return () => {
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+    };
+  }, [loader]);
+
   /**
    * Initialize the user menus
    */
@@ -245,6 +308,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
           <Card className="skeleton-card">
             <div className="skeleton-wrapper">
               <Skeleton paragraph={{ rows: 4 }} />
+              <p className="motivating-text">{loadingMessage}</p>
             </div>
           </Card>
         ) : (

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

@@ -11,9 +11,31 @@
     }
 
     .skeleton-wrapper {
+        .motivating-text {
+            margin-top: 14px;
+            margin-bottom: 4px;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+            color: #5e6d86;
+            font-weight: 500;
+            animation: skeletonTextFade 0.4s ease-in-out;
+        }
     }
 
     .wrapper-loader {
         margin: 20px;
     }
 }
+
+@keyframes skeletonTextFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/core/modules/steps/action-buttons.js

@@ -13,6 +13,8 @@ export default function ActionButtons({
   steps,
   activeStep,
   isStepCompleted,
+  isFullscreen,
+  onToggleFullscreen,
   renderDynamicComponent,
   handlePrevious,
   handleNext,
@@ -35,6 +37,10 @@ export default function ActionButtons({
           Back
         </Button>
 
+        <Button type="default" onClick={onToggleFullscreen}>
+          {isFullscreen ? 'Exit Full Screen' : 'Switch to Full Screen'}
+        </Button>
+
         {/* Skip button */}
         {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
           <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>

package/core/modules/steps/action-buttons.scss

@@ -11,6 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
+
   padding-bottom: 8px;
 }
 
@@ -27,7 +28,6 @@
   border-top: 1px solid #f0f0f0;
   box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
 
-
   width: 61%;
   padding: 10px;
   position: fixed;
@@ -37,9 +37,15 @@
   display: flex;
   border-radius: 4px;
   box-shadow: -1px -4px 10px 2px #f7f7f76e;
-
+  flex-wrap: wrap;
 
   .ant-btn {
     border-radius: 4px;
   }
-}
+}
+
+.process-steps-page.is-fullscreen .action-buttons-container {
+  width: calc(100% - 24px);
+  left: 12px;
+  right: 12px;
+}

package/core/modules/steps/steps.js

@@ -8,7 +8,7 @@
  * - Handles process submission and optional chaining to the next process.
  * - Provides a collapsible timeline view and action controls.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Row, Col, Empty } from 'antd';
 import { Card } from './../../lib';
 import * as genericComponents from './../../lib';
@@ -36,8 +36,11 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [timelineCollapsed, setTimelineCollapsed] = useState(false);
   const [showExternalWindow, setShowExternalWindow] = useState(false);
   const [externalWin, setExternalWin] = useState(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const processStepsRef = useRef(null);
 
   const urlParams = Location.search();
+  const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
   let processId = urlParams.processId;
   const [currentProcessId, setCurrentProcessId] = useState(processId);
   // Load process details based on the current process ID
@@ -271,13 +274,49 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     };
   }, [activeStep, steps, externalWin]);
 
+  useEffect(() => {
+    const syncFullscreenState = () => {
+      setIsFullscreen(document.fullscreenElement === processStepsRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', syncFullscreenState);
+    syncFullscreenState();
+
+    return () => {
+      document.removeEventListener('fullscreenchange', syncFullscreenState);
+    };
+  }, []);
+
+  const handleToggleFullscreen = async () => {
+    const element = processStepsRef.current;
+    if (!element) return;
+
+    try {
+      if (document.fullscreenElement === element) {
+        if (document.exitFullscreen) {
+          await document.exitFullscreen();
+        }
+        return;
+      }
+
+      if (element.requestFullscreen) {
+        await element.requestFullscreen();
+      }
+    } catch (error) {
+      console.error('Unable to toggle full screen for steps page:', error);
+    }
+  };
+
   /**
    * Renders the main process UI including timeline, step details,
    * and action buttons. This content is reused in both normal view
    * and external window view.
    */
-  const renderContent = () => (
-    <div className="process-steps-page">
+  const renderContent = (attachRef = true) => (
+    <div
+      ref={attachRef ? processStepsRef : null}
+      className={`process-steps-page ${isConsultationMode ? 'consultation-mode' : ''} ${isFullscreen ? 'is-fullscreen' : ''}`}
+    >
       <Card className="process-steps-card">
         <Row gutter={20} className="process-steps-row" align="stretch">
           <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6} className="process-steps-timeline-col">
@@ -302,6 +341,8 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               steps={steps}
               activeStep={activeStep}
               isStepCompleted={isStepCompleted}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={handleToggleFullscreen}
               renderDynamicComponent={DynamicComponent}
               handlePrevious={handlePrevious}
               handleNext={handleNext}
@@ -335,9 +376,9 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
           width={props.ExternalWindowWidth || 1000}
           height={props.ExternalWindowHeight || 1000}
         >
-          {renderContent()}
+          {renderContent(false)}
         </ExternalWindow>
-        {renderContent()}
+        {renderContent(true)}
       </>
     );
   }

package/core/modules/steps/steps.scss

@@ -3,6 +3,25 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
+  &.consultation-mode {
+    background: linear-gradient(180deg, #c8d2d6 0%, #d5d7d1 21%, #d9d8c6 40%, #c6cebe 58%, #a8c0c0 71%, #6e9fbb 84%, #367495 93%, #0a4d6e 100%);
+    padding: 12px;
+  }
+
+  &.is-fullscreen {
+    padding: 12px;
+  }
+}
+
+.process-steps-page.consultation-mode .process-steps-card {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.process-steps-page.consultation-mode .process-steps-card > .ant-card-body {
+  padding: 10px;
 }
 
 .process-steps-card {
@@ -49,11 +68,11 @@
   flex: 1;
   max-height: 100%;
   overflow: hidden;
-  background: #fff;
-  border: 1px solid #e5ebf3;
-  border-radius: 14px;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
-  padding: 14px 16px;
+  // background: #fff;
+  // border: 1px solid #e5ebf3;
+  // border-radius: 14px;
+  // box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  // padding: 14px 16px;
   position: relative;
   z-index: 2;
 }
@@ -84,8 +103,18 @@
   height: 100%;
   border: none !important;
   border-radius: 12px;
-  background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
-  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), inset 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 -2px 8px rgba(15, 23, 42, 0.04);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 15%, var(--surface-color)), var(--surface-color));
+
+  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
+
+  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 20%, transparent);
+
+  transition: all 0.3s ease;
+  // background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
+  // box-shadow:
+  // inset 0 1px 2px rgba(255, 255, 255, 0.8),
+  // inset 0 8px 16px rgba(15, 23, 42, 0.08),
+  // inset 0 -2px 8px rgba(15, 23, 42, 0.04);
 }
 
 .timeline-card .ant-card-body {
@@ -108,6 +137,35 @@
   transition: all 0.3s ease;
   height: 100%;
   overflow-y: auto;
+
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.25);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.4);
+  }
   padding-right: 4px;
 }
 
@@ -119,7 +177,10 @@
   border-radius: 10px;
   background: #fff;
   padding: 10px 12px;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 .timeline-step:hover {
@@ -233,7 +294,11 @@
   color: #1f3f74;
   box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
   z-index: 40;
-  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 
   &:hover {
     background: #f0f6ff;
@@ -265,9 +330,8 @@
    MOBILE & TABLET VIEW FIXES
    ============================ */
 
-   
-
-@media (max-width: 992px) {   // iPad & tablets
+@media (max-width: 992px) {
+  // iPad & tablets
   .process-steps-page,
   .process-steps-row {
     min-height: auto;
@@ -275,6 +339,10 @@
     overflow: visible;
   }
 
+  .process-steps-page.consultation-mode {
+    padding: 8px;
+  }
+
   .process-steps-card,
   .process-steps-card .ant-card-body,
   .process-steps-content-col {
@@ -327,7 +395,8 @@
   }
 }
 
-@media (max-width: 768px) {   // mobile screens
+@media (max-width: 768px) {
+  // mobile screens
   .timeline-sidebar {
     gap: 8px;
   }

package/package.json

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