ui-soxo-bootstrap-core 2.4.26 → 2.5.0

package/core/lib/elements/basic/switch/switch.js

@@ -1,36 +1,46 @@
 /**
  * Component for antd switch
  */
-
-import React, { useState, useContext, useEffect } from 'react';
-import { GlobalContext } from '../../../Store';
-
+import React, { useContext } from 'react';
 import { Switch as AntdSwitch } from 'antd';
-
+import { GlobalContext } from '../../../Store';
 import PropTypes from 'prop-types';
 
-export default function Switch({ onChange, checked }) {
+export default function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  id,
+  size,
+  checkedChildren,
+  unCheckedChildren,
+  className,
+  style,
+}) {
   const { state } = useContext(GlobalContext);
 
-  useEffect(() => {
-    // Reacting to theme changes
-  }, [state.theme.colors]);
-
   return (
-    <div>
-      <>
-        <AntdSwitch
-          checked={checked}
-          onChange={onChange}
-          // checked={ }
-          style={{
-            backgroundColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg, // Use disabled color when unchecked
-            borderColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg,
-          }}
-          listType="picture-card"
-        />
-      </>
-    </div>
+    <AntdSwitch
+      id={id}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onChange={onChange}
+      disabled={disabled}
+      size={size}
+      checkedChildren={checkedChildren}
+      unCheckedChildren={unCheckedChildren}
+      className={className}
+      style={{
+        backgroundColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        borderColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        ...style,
+      }}
+    />
   );
 }
 

package/core/models/dashboard/dashboard.js

@@ -81,6 +81,20 @@ class Dashboard extends Base {
     ];
   }
 
+  loadProcess(id) {
+    return ApiUtils.get({
+      url: `process/${id}`,
+    });
+  }
+  
+  processLog(formBody) {
+    return ApiUtils.post({
+      url: `process/process-log`,
+      formBody,
+    });
+  }
+
+
   /**
    * Function to load dashboards based on user information
    * @param {*} user

package/core/modules/index.js

@@ -22,8 +22,10 @@ import ReportingDashboard from '../modules/reporting/components/reporting-dashbo
 
 import ChangeInfo from './Informations/change-info/change-info';
 // All Dashboard Components Ends
+import ProcessStepsPage from './steps/steps';
 
 export {
+  ProcessStepsPage,
   GenericList,
   GenericAdd,
   GenericEdit,

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

@@ -0,0 +1,88 @@
+/**
+ * ActionButtons
+ * Handles navigation and action controls for a multi-step process,
+ * including dynamic content rendering and process completion actions.
+ */
+import React from 'react';
+import { Skeleton } from 'antd';
+import { Button } from '../../lib';
+
+export default function ActionButtons({
+  loading,
+  steps,
+  activeStep,
+  isStepCompleted,
+  renderDynamicComponent,
+  handlePrevious,
+  handleNext,
+  handleSkip,
+  handleFinish,
+  handleStartNextProcess,
+  nextProcessId,
+  timelineCollapsed,
+}) {
+  return (
+    <>
+      <div style={{ minHeight: 300 }}>{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
+      <>
+        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-start', gap: '10px' }}>
+          {/* Back button */}
+          <Button disabled={activeStep === 0} onClick={handlePrevious} style={{ marginRight: 8, borderRadius: 4 }}>
+            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}
+            >
+              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>
+            )
+          ) : (
+            <Button
+              type="primary"
+              // shape="round"
+              style={{
+                borderRadius: 4,
+              }}
+              disabled={activeStep === steps.length - 1 || !isStepCompleted}
+              onClick={handleNext}
+            >
+              Next →
+            </Button>
+          )}
+        </div>
+      </>
+    </>
+  );
+}

package/core/modules/steps/steps.js

@@ -0,0 +1,332 @@
+/**
+ * ProcessStepsPage Component
+ *
+ * - Manages a multi-step, time-tracked process workflow.
+ * - Dynamically renders step-specific components based on configuration.
+ * - Tracks step and process durations with local persistence support.
+ * - Supports step navigation (next, previous, skip, timeline, keyboard).
+ * - 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 { Row, Col, Empty } from 'antd';
+import { Card } from './../../lib';
+import * as genericComponents from './../../lib';
+import moment from 'moment';
+import { Location } from './../../lib';
+import ActionButtons from './action-buttons';
+import { Dashboard } from '../../models';
+import './steps.scss';
+import TimelinePanel from './timeline';
+import { ExternalWindow } from '../../components';
+
+export default function ProcessStepsPage({ processId, match, CustomComponents = {}, ...props }) {
+  const allComponents = { ...genericComponents, ...CustomComponents };
+
+  const [loading, setLoading] = useState(false);
+  const [steps, setSteps] = useState([]);
+  const [activeStep, setActiveStep] = useState(0);
+  const [isStepCompleted, setIsStepCompleted] = useState(false);
+  const [currentProcessId, setCurrentProcessId] = useState(processId);
+  const [nextProcessId, setNextProcessId] = useState(null);
+  const [stepStartTime, setStepStartTime] = useState(null);
+  const [processStartTime, setProcessStartTime] = useState(null);
+  const [processTimings, setProcessTimings] = useState([]);
+  const [timelineCollapsed, setTimelineCollapsed] = useState(true);
+  const [showExternalWindow, setShowExternalWindow] = useState(false);
+  const urlParams = Location.search();
+
+  // Load process details based on the current process ID
+  useEffect(() => {
+    loadProcess(currentProcessId);
+
+    const saved = localStorage.getItem(`processTimings_${currentProcessId}`);
+    setProcessTimings(saved ? JSON.parse(saved) : []);
+
+    setProcessStartTime(Date.now());
+    setStepStartTime(Date.now());
+  }, [currentProcessId]);
+
+  //// Reset step start time whenever the active step changes
+
+  useEffect(() => {
+    setStepStartTime(Date.now());
+  }, [activeStep]);
+
+  // Check whether the current step is completed or mandatory
+  useEffect(() => {
+    if (steps.length > 0) {
+      setIsStepCompleted(steps[activeStep]?.is_mandatory !== true);
+    }
+  }, [activeStep, steps]);
+
+  // Save updated process timings to state and localStorage
+  const saveTimings = (updated) => {
+    setProcessTimings(updated);
+    localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updated));
+  };
+  // Record time spent on the current step
+
+  const recordStepTime = (status = 'completed') => {
+    // Exit if step start time or step data is missing
+
+    if (!stepStartTime || !steps[activeStep]) return processTimings;
+    // Capture end time and calculate duration
+
+    const endTime = Date.now();
+    const duration = endTime - stepStartTime;
+    const stepId = steps[activeStep].step_id;
+    // Clone existing timings
+
+    const updated = [...processTimings];
+    const index = updated.findIndex((t) => t.step_id === stepId);
+    // Create timing entry for the step
+
+    const entry = {
+      step_id: stepId,
+      start_time: moment(stepStartTime).format('DD-MM-YYYY HH:mm:ss'),
+      end_time: moment(endTime).format('DD-MM-YYYY HH:mm:ss'),
+      duration,
+      status,
+    };
+    // Update existing entry or add a new one
+    if (index > -1) {
+      updated[index] = { ...updated[index], ...entry, duration: updated[index].duration + duration };
+    } else {
+      updated.push(entry);
+    }
+
+    return updated;
+  };
+
+  /**
+   * @param {*} processId
+   *
+   * Process Loading
+   * - Fetches process details and step configuration using the process ID.
+   * - Manages loading state during the API call.
+   * - Stores step data and prepares next process details if available.
+   * - Handles API errors and maintains UI stability.
+   */
+  async function loadProcess(processId) {
+    setLoading(true);
+    setNextProcessId(null);
+
+    try {
+      const result = await Dashboard.loadProcess(processId);
+
+      setSteps(result?.data?.steps || []);
+      if (result?.data?.next_process_id) setNextProcessId(result.data);
+    } catch (e) {
+      console.error('Error loading process steps:', e);
+    } finally {
+      setLoading(false);
+    }
+  }
+  /**
+   * @param {*} finalTimings
+   *
+   * Process Submission
+   * - Builds payload with process metadata, reference details, and step timings.
+   * - Submits process completion data to the backend.
+   * - Clears stored timings on successful submission.
+   * - Persists timing data locally if submission fails.
+   */
+  const handleProcessSubmit = async (finalTimings) => {
+    const payload = {
+      process_id: currentProcessId,
+      status: 'completed',
+      reference_id: urlParams?.opb_id || urlParams?.reference_id,
+      reference_number: urlParams?.opno || urlParams?.reference_number,
+      mode: urlParams?.mode,
+      process: {
+        process_start_time: moment(processStartTime).format('DD-MM-YYYY HH:mm'),
+        process_end_time: moment().format('DD-MM-YYYY HH:mm'),
+        steps: finalTimings,
+      },
+    };
+
+    try {
+      const response = await Dashboard.processLog(payload);
+
+      if (response.success) {
+        localStorage.removeItem(`processTimings_${currentProcessId}`);
+        setProcessTimings([]);
+        return true;
+      }
+    } catch (e) {
+      console.error('Error:', e);
+      saveTimings(finalTimings);
+    }
+    return false;
+  };
+  /**
+   * @param {number} index
+   * @param {string} status
+   *
+   * Step Navigation
+   * - Records time spent on the current step.
+   * - Saves updated step timing data.
+   * - Navigates to the specified step index.
+   */
+  const gotoStep = (index, status = 'completed') => {
+    const updated = recordStepTime(status);
+    saveTimings(updated);
+    setActiveStep(index);
+  };
+  /**
+   * Navigate to the next step
+   * - Records timing data and advances step index by one.
+   */
+  const handleNext = () => gotoStep(activeStep + 1);
+  /**
+   * Navigate to the previous step
+   * - Records timing data and moves to the previous step.
+   */
+  const handlePrevious = () => gotoStep(activeStep - 1);
+  /**
+   * Skip current step
+   * - Records timing with skipped status.
+   * - Moves to the next step.
+   */
+  const handleSkip = () => gotoStep(activeStep + 1, 'skipped');
+  /**
+   * Timeline Navigation
+   * - Navigates directly to the selected step.
+   * - Records timing data for the current step.
+   */
+  const handleTimelineClick = (i) => gotoStep(i);
+  /**
+   * Process Completion
+   * - Records final step timing.
+   * - Submits process completion data.
+   * - Navigates back on successful completion.
+   */
+  const handleFinish = async () => {
+    const final = recordStepTime();
+    if (await handleProcessSubmit(final)) props.history?.goBack();
+  };
+  /**
+   * Start Next Process
+   * - Records final timing of the current process.
+   * - Submits current process data.
+   * - Loads and initializes the next linked process.
+   */
+  const handleStartNextProcess = async () => {
+    const final = recordStepTime();
+    if (await handleProcessSubmit(final)) {
+      await loadProcess(nextProcessId.next_process_id);
+      setCurrentProcessId(nextProcessId.next_process_id);
+      setActiveStep(0);
+      setShowExternalWindow(true);
+    }
+  };
+  /**
+   * Dynamic Step Renderer
+   * - Resolves and renders step-specific components dynamically.
+   * - Passes configuration, parameters, and handlers to the component.
+   * - Handles missing steps or components gracefully.
+   */
+  const DynamicComponent = () => {
+    const step = steps[activeStep];
+    if (!step) return <Empty description="No step selected" />;
+
+    const Component = allComponents[step.related_page];
+    if (!Component) return <Empty description={`Component "${step.related_page}" not found`} />;
+
+    return <Component {...step.config} {...props} step={step} params={urlParams} onStepComplete={() => setIsStepCompleted(true)} />;
+  };
+  /**
+   * Keyboard Navigation
+   * - Enables left and right arrow keys for step navigation.
+   * - Prevents navigation beyond step boundaries.
+   * - Cleans up event listeners on unmount.
+   */
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      // Handle Left Arrow key press to go to the previous step
+      if (event.key === 'ArrowLeft') {
+        if (activeStep > 0) {
+          handlePrevious();
+        }
+      }
+      // Handle Right Arrow key press to go to the next step
+      else if (event.key === 'ArrowRight') {
+        if (activeStep < steps.length - 1) {
+          handleNext();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [activeStep, steps, handlePrevious, handleNext]);
+
+  /**
+   * 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 = () => (
+    <Card>
+      <Row gutter={20}>
+        <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
+          <TimelinePanel
+            loading={loading}
+            steps={steps}
+            activeStep={activeStep}
+            timelineCollapsed={timelineCollapsed}
+            handleTimelineClick={handleTimelineClick}
+            setTimelineCollapsed={setTimelineCollapsed}
+          />
+        </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>
+          <ActionButtons
+            loading={loading}
+            steps={steps}
+            activeStep={activeStep}
+            isStepCompleted={isStepCompleted}
+            renderDynamicComponent={DynamicComponent}
+            handlePrevious={handlePrevious}
+            handleNext={handleNext}
+            handleSkip={handleSkip}
+            handleFinish={handleFinish}
+            handleStartNextProcess={handleStartNextProcess}
+            nextProcessId={nextProcessId}
+            timelineCollapsed={timelineCollapsed}
+          />
+        </Col>
+      </Row>
+    </Card>
+  );
+  /**
+   * Renders content in both the main window and an external window
+   * when external window mode is enabled.
+   */
+  if (showExternalWindow && props.showExternalWindow) {
+    return (
+      <>
+        <ExternalWindow
+          title={steps[activeStep]?.step_name || 'Process Step'}
+          onClose={() => setShowExternalWindow(false)}
+          // left={window.screenX + window.outerWidth}
+          // top={window.screenY}
+          width={props.ExternalWindowWidth || 1000}
+          height={props.ExternalWindowHeight || 1000}
+        >
+          {renderContent()}
+        </ExternalWindow>
+        {renderContent()}
+      </>
+    );
+  }
+  /**
+   * Default render when external window mode is disabled.
+   */
+  return renderContent();
+}

package/core/modules/steps/steps.scss

@@ -0,0 +1,158 @@
+.timeline-card .ant-card-body {
+  padding: 20px;
+  min-height: 400px;
+  position: fixed; /* For positioning the arrow */
+}
+
+.timeline-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: all 0.3s ease;
+}
+
+.timeline-step {
+  display: flex;
+  cursor: pointer;
+}
+
+.timeline-step.active .step-number {
+  background: #3b82f6;
+  color: white;
+}
+
+.timeline-step.completed .step-number {
+  background:  #22c55e;
+  color: white;
+}
+
+.step-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 14px;
+}
+
+.step-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #d9d9d9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.vertical-line {
+  width: 2px;
+  height: 40px;
+  background: #d9d9d9;
+}
+
+.step-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.step-title {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.step-main {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.toggle-arrow {
+  position: absolute;
+  top: 50%;
+  right: -12px; /* Position it just outside the card body padding */
+  transform: translateY(-50%);
+  width: 24px;
+  height: 24px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  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;
+
+  &:hover {
+    background: #f5f5f5;
+  }
+}
+
+/* ============================
+   MOBILE & TABLET VIEW FIXES
+   ============================ */
+
+   
+
+@media (max-width: 992px) {   // iPad & tablets
+  .timeline-card .ant-card-body {
+    padding: 12px;
+    min-height: auto;
+  }
+
+  .timeline-sidebar {
+    flex-direction: row !important;
+    overflow-x: auto;
+    gap: 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .timeline-step {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .step-marker {
+    margin-right: 0;
+  }
+
+  .step-info {
+    text-align: center;
+  }
+
+  .toggle-arrow {
+    display: none !important; /* Hide collapse icon */
+  }
+}
+
+@media (max-width: 768px) {   // mobile screens
+  .timeline-sidebar {
+    gap: 8px;
+  }
+
+  .step-number {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+  }
+
+  .step-title {
+    font-size: 11px;
+  }
+
+  .step-main {
+    font-size: 13px;
+  }
+
+  .vertical-line {
+    display: none;
+  }
+
+  /* Card layout full width */
+  .timeline-card .ant-card-body {
+    padding: 10px;
+  }
+}
+