ui-soxo-bootstrap-core 2.6.18 → 2.6.20

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -6,79 +6,53 @@
  * Ensure to follow a minimal standard
  */
 import React, { useState, useEffect, useRef } from 'react';
-
 import PhoneInput from 'react-phone-input-2';
-
 import 'react-phone-input-2/lib/style.css';
-
-import PropTypes from "prop-types";
-
+import PropTypes from 'prop-types';
 import './phone-input.scss';
 
-
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur, onKeyDown }) {
-
-  let inputRef = useRef();
-
-  const [phone, setPhone] = useState();
-
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+  defaultCountryCode,
+  onBlur,
+  className,
+  onKeyDown,
+}) {
+  const inputRef = useRef();
+  const hasInitializedRef = useRef(false); // IMPORTANT
+
+  const [phone, setPhone] = useState('');
+  /**
+   * run ONLY ONCE when initial value has dial code
+   */
   useEffect(() => {
-    if (value && value.code && value.code.dialCode !== null) {
-      // To prepopulate phone number ,concat dialCode and phone number
+    if (!hasInitializedRef.current && value?.code?.dialCode && value?.value) {
       setPhone(value.code.dialCode + value.value);
-
-      // In case of update , to identify the country code that is getting selected
-      // We are setting a timeout
-      setTimeout(() => {
-        // Using the reference , we get the internal state of the library component
-        let selectedCountry = null;
-
-        let selectedCode = null;
-
-        if (
-          inputRef.current &&
-          inputRef.current.state &&
-          inputRef.current.state.selectedCountry
-        ) {
-          selectedCountry = inputRef.current.state.selectedCountry;
-
-          // Once we get the selected country ,we format it to the form that is received for normal onChange
-          selectedCode = {
-            countryCode: selectedCountry.iso2,
-            dialCode: selectedCountry.dialCode,
-            name: selectedCountry.name,
-          };
-        }
-
-        // Below being the format expected , we trigger the onChange to manually update the form
-        let updatedValue = {
-          value: value.code.dialCode + value.value,
-          code: selectedCode,
-        };
-
-        onChange(updatedValue);
-      }, 0);
+      hasInitializedRef.current = true; // 👈 mark as done
     }
-  }, []);
+  }, [value]);
 
   /**
-   * To get value in parent component
-   * @param {*} value
+   * handle user input
    */
-  function handleInput(value, code) {
-    if (code.dialCode) {
-      value = value.substring(code.dialCode.length);
-    }
-    // To get country code with phone number in parent component
-    value = {
-      value,
+  function handleInput(inputValue, code) {
+    if (!code?.dialCode) return;
+
+    const phoneNumber = inputValue.slice(code.dialCode.length);
+
+    // remove autofill class when user edits field (if you use it)
+    onChange({
+      value: phoneNumber,
       code,
-    };
-    onChange(value);
+    });
   }
 
   return (
-    <div className="phone-input">
+    <div className={`phone-input ${className || ''}`}>
       <PhoneInput
         ref={inputRef}
         country={defaultCountryCode || 'in'}
@@ -104,4 +78,4 @@ CountryPhoneInput.propTypes = {
   disableCountryCode: PropTypes.bool,
   /** A boolean indicating whether the input is required or not. This prop is optional. */
   required: PropTypes.bool,
-};
+};

package/core/lib/elements/basic/country-phone-input/phone-input.scss

@@ -12,6 +12,20 @@
     // }
   }
   
+  .autofilled-field {
+  .react-tel-input {
+    .form-control {
+      border-color: #fa8c16 !important; // AntD warning orange
+      background-color: #fff7e6;
+      box-shadow: none;
+    }
+
+    .flag-dropdown {
+      border-color: #fa8c16 !important;
+      background-color: #fff7e6;
+    }
+  }
+}
 //   /* For tablets and smaller screens (max-width: 1024px) */
 //   @media (max-width: 1024px) {
 //     .phone-input {

package/core/lib/modules/generic/generic-list/ExportReactCSV.js

@@ -10,6 +10,8 @@
 import React from 'react';
 // Import XLSX library to handle Excel file creation
 import * as XLSX from 'xlsx';
+// import * as XLSX from 'xlsx-js-style';
+// import * as XLSX from 'xlsx-js-style';
 // Import saveAs from file-saver to trigger file download in browser
 import { saveAs } from 'file-saver';
 import { Button } from 'antd';
@@ -30,7 +32,27 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
       // Extract label names for the header row
       const headerLabels = headers.map((h) => h.label);
       // Map data rows according to the headers' key order
-      const rows = csvData.map((row) => headers.map((h) => row[h.key]));
+      const rows = csvData.map((row) =>
+        headers.map((h, hIndex) => {
+          let value = row[h.key];
+          // If it's a summary row, return a cell object with bold styling
+          if (row.isSummaryRow) {
+            // Remove the index value (typically the first column) for the summary row
+            if (hIndex === 0) value = "";
+
+            return {
+              v: value,
+              s: {
+                font: { bold: true },
+                // "Thick" visual indicator via border
+                // Visual indicator via border
+                border: { bottom: { style: "thick", color: { rgb: "000000" } } }
+              }
+            };
+          }
+          return value;
+        })
+      );
       // Create a worksheet from an array of arrays (header + rows)
       const data = [[title || "Report"], [], headerLabels, ...rows];
       // worksheet = XLSX.utils.aoa_to_sheet([headerLabels, ...rows]);
@@ -44,7 +66,11 @@ export const ExportReactCSV = ({ csvData, headers, fileName,title }) => {
     // Append the worksheet to the workbook with the name 'Sheet1'
     XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
     // Write workbook to a buffer as an array
-    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: 'xlsx',
+      type: 'array',
+      cellStyles: true, // Required to export styles
+    });
     // Create a Blob object from the buffer with correct MIME type
     const blob = new Blob([excelBuffer], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',

package/core/lib/pages/login/login.js

@@ -30,7 +30,7 @@ import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
 
 import { Location } from '../../utils';
 
-import { checkLicenseStatus, formatMobile, checkExpiryStatus, safeJSON } from '../../utils/common/common.utils';
+import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
 
 import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
 
@@ -50,8 +50,6 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
-//password valdity expire
-const PASSWORD_VALIDITY_DAYS = 90;
 
 const headers = {
   db_ptr: 'nuraho',
@@ -115,47 +113,32 @@ function LoginPhone({ history, appSettings }) {
    *
    * - Parses `last_password_change` from user.other_details.
    * - Calculates expiry using PASSWORD_VALIDITY_DAYS.
-   * - Uses `checkExpiryStatus()` to determine status.
    * - Shows Ant Design warning message if expired or within warning period.
    * - Warning message includes navigation to `/change-password`.
    *
    * Requires:
    * - PASSWORD_VALIDITY_DAYS constant
-   * - checkExpiryStatus utility
    * - React Router history
    * - antd message component
    */
-  const handlePasswordExpiryCheck = (user) => {
-    const otherDetails = user?.other_details ? JSON.parse(user.other_details) : null;
-
-    const lastPasswordChange = otherDetails?.last_password_change;
-
-    if (lastPasswordChange) {
-      const onlyDate = new Date(lastPasswordChange).toISOString().split('T')[0];
-      const passwordExpiryDate = new Date(onlyDate);
-      passwordExpiryDate.setDate(passwordExpiryDate.getDate() + PASSWORD_VALIDITY_DAYS);
-
-      const passwordStatus = checkExpiryStatus({
-        expiryDate: passwordExpiryDate,
-        warningDays: 2,
-        expiredMessage: 'Your password has expired. Please reset it.',
-        warningMessage: (d) => (
-          <span>
-            Your password will expire in {d} day(s).{' '}
-            <a
-              onClick={() => {
-                history.push('/change-password');
-              }}
-            >
-              Click here to update.
-            </a>
-          </span>
-        ),
-      });
+  const handlePasswordExpiryCheck = (expiryDays) => {
+    if (expiryDays == null) return;
 
-      if (passwordStatus.message) {
-        message.warning(passwordStatus.message);
-      }
+    if (expiryDays <= 0) {
+      message.error('Your password has expired. Please reset it.');
+
+      setExpiredPassword(true);
+      setShowResetpassword(true);
+
+      return;
+    }
+
+    if (expiryDays <= 2) {
+      message.warning(
+        <span>
+          Your password will expire in {expiryDays} day(s). <a onClick={() => history.push('/change-password')}>Click here to update.</a>
+        </span>
+      );
     }
   };
 
@@ -196,7 +179,7 @@ function LoginPhone({ history, appSettings }) {
           if (insider_token) localStorage.insider_token = insider_token;
 
           if (result.success) {
-            handlePasswordExpiryCheck(user);
+            handlePasswordExpiryCheck(result.expiry_in_days);
 
             //two_factor_authentication variable is present then proceed Two factor authentication
             if (result.data && result.data.two_factor_authentication) {
@@ -323,6 +306,8 @@ function LoginPhone({ history, appSettings }) {
    *
    */
   const sendAuthenticationOtp = () => {
+    if (loading) return;
+
     //  Reset previous error
     setModeError(false);
 
@@ -421,7 +406,7 @@ function LoginPhone({ history, appSettings }) {
           // set user info into local storage
           localStorage.setItem('userInfo', JSON.stringify(userInfo));
 
-          handlePasswordExpiryCheck(result.user);
+          handlePasswordExpiryCheck(result.expiry_in_days);
 
           setTimeout(() => history.push('/'), 500);
         } else {
@@ -462,6 +447,8 @@ function LoginPhone({ history, appSettings }) {
    * Otp resend Logic
    */
   const handleResendOTP = () => {
+    if (loading) return;
+
     setOtpValue('');
     setModeError(false);
     setOtpError(false);
@@ -731,7 +718,7 @@ function LoginPhone({ history, appSettings }) {
 
                   {!otpVerification ? (
                     <div className="otp-container">
-                      <Button type="primary" onClick={sendAuthenticationOtp} style={{ marginTop: '6px' }}>
+                      <Button loading={loading} type="primary" onClick={sendAuthenticationOtp} style={{ marginTop: '6px' }}>
                         Send OTP
                       </Button>
                     </div>
@@ -777,7 +764,7 @@ function LoginPhone({ history, appSettings }) {
                         </div>
                       </div>
                       {!otpSuccess && (
-                        <Button type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
+                        <Button loading={loading} type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
                           Verify OTP
                         </Button>
                       )}

package/core/lib/utils/api/api.utils.js

@@ -1,4 +1,4 @@
-import { PostData, GetData, PutData, PatchData, DeleteData } from './../http/http.utils';
+import { PostData, GetData, PutData, PatchData, DeleteData,UploadData } from './../http/http.utils';
 
 let headers = {};
 
@@ -124,33 +124,29 @@ export default class ApiUtils {
     });
   };
 
-  static upload = ({ url, data }) => {
-    return fetch(process.env.REACT_APP_endpoint + url, {
-      // Your POST endpoint
-      method: 'POST',
-      headers: {
-        //   'App-Type': 313,
-        //   'App-Version': '1.0.1',
-        Authorization: 'Bearer ' + localStorage.access_token,
-        // type:'multipart/formData'
-      },
-      //   credentials: 'include',
-      body: data,
-    }).then(
-      (result) => {
-        return result.json();
-      },
-      (error) => {
-        console.log(error);
-        return error;
-      },
-      (progress) => {
-        console.log(progress);
-        return progress;
-      }
-    );
+  // upload document
+  static upload = async ({ url, data, headers: customHeaders = {}, ...props }) => {
+    const dbPtr = localStorage.getItem('db_ptr');
+    
+    // Ensure settings object exists to avoid undefined errors in ApiCall
+    const settings = { 
+        headers: {},
+        getToken: () => localStorage.getItem('access_token') 
+    }; 
+
+    return UploadData({
+        url,
+        formBody: data, 
+        // Your FormData goes here
+        isUpload: true, // Indicate that this is an upload request
+        settings,
+        headers: {
+            ...(dbPtr ? { db_ptr: dbPtr } : {}),
+            ...customHeaders,
+        },
+        ...props,
+    });
   };
-
   /**
    * Get Auth Status
    *

package/core/lib/utils/common/common.utils.js

@@ -123,41 +123,6 @@ export const checkLicenseStatus = (expiryDate) => {
   return { valid: true, daysLeft, message: null, level: null };
 };
 
-/**
- * Checks password expiry status.
- *
- * @param {string|Date} expiryDate
- * @param {number} warningDays
- * @param {string} expiredMessage
- * @param {(daysLeft: number) => string} warningMessage
- *
- * @returns {{ valid: boolean, daysLeft: number, message: string|null, level: "error"|"warning"|null }}
- */
-
-export const checkExpiryStatus = ({ expiryDate, warningDays, expiredMessage, warningMessage }) => {
-  const expiry = new Date(expiryDate);
-
-  if (isNaN(expiry)) {
-    return { valid: false, daysLeft: 0, message: 'Invalid date', level: 'error' };
-  }
-
-  expiry.setHours(0, 0, 0, 0);
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-
-  const msDiff = expiry.getTime() - today.getTime();
-  const daysLeft = Math.ceil(msDiff / (1000 * 60 * 60 * 24));
-
-  if (daysLeft < 0) {
-    return { valid: false, daysLeft, message: expiredMessage, level: 'error' };
-  }
-
-  if (daysLeft <= warningDays) {
-    return { valid: true, daysLeft, message: warningMessage(daysLeft), level: 'warning' };
-  }
-
-  return { valid: true, daysLeft, message: null, level: null };
-};
 
 /**
  * Masks a mobile number by hiding all but the last `visibleDigits`.

package/core/lib/utils/generic/generic.utils.js

@@ -31,7 +31,8 @@ export function getExportData(records, exportDataColumns) {
     const response = records.map((row, columnIndex) => {
 
         let entry = {
-            'Sl No': columnIndex + 1
+            'Sl No': row.isSummaryRow ? '' : columnIndex + 1,
+            isSummaryRow: row.isSummaryRow
         };
 
         filteredColumns.forEach((column, indexValue) => {

package/core/lib/utils/http/http.utils.js

@@ -70,24 +70,37 @@ export async function DeleteData({ url, ...props }) {
  *
  * @param {*} param
  */
-
 export async function ApiCall({ url, formBody, method, settings, ...props }) {
   const token = props.token || (await settings.getToken());
   const path = window.location.pathname;
   const baseUrl = props.baseUrl || process.env.REACT_APP_endpoint;
 
+  const isFormData = formBody instanceof FormData;
+
   const payload = {
     method,
     headers: {
       ...settings.headers,
-      ...headers,
       ...(props.headers || {}),
       Authorization: `Bearer ${token}`,
-      'Content-Type': 'application/json',
     },
-    body: formBody ? JSON.stringify(formBody) : null,
   };
 
+  // ✅ Upload + normal handling
+  if (method !== 'GET' && formBody) {
+    payload.body = formBody;
+
+    if (!isFormData && !(props.isUpload)) {
+      payload.body = JSON.stringify(formBody);
+      payload.headers['Content-Type'] = 'application/json';
+    }
+
+    // ❗ VERY IMPORTANT
+    if (isFormData || (props.isUpload)) {
+      delete payload.headers['Content-Type'];
+    }
+  }
+
   // 🟡 Handles both normal and retried responses
   const handleResponse = async (res) => {
     if (props.responseType === 'blob') {
@@ -156,3 +169,18 @@ export async function ApiCall({ url, formBody, method, settings, ...props }) {
     throw err;
   }
 }
+
+/**
+ * Method for uploading documents
+ * @public
+ */
+export async function UploadData({ url, formBody, ...props }) {
+  return ApiCall({
+    url,
+    formBody,
+    isUpload: true,
+    method: 'POST',
+    returnResponse: true,
+    ...props,
+  });
+}

package/core/modules/reporting/components/reporting-dashboard/display-columns/build-display-columns.js

@@ -25,7 +25,7 @@ function getExportDefinition(entry, record) {
  * @param {Array} root0.columns
  * @param {Array} root0.patients
  * @param {boolean} root0.isFixedIndex
- * @param {Object} root0.CustomComponents
+ * @param {Object.<string, React.ComponentType<any>>} root0.CustomComponents
  * @param {Function} root0.refresh
  * @param {Object} [root0.otherDetails={}] - Optional details from the report configuration.
  * @param {boolean} [root0.otherDetails.isFilterEnabled] - Fallback to enable filtering on all columns.

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

@@ -298,7 +298,6 @@ export default function ReportingDashboard({
       }
       // Update patients
       setPatients(resultDetails || []);
-      console.log(parsedColumns);
 
       // Check if columns are not yet defined
       if (parsedColumns.length === 0 && resultDetails.length > 0) {
@@ -601,6 +600,7 @@ function GuestList({
   const [single, setSingle] = useState({});
   const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
 
+  // const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
   // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
   const cols = buildDisplayColumns({
     columns,
@@ -608,7 +608,7 @@ function GuestList({
     isFixedIndex,
     CustomComponents,
     refresh,
-    otherDetails
+    otherDetails,
   });
 
   /**
@@ -654,8 +654,39 @@ function GuestList({
         }
         return col;
       });
+      const summaryCols = columns.filter((col) => col.enable_summary);
+      let dataToExport = [...patients];
+
+      if (summaryCols.length > 0) {
+        // Build one synthetic row for CSV export that mirrors the table layout:
+        // numeric summary cells are populated from `calculateSummaryValues`, while
+        // non-summary columns stay blank unless a configured caption should be shown.
+        const summaryValues = calculateSummaryValues(summaryCols, patients);
+        const summaryRow = { isSummaryRow: true };
+
+        cols.forEach((col, index) => {
+          // Start each export column empty so the appended row keeps the same shape
+          // as the data rows and does not leak index/helper values into the export.
+          const colKey = col.field || col.key || col.dataIndex;
+          if (colKey && !summaryRow[colKey]) {
+            summaryRow[colKey] = '';
+          }
 
-      let exportDatas = getExportData(patients, exportCols);
+          if (summaryValues[col.field] !== undefined) {
+            // Fill columns that have an aggregate configured (sum, count, avg, etc.).
+            summaryRow[col.field] = summaryValues[col.field];
+          } else {
+            // If this column is marked as the caption target for a summary column,
+            // place the configured label (for example "Total") into that cell.
+            const captionConfig = columns.find((c) => col.field && c.caption_field === col.field);
+            if (captionConfig) {
+              summaryRow[col.field] = captionConfig.summary_caption || '';
+            }
+          }
+        });
+        dataToExport.push(summaryRow);
+      }
+      let exportDatas = getExportData(dataToExport, exportCols);
 
       if (exportDatas.exportDataColumns.length && exportDatas.exportDataHeaders.length) {
         setExportData({ exportDatas });
@@ -740,6 +771,55 @@ function GuestList({
   const handleCloseEdit = () => {
     setShowEdit(false);
   };
+  /**
+   * Calculates aggregate values for the configured summary columns.
+   *
+   * Each summary definition contributes one value keyed by its `field`. Missing
+   * row values are treated as `0` for numeric operations so the table summary and
+   * export summary row can be built from the same result object.
+   *
+   * Supported functions:
+   * `sum` - totals all numeric values in the field.
+   * `count` - returns the number of rows in the current dataset.
+   * `avg` - returns the arithmetic mean of the field values.
+   * `min` - returns the smallest numeric value in the field.
+   * `max` - returns the largest numeric value in the field.
+   *
+   * @param {Array<Object>} summaryCols - Column configs with `field` and `function`.
+   * @param {Array<Object>} pageData - Rows currently being summarized.
+   * @returns {Object} Aggregate values keyed by field name.
+   */
+  function calculateSummaryValues(summaryCols, pageData) {
+    const summaryValues = {};
+
+    summaryCols.forEach((col) => {
+      const field = col.field;
+
+      if (col.function === 'sum') {
+        summaryValues[field] = pageData.reduce((total, row) => total + Number(row[field] || 0), 0);
+      }
+
+      if (col.function === 'count') {
+        summaryValues[field] = pageData.length;
+      }
+
+      if (col.function === 'avg') {
+        const total = pageData.reduce((sum, row) => sum + Number(row[field] || 0), 0);
+        summaryValues[field] = pageData.length ? total / pageData.length : 0;
+      }
+      if (col.function === 'min') {
+        const values = pageData.map((row) => Number(row[field] || 0));
+        summaryValues[field] = values.length ? Math.min(...values) : 0;
+      }
+
+      if (col.function === 'max') {
+        const values = pageData.map((row) => Number(row[field] || 0));
+        summaryValues[field] = values.length ? Math.max(...values) : 0;
+      }
+    });
+
+    return summaryValues;
+  }
   return (
     <>
       <div className="table-header">
@@ -790,6 +870,7 @@ function GuestList({
             {exportData.exportDatas && (
               <ExportReactCSV
                 title={config.caption}
+                fileName={`${(config.caption || 'Report').trim().replace(/\s+/g, '_')}_${moment().format('YYYY-MM-DD-HH-mm-ss-SSS')}.xlsx`}
                 headers={exportData.exportDatas.exportDataHeaders}
                 csvData={exportData.exportDatas.exportDataColumns}
               />
@@ -814,47 +895,37 @@ function GuestList({
               columns={cols}
               sticky
               pagination={false}
-              // title={config.caption}
               summary={(pageData) => {
-                // Variable to save the summary data
-                let summary = {};
-
-                let summaryColumns = [
-                  { field: 'opb_amt', title: 'Amount' },
-                  { field: 'opb_netamt', title: 'Net Amount' },
-                ];
-
-                let tableColumns = cols;
-
-                // Creating a copy of columns to append the summary configuration that is needed to set
-                tableColumns.forEach((record, index) => {
-                  summaryColumns.forEach((inner) => {
-                    if (record.field === inner.field) {
-                      tableColumns[index].summary = inner;
-                    }
-                  });
-                });
-
-                // Initialize
-                summaryColumns.map((item) => {
-                  return (summary[item.field] = 0);
-                });
-
-                // Find the total
-                summaryColumns.map((item) => {
-                  pageData.forEach((entry) => {
-                    return (summary[item.field] = summary[item.field] + entry[item.field]);
-                  });
-                });
+                const summaryCols = columns.filter((col) => col.enable_summary);
+                if (!summaryCols.length) return null;
+                /** calculate summary*/
+
+                const summaryValues = calculateSummaryValues(summaryCols, pageData);
+
 
                 return (
-                  <>
-                    <Table.Summary.Row>
-                      {tableColumns.map((column, key) => {
-                        return <Table.Summary.Cell key={key}>{column.summary ? <>{summary[column.summary.field]}</> : null}</Table.Summary.Cell>;
-                      })}
-                    </Table.Summary.Row>
-                  </>
+                  <Table.Summary.Row className="report-summary-row">
+                    {cols.map((col, index) => {
+                      if (summaryValues[col.field] !== undefined) {
+                        return (
+                          <Table.Summary.Cell key={index}>
+                            <strong style={{ fontWeight: 900 }}>{summaryValues[col.field]}</strong>
+                          </Table.Summary.Cell>
+                        );
+                      }
+
+                      const captionConfig = columns.find((c) => col.field && c.caption_field === col.field);
+                      if (captionConfig) {
+                        return (
+                          <Table.Summary.Cell key={index}>
+                            <strong style={{ fontWeight: 900 }}>{captionConfig.summary_caption || ''}</strong>
+                          </Table.Summary.Cell>
+                        );
+                      }
+
+                      return <Table.Summary.Cell key={index} />;
+                    })}
+                  </Table.Summary.Row>
                 );
               }}
             />

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.scss

@@ -5,6 +5,13 @@
     justify-content: space-between;
   }
 
+  .report-summary-row {
+  position: sticky;
+  bottom: 0;
+  background: #fff;
+  z-index: 10;
+}
+
   .table-header {
     display: flex;
     justify-content: space-between;

package/package.json

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