ui-soxo-bootstrap-core 2.6.1-dev.1 → 2.6.1-dev.10

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

@@ -29,52 +29,50 @@ export default function ActionButtons({
   }, [steps]);
 
   return (
-    <>
-      <div style={{ minHeight: 300 }}>{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
-      <>
-        <div className="action-buttons-container">
-          {/* Back button */}
-          <Button disabled={activeStep === 0} onClick={handlePrevious}>
-            Back
+    <div className="action-buttons-layout">
+      <div className="action-buttons-content">{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
+      <div className="action-buttons-container">
+        {/* Back button */}
+        <Button disabled={activeStep === 0} onClick={handlePrevious}>
+          Back
+        </Button>
+
+        {/* Skip button */}
+        {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
+          <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>
+            Skip
           </Button>
+        )}
 
-          {/* Skip button */}
-          {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
-            <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>
-              Skip
-            </Button>
-          )}
+        {/* Next / Finish / Start Next */}
+        {steps[activeStep]?.order_seqtype === 'E' ? (
+          <>
+            {!showNextProcess && (
+              <Button
+                type="primary"
+                onClick={async () => {
+                  const success = await handleFinish();
+                  if (success && nextProcessId?.next_process_id) {
+                    setShowNextProcess(true);
+                  }
+                }}
+              >
+                Finish
+              </Button>
+            )}
 
-          {/* Next / Finish / Start Next */}
-          {steps[activeStep]?.order_seqtype === 'E' ? (
-            <>
-              {!showNextProcess && (
-                <Button
-                  type="primary"
-                  onClick={async () => {
-                    const success = await handleFinish();
-                    if (success && nextProcessId?.next_process_id) {
-                      setShowNextProcess(true);
-                    }
-                  }}
-                >
-                  Finish
-                </Button>
-              )}
-              
-              {showNextProcess && nextProcessId?.next_process_id && (
-                <Button type="primary" onClick={handleStartNextProcess}>
-                  Start {nextProcessId.next_process_name}
-                </Button>
-              )}
-            </>
-          ) : (
-            <Button type="primary" disabled={activeStep === steps.length - 1 || !isStepCompleted} onClick={handleNext}>
-              Next →
-            </Button>
-          )}
-        </div>
-      </>
-    </>
+            {showNextProcess && nextProcessId?.next_process_id && (
+              <Button type="primary" onClick={handleStartNextProcess}>
+                Start {nextProcessId.next_process_name}
+              </Button>
+            )}
+          </>
+        ) : (
+          <Button type="primary" disabled={activeStep === steps.length - 1 || !isStepCompleted} onClick={handleNext}>
+            Next →
+          </Button>
+        )}
+      </div>
+    </div>
   );
 }

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

@@ -1,14 +1,43 @@
+.action-buttons-layout {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.action-buttons-content {
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  padding-bottom: 8px;
+}
+
 .action-buttons-container {
-  margin-top: 38px;
-  display: flex;
+  margin-top: 0;
+  flex-shrink: 0;
+  // display: flex;
   justify-content: flex-start;
   gap: 10px;
-  position: sticky;
-  bottom: 0;
-  z-index: 1000;
+  // position: relative;
+  z-index: 2;
   background: #fff;
-  padding: 10px 0;
+  padding: 12px 0 10px;
   border-top: 1px solid #f0f0f0;
+  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
+
+
+  width: 61%;
+  padding: 10px;
+  position: fixed;
+  bottom: 10px;
+  border: 1px solid #f1f1f1;
+  margin: flx;
+  display: flex;
+  border-radius: 4px;
+  box-shadow: -1px -4px 10px 2px #f7f7f76e;
+
 
   .ant-btn {
     border-radius: 4px;

package/core/modules/steps/steps.js

@@ -21,6 +21,7 @@ import TimelinePanel from './timeline';
 import { ExternalWindow } from '../../components';
 
 export default function ProcessStepsPage({ match, CustomComponents = {}, ...props }) {
+
   const allComponents = { ...genericComponents, ...CustomComponents };
 
   const [loading, setLoading] = useState(false);
@@ -32,7 +33,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [stepStartTime, setStepStartTime] = useState(null);
   const [processStartTime, setProcessStartTime] = useState(null);
   const [processTimings, setProcessTimings] = useState([]);
-  const [timelineCollapsed, setTimelineCollapsed] = useState(true);
+  const [timelineCollapsed, setTimelineCollapsed] = useState(false);
   const [showExternalWindow, setShowExternalWindow] = useState(false);
   const [externalWin, setExternalWin] = useState(null);
 
@@ -276,10 +277,10 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
    * and external window view.
    */
   const renderContent = () => (
-    <div>
-      <Card>
-        <Row gutter={20}>
-          <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
+    <div className="process-steps-page">
+      <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">
             <TimelinePanel
               loading={loading}
               steps={steps}
@@ -290,12 +291,13 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
             />
           </Col>
 
-          <Col xs={24} sm={24} lg={timelineCollapsed ? 21 : 18}>
-            <div style={{ marginBottom: 20 }}>
-              <h2 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>{steps[activeStep]?.step_name}</h2>
-              <p style={{ margin: 0, color: '#666' }}>{steps[activeStep]?.step_description}</p>
-            </div>
+          <Col xs={24} sm={24} lg={timelineCollapsed ? 21 : 18} className="process-steps-content-col">
+            {/* <div className="process-step-header">
+              <h2 className="process-step-title">{steps[activeStep]?.step_name}</h2>
+              <p className="process-step-description">{steps[activeStep]?.step_description}</p>
+            </div> */}
             <ActionButtons
+              className="process-step-action-buttons"
               loading={loading}
               steps={steps}
               activeStep={activeStep}

package/core/modules/steps/steps.scss

@@ -1,44 +1,169 @@
+.process-steps-page {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.process-steps-card {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+
+  .ant-card-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+.process-steps-row {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.process-steps-timeline-col,
+.process-steps-content-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.process-steps-timeline-col {
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100%;
+  max-height: 100%;
+}
+
+.process-steps-timeline-col .timeline-card {
+  height: 100%;
+  width: 100%;
+}
+
+.process-steps-content-col {
+  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;
+  position: relative;
+  z-index: 2;
+}
+
+.process-steps-content-col > .action-buttons-layout {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.process-step-header {
+  margin-bottom: 20px;
+  flex-shrink: 0;
+}
+
+.process-step-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.process-step-description {
+  margin: 0;
+  color: #666;
+}
+
+.timeline-card {
+  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);
+}
+
 .timeline-card .ant-card-body {
-  // padding: 20px;
+  padding: 8px;
   border: none;
-  min-height: 400px;
-  // position: fixed; /* For positioning the arrow */
+  min-height: 100%;
+  position: relative;
+  overflow: visible;
+}
+
+.timeline-sidebar-wrap {
+  height: 100%;
+  position: relative;
 }
 
 .timeline-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
   transition: all 0.3s ease;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 4px;
 }
 
 .timeline-step {
   display: flex;
+  align-items: flex-start;
   cursor: pointer;
+  border: 1px solid #e4eaf3;
+  border-radius: 10px;
+  background: #fff;
+  padding: 10px 12px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.timeline-step:hover {
+  border-color: #b7c8ea;
+  box-shadow: 0 2px 8px rgba(24, 45, 84, 0.08);
+  transform: translateY(-1px);
 }
 
 .timeline-step.active .step-number {
-  background: #3b82f6;
+  background: #1f6fe5;
+  border-color: #1f6fe5;
   color: white;
 }
 
 .timeline-step.completed .step-number {
-  background:  #22c55e;
+  background: #2fa857;
+  border-color: #2fa857;
   color: white;
 }
 
+.timeline-step.active {
+  border-color: #96b9f7;
+  box-shadow: 0 0 0 1px rgba(31, 111, 229, 0.2);
+}
+
+.timeline-step.completed {
+  border-color: #cfead9;
+}
+
 .step-marker {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-right: 14px;
+  margin-right: 12px;
+  min-width: 34px;
 }
 
 .step-number {
-  width: 28px;
-  height: 28px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
-  background: #d9d9d9;
+  border: 2px solid #d4dde9;
+  background: #fff;
+  color: #5b6678;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,49 +172,95 @@
 
 .vertical-line {
   width: 2px;
-  height: 20px;
-  background: #d9d9d9;
+  min-height: 14px;
+  flex: 1;
+  margin-top: 6px;
+  background: #d5deea;
+}
+
+.timeline-step.completed .vertical-line {
+  background: #2fa857;
 }
 
 .step-info {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  min-width: 0;
 }
 
 .step-title {
   font-size: 13px;
   font-weight: 500;
+  line-height: 1.2;
+  color: #6b7280;
+  margin-bottom: 2px;
 }
 
 .step-main {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
+  color: #1f2937;
+  line-height: 1.2;
+  margin-bottom: 2px;
+}
+
+.step-desc {
+  font-size: 13px;
+  color: #7a8495;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .toggle-arrow {
   position: absolute;
   top: 50%;
-  right: -12px; /* Position it just outside the card body padding */
+  right: -12px;
   transform: translateY(-50%);
-  width: 24px;
-  height: 24px;
+  width: 30px;
+  height: 30px;
   background: #fff;
-  border: 1px solid #f0f0f0;
+  border: 1px solid #b8c9e4;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  z-index: 10;
-  transition: all 0.3s ease;
+  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;
 
   &:hover {
-    background: #f5f5f5;
+    background: #f0f6ff;
+    border-color: #90abd1;
+    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.24);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.96);
   }
 }
 
+.timeline-sidebar.collapsed {
+  align-items: center;
+}
+
+.timeline-sidebar.collapsed .timeline-step {
+  padding: 6px 4px;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.timeline-sidebar.collapsed .step-marker {
+  margin-right: 0;
+}
+
 /* ============================
    MOBILE & TABLET VIEW FIXES
    ============================ */
@@ -97,30 +268,58 @@
    
 
 @media (max-width: 992px) {   // iPad & tablets
+  .process-steps-page,
+  .process-steps-row {
+    min-height: auto;
+    height: auto;
+    overflow: visible;
+  }
+
+  .process-steps-card,
+  .process-steps-card .ant-card-body,
+  .process-steps-content-col {
+    overflow: visible;
+  }
+
+  .process-steps-content-col {
+    padding: 12px;
+    border-radius: 12px;
+    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
+  }
+
+  .process-steps-timeline-col {
+    position: static;
+    top: auto;
+    align-self: stretch;
+    height: auto;
+    max-height: none;
+  }
+
   .timeline-card .ant-card-body {
     padding: 12px;
     min-height: auto;
+    overflow: visible;
   }
 
   .timeline-sidebar {
     flex-direction: row !important;
     overflow-x: auto;
-    gap: 12px;
+    overflow-y: visible;
+    gap: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid #eee;
   }
 
   .timeline-step {
-    flex-direction: column;
-    align-items: center;
+    min-width: 190px;
   }
 
   .step-marker {
-    margin-right: 0;
+    margin-right: 10px;
   }
 
-  .step-info {
-    text-align: center;
+  .vertical-line {
+    display: none;
   }
 
   .toggle-arrow {
@@ -144,11 +343,11 @@
   }
 
   .step-main {
-    font-size: 13px;
+    font-size: 14px;
   }
 
-  .vertical-line {
-    display: none;
+  .step-desc {
+    font-size: 12px;
   }
 
   /* Card layout full width */
@@ -156,4 +355,3 @@
     padding: 10px;
   }
 }
-

package/core/modules/steps/timeline.js

@@ -21,29 +21,31 @@ export default function TimelinePanel({ loading, steps, activeStep, timelineColl
       {loading ? (
         <Skeleton active />
       ) : (
-        <div className={`timeline-sidebar ${timelineCollapsed ? 'collapsed' : ''}`}>
-          {steps.map((step, index) => (
-            <div
-              key={step.step_id}
-              className={`timeline-step 
+        <div className="timeline-sidebar-wrap">
+          <div className={`timeline-sidebar ${timelineCollapsed ? 'collapsed' : ''}`}>
+            {steps.map((step, index) => (
+              <div
+                key={step.step_id}
+                className={`timeline-step 
                 ${index === activeStep ? 'active' : ''} 
                 ${index < activeStep ? 'completed' : ''}`}
-              onClick={() => handleTimelineClick(index)}
-            >
-              <div className="step-marker">
-                <div className="step-number">{index + 1}</div>
-                {index < steps.length - 1 && <div className="vertical-line"></div>}
-              </div>
-
-              {!timelineCollapsed && (
-                <div className="step-info">
-                  <div className="step-title">Step {index + 1}</div>
-                  <div className="step-main">{step.step_name}</div>
+                onClick={() => handleTimelineClick(index)}
+              >
+                <div className="step-marker">
+                  <div className="step-number">{index + 1}</div>
+                  {index < steps.length - 1 && <div className="vertical-line"></div>}
                 </div>
-              )}
-            </div>
-          ))}
 
+                {!timelineCollapsed && (
+                  <div className="step-info">
+                    <div className="step-title">Step {index + 1}</div>
+                    <div className="step-main">{step.step_name}</div>
+                    <div className="step-desc">{step.step_description || ''}</div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
           <div className="toggle-arrow" onClick={() => setTimelineCollapsed(!timelineCollapsed)}>
             {timelineCollapsed ? <RightOutlined /> : <LeftOutlined />}
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.1-dev.1",
+  "version": "2.6.1-dev.10",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"
@@ -48,6 +48,7 @@
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
     "jquery": "^3.6.0",
+    "libphonenumber-js": "^1.12.39",
     "lint-staged": "^12.3.2",
     "moment-timezone": "^0.5.34",
     "otp-input-react": "^0.3.0",