npm - ui-soxo-bootstrap-core - Versions diffs - 2.4.25-dev.17 → 2.4.25-dev.21 - Mend

ui-soxo-bootstrap-core 2.4.25-dev.17 → 2.4.25-dev.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/core/components/external-window/index.js +225 -0
package/core/components/external-window/index.test.js +80 -0
package/core/components/index.js +4 -1
package/core/components/landing-api/landing-api.js +14 -6
package/core/models/menus/components/menu-lists/menu-lists.js +1 -0
package/core/modules/index.js +14 -22
package/core/modules/steps/action-buttons.js +61 -52
package/core/modules/steps/steps.js +130 -351
package/core/modules/steps/steps.scss +1 -1
package/core/modules/steps/timeline.js +20 -15
package/jest.config.js +8 -0
package/jest.setup.js +1 -0
package/package.json +9 -4

package/core/components/external-window/index.js ADDED Viewed

@@ -0,0 +1,225 @@
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { message } from 'antd';
+/**
+ * Renders children in a separate browser window
+ * @param {ReactNode} children - Content to render in new window
+ * @param {Function} onClose - Callback when window closes
+ * @param {string} title - Window title
+ * @param {number} width - Window width
+ * @param {number} height - Window height
+ * @param {number} left - Window left position
+ * @param {number} top - Window top position
+ * @param {boolean} copyStyles - Whether to copy parent styles (default: true)
+ * @param {string} centerScreen - Center window on screen ('horizontal', 'vertical', 'both', or false)
+ * @param {Object} shortcuts - Keyboard shortcuts config { close: 'Escape', focus: 'Ctrl+Shift+F', ... }
+ * @param {Function} onMinimize - Callback when window is minimized
+ * @param {Function} onMaximize - Callback when window is maximized
+ */
+export function ExternalWindow({
+    children,
+    onClose,
+    title = 'New Window',
+    width = 600,
+    height = 400,
+    left,
+    top,
+    copyStyles = true,
+    centerScreen = false,
+    shortcuts = {},
+    onMinimize,
+    onMaximize
+}) {
+    const [container, setContainer] = useState(null);
+    const windowRef = useRef(null);
+    // Default shortcuts
+    const defaultShortcuts = useMemo(() => ({
+        close: 'Escape',
+        focus: 'Ctrl+Shift+F',
+        ...shortcuts
+    }), [shortcuts]);
+    // Calculate window position
+    const { posX, posY } = useMemo(() => {
+        let posX = left;
+        let posY = top;
+        if (centerScreen) {
+            const screenWidth = window.screen.availWidth;
+            const screenHeight = window.screen.availHeight;
+            if (centerScreen === 'both' || centerScreen === 'horizontal') {
+                posX = (screenWidth - width) / 2;
+            }
+            if (centerScreen === 'both' || centerScreen === 'vertical') {
+                posY = (screenHeight - height) / 2;
+            }
+        }
+        return {
+            posX: posX ?? 200,
+            posY: posY ?? 200
+        };
+    }, [left, top, width, height, centerScreen]);
+    const windowFeatures = useMemo(() =>
+        `width=${width},height=${height},left=${posX},top=${posY},resizable=yes,scrollbars=yes`,
+        [width, height, posX, posY]
+    );
+    // Initialize window document
+    const initializeWindow = useCallback((win) => {
+        const doc = win.document;
+        // Write minimal HTML structure (like your working example)
+        doc.open();
+        doc.write(`
+            <!DOCTYPE html>
+            <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <title>${title}</title>
+                    <style>
+                        * {
+                            box-sizing: border-box;
+                        }
+                        html, body {
+                            width: 100%;
+                            height: 100%;
+                            margin: 0 !important;
+                            padding: 0 !important;
+                            overflow: auto;
+                            background: ${getComputedStyle(document.body).backgroundColor || '#ffffff'};
+                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+                            color: ${getComputedStyle(document.body).color || '#000000'};
+                        }
+                        body {
+                            display: block;
+                            min-height: 100vh;
+                        }
+                        #root {
+                            width: 100%;
+                            min-height: 100%;
+                            margin: 0;
+                            padding: 0;
+                        }
+                    </style>
+                </head>
+                <body>
+                    <div id="root"></div>
+                </body>
+            </html>
+        `);
+        doc.close();
+        return doc.getElementById('root');
+    }, [title]);
+    // Copy styles from parent window
+    const copyStylesToWindow = useCallback((targetWindow) => {
+        if (!copyStyles) return;
+        const fragment = targetWindow.document.createDocumentFragment();
+        // Copy all stylesheets from parent
+        Array.from(document.styleSheets).forEach(sheet => {
+            try {
+                if (sheet.href) {
+                    // External stylesheet
+                    const link = targetWindow.document.createElement('link');
+                    link.rel = 'stylesheet';
+                    link.href = sheet.href;
+                    fragment.appendChild(link);
+                } else if (sheet.cssRules) {
+                    // Inline stylesheet
+                    const style = targetWindow.document.createElement('style');
+                    const cssText = Array.from(sheet.cssRules).map(r => r.cssText).join('\n');
+                    style.textContent = cssText;
+                    fragment.appendChild(style);
+                }
+            } catch (e) {
+                // Silently ignore cross-origin stylesheet errors
+                console.warn('Could not copy stylesheet:', e);
+            }
+        });
+        targetWindow.document.head.appendChild(fragment);
+    }, [copyStyles]);
+    // Keyboard shortcut handler
+    const createKeyDownHandler = useCallback((win) => (e) => {
+        const key = [
+            e.ctrlKey && 'Ctrl',
+            e.shiftKey && 'Shift',
+            e.altKey && 'Alt',
+            e.metaKey && 'Meta',
+            e.key
+        ].filter(Boolean).join('+');
+        if (defaultShortcuts.close && key === defaultShortcuts.close) {
+            e.preventDefault();
+            onClose();
+        } else if (defaultShortcuts.focus && key === defaultShortcuts.focus) {
+            e.preventDefault();
+            win.focus();
+        } else if (defaultShortcuts.minimize && key === defaultShortcuts.minimize) {
+            e.preventDefault();
+            win.blur();
+            onMinimize?.();
+        } else if (defaultShortcuts.maximize && key === defaultShortcuts.maximize) {
+            e.preventDefault();
+            win.moveTo(0, 0);
+            win.resizeTo(screen.availWidth, screen.availHeight);
+            onMaximize?.();
+        }
+    }, [defaultShortcuts, onClose, onMinimize, onMaximize]);
+    useEffect(() => {
+        const win = window.open('', '', windowFeatures);
+        if (!win) {
+            message.error('Please allow popups for this site');
+            onClose();
+            return;
+        }
+        windowRef.current = win;
+        // Initialize window document structure
+        const root = initializeWindow(win);
+        // Copy styles from parent (async to not block)
+        requestAnimationFrame(() => {
+            copyStylesToWindow(win);
+        });
+        // Set container for portal immediately
+        setContainer(root);
+        // Setup keyboard shortcuts
+        const handleKeyDown = createKeyDownHandler(win);
+        window.addEventListener('keydown', handleKeyDown);
+        win.addEventListener('keydown', handleKeyDown);
+        // Handle window close
+        const handleClose = () => {
+            setContainer(null);
+            onClose();
+        };
+        win.addEventListener('beforeunload', handleClose);
+        // Cleanup
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            win.removeEventListener('keydown', handleKeyDown);
+            win.removeEventListener('beforeunload', handleClose);
+            if (!win.closed) win.close();
+        };
+        // Only re-run if window features change, not on every render
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [windowFeatures]);
+    return container ? createPortal(children, container) : null;
+}

package/core/components/external-window/index.test.js ADDED Viewed

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import { ExternalWindow } from './index';
+// Mock window.open
+global.open = jest.fn(() => {
+  const newWindow = {
+    document: {
+      open: jest.fn(),
+      write: jest.fn(),
+      close: jest.fn(),
+      getElementById: jest.fn().mockReturnValue(document.createElement('div')),
+      head: {
+        appendChild: jest.fn(),
+      },
+      createDocumentFragment: jest.fn().mockReturnThis(),
+      createElement: jest.fn().mockReturnThis(),
+      body: document.createElement('body'),
+    },
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    close: jest.fn(),
+    screen: {
+        availWidth: 1920,
+        availHeight: 1080,
+    },
+    getComputedStyle: jest.fn().mockReturnValue({}),
+  };
+  return newWindow;
+});
+// Mock getComputedStyle
+global.getComputedStyle = jest.fn(() => ({
+    backgroundColor: '#ffffff',
+    color: '#000000'
+}));
+// Mock message.error
+jest.mock('antd', () => ({
+    ...jest.requireActual('antd'),
+    message: {
+      error: jest.fn(),
+    },
+}));
+describe('ExternalWindow', () => {
+  it('renders children in a portal', () => {
+    const handleClose = jest.fn();
+    render(
+      <ExternalWindow onClose={handleClose}>
+        <div>External Content</div>
+      </ExternalWindow>
+    );
+    // The content is rendered via a portal, so it won't be in the main container.
+    // Instead, we can check if window.open was called, which is the primary
+    // effect of this component.
+    expect(global.open).toHaveBeenCalled();
+  });
+  it('calls window.close on unmount', () => {
+    const handleClose = jest.fn();
+    const { unmount } = render(<ExternalWindow onClose={handleClose} />);
+    const newWindow = global.open.mock.results[0].value;
+    unmount(); // cleanup
+    expect(newWindow.close).toHaveBeenCalledTimes(1);
+  });
+  it('should not open a window if popups are blocked', () => {
+    // block popups
+    global.open.mockReturnValueOnce(null);
+    const handleClose = jest.fn();
+    render(<ExternalWindow onClose={handleClose} />);
+    expect(handleClose).toHaveBeenCalled();
+  });
+});

package/core/components/index.js CHANGED Viewed

@@ -10,9 +10,12 @@ import RootApplicationAPI from './root-application-api/root-application-api';
 import { HomePageAPI } from '../modules';
+import { ExternalWindow } from './external-window';
 export {
     LandingAPI,
     RootApplicationAPI,
     ExtraInfoDetail,
-    HomePageAPI
+    HomePageAPI,
+    ExternalWindow
 }

package/core/components/landing-api/landing-api.js CHANGED Viewed

@@ -96,6 +96,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
    * @param reports
    */
   async function loadMenus(reports) {
     setLoader(true);
     // setReports(report)
@@ -105,12 +106,16 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     // console.log(result);
     if (result && Array.isArray(result.result) && result.result.length) {
       // setModules(result.result);
       // result.result.map((ele) => {
       //     let languageString = JSON.parse(ele.attributes)
       //     console.log('language_string', languageString);
       //     if (languageString && languageString.languages) {
       //         const language = i18n.language;
       //         i18n.addResourceBundle(language, 'translation', languageString.languages[i18n.language]);
       //     }
       // })
@@ -121,6 +126,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
       dispatch({ type: 'settings', payload: result.result.settings });
     }
     // Reports length
     if (reports.length) {
       reportMenus = [
@@ -155,6 +161,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         //If there is no roles assigned to the user
         setAllModules([...coreModules]);
       }
     } else {
       //  for nura
       if (result && result.result.menus && reportMenus) {
@@ -163,10 +170,14 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
         //If there is no roles assigned to the user
         setAllModules([...coreModules]);
       }
     }
     setLoader(false);
   }
   /**
    * Load the scripts
    *
@@ -246,12 +257,6 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
             <Route exact key={'profile'} path={'/profile'} render={(props) => <Profile {...props} />} />
-            {/* More specific routes should come before general/dynamic routes */}
-            <Route path={'/reports/:id'} render={(props) => <ReportingDashboard CustomComponents={CustomComponents} {...props} />} />
             <Route path={'/menus/:id'} render={() => <ModuleRoutes model={MenusAPI} />} />
             {/* <Switch> */}
@@ -268,6 +273,9 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
               }}
             />
+            {/* <Route path={'/users'} render={() => <ModuleRoutes model={UsersAPI} />} /> */}
+            <Route path={'/reports/:id'} render={(props) => <ReportingDashboard CustomComponents={CustomComponents} {...props} />} />
             <Route exact key={'change-password'} path={'/change-password'} render={(props) => <ChangePassword {...props} />} />

package/core/models/menus/components/menu-lists/menu-lists.js CHANGED Viewed

@@ -559,6 +559,7 @@ function NestedMenu({
           extra={panelActions(child, model, setSelectedRecord, setDrawerTitle, setDrawerVisible, deleteRecord)}
         >
           <NestedMenu
+            model={model}
             parentId={child.id}
             step={step + 1}
             items={child.sub_menus || []}

package/core/modules/index.js CHANGED Viewed

@@ -24,28 +24,20 @@ import ChangeInfo from './Informations/change-info/change-info';
 // All Dashboard Components Ends
 import ProcessStepsPage from './steps/steps';
 export {
-    ProcessStepsPage,
-    GenericList,
-    GenericAdd,
-    GenericEdit,
-    GenericDetail,
-    ModuleRoutes,
-    DashboardCard,
-    PopQueryDashboard,
-    HomePageAPI,
-    Profile,
-    ReportingDashboard,
-    ChangePassword,
-    ChangeInfo
-}
+  ProcessStepsPage,
+  GenericList,
+  GenericAdd,
+  GenericEdit,
+  GenericDetail,
+  ModuleRoutes,
+  DashboardCard,
+  PopQueryDashboard,
+  HomePageAPI,
+  Profile,
+  ReportingDashboard,
+  ChangePassword,
+  ChangeInfo,
+};
 // export { Generic } from './generic/generic-detail/generic-detail';

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

@@ -1,5 +1,10 @@
+/**
+ * ActionButtons
+ * Handles navigation and action controls for a multi-step process,
+ * including dynamic content rendering and process completion actions.
+ */
 import React from 'react';
-import { Card, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import { Button } from '../../lib';
 export default function ActionButtons({
@@ -18,62 +23,66 @@ export default function ActionButtons({
 }) {
   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
+      <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>
-        )}
-        {/* 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}
+          {/* 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"
-             style={{
-              borderRadius: 4,
-            }}
-             onClick={handleFinish}>
-              Finish
+            <Button
+              type="primary"
+              // shape="round"
+              style={{
+                borderRadius: 4,
+              }}
+              disabled={activeStep === steps.length - 1 || !isStepCompleted}
+              onClick={handleNext}
+            >
+              Next →
             </Button>
-          )
-        ) : (
-          <Button
-            type="primary"
-            // shape="round"
-            style={{
-              borderRadius: 4,
-            }}
-            disabled={activeStep === steps.length - 1 || !isStepCompleted}
-            onClick={handleNext}
-          >
-            Next →
-          </Button>
-        )}
-      </div>
-      </>
+          )}
+        </div>
       </>
+    </>
   );
 }

package/core/modules/steps/steps.js CHANGED Viewed

@@ -1,347 +1,26 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import { Skeleton, Row, Col, Empty } from 'antd';
-import {Card} from './../../lib';
+/**
+ * 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 { 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';
+import { ExternalWindow } from '../../components';
-/**
- * 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 }) {
+export default function ProcessStepsPage({ processId, match, CustomComponents = {}, ...props }) {
   const allComponents = { ...genericComponents, ...CustomComponents };
   const [loading, setLoading] = useState(false);
@@ -354,9 +33,10 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
   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);
@@ -367,30 +47,40 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
     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,
@@ -399,7 +89,7 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
       duration,
       status,
     };
+    // Update existing entry or add a new one
     if (index > -1) {
       updated[index] = { ...updated[index], ...entry, duration: updated[index].duration + duration };
     } else {
@@ -409,6 +99,15 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
     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);
@@ -424,7 +123,15 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
       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,
@@ -453,32 +160,73 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
     }
     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" />;
@@ -488,7 +236,12 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
     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
@@ -509,13 +262,15 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [activeStep, steps, handlePrevious, handleNext]);
-  return (
+  /**
+   * 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}
@@ -526,8 +281,7 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
           />
         </Col>
-       <Col xs={24} sm={24} lg={timelineCollapsed ? 21 : 18}>
+        <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>
@@ -550,4 +304,29 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
       </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 CHANGED Viewed

@@ -1,7 +1,7 @@
 .timeline-card .ant-card-body {
   padding: 20px;
   min-height: 400px;
-  position: relative; /* For positioning the arrow */
+  position: fixed; /* For positioning the arrow */
 }
 .timeline-sidebar {

package/core/modules/steps/timeline.js CHANGED Viewed

@@ -1,28 +1,33 @@
-import React from "react";
-import { Skeleton } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import { Card } from "../../lib";
+/**
+ * TimelinePanel Component
+ *
+ * - Displays a vertical timeline for a multi-step process.
+ * - Highlights active and completed steps visually.
+ * - Allows direct navigation by clicking on timeline steps.
+ * - Supports collapsing and expanding the timeline view.
+ * - Shows a loading skeleton while step data is being fetched.
+ *
+ * Used as a visual step navigator within a step-based workflow.
+ */
-export default function TimelinePanel({
-  loading,
-  steps,
-  activeStep,
-  timelineCollapsed,
-  handleTimelineClick,
-  setTimelineCollapsed
-}) {
+import React from 'react';
+import { Skeleton } from 'antd';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Card } from '../../lib';
+export default function TimelinePanel({ loading, steps, activeStep, timelineCollapsed, handleTimelineClick, setTimelineCollapsed }) {
   return (
     <Card className="timeline-card">
       {loading ? (
         <Skeleton active />
       ) : (
-        <div className={`timeline-sidebar ${timelineCollapsed ? "collapsed" : ""}`}>
+        <div className={`timeline-sidebar ${timelineCollapsed ? 'collapsed' : ''}`}>
           {steps.map((step, index) => (
             <div
               key={step.step_id}
               className={`timeline-step
-                ${index === activeStep ? "active" : ""}
-                ${index < activeStep ? "completed" : ""}`}
+                ${index === activeStep ? 'active' : ''}
+                ${index < activeStep ? 'completed' : ''}`}
               onClick={() => handleTimelineClick(index)}
             >
               <div className="step-marker">

package/jest.config.js ADDED Viewed

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '\\.(css|scss)$': 'jest-transform-stub',
+  },
+};

package/jest.setup.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ import '@testing-library/jest-dom';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.17",
+  "version": "2.4.25-dev.21",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"
@@ -13,7 +13,7 @@
   "main": "index.js",
   "scripts": {
     "size": "size-limit",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "start": "webpack-dev-server --mode development",
     "transpile": "babel / -d build --copy-files",
     "build": "webpack --mode production",
@@ -82,10 +82,13 @@
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.9.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^12.1.5",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -100,6 +103,8 @@
     "eslint-plugin-unicorn": "^55.0.0",
     "globals": "^15.9.0",
     "husky": "^9.1.5",
+    "jest": "^27.5.1",
+    "jest-transform-stub": "^2.0.0",
     "prettier": "^3.3.3",
     "sass-loader": "^10.5.2",
     "style-loader": "^1.3.0",