ui-soxo-bootstrap-core 2.6.15 → 2.6.17

package/DEVELOPER_GUIDE.md

@@ -0,0 +1,294 @@
+# 📦 NPM Release Workflow — Task-Based Development → Develop → Master
+
+This guide describes the complete workflow for publishing **task-based development builds** and **stable releases** using GitHub Actions, Git tags, and npm versioning.
+
+Incorrect versioning or incorrect tags will break the publish pipeline — follow the process exactly.
+
+---
+
+# 📘 Table of Contents
+
+- Overview
+- Branch Strategy
+- Task Branch Workflow
+- Versioning Rules
+- Development Release Workflow (`develop`)
+- Promotion Workflow (Dev → Master)
+- Publishing via GitHub Release UI
+- How GitHub Action Detects Release Type
+- Summary Table
+- Common Mistakes & Fixes
+
+---
+
+# 🧩 Overview
+
+We maintain two release channels:
+
+| Channel             | Branch  | Tag            | Purpose             |
+| ------------------- | ------- | -------------- | ------------------- |
+| Stable (`latest`)   | master  | `vX.Y.Z`       | Production release  |
+| Development (`dev`) | develop | `vX.Y.Z-dev.N` | QA/internal testing |
+
+Releases are triggered using Git tags:
+
+```
+npm version
+```
+
+---
+
+# 🌿 Branch Strategy
+
+## `master`
+
+- Production-ready code
+- Publishes **stable** builds
+- Versions never include a `dev` suffix
+
+## `develop`
+
+- Used for QA/internal testing
+- Publishes **development** builds
+- Versions always include `-dev.N`
+
+## Task Branches
+
+- Create from `master`
+- Naming: `task/<JIRA-ID>-<description>`
+- After completing work, merge into `develop`
+
+---
+
+# 🏗️ Task Branch Workflow
+
+### 1. Create a task branch
+
+```bash
+git checkout master
+git pull origin master
+git checkout -b task/<JIRA-ID>-<description>
+```
+
+### 2. Work on the task
+
+```bash
+git add .
+git commit -m "TASK-123: Implement XYZ"
+```
+
+### 3. Merge into develop
+
+```bash
+git checkout develop
+git pull origin develop
+git merge task/<JIRA-ID>-<description>
+```
+
+---
+
+# 🔧 Versioning Rules
+
+## Development Versions
+
+```
+X.Y.Z-dev.N
+```
+
+Example:
+
+```
+2.4.30-dev.0
+```
+
+## Stable Versions
+
+```
+X.Y.Z
+```
+
+## Rules
+
+- Each version must be unique
+- Dev versions do **not** convert into stable versions
+- Git tag must exactly match `package.json` version
+
+---
+
+# 🟦 Development Release Workflow (`develop`)
+
+### 1. Switch to develop
+
+```bash
+git checkout develop
+git pull origin develop
+```
+
+### 2. Create a new development version
+
+```bash
+npm version prerelease --preid=dev
+```
+
+### 3. Push commit + tag
+
+```bash
+git push --follow-tags
+```
+
+### 4. GitHub Action publishes dev build
+
+```
+npm publish --tag dev
+```
+
+### 5. Install the dev build
+
+```bash
+npm install ui-soxo-bootstrap-core@dev
+```
+
+---
+
+# 🟩 Promotion Workflow (Dev → Master)
+
+### 1. Switch to master
+
+```bash
+git checkout master
+git pull origin master
+```
+
+### 2. Merge develop into master
+
+```bash
+git merge develop
+```
+
+### 3. Bump the stable version
+
+```bash
+npm version patch
+# or
+npm version minor
+# or
+npm version major
+```
+
+### 4. Push with tags
+
+```bash
+git push --follow-tags
+```
+
+### 5. GitHub Action publishes stable build
+
+```
+npm publish
+```
+
+### 6. Install stable version
+
+```bash
+npm install ui-soxo-bootstrap-core
+# or
+npm install ui-soxo-bootstrap-core@<version>
+```
+
+---
+
+# 🟧 Publishing via GitHub Release UI
+
+### Important
+
+**The tag must match the `package.json` version exactly**, including the `v` prefix.
+
+Example:
+
+```
+package.json: "version": "2.4.31-dev.0"
+GitHub Tag:  v2.4.31-dev.0
+```
+
+---
+
+## Steps
+
+### 1. Ensure `develop` branch is up to date
+
+Push your changes.
+
+### 2. Ensure version contains a dev suffix
+
+If not:
+
+```bash
+npm version prerelease --preid=dev
+git push --follow-tags
+```
+
+### 3. Open GitHub → Releases → Draft a new release
+
+### 4. Create tag matching the version
+
+Example:
+
+```
+v2.4.31-dev.0
+```
+
+### 5. Select target branch = `develop`
+
+### 6. Title = tag version
+
+Description is optional.
+
+### 7. Publish the release
+
+Triggers:
+
+```
+npm publish --tag dev
+```
+
+---
+
+# ⚙️ How GitHub Action Detects Release Type
+
+If version contains `dev`:
+
+```
+npm publish --tag dev
+```
+
+Otherwise:
+
+```
+npm publish
+```
+
+---
+
+# 📊 Summary Table
+
+| Step                   | Branch  | Command                              | Tag            | Publish Type |
+| ---------------------- | ------- | ------------------------------------ | -------------- | ------------ |
+| Create task branch     | master  | `git checkout -b task/<ID>`          | —              | —            |
+| Merge task → develop   | develop | `git merge task/<ID>`                | —              | —            |
+| Dev version            | develop | `npm version prerelease --preid=dev` | `vX.Y.Z-dev.N` | dev          |
+| Publish dev build      | develop | `git push --follow-tags`             | —              | dev          |
+| Merge develop → master | master  | `git merge develop`                  | —              | —            |
+| Stable version         | master  | `npm version patch/minor/major`      | `vX.Y.Z`       | latest       |
+| Publish stable build   | master  | `git push --follow-tags`             | —              | latest       |
+
+---
+
+# ⚠️ Common Mistakes & Fixes
+
+| Mistake                   | Issue              | Fix                          |
+| ------------------------- | ------------------ | ---------------------------- |
+| Tag doesn't match version | Publish fails      | Always use `npm version`     |
+| Manual tag creation       | Version mismatch   | Avoid manual tagging         |
+| Dev publish from master   | Wrong channel      | Verify branch before tagging |
+| Not pushing tags          | Workflow won’t run | Use `git push --follow-tags` |
+| Merging incomplete tasks  | Breaks dev builds  | Test before merging          |

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/models/menus/components/menu-lists/menu-lists.js

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag } from 'antd';
+import { Space, Popconfirm, Input, Drawer, Skeleton, Collapse, message, Tag, Empty } from 'antd';
 import { ReloadOutlined, DeleteOutlined, EditOutlined, PlusCircleFilled, CopyOutlined } from '@ant-design/icons';
 import { Button, Card, Switch, DraggableWrapper } from '../../../../lib';
 //  for draggable menu list import { DndProvider } from "react-dnd";
@@ -203,7 +203,7 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
     model.delete(rec).then(loadMenus);
   };
 
-  const filtered = records.filter((r) => r.name?.toUpperCase().includes(query.toUpperCase()));
+  const filtered = records.filter((r) => r.caption?.toUpperCase().includes(query.toUpperCase()));
 
   const visibleItems = filtered;
 
@@ -362,50 +362,53 @@ const MenuLists = ({ model, match, relativeAdd = false, additional_queries = [],
             <Card>
               <DndProvider backend={HTML5Backend}>
                 <Collapse accordion>
-                  {visibleItems.map((item, index) => (
-                    <Panel
-                      key={item.id}
-                      header={
-                        <DraggableWrapper
-                          id={item.id}
-                          index={index}
-                          movePanel={movePanel}
-                          item={item}
-                          dragEnabled={dragMode}
-                          level={1}
-                          parentId={null}
-                          onCrossLevelMove={handleCrossLevelMove}
-                          canAcceptChildren={true}
-                        />
-                      }
-                      //  only show arrow if sub_menus exist
-                      showArrow={item.sub_menus && item.sub_menus.length > 0}
-                      //  disable panel
-                      // collapsible={item.sub_menus && item.sub_menus.length > 0 ? 'header' : 'disabled'}
-                      extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
-                    >
-                      {item.sub_menus && item.sub_menus.length > 0 && (
-                        <NestedMenu
-                          parentId={item.id}
-                          step={item.step + 1}
-                          items={item.sub_menus || []}
-                          model={model}
-                          dragMode={dragMode}
-                          setSelectedRecord={setSelectedRecord}
-                          setDrawerTitle={setDrawerTitle}
-                          setDrawerVisible={setDrawerVisible}
-                          deleteRecord={deleteRecord}
-                          level={2}
-                          onCrossLevelMove={handleCrossLevelMove}
-                          onChange={(subMenus) => {
-                            const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
-                            setRecords(updated);
-                            setOrderChanged(true);
-                          }}
-                        />
-                      )}
-                    </Panel>
-                  ))}
+                  {visibleItems && visibleItems.length > 0 ? (
+                    visibleItems.map((item, index) => (
+                      <Panel
+                        key={item.id}
+                        header={
+                          <DraggableWrapper
+                            id={item.id}
+                            index={index}
+                            movePanel={movePanel}
+                            item={item}
+                            dragEnabled={dragMode}
+                            level={1}
+                            parentId={null}
+                            onCrossLevelMove={handleCrossLevelMove}
+                            canAcceptChildren={true}
+                          />
+                        }
+                        showArrow={item.sub_menus && item.sub_menus.length > 0}
+                        extra={panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
+                      >
+                        {item.sub_menus && item.sub_menus.length > 0 && (
+                          <NestedMenu
+                            parentId={item.id}
+                            step={item.step + 1}
+                            items={item.sub_menus || []}
+                            model={model}
+                            dragMode={dragMode}
+                            setSelectedRecord={setSelectedRecord}
+                            setDrawerTitle={setDrawerTitle}
+                            setDrawerVisible={setDrawerVisible}
+                            deleteRecord={deleteRecord}
+                            level={2}
+                            onCrossLevelMove={handleCrossLevelMove}
+                            onChange={(subMenus) => {
+                              const updated = records.map((r) => (r.id === item.id ? { ...r, sub_menus: subMenus } : r));
+                              setRecords(updated);
+                              setOrderChanged(true);
+                            }}
+                          />
+                        )}
+                      </Panel>
+                    ))
+                  ) : (
+                    <div style={{ textAlign: 'center', padding: '40px 0' }}>
+                      <Empty description="No Menu Items" />
+                    </div>
+                  )}
                 </Collapse>
               </DndProvider>
             </Card>

package/core/modules/reporting/components/reporting-dashboard/display-columns/build-display-columns.js

@@ -27,9 +27,13 @@ function getExportDefinition(entry, record) {
  * @param {boolean} root0.isFixedIndex
  * @param {Object} root0.CustomComponents
  * @param {Function} root0.refresh
+ * @param {Object} [root0.otherDetails={}] - Optional details from the report configuration.
+ * @param {boolean} [root0.otherDetails.isFilterEnabled] - Fallback to enable filtering on all columns.
+ * @param {boolean} [root.otherDetails.isSortingEnabled] - Fallback to enable sorting on all columns.
+ * @param {boolean} [root0.otherDetails.isHeaderWrapEnabled] - Fallback to enable header text wrapping for all columns.
  * @returns {Array}
  */
-export default function buildDisplayColumns({ columns = [], patients = [], isFixedIndex, CustomComponents, refresh }) {
+export default function buildDisplayColumns({ columns = [], patients = [], isFixedIndex, CustomComponents, refresh, otherDetails = {} }) {
   const displayColumns = [
     {
       title: '#',
@@ -42,6 +46,11 @@ export default function buildDisplayColumns({ columns = [], patients = [], isFix
   ];
 
   columns.forEach((entry, index) => {
+    const isFilterEnabled = entry.isFilterEnabled || otherDetails?.isFilterEnabled;
+    const isSortingEnabled = entry.isSortingEnabled || otherDetails?.isSortingEnabled;
+    const isHeaderWrapEnabled = otherDetails?.isHeaderWrapEnabled;
+
+    const titleStyle = isHeaderWrapEnabled ? { whiteSpace: 'pre-wrap', overflowWrap: 'break-word' } : {};
     displayColumns.push({
       render: (record) =>
         renderDisplayCell({
@@ -52,20 +61,26 @@ export default function buildDisplayColumns({ columns = [], patients = [], isFix
         }),
       field: entry.field,
       title: (
-        <Tooltip title={entry.tooltip || entry.title}>
-          <span>{entry.title}</span>
+        <Tooltip
+          title={entry.tooltip || entry.title}
+          overlayInnerStyle={{
+            whiteSpace: 'normal',
+            overflowWrap: 'break-word',
+          }}
+        >
+          <span style={titleStyle}>{entry.title}</span>
         </Tooltip>
       ),
       key: entry.field || `display_column_${index}`,
       width: entry.width ? parseInt(entry.width, 10) : 160,
       fixed: entry.isFixedColumn ? entry.isFixedColumn : null,
       filters:
-        entry.isFilterEnabled && Array.isArray(patients)
+        isFilterEnabled && Array.isArray(patients)
           ? [...new Set(patients.map((item) => item[entry.field]).filter(Boolean))].map((value) => ({ text: value, value }))
           : null,
-      onFilter: entry.isFilterEnabled ? (value, record) => record[entry.field] === value : null,
-      sorter: entry.isSortingEnabled ? (a, b) => String(a[entry.field]).localeCompare(String(b[entry.field])) : null,
-      filterSearch: entry.isFilterEnabled ? entry.isFilterEnabled : false,
+      onFilter: isFilterEnabled ? (value, record) => record[entry.field] === value : null,
+      sorter: isSortingEnabled ? (a, b) => String(a[entry.field]).localeCompare(String(b[entry.field])) : null,
+      filterSearch: isFilterEnabled ? isFilterEnabled : false,
       exportDefinition: (record) => getExportDefinition(entry, record),
       align: entry.type === 'number' ? 'right' : 'left',
     });

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js

@@ -299,7 +299,7 @@ export default function ReportingDashboard({
       // Update patients
       setPatients(resultDetails || []);
       console.log(parsedColumns);
-         
+
       // Check if columns are not yet defined
       if (parsedColumns.length === 0 && resultDetails.length > 0) {
         // Create columns dynamically from resultDetails keys
@@ -599,6 +599,7 @@ function GuestList({
 
   const { isMobile, dispatch } = useContext(GlobalContext);
   const [single, setSingle] = useState({});
+  const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
 
   // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
   const cols = buildDisplayColumns({
@@ -607,6 +608,7 @@ function GuestList({
     isFixedIndex,
     CustomComponents,
     refresh,
+    otherDetails
   });
 
   /**

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.17",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"