ui-soxo-bootstrap-core 2.4.25-dev.29 → 2.4.25-dev.30

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

@@ -3,9 +3,10 @@
  * Handles navigation and action controls for a multi-step process,
  * including dynamic content rendering and process completion actions.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Skeleton } from 'antd';
 import { Button } from '../../lib';
+import './action-buttons.scss';
 
 export default function ActionButtons({
   loading,
@@ -21,63 +22,50 @@ export default function ActionButtons({
   nextProcessId,
   timelineCollapsed,
 }) {
+  const [showNextProcess, setShowNextProcess] = useState(false);
+
   return (
     <>
       <div style={{ minHeight: 300 }}>{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
       <>
-        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-start', gap: '10px' }}>
+        <div className="action-buttons-container">
           {/* Back button */}
-          <Button disabled={activeStep === 0} onClick={handlePrevious} style={{ marginRight: 8, borderRadius: 4 }}>
+          <Button disabled={activeStep === 0} onClick={handlePrevious}>
             Back
           </Button>
 
           {/* Skip button */}
           {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
-            <Button
-              type="default"
-              onClick={handleSkip}
-              style={{
-                borderRadius: 4,
-              }}
-              disabled={activeStep === steps.length - 1}
-            >
+            <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>
               Skip
             </Button>
           )}
 
           {/* Next / Finish / Start Next */}
           {steps[activeStep]?.order_seqtype === 'E' ? (
-            nextProcessId?.next_process_id ? (
-              <Button
-                type="primary"
-                style={{
-                  borderRadius: 4,
-                }}
-                onClick={handleStartNextProcess}
-              >
-                Start Next {nextProcessId.next_process_name}
-              </Button>
-            ) : (
-              <Button
-                type="primary"
-                style={{
-                  borderRadius: 4,
-                }}
-                onClick={handleFinish}
-              >
-                Finish
-              </Button>
-            )
+            <>
+              {!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"
-              // shape="round"
-              style={{
-                borderRadius: 4,
-              }}
-              disabled={activeStep === steps.length - 1 || !isStepCompleted}
-              onClick={handleNext}
-            >
+            <Button type="primary" disabled={activeStep === steps.length - 1 || !isStepCompleted} onClick={handleNext}>
               Next →
             </Button>
           )}

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

@@ -0,0 +1,16 @@
+.action-buttons-container {
+  margin-top: 38px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  position: sticky;
+  bottom: 0;
+  z-index: 1000;
+  background: #fff;
+  padding: 10px 0;
+  border-top: 1px solid #f0f0f0;
+
+  .ant-btn {
+    border-radius: 4px;
+  }
+}

package/core/modules/steps/steps.js

@@ -204,7 +204,9 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
    */
   const handleFinish = async () => {
     const final = recordStepTime();
-    if (await handleProcessSubmit(final)) props.history?.goBack();
+    const success = await handleProcessSubmit(final);
+    if (success && !nextProcessId) props.history?.goBack();
+    return success;
   };
   /**
    * Start Next Process
@@ -268,6 +270,7 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
    * and external window view.
    */
   const renderContent = () => (
+    <div>
     <Card>
       <Row gutter={20}>
         <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
@@ -303,6 +306,7 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
         </Col>
       </Row>
     </Card>
+    </div>
   );
   /**
    * Renders content in both the main window and an external window

package/core/modules/steps/steps.scss

@@ -1,7 +1,8 @@
 .timeline-card .ant-card-body {
-  padding: 20px;
+  // padding: 20px;
+  border: none;
   min-height: 400px;
-  position: fixed; /* For positioning the arrow */
+  // position: fixed; /* For positioning the arrow */
 }
 
 .timeline-sidebar {
@@ -46,7 +47,7 @@
 
 .vertical-line {
   width: 2px;
-  height: 40px;
+  height: 20px;
   background: #d9d9d9;
 }
 

package/package.json

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