ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.10

package/core/modules/steps/steps.js

@@ -0,0 +1,553 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { Skeleton, Row, Col, Empty } from 'antd';
+import {Card} from './../../lib';
+import * as genericComponents from './../../lib';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import moment from 'moment';
+import { Location } from './../../lib';
+import ActionButtons from './action-buttons';
+import { Dashboard } from '../../models';
+
+import './steps.scss';
+import TimelinePanel from './timeline';
+
+/**
+ * ProcessStepsPage Component
+ *
+ * This component manages a multi-step process workflow. It dynamically loads steps from an API,
+ * renders the appropriate component for each step, tracks user progress and timings,
+ * and submits the final data upon completion. It features a collapsible timeline for navigation.
+ *
+ * @param {object} props - The component props.
+ * @returns {JSX.Element} The rendered ProcessStepsPage component.
+ */
+// export default function ProcessStepsPage({ processId = 1, match, CustomComponents = {}, ...props }) {
+//   const allComponents = { ...genericComponents, ...CustomComponents }; // CustomComponents will default to an empty object
+//   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 urlParams = Location.search();
+
+//   /**
+//    * useEffect: Load process data on initial mount or when `currentProcessId` changes.
+//    * This hook is responsible for fetching the process steps, initializing timings from localStorage,
+//    * and setting the start time for the process and the first step.
+//    */
+//   useEffect(() => {
+//     loadProcess(currentProcessId);
+//     // Load existing timings from localStorage or initialize
+//     const savedTimings = localStorage.getItem(`processTimings_${currentProcessId}`);
+//     setProcessTimings(savedTimings ? JSON.parse(savedTimings) : []);
+//     setProcessStartTime(Date.now()); // Record the start time of the process
+//     // setActiveStep(0); // Reset to the first step
+//     setStepStartTime(Date.now()); // Start timer for the first step
+//   }, [currentProcessId]);
+
+//   /**
+//    * useEffect: Reset the step timer whenever the active step changes.
+//    * This ensures that the duration for each step is calculated accurately from the moment it becomes active.
+//    */
+//   useEffect(() => {
+//     setStepStartTime(Date.now());
+//   }, [activeStep]);
+
+//   /**
+//    * useEffect: Manage the completion status of the current step.
+//    * If a step is not mandatory, it is considered "completed" by default,
+//    * allowing the user to proceed. For mandatory steps, the component waits for
+//    * a signal from the child component via `onStepComplete`.
+//    */
+//   useEffect(() => {
+//     if (steps.length > 0) {
+//       const currentStep = steps[activeStep];
+//       // If the new step is not mandatory, we can proceed.
+//       // Otherwise, we must wait for the child component to signal completion.
+//       setIsStepCompleted(currentStep?.is_mandatory !== true);
+//     }
+//   }, [activeStep, steps]);
+
+//   /**
+//    * Callback passed to child components to signal completion of a mandatory step.
+//    * This allows the parent to enable the "Next" button.
+//    */
+//   const handleStepCompletion = () => {
+//     setIsStepCompleted(true);
+//   };
+
+//   /**
+//    * Records the timing information for the current step.
+//    * Calculates duration, formats start/end times, and adds or updates the step's
+//    * timing data in the `processTimings` array.
+//    * @param {Array} currentTimings - The existing array of step timings.
+//    * @param {string} [status='completed'] - The status of the step ('completed' or 'skipped').
+//    * @returns {Array} The updated array of step timings.
+//    */
+//   const recordStepTime = useCallback(
+//     (currentTimings, status = 'completed') => {
+//       if (stepStartTime && steps[activeStep]) {
+//         const endTime = Date.now();
+//         const duration = endTime - stepStartTime;
+//         const currentStepId = steps[activeStep].step_id;
+
+//         const existingEntryIndex = currentTimings.findIndex((t) => t.step_id === currentStepId);
+//         const newTimings = [...currentTimings];
+
+//         const newEntry = {
+//           step_id: currentStepId,
+//           start_time: moment(stepStartTime).format('DD-MM-YYYY HH:mm:ss'),
+//           end_time: moment(endTime).format('DD-MM-YYYY HH:mm:ss'),
+//           duration: duration,
+//           status: status,
+//         };
+
+//         if (existingEntryIndex > -1) {
+//           // If re-visiting a step, add to duration and update end_time/status
+//           newTimings[existingEntryIndex].duration += duration;
+//           newTimings[existingEntryIndex].start_time = newEntry.start_time;
+//           newTimings[existingEntryIndex].end_time = newEntry.end_time;
+//           newTimings[existingEntryIndex].status = newEntry.status;
+//         } else {
+//           newTimings.push(newEntry);
+//         }
+//         return newTimings;
+//       }
+//       return currentTimings; // Return original if no update
+//     },
+//     [activeStep, steps, stepStartTime]
+//   );
+
+//   /**
+//    * Fetches the process data, including steps and next process information, from the API.
+//    * @param {number} processId - The ID of the process to load.
+//    * @returns {Promise<object|undefined>} A promise that resolves with the process data.
+//    */
+//   async function loadProcess(processId) {
+//     setLoading(true);
+//     setNextProcessId(null); // Reset on each new process load
+
+//     try {
+//       const response = await fetch(`http://localhost:8002/dev/process/${processId}`, {
+//         method: 'GET',
+//         headers: {
+//           'Content-Type': 'application/json',
+//         },
+//       });
+
+//       if (!response.ok) {
+//         throw new Error('API request failed');
+//       }
+
+//       const result = await response.json();
+
+//       const fetchedSteps = result?.data?.steps || [];
+
+//       if (result?.data?.next_process_id) {
+//         setNextProcessId(result.data);
+//         //next_process_id
+//       }
+//       setLoading(false);
+
+//       setSteps(fetchedSteps);
+
+//       return result.data;
+//     } catch (e) {
+//       console.error('Error loading process steps:', e);
+//     } finally {
+//       setLoading(false);
+//     }
+//   }
+
+//   /**
+//    * Submits the collected process and step timings to the backend API.
+//    * On success, it clears the timings from localStorage.
+//    * On failure, it saves the latest timings to localStorage for a potential retry.
+//    * @param {Array} finalStepTimings - The complete array of timings for all steps.
+//    * @returns {Promise<boolean>} A promise that resolves to `true` on success and `false` on failure.
+//    */
+//   const submitProcessTimings = useCallback(
+//     async (finalStepTimings) => {
+//       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: finalStepTimings,
+//         },
+//       };
+
+//       console.log('Submitting process timings:', payload);
+
+//       try {
+//         const response = await fetch(`http://localhost:8002/dev/process/process-log`, {
+//           method: 'POST',
+//           headers: { 'Content-Type': 'application/json' },
+//           body: JSON.stringify(payload),
+//         });
+
+//         if (!response.ok) {
+//           throw new Error('API request to save timings failed');
+//         }
+
+//         console.log('Process timings saved successfully.'); // Clear timings from state and localStorage after successful submission
+//         localStorage.removeItem(`processTimings_${currentProcessId}`);
+//         setProcessTimings([]);
+//         return true; // Indicate success
+//       } catch (e) {
+//         console.error('Error saving process timings:', e);
+//         // If API fails, save the latest timings to state and localStorage to allow for a retry.
+//         setProcessTimings(finalStepTimings);
+//         localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(finalStepTimings));
+//         return false; // Indicate failure
+//       }
+//     },
+//     [processStartTime, currentProcessId]
+//   );
+
+//   /**
+//    * Handles the transition to the next process.
+//    * It submits the timings for the current process and, upon success,
+//    * loads and transitions to the next process.
+//    */
+//   const handleStartNextProcess = async () => {
+//     const finalTimings = recordStepTime(processTimings, 'completed');
+//     const success = await submitProcessTimings(finalTimings);
+//     if (success) {
+//       const nextProcess = await loadProcess(nextProcessId.next_process_id);
+//       setCurrentProcessId(nextProcessId.next_process_id); // Trigger the useEffect to load the next process
+//       setActiveStep(0);
+//     }
+//   };
+
+//   /**
+//    * Handles the final submission when the entire workflow is finished.
+//    * Submits the final timings and navigates the user back to the previous page
+//    * (e.g., a listing page).
+//    */
+//   const handleFinish = useCallback(async () => {
+//     const finalTimings = recordStepTime(processTimings, 'completed');
+//     const success = await submitProcessTimings(finalTimings);
+//     if (success && props.history) {
+//       props.history.goBack(); // Navigate to the previous page
+//     }
+//   }, [processTimings, recordStepTime, submitProcessTimings, props.history]);
+
+//   /**
+//    * Dynamically renders the component for the active step.
+//    * It looks up the component name from the step's configuration and passes
+//    * the necessary props to it.
+//    * @returns {JSX.Element} The component for the current step or an Empty state.
+//    */
+//   const renderDynamicComponent = () => {
+//     const step = steps[activeStep];
+//     if (!step) return <Empty description="No step selected" />;
+
+//     const componentName = step.related_page;
+//     const LoadedComponent = allComponents[componentName];
+
+//     if (!LoadedComponent) {
+//       return <Empty description={`Component "${componentName}" not found`} />;
+//     }
+
+//     return <LoadedComponent {...step.config} {...props} step={step} params={urlParams} refresh={loadProcess} onStepComplete={handleStepCompletion} />;
+//   };
+
+//   /**
+//    * Handles the "Next" button click. Records the current step's time and advances to the next step.
+//    */
+//   const handleNext = () => {
+//     const updatedTimings = recordStepTime(processTimings, 'completed');
+//     setProcessTimings(updatedTimings);
+//     localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updatedTimings));
+//     setActiveStep(activeStep + 1);
+//   };
+
+//   /**
+//    * Handles the "Back" button click. Records the current step's time and moves to the previous step.
+//    */
+//   const handlePrevious = () => {
+//     const updatedTimings = recordStepTime(processTimings, 'completed');
+//     setProcessTimings(updatedTimings);
+//     localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updatedTimings));
+//     setActiveStep(activeStep - 1);
+//   };
+
+//   /**
+//    * Handles clicks on the timeline steps. Records the current step's time and navigates to the clicked step.
+//    * @param {number} index - The index of the step that was clicked.
+//    */
+//   const handleTimelineClick = (index) => {
+//     const updatedTimings = recordStepTime(processTimings, 'completed');
+//     setProcessTimings(updatedTimings);
+//     localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updatedTimings));
+//     setActiveStep(index);
+//   };
+
+//   /**
+//    * Handles the "Skip" button click. Records the current step with a 'skipped' status and advances to the next step.
+//    */
+//   const handleSkip = () => {
+//     const updatedTimings = recordStepTime(processTimings, 'skipped');
+//     setProcessTimings(updatedTimings);
+//     localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updatedTimings));
+//     setActiveStep(activeStep + 1);
+//   };
+
+//   return (
+//     <Card style={{ padding: 20 }}>
+//       <Row gutter={20}>
+//         {/* LEFT PANEL – Step Timeline */}
+//         <Col span={timelineCollapsed ? 2 : 6}>
+//           <LeftTimelinePanel
+//             loading={loading}
+//             steps={steps}
+//             activeStep={activeStep}
+//             timelineCollapsed={timelineCollapsed}
+//             handleTimelineClick={handleTimelineClick}
+//             setTimelineCollapsed={setTimelineCollapsed}
+//           />
+//         </Col>
+
+//         {/* RIGHT PANEL – Dynamic Component Loading */}
+//         <Col span={timelineCollapsed ? 22 : 18}>
+//           <Col span={timelineCollapsed ? 22 : 18}>
+//             <RenderDynamicComponent
+//               loading={loading}
+//               steps={steps}
+//               activeStep={activeStep}
+//               isStepCompleted={isStepCompleted}
+//               renderDynamicComponent={renderDynamicComponent}
+//               handlePrevious={handlePrevious}
+//               handleNext={handleNext}
+//               handleSkip={handleSkip}
+//               handleFinish={handleFinish}
+//               handleStartNextProcess={handleStartNextProcess}
+//               nextProcessId={nextProcessId}
+//               timelineCollapsed={timelineCollapsed}
+//             />
+//           </Col>
+//         </Col>
+//       </Row>
+//     </Card>
+//   );
+// }
+export default function ProcessStepsPage({ processId = 1, 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 urlParams = Location.search();
+
+  useEffect(() => {
+    loadProcess(currentProcessId);
+
+    const saved = localStorage.getItem(`processTimings_${currentProcessId}`);
+    setProcessTimings(saved ? JSON.parse(saved) : []);
+
+    setProcessStartTime(Date.now());
+    setStepStartTime(Date.now());
+  }, [currentProcessId]);
+
+  useEffect(() => {
+    setStepStartTime(Date.now());
+  }, [activeStep]);
+
+  useEffect(() => {
+    if (steps.length > 0) {
+      setIsStepCompleted(steps[activeStep]?.is_mandatory !== true);
+    }
+  }, [activeStep, steps]);
+
+  const saveTimings = (updated) => {
+    setProcessTimings(updated);
+    localStorage.setItem(`processTimings_${currentProcessId}`, JSON.stringify(updated));
+  };
+
+  const recordStepTime = (status = 'completed') => {
+    if (!stepStartTime || !steps[activeStep]) return processTimings;
+
+    const endTime = Date.now();
+    const duration = endTime - stepStartTime;
+    const stepId = steps[activeStep].step_id;
+
+    const updated = [...processTimings];
+    const index = updated.findIndex((t) => t.step_id === stepId);
+
+    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,
+    };
+
+    if (index > -1) {
+      updated[index] = { ...updated[index], ...entry, duration: updated[index].duration + duration };
+    } else {
+      updated.push(entry);
+    }
+
+    return updated;
+  };
+
+  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);
+    }
+  }
+
+  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;
+  };
+
+  const gotoStep = (index, status = 'completed') => {
+    const updated = recordStepTime(status);
+    saveTimings(updated);
+    setActiveStep(index);
+  };
+
+  const handleNext = () => gotoStep(activeStep + 1);
+  const handlePrevious = () => gotoStep(activeStep - 1);
+  const handleSkip = () => gotoStep(activeStep + 1, 'skipped');
+  const handleTimelineClick = (i) => gotoStep(i);
+
+  const handleFinish = async () => {
+    const final = recordStepTime();
+    if (await handleProcessSubmit(final)) props.history?.goBack();
+  };
+
+  const handleStartNextProcess = async () => {
+    const final = recordStepTime();
+    if (await handleProcessSubmit(final)) {
+      await loadProcess(nextProcessId.next_process_id);
+      setCurrentProcessId(nextProcessId.next_process_id);
+      setActiveStep(0);
+    }
+  };
+
+  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) => {
+      // 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]);
+
+  return (
+    <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>
+  );
+}