ui-soxo-bootstrap-core 2.6.6 → 2.6.7

package/core/modules/steps/steps.js

@@ -1,348 +1,348 @@
-/**
- * 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({ 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 [nextProcessId, setNextProcessId] = useState(null);
-  const [stepStartTime, setStepStartTime] = useState(null);
-  const [processStartTime, setProcessStartTime] = useState(null);
-  const [processTimings, setProcessTimings] = useState([]);
-  const [timelineCollapsed, setTimelineCollapsed] = useState(false);
-  const [showExternalWindow, setShowExternalWindow] = useState(false);
-  const [externalWin, setExternalWin] = useState(null);
-
-  const urlParams = Location.search();
-  let processId = urlParams.processId;
-  const [currentProcessId, setCurrentProcessId] = useState(processId);
-  // 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();
-    const success = await handleProcessSubmit(final);
-    if (success && !nextProcessId) props.history?.goBack();
-    return success;
-  };
-  /**
-   * 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)} />;
-  };
-
-  useEffect(() => {
-    const handleKeyDown = (event) => {
-      if (event.key === 'ArrowLeft' && activeStep > 0) {
-        handlePrevious();
-      }
-
-      if (event.key === 'ArrowRight' && activeStep < steps.length - 1) {
-        handleNext();
-      }
-    };
-
-    // main window (document!)
-    document.addEventListener('keydown', handleKeyDown);
-
-    // external window (document!)
-    if (externalWin && externalWin.document) {
-      externalWin.document.addEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-
-      if (externalWin && externalWin.document) {
-        externalWin.document.removeEventListener('keydown', handleKeyDown);
-      }
-    };
-  }, [activeStep, steps, externalWin]);
-
-  /**
-   * 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">
-      <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}
-              activeStep={activeStep}
-              timelineCollapsed={timelineCollapsed}
-              handleTimelineClick={handleTimelineClick}
-              setTimelineCollapsed={setTimelineCollapsed}
-            />
-          </Col>
-
-          <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}
-              isStepCompleted={isStepCompleted}
-              renderDynamicComponent={DynamicComponent}
-              handlePrevious={handlePrevious}
-              handleNext={handleNext}
-              handleSkip={handleSkip}
-              handleFinish={handleFinish}
-              handleStartNextProcess={handleStartNextProcess}
-              nextProcessId={nextProcessId}
-              timelineCollapsed={timelineCollapsed}
-            />
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  );
-  /**
-   * Renders content in both the main window and an external window
-   * when external window mode is enabled.
-   */
-  if (showExternalWindow && props.showExternalWindow) {
-    return (
-      <>
-        <ExternalWindow
-          onWindowReady={(win) => {
-            setExternalWin(win);
-            win.focus();
-          }}
-          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();
-}
+/**
+ * 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({ 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 [nextProcessId, setNextProcessId] = useState(null);
+  const [stepStartTime, setStepStartTime] = useState(null);
+  const [processStartTime, setProcessStartTime] = useState(null);
+  const [processTimings, setProcessTimings] = useState([]);
+  const [timelineCollapsed, setTimelineCollapsed] = useState(false);
+  const [showExternalWindow, setShowExternalWindow] = useState(false);
+  const [externalWin, setExternalWin] = useState(null);
+
+  const urlParams = Location.search();
+  let processId = urlParams.processId;
+  const [currentProcessId, setCurrentProcessId] = useState(processId);
+  // 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();
+    const success = await handleProcessSubmit(final);
+    if (success && !nextProcessId) props.history?.goBack();
+    return success;
+  };
+  /**
+   * 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)} />;
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === 'ArrowLeft' && activeStep > 0) {
+        handlePrevious();
+      }
+
+      if (event.key === 'ArrowRight' && activeStep < steps.length - 1) {
+        handleNext();
+      }
+    };
+
+    // main window (document!)
+    document.addEventListener('keydown', handleKeyDown);
+
+    // external window (document!)
+    if (externalWin && externalWin.document) {
+      externalWin.document.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+
+      if (externalWin && externalWin.document) {
+        externalWin.document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [activeStep, steps, externalWin]);
+
+  /**
+   * 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">
+      <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}
+              activeStep={activeStep}
+              timelineCollapsed={timelineCollapsed}
+              handleTimelineClick={handleTimelineClick}
+              setTimelineCollapsed={setTimelineCollapsed}
+            />
+          </Col>
+
+          <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}
+              isStepCompleted={isStepCompleted}
+              renderDynamicComponent={DynamicComponent}
+              handlePrevious={handlePrevious}
+              handleNext={handleNext}
+              handleSkip={handleSkip}
+              handleFinish={handleFinish}
+              handleStartNextProcess={handleStartNextProcess}
+              nextProcessId={nextProcessId}
+              timelineCollapsed={timelineCollapsed}
+            />
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  );
+  /**
+   * Renders content in both the main window and an external window
+   * when external window mode is enabled.
+   */
+  if (showExternalWindow && props.showExternalWindow) {
+    return (
+      <>
+        <ExternalWindow
+          onWindowReady={(win) => {
+            setExternalWin(win);
+            win.focus();
+          }}
+          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();
+}