ui-soxo-bootstrap-core 2.5.0 → 2.5.2

package/core/lib/components/sidemenu/sidemenu.scss

@@ -43,8 +43,8 @@
     width: 17%;
     background: #fff;
     // border-bottom: 1.5px solid #24aeb8;
-    &.close{
-      width:6% !important
+    &.close {
+      width: 6% !important;
     }
 
     .logo-wrapper {
@@ -70,7 +70,7 @@
 
         @media only screen and (max-width: 500px) {
           margin-right: 0px;
-// margin: 10px;
+          // margin: 10px;
           width: 150px;
         }
 
@@ -160,7 +160,7 @@
 
     /* Pseudo-element  (as before) */
     .menu-collapsed::after {
-      content: "";
+      content: '';
       position: absolute;
       top: -100%;
       left: 0;
@@ -175,26 +175,26 @@
       // background-color: #E0EBFF;
       // transform: scale(0.95); /* Apply scale effect on hover */
     }
-/* Style selected item */
-.ant-menu{
-  background-color: transparent !important;
-}
-// .ant-menu-inline .ant-menu-item::after{
-//   border-right: none;
-// }
-// .ant-menu-item-selected {
-//   background-color: var(--selected-bg-color) !important;
-//   color: var(--selected-text-color) !important;
-//    border-radius: 12px;
-//   // font-weight: 600;
-//   // margin: 4px 8px;
-// }
-
-// /* Optional: remove hover effects */
-// .ant-menu-item:hover {
-//   background-color: transparent !important;
-//   color: transparent !important;
-// }
+    /* Style selected item */
+    .ant-menu {
+      background-color: transparent !important;
+    }
+    // .ant-menu-inline .ant-menu-item::after{
+    //   border-right: none;
+    // }
+    // .ant-menu-item-selected {
+    //   background-color: var(--selected-bg-color) !important;
+    //   color: var(--selected-text-color) !important;
+    //    border-radius: 12px;
+    //   // font-weight: 600;
+    //   // margin: 4px 8px;
+    // }
+
+    // /* Optional: remove hover effects */
+    // .ant-menu-item:hover {
+    //   background-color: transparent !important;
+    //   color: transparent !important;
+    // }
 
     /* River flow effect */
     .menu-collapsed:hover::after {
@@ -248,9 +248,7 @@
       padding: 0px;
       // width: 100% !important;
       // padding: 10px 16px;
-    
     }
-   
 
     .menu-item {
       width: 100% !important;
@@ -262,3 +260,18 @@
     }
   }
 }
+
+.ant-menu-item:hover {
+  background-color: #e6f7ff !important;
+  color: #1677ff !important;
+}
+
+/* Tooltip styling if needed */
+.ant-tooltip-inner {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: #ffffff !important;
+  color: #000000 !important;
+}

package/core/lib/pages/profile/theme-config.js

@@ -3,7 +3,7 @@ import themes from './themes.json';
 export const THEME_GROUPS = {
   nura: ['nura', 'default'],
   purple: ['purple'],
-  default: ['default'],
+  default: ['nura'],
 };
 
 const currentEnvTheme = process.env.REACT_APP_THEME?.toLowerCase() || 'default';

package/core/modules/index.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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