npm - ui-soxo-bootstrap-core - Versions diffs - 2.4.25-dev.18 → 2.4.25-dev.22 - Mend

ui-soxo-bootstrap-core 2.4.25-dev.18 → 2.4.25-dev.22

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/reporting/components/reporting-dashboard/reporting-dashboard.js +6 -1
package/core/modules/steps/action-buttons.js +61 -52
package/core/modules/steps/steps.js +129 -20
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/reporting/components/reporting-dashboard/reporting-dashboard.js CHANGED Viewed

@@ -614,6 +614,8 @@ function GuestList({
       {
         title: '#',
         dataIndex: 'index',
+        key: 'ColumnIndex',
+        width: 60,
         render: (value, item, index) => index + 1,
         key: 'ColumnIndex',
         fixed: isFixedIndex ? 'left' : null,
@@ -777,6 +779,8 @@ function GuestList({
         field: entry.field,
         title: entry.title,
         key: entry.field,
+        width: entry.width || 160,
+        ellipsis: true,
         fixed: entry.isFixedColumn ? entry.isFixedColumn : null, // Conditionally setting the 'fixed' key to 'left' if 'isColumnStatic' is true; otherwise, setting it to null.
         // Check if filtering is enabled and patients is an array
         filters:
@@ -1042,7 +1046,8 @@ function GuestList({
           ) : (
             <TableComponent
               size="small"
-              scroll={{ x: true, y: '60vh' }}
+              scroll={{ x: 'max-content', y: '60vh' }}
+              tableLayout="fixed"
               sticky
               rowKey={(record) => record.OpNo}
               dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data

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,15 +1,24 @@
-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';
 export default function ProcessStepsPage({ processId, match, CustomComponents = {}, ...props }) {
   const allComponents = { ...genericComponents, ...CustomComponents };
@@ -24,9 +33,10 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
   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);
@@ -37,30 +47,40 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
     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,
@@ -69,7 +89,7 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
       duration,
       status,
     };
+    // Update existing entry or add a new one
     if (index > -1) {
       updated[index] = { ...updated[index], ...entry, duration: updated[index].duration + duration };
     } else {
@@ -79,6 +99,15 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
     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);
@@ -94,7 +123,15 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
       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,
@@ -123,32 +160,73 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
     }
     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" />;
@@ -158,7 +236,12 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
     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
@@ -179,13 +262,15 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
     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}
@@ -196,8 +281,7 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
           />
         </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>
@@ -220,4 +304,29 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
       </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/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.18",
+  "version": "2.4.25-dev.22",
   "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",