ui-soxo-bootstrap-core 2.6.41 → 2.6.43

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

@@ -123,7 +123,9 @@
   .right-section {
     margin-top: 0px;
     width: 100%;
-    overflow-x: scroll;
+    /* `auto` so the horizontal scrollbar only appears when content genuinely
+       overflows — `scroll` forced it to show permanently on every page. */
+    overflow-x: auto;
     position: relative;
     padding: 15px;
     margin-left: calc(var(--sidemenu-width, 211px) + 1px);

package/core/models/menus/components/menu-lists/menu-lists.js

@@ -526,7 +526,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
           <EditOutlined />
         </Button>
       )}
-      <Button
+      {/* <Button
         size="small"
         type="default"
         onClick={() => {
@@ -536,7 +536,7 @@ function panelActions(item, model, setSelectedRecord, setDrawerTitle, setDrawerV
         }}
       >
         <CopyOutlined />
-      </Button>
+      </Button> */}
       <Popconfirm title="Are you sure?" onConfirm={() => deleteRecord(item)}>
         <Button danger size="small" type="default">
           <DeleteOutlined />

package/core/modules/steps/steps.js

@@ -11,7 +11,7 @@
  * - Renders a single active step view with compact breadcrumb controls.
  */
 import { ArrowLeftOutlined, ArrowRightOutlined, CompressOutlined, ExpandOutlined, SoundOutlined } from '@ant-design/icons';
-import { Empty, Select, Spin, message } from 'antd';
+import { Empty, Select, Skeleton, message } from 'antd';
 import moment from 'moment';
 import { useEffect, useRef, useState } from 'react';
 import { ExternalWindow } from '../../components';
@@ -1290,7 +1290,27 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               </div>
             )} */}
 
-            <div className="steps-top-bar">
+            <div className={`steps-top-bar${isStepFullscreen ? ' is-fullscreen' : ''}`}>
+              {/*
+                Full-screen toggle is anchored to the far left of the bar so the
+                step tabs can stretch across the middle and the primary CTA sits
+                flush right (see design).
+              */}
+              <Button
+                className="steps-fullscreen-toggle"
+                type="dashed"
+                icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />}
+                onClick={toggleStepFullscreen}
+                aria-label={isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+                title={isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+              >
+                {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
+              </Button>
+
+              {/*
+                Breadcrumb strip stays visible in fullscreen mode too so the
+                user keeps the step timeline / navigation while presenting.
+              */}
               <div className="steps-breadcrumb-strip">
                 {steps.length ? (
                   steps.map((stepItem, stepIndex) => {
@@ -1315,10 +1335,6 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               </div>
 
               <div className="steps-nav-actions">
-                <Button type="dashed" icon={isStepFullscreen ? <CompressOutlined /> : <ExpandOutlined />} onClick={toggleStepFullscreen}>
-                  {isStepFullscreen ? 'Exit Full Screen' : 'Full Screen'}
-                </Button>
-
                 {/*
                   Previous-process button.
                   - Only relevant at the start of a process (`activeStep === 0`)
@@ -1333,7 +1349,13 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                 )}
 
                 {activeStep > 0 && (
-                  <Button type="default" icon={<ArrowLeftOutlined />} onClick={handlePrevious}>
+                  <Button
+                    type="default"
+                    icon={<ArrowLeftOutlined />}
+                    onClick={handlePrevious}
+                    aria-label="Back"
+                    title="Back"
+                  >
                     Back
                   </Button>
                 )}
@@ -1366,7 +1388,13 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                     )}
                   </>
                 ) : (
-                  <Button type="primary" disabled={!isStepCompleted} onClick={handleNext}>
+                  <Button
+                    type="primary"
+                    disabled={!isStepCompleted}
+                    onClick={handleNext}
+                    aria-label={activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'}
+                    title={activeStep === 0 ? (FIRST_STEP_LABELS[processName?.trim().toLowerCase()] ?? 'Next') : 'Next'}
+                  >
                     {/*
                       First-step label is resolved via FIRST_STEP_LABELS using
                       the process name (lowercased + trimmed) as the key. Known
@@ -1464,10 +1492,10 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                     </button>
                   </>
                 ) : null}
-                <div
+                {/* <div
                   key={`${currentProcessId}_${activeStep}`}
                   className={`steps-chat-step-card ${stepSlideDirection === 'backward' ? 'slide-backward' : 'slide-forward'}`}
-                >
+                > */}
                   {/* <div className="steps-chat-step-top">
                     <span className="steps-index-pill">
                       Step {Math.min(activeStep + 1, steps.length || 1)} of {steps.length || 1}
@@ -1476,15 +1504,17 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
                     {currentStep?.step_description ? <p className="steps-description">{currentStep.step_description}</p> : null}
                   </div> */}
 
-                  <div className="steps-chat-step-component">
+                  {/* <div className="steps-chat-step-component"> */}
                     {loading ? (
                       <div className="steps-chat-loading">
-                        <Spin />
+                        <div className="steps-chat-loading__card">
+                          <Skeleton active title={{ width: '32%' }} paragraph={{ rows: 6, width: ['90%', '82%', '86%', '70%', '78%', '60%'] }} />
+                        </div>
                       </div>
                     ) : null}
                     {!loading ? renderDynamicStep() : null}
-                  </div>
-                </div>
+                  {/* </div> */}
+                {/* </div> */}
               </div>
             </div>
 

package/core/modules/steps/steps.scss

@@ -3,7 +3,13 @@
 .process-steps-page {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  /* The app shell's `.right-section` is `height: 100vh` with a fixed 56px header
+     (`.page-wrapper`) on top of it plus 15px padding. A plain `height: 100%`
+     makes this page a full 100vh — so its bottom runs past the viewport under the
+     header and forces a page scroll in normal view. Bound it to the space that is
+     actually visible below the header instead. (In full screen the promoted
+     `.steps-viewport` is 100vh via the Fullscreen API, so this doesn't apply.) */
+  height: calc(100vh - 86px);
   min-height: 0;
   width: 100%;
   max-width: 100%;
@@ -159,16 +165,19 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-bottom: 1px solid #e8eef8;
-  background: #f8fbff;
-  min-height: 50px;
+  gap: 12px;
+  padding: 0 24px;
+  min-height: 70px;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
+  /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
+     Matches the onboarding reference without the frosted-glass treatment. */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+  background: linear-gradient(180deg, #a7c2c6 100%, #eff3e3 100%);
 }
 
 .steps-breadcrumb-strip {
@@ -176,13 +185,49 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  /* `safe center` keeps the steps centered when they fit, but falls back to
+     start-aligned when there are too many to fit (>6). Plain `center` would clip
+     BOTH ends on overflow — cutting off the active step's label (e.g. "Guest
+     Details") and making it unreachable even though the strip scrolls. */
+  justify-content: safe center;
+  gap: clamp(28px, 3vw, 52px);
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  scrollbar-width: thin;
-  scrollbar-color: #d0dff5 transparent;
-  padding-bottom: 2px;
+  scrollbar-width: none;
+  padding: 0 8px;
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+
+/* Full-screen toggle — grey frosted pill anchored to the far left. */
+.steps-fullscreen-toggle {
+  flex: 0 0 auto;
+}
+
+.steps-fullscreen-toggle.ant-btn,
+.steps-fullscreen-toggle.ant-btn-dashed {
+  height: 38px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: #07232E33;
+  border: 1px solid #dbe3e6;
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+}
+
+.steps-fullscreen-toggle.ant-btn:hover,
+.steps-fullscreen-toggle.ant-btn:focus {
+  background: #ffffff;
+  border-color: #ffffff;
+  color: #000000;
+  transform: translateY(-1px);
 }
 
 .steps-nav-actions {
@@ -190,20 +235,40 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  /*
+    Anchors the Back + primary CTA to the far right. In fullscreen the
+    breadcrumb strip is not rendered, so this margin keeps the group pinned
+    right with only the Full Screen toggle sitting on the left.
+  */
+  margin-left: auto;
 }
 
 .steps-nav-actions .ant-btn {
-  min-height: 34px;
-  border-radius: 8px;
-  padding: 0 14px;
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 18px;
   font-size: 13px;
   font-weight: 600;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
   white-space: nowrap;
 }
 
+/* Secondary (Back / previous-process) — solid white pill. */
+.steps-nav-actions .ant-btn-default {
+  background: #ffffff;
+  border-color: #dbe3e6;
+  color: #4a5a68;
+}
+
+.steps-nav-actions .ant-btn-default:hover,
+.steps-nav-actions .ant-btn-default:focus {
+  background: #f4f7f8;
+  border-color: #c3ccd0;
+  color: #253a5b;
+}
+
 .steps-nav-actions .ant-btn:active {
   transform: scale(0.97);
 }
@@ -253,17 +318,23 @@
 }
 
 .steps-breadcrumb-item {
+  /* Compact, natural-width steps that sit centered with connector lines
+     between them — matching the onboarding reference. */
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 7px;
-  border: 1.5px solid #dce6f5;
-  background: #f8fbff;
+  justify-content: flex-start;
+  gap: 8px;
+  border: none;
+  background: transparent;
   border-radius: 999px;
-  padding: 6px 14px;
+  padding: 4px;
   cursor: pointer;
-  transition: all 0.18s ease;
-  color: #475569;
-  font-size: 12px;
+  transition: all 0.2s ease;
+  color: #7a8792;
+  font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   min-height: 34px;
@@ -271,56 +342,110 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.steps-breadcrumb-item:hover {
-  background: #eef5ff;
-  border-color: #c8d9f6;
-  color: #1d4ed8;
+/* Thin connecting line drawn into the gap toward the next step.
+   Width matches the strip's gap so it spans the space without overhanging. */
+.steps-breadcrumb-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  width: clamp(28px, 3vw, 52px);
+  height: 1px;
+  background: rgba(37, 58, 91, 0.2);
+  transform: translateY(-50%);
 }
 
 .steps-breadcrumb-item:active {
-  transform: scale(0.96);
+  transform: scale(0.97);
+}
+
+/* Number bubble — default (upcoming) solid muted circle. */
+.steps-breadcrumb-index {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  background: #ffffff;
+  border: 1px solid #d3dbdf;
+  color: #8a97a2;
+  flex: 0 0 auto;
+  transition: all 0.2s ease;
+}
+
+.steps-breadcrumb-item:hover .steps-breadcrumb-index {
+  border-color: rgba(37, 58, 91, 0.35);
+  color: #253a5b;
 }
 
+/* Label is shown only for the active step (upcoming steps are circle-only,
+   as in the reference). */
+.steps-breadcrumb-label {
+  display: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: inherit;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ACTIVE — solid white rounded pill with dark navy text. */
 .steps-breadcrumb-item.active {
-  background: #1e3a8a;
-  border-color: #1e3a8a;
-  color: #ffffff;
+  background: #ffffff;
+  padding: 4px 16px 4px 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
+  color: #253a5b;
   font-weight: 600;
 }
 
-.steps-breadcrumb-item.completed {
-  border-color: #86efac;
-  background: #f0fdf4;
-  color: #15803d;
+.steps-breadcrumb-item.active .steps-breadcrumb-index {
+  background: #ffffff;
+  border-color: rgba(37, 58, 91, 0.25);
+  color: #253a5b;
+}
+
+.steps-breadcrumb-item.active .steps-breadcrumb-label {
+  display: inline;
+  color: #253a5b;
 }
 
+/* COMPLETED — filled navy circle. */
 .steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #16a34a;
+  background: #253a5b;
+  border-color: #253a5b;
   color: #ffffff;
 }
 
-.steps-breadcrumb-item.active .steps-breadcrumb-index {
-  background: rgba(255, 255, 255, 0.22);
-  color: #ffffff;
+/* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */
+.steps-nav-actions .ant-btn-primary {
+  background: #253a5b;
+  border-color: #253a5b;
+  border-radius: 999px;
+  padding: 0 30px;
+  min-height: 40px;
+  box-shadow: 0 8px 20px rgba(37, 58, 91, 0.28);
 }
 
-.steps-breadcrumb-index {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 700;
-  background: #e2e8f4;
-  color: #1e293b;
-  flex: 0 0 auto;
+.steps-nav-actions .ant-btn-primary:hover,
+.steps-nav-actions .ant-btn-primary:focus {
+  background: #1d3054;
+  border-color: #1d3054;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(37, 58, 91, 0.36);
 }
 
-.steps-breadcrumb-label {
-  font-size: 12px;
-  font-weight: 600;
+.steps-nav-actions .ant-btn-primary:disabled,
+.steps-nav-actions .ant-btn-primary[disabled] {
+  background: #c8d0e0;
+  border-color: #c8d0e0;
+  color: #ffffff;
+  box-shadow: none;
+  transform: none;
 }
 
 .steps-breadcrumb-empty {
@@ -347,8 +472,8 @@
   padding: 10px 14px;
   box-sizing: border-box;
   position: relative;
+    background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
 }
-
 .steps-stage-body.is-swipe-enabled {
   touch-action: pan-y;
 }
@@ -712,10 +837,29 @@
 }
 
 .steps-chat-loading {
+  flex: 1 1 auto;
   min-height: 120px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: center;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* Frosted skeleton card that fills the stage while a step loads (replaces the
+   old centered spinner) — matches the soft gradient step surfaces. */
+.steps-chat-loading__card {
+  width: 100%;
+  max-width: 1100px;
+  align-self: stretch;
+  padding: 28px 32px;
+  box-sizing: border-box;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.42);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 2px 10px rgba(20, 50, 64, 0.05);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
 }
 
 /* ── Narration bar (hidden by default via NARRATION_CONTROLS_ENABLED) ── */

package/package.json

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