npm - ui-soxo-bootstrap-core - Versions diffs - 2.5.0 → 2.5.1 - Mend

ui-soxo-bootstrap-core 2.5.0 → 2.5.1

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 (8) hide show

package/core/components/external-window/external-window.js +178 -167
package/core/modules/index.js +0 -4
package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js +53 -13
package/core/modules/steps/action-buttons.js +29 -41
package/core/modules/steps/action-buttons.scss +16 -0
package/core/modules/steps/steps.js +71 -57
package/core/modules/steps/steps.scss +4 -3
package/package.json +1 -1

package/core/components/external-window/external-window.js CHANGED Viewed

@@ -18,64 +18,69 @@ import { message } from 'antd';
  * @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
+  children,
+  onClose,
+  onWindowReady,
+  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(`
+  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>
@@ -112,114 +117,120 @@ export function ExternalWindow({
                 </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?.();
+      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);
         }
-    }, [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;
-}
+      });
+      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;
+    }
+    // 🔥 GIVE PARENT ACCESS + FOCUS
+    onWindowReady?.(win);
+    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/modules/index.js CHANGED Viewed

@@ -16,8 +16,6 @@ import PopQueryDashboard from './dashboard/components/pop-query-dashboard/pop-qu
 import HomePageAPI from './../pages/homepage-api/homepage-api';
-import { Profile, ChangePassword } from './../lib';
 import ReportingDashboard from '../modules/reporting/components/reporting-dashboard/reporting-dashboard';
 import ChangeInfo from './Informations/change-info/change-info';
@@ -34,9 +32,7 @@ export {
   DashboardCard,
   PopQueryDashboard,
   HomePageAPI,
-  Profile,
   ReportingDashboard,
-  ChangePassword,
   ChangeInfo,
 };

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import { Table, Skeleton, Input, Tag, Modal, message, Pagination } from 'antd';
+import { Table, Skeleton, Input, Tag, Modal, message, Pagination, Tooltip } from 'antd';
 import { QrcodeOutlined } from '@ant-design/icons';
@@ -106,8 +106,17 @@ export default function ReportingDashboard({
     setPatients([]);
     const fetchId = idOverride || id;
     await CoreScripts.getRecord({ id: fetchId, dbPtr }).then(async ({ result }) => {
+      // Check if display columns are provided from backend
+      if (result.display_columns) {
+        // Parse and set columns from stored JSON
+        setColumns(JSON.parse(result.display_columns));
+      } else {
+        // Reset columns if no display columns exist
+        setColumns([]);
+      }
       await prepareInputParameters(result);
-      setColumns(JSON.parse(result.display_columns));
       if (result.summary_columns) {
         setSummaryColumns(JSON.parse(result.summary_columns));
@@ -160,11 +169,12 @@ export default function ReportingDashboard({
     if (urlParams.script_id) scriptId.current = urlParams.script_id;
     let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
-    parameters = JSON.parse(record.input_parameters);
+    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
     let formContent = {};
-    parameters = await parameters.map((record) => {
+    parameters = await parameters?.map((record) => {
       // Only if the url params does have a matching value ,
       // we should not consider the default  value
@@ -289,6 +299,17 @@ export default function ReportingDashboard({
       }
       // Update patients
       setPatients(resultDetails || []);
+      // Check if columns are not yet defined
+      if (columns.length === 0 && resultDetails.length > 0) {
+        // Create columns dynamically from resultDetails keys
+        setColumns((prev) => {
+          if (prev.length > 0) return prev;
+          return Object.keys(resultDetails[0]).map((key) => ({
+            title: key,
+            field: key,
+          }));
+        });
+      }
       if (result.length) {
         // Set Pgination data into URL
@@ -565,7 +586,6 @@ function GuestList({
   attributes,
   fetchReportData,
 }) {
-  console.log(attributes, '_____________________________________');
   /**
    * @param {*} propValues
    */
@@ -683,7 +703,7 @@ function GuestList({
               redirectLink = redirectLink.replace(new RegExp('@' + replacement.field + ';', 'g'), record[replacement.field]);
             });
-            return <Link to={`${redirectLink}`}>View</Link>;
+            return <Link to={`${redirectLink}`}>{entry.display_name_link ? entry.display_name_link : 'View'}</Link>;
           } else if (entry.field === 'custom') {
             // Make all the components in modules available for use in custom column of core script
             // var genericComponents = require('./../../../../../../../nura-api-new/nura-desk/src/modules');
@@ -737,7 +757,7 @@ function GuestList({
                 // If the column type is 'span', render the field inside a <span> with inline color style
               } else if (entry.columnType === 'span') {
-                return <span style={{ color: record.color_code }}>{record[entry.field]}</span>;
+                return <span style={{ color: record.color_code, overflowWrap: 'break-word', WebkitLineClamp: 3 }}>{record[entry.field]}</span>;
               }
             } else {
               /**
@@ -769,14 +789,25 @@ function GuestList({
                 }
               } else {
                 //If the value is neither 'Y' nor 'N', return the actual field value
-                return <span style={{ color: textColor }}>{record[entry.field]}</span>;
+                return <span style={{ color: textColor, whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{record[entry.field]}</span>;
               }
             }
           }
         },
         field: entry.field,
-        title: entry.title,
+        // title: entry.title,
+        // title: (
+        //   <Tooltip title={entry.title}>
+        //     {entry.title}
+        //   </Tooltip>
+        // ),
+        title: (
+          <Tooltip title={entry.tooltip || entry.title}>
+            <span>{entry.title}</span>
+          </Tooltip>
+        ),
         key: entry.field,
+        width: entry.width ? parseInt(entry.width) : 160,
         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:
@@ -800,7 +831,6 @@ function GuestList({
             // Return the value from record.props if it exists
             return description && record[description] ? record[description] : null;
           }
           return record[entry.field];
         },
         // Add align property based on column type
@@ -884,13 +914,21 @@ function GuestList({
       // setData(data);
       // Define export data
-      let exportDatas = getExportData(patients, cols);
+      // Sanitize cols for export to ensure titles are strings
+      const exportCols = cols.map((col) => {
+        if (col.title && typeof col.title === 'object' && col.title.props) {
+          return { ...col, title: col.title.props.title };
+        }
+        return col;
+      });
+      let exportDatas = getExportData(patients, exportCols);
       if (exportDatas.exportDataColumns.length && exportDatas.exportDataHeaders.length) {
         setExportData({ exportDatas });
       }
     }
-  }, [patients]);
+  }, [patients, columns]);
   let filtered;
@@ -1042,7 +1080,7 @@ function GuestList({
           ) : (
             <TableComponent
               size="small"
-              scroll={{ x: true }}
+              scroll={{ x: 'max-content' }}
               rowKey={(record) => record.OpNo}
               dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data
               columns={cols}
@@ -1162,3 +1200,5 @@ function GuestList({
 //         </Card>
 //     );
 // }
+//     );
+// }

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

@@ -3,9 +3,10 @@
  * Handles navigation and action controls for a multi-step process,
  * including dynamic content rendering and process completion actions.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { Skeleton } from 'antd';
 import { Button } from '../../lib';
+import './action-buttons.scss';
 export default function ActionButtons({
   loading,
@@ -21,63 +22,50 @@ export default function ActionButtons({
   nextProcessId,
   timelineCollapsed,
 }) {
+  const [showNextProcess, setShowNextProcess] = useState(false);
   return (
     <>
       <div style={{ minHeight: 300 }}>{loading ? <Skeleton active /> : renderDynamicComponent()}</div>
       <>
-        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'flex-start', gap: '10px' }}>
+        <div className="action-buttons-container">
           {/* Back button */}
-          <Button disabled={activeStep === 0} onClick={handlePrevious} style={{ marginRight: 8, borderRadius: 4 }}>
+          <Button disabled={activeStep === 0} onClick={handlePrevious}>
             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}
-            >
+            <Button type="default" onClick={handleSkip} 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>
-            )
+            <>
+              {!showNextProcess && (
+                <Button
+                  type="primary"
+                  onClick={async () => {
+                    const success = await handleFinish();
+                    if (success && nextProcessId?.next_process_id) {
+                      setShowNextProcess(true);
+                    }
+                  }}
+                >
+                  Finish
+                </Button>
+              )}
+              {showNextProcess && nextProcessId?.next_process_id && (
+                <Button type="primary" onClick={handleStartNextProcess}>
+                  Start {nextProcessId.next_process_name}
+                </Button>
+              )}
+            </>
           ) : (
-            <Button
-              type="primary"
-              // shape="round"
-              style={{
-                borderRadius: 4,
-              }}
-              disabled={activeStep === steps.length - 1 || !isStepCompleted}
-              onClick={handleNext}
-            >
+            <Button type="primary" disabled={activeStep === steps.length - 1 || !isStepCompleted} onClick={handleNext}>
               Next →
             </Button>
           )}

package/core/modules/steps/action-buttons.scss ADDED Viewed

@@ -0,0 +1,16 @@
+.action-buttons-container {
+  margin-top: 38px;
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  position: sticky;
+  bottom: 0;
+  z-index: 1000;
+  background: #fff;
+  padding: 10px 0;
+  border-top: 1px solid #f0f0f0;
+  .ant-btn {
+    border-radius: 4px;
+  }
+}

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

@@ -20,22 +20,25 @@ import './steps.scss';
 import TimelinePanel from './timeline';
 import { ExternalWindow } from '../../components';
-export default function ProcessStepsPage({ processId, match, CustomComponents = {}, ...props }) {
+export default function ProcessStepsPage({ match, CustomComponents = {}, ...props }) {
   const allComponents = { ...genericComponents, ...CustomComponents };
   const [loading, setLoading] = useState(false);
   const [steps, setSteps] = useState([]);
   const [activeStep, setActiveStep] = useState(0);
   const [isStepCompleted, setIsStepCompleted] = useState(false);
-  const [currentProcessId, setCurrentProcessId] = useState(processId);
   const [nextProcessId, setNextProcessId] = useState(null);
   const [stepStartTime, setStepStartTime] = useState(null);
   const [processStartTime, setProcessStartTime] = useState(null);
   const [processTimings, setProcessTimings] = useState([]);
   const [timelineCollapsed, setTimelineCollapsed] = useState(true);
   const [showExternalWindow, setShowExternalWindow] = useState(false);
-  const urlParams = Location.search();
+  const [externalWin, setExternalWin] = useState(null);
+  const urlParams = Location.search();
+  let processId = urlParams.processId;
+  const [currentProcessId, setCurrentProcessId] = useState(processId);
   // Load process details based on the current process ID
   useEffect(() => {
     loadProcess(currentProcessId);
@@ -204,7 +207,9 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
    */
   const handleFinish = async () => {
     const final = recordStepTime();
-    if (await handleProcessSubmit(final)) props.history?.goBack();
+    const success = await handleProcessSubmit(final);
+    if (success && !nextProcessId) props.history?.goBack();
+    return success;
   };
   /**
    * Start Next Process
@@ -236,31 +241,34 @@ 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
-      if (event.key === 'ArrowLeft') {
-        if (activeStep > 0) {
-          handlePrevious();
-        }
+      if (event.key === 'ArrowLeft' && 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();
-        }
+      if (event.key === 'ArrowRight' && activeStep < steps.length - 1) {
+        handleNext();
       }
     };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [activeStep, steps, handlePrevious, handleNext]);
+    // main window (document!)
+    document.addEventListener('keydown', handleKeyDown);
+    // external window (document!)
+    if (externalWin && externalWin.document) {
+      externalWin.document.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (externalWin && externalWin.document) {
+        externalWin.document.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [activeStep, steps, externalWin]);
   /**
    * Renders the main process UI including timeline, step details,
@@ -268,41 +276,43 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
    * and external window view.
    */
   const renderContent = () => (
-    <Card>
-      <Row gutter={20}>
-        <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
-          <TimelinePanel
-            loading={loading}
-            steps={steps}
-            activeStep={activeStep}
-            timelineCollapsed={timelineCollapsed}
-            handleTimelineClick={handleTimelineClick}
-            setTimelineCollapsed={setTimelineCollapsed}
-          />
-        </Col>
+    <div>
+      <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>
+          <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>
+    </div>
   );
   /**
    * Renders content in both the main window and an external window
@@ -312,6 +322,10 @@ export default function ProcessStepsPage({ processId, match, CustomComponents =
     return (
       <>
         <ExternalWindow
+          onWindowReady={(win) => {
+            setExternalWin(win);
+            win.focus();
+          }}
           title={steps[activeStep]?.step_name || 'Process Step'}
           onClose={() => setShowExternalWindow(false)}
           // left={window.screenX + window.outerWidth}

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

@@ -1,7 +1,8 @@
 .timeline-card .ant-card-body {
-  padding: 20px;
+  // padding: 20px;
+  border: none;
   min-height: 400px;
-  position: fixed; /* For positioning the arrow */
+  // position: fixed; /* For positioning the arrow */
 }
 .timeline-sidebar {
@@ -46,7 +47,7 @@
 .vertical-line {
   width: 2px;
-  height: 40px;
+  height: 20px;
   background: #d9d9d9;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"