ui-soxo-bootstrap-core 2.6.6 → 2.6.7

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

@@ -1,880 +1,880 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-
-import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
-
-import { QrcodeOutlined } from '@ant-design/icons';
-
-import { Location, FormCreator, GlobalContext, ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
-
-import { CoreScripts } from './../../../../models/';
-
-import moment from 'moment-timezone';
-
-import Button from '../../../../lib/elements/basic/button/button';
-
-import './reporting-dashboard.scss';
-
-// import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
-import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
-import { useHistory } from 'react-router-dom';
-
-import * as ReportingDashboardComp from '../index';
-import buildDisplayColumns from './display-columns/build-display-columns';
-import { getRedirectLink } from './display-columns/display-cell-renderer';
-
-// import { isPdfFile } from 'pdfjs-dist';
-
-var genericComponents = require('./../../../../lib');
-
-const { Search } = Input;
-
-/**
- * ReportingDashboard component renders the dashboard and handles patient details,
- * configuration, and form layout for generating reports.
- *
- * @param {Object} props - The component's props.
- * @param {Object} props.match - The match object containing the URL parameters.
- * @param {Object} props.CustomComponents - Custom components for rendering.
- * @param {string} props.reportId - The report ID.
- * @param {boolean} props.isFixedIndex - Determines if the index is fixed.
- * @param {Array<string>} props.dashBoardIds - The list of dashboard IDs.
- *
- * @returns {JSX.Element} The rendered ReportingDashboard component.
- */
-export default function ReportingDashboard({
-  match,
-  scope,
-  CustomComponents,
-  reportId,
-  isFixedIndex,
-  dashBoardIds,
-  barcodeFilterKey,
-  showScanner,
-  dbPtr,
-  attributes,
-}) {
-  const [config, setConfig] = useState({});
-
-  // State to manage the layout of the form
-  const [formLayout, setFormLayout] = useState('inline');
-
-  const [loading, setLoading] = useState(true);
-
-  const [cardLoading, setCardLoading] = useState(true);
-
-  const [dashboardVisible, setDashBoardVisible] = useState(false);
-
-  const [formContents, setformContents] = useState({});
-
-  const scriptId = useRef(null);
-
-  //In case of reports from core_script , there will be id from params
-  // In case of normal menu we need to take id from props
-  let id = reportId ? reportId : match.params.id;
-
-  const { CustomModels = {} } = useContext(GlobalContext);
-
-  const [details, setDetails] = useState([]);
-
-  const [columns, setColumns] = useState([]); // To set columns
-
-  const [summaryColumns, setSummaryColumns] = useState([]);
-
-  const [patients, setPatients] = useState([]); //Patients list array
-
-  const urlParams = Location.search();
-
-  // Pagination
-  const [pagination, setPagination] = useState({
-    current: 1,
-    pageSize: 20,
-    total: 0,
-  });
-
-  // Settings db pointer
-  if (!dbPtr) dbPtr = localStorage.db_ptr;
-
-  /**
-   * Fetches patient details from the server and updates the relevant state.
-   * This includes input parameters, columns, summary columns, and configuration.
-   *
-   * @returns {Promise<void>} A promise that resolves when the patient details have been fetched and the state has been updated.
-   */
-  async function getPatientDetails(idOverride) {
-    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);
-
-      if (result.summary_columns) {
-        setSummaryColumns(JSON.parse(result.summary_columns));
-      }
-
-      setConfig({ ...result });
-    });
-  }
-
-  // useEffect(() => {
-  //   if (!dashboardVisible) {
-  //     refresh(false);
-  //   }
-  // }, [dashboardVisible]);
-
-  /**
-   *
-   *
-   * Manage initial render
-   */
-
-  useEffect(() => {
-    getPatientDetails();
-  }, []);
-
-  /**
-   * Effect hook that triggers the `getPatientDetails` function
-   * whenever the `match.params.id` value changes.
-   *
-   * @returns {void} This hook does not return anything.
-   */
-  // useEffect(() => {
-  //   getPatientDetails();
-  // }, [match.params.id]);
-
-  let parameters;
-
-  /**
-   * Some parameters would need binding with the model
-   *
-   * @param {*} inputParameters Input parameters from the report configuration.
-   */
-
-  //Prepare input parameters by mapping default values and binding models if needed
-  async function prepareInputParameters(record) {
-    setLoading(true);
-    let urlParams = Location.search();
-
-    // If script id exist set into variable
-    if (urlParams.script_id) scriptId.current = urlParams.script_id;
-
-    let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
-
-    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
-
-    let formContent = {};
-
-    parameters = await parameters?.map((record) => {
-      // Only if the url params does have a matching value ,
-      // we should not consider the default  value
-
-      if (urlParams[record.field]) {
-        if (record.type === 'date') {
-          formContent[record.field] = moment.utc(urlParams[record.field]);
-        }
-
-        // return formContent;
-      } else {
-        // let StartDate, EndDate;
-        switch (record.default) {
-          case 'startOfDay':
-            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).startOf('day');
-            break;
-
-          case 'endOfDay':
-            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).endOf('day');
-            break;
-
-          case 'startOfWeek':
-            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).startOf('week');
-            break;
-
-          case 'endOfWeek':
-            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).endOf('week');
-            break;
-
-          case 'currentDate':
-            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
-            break;
-
-          default:
-            break;
-        }
-      }
-
-      // If it is a date field and still no value, set it to today's date
-      if (record.type === 'date' && !formContent[record.field]) {
-        formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
-      }
-
-      if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
-        // let model = "";
-        let model = CustomModels[record.modelName];
-
-        return {
-          ...record,
-          model,
-          required: record.required,
-        };
-      } else {
-        return {
-          ...record,
-          required: true,
-        };
-      }
-    });
-    // Update form content state
-    setformContents(formContent);
-
-    // Trigger form submission
-    onFinish(formContent, null, record.input_parameters);
-
-    setLoading(false);
-
-    // Check if input parameters are enabled or disabled in otherDetails
-    if (otherDetails?.isDisableInputParameters) {
-      // If enabled, clear the details array
-      setDetails([]);
-    } else {
-      //// Filter the array "parameters" and keep only elements where "type" is present (truthy)
-      //Keep only parameters that have a "type" → used for UI display
-      let filter = parameters.filter((ele) => ele.type);
-      // Update the "details" state with the filtered results
-
-      setDetails([...filter]);
-    }
-  }
-
-  // Refresh patient details.
-
-  function refresh() {
-    getPatientDetails();
-  }
-
-  const fetchReportData = async (id, values, dbPtr, pagination) => {
-    const { current, pageSize } = pagination || {};
-    // If card script id is exist load that id otherwise load id
-    const coreScriptId = scriptId.current ? scriptId.current : id;
-
-    setLoading(true);
-    try {
-      // Prepare payload for backend: format only here
-      const formattedValues = {};
-      Object.keys(values).forEach((key) => {
-        const val = values[key];
-        formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
-      });
-      // Pagination Data
-      const paginationData = {
-        page: pagination.current || 1,
-        limit: pagination.pageSize || 10,
-      };
-      // Combine form data + pagination
-      let formBody = {
-        body: {
-          ...formattedValues,
-          ...paginationData,
-        },
-      };
-      // Optional override if `scope` exists
-      if (scope) {
-        formBody = { body: { ...scope, ...paginationData } };
-      }
-      // Fetch result
-      const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
-
-      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
-
-      // Handle both result formats
-      let resultDetails = apiData[0] || [];
-      if (result?.result && result?.result[0]) {
-        resultDetails = result.result[0];
-      }
-      // 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
-        Location.search({ ...Location.search(), current, pageSize });
-
-        setPagination((prev) => ({
-          ...prev,
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: resultDetails?.[0]?.TotalCount ?? pagination?.total,
-        }));
-      }
-    } catch (error) {
-      console.error('Error fetching report data:', error);
-    } finally {
-      // Always runs, success or error
-      setLoading(false);
-    }
-  };
-
-  // Handle Submit
-  const handleSubmit = (values) => {
-    const { pageSize } = pagination;
-    const resetPage = 1;
-
-    // Reset script id on Submit
-    scriptId.current = null;
-
-    // Get current query params
-    const currentUrlParams = Location.search();
-    const { script_id, selected_card, ...cleanParams } = currentUrlParams;
-
-    // Construct new query string
-    const newParams = new URLSearchParams({
-      ...cleanParams,
-      current: resetPage,
-      pageSize,
-    });
-
-    // Replace URL
-    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
-
-    // Trigger submit handler
-    onFinish(values, resetPage);
-  };
-
-  /**
-   *
-   * @param {*} values
-   */
-
-  const onFinish = async (values, resetPage, inputParamsString) => {
-    setLoading(true);
-    setCardLoading(true);
-    // // Check if the dashboard is visible and both start and end values are provided
-    // If true, proceed with hiding the dashboard by setting dashboardVisible to false
-    if (dashboardVisible && values.start && values.end) {
-      setDashBoardVisible((prev) => {
-        if (!prev) return prev; // Prevent unnecessary updates
-
-        return false;
-      });
-    }
-    const paramsString = inputParamsString || (config.input_parameters ? config.input_parameters : null);
-    // Cheacking if there is data and making the data url friendly, ie, if there is date in url
-    if (paramsString) {
-      let urlsToUpdate = {};
-
-      let parameterValue = JSON.parse(paramsString);
-
-      // Variable to store/update the form initial Values
-
-      let formContent = {};
-
-      parameters = parameterValue.map((parameter) => {
-        //Getting url friendly value by matching the url values and input_parameter values
-        let value = values[parameter.field];
-
-        // Keep Moment object in state for picker
-        if (parameter.type === 'date' && value) {
-          formContent[parameter.field] = value.isValid ? value : moment(value); // ensure Moment
-          // Format for URL
-          urlsToUpdate[parameter.field] = moment(value).format('YYYY-MM-DD');
-        } else {
-          formContent[parameter.field] = value;
-          if (parameter.type) {
-            urlsToUpdate[parameter.field] = value;
-          }
-        }
-
-        return parameter;
-      });
-
-      //  Remove keys with undefined, null, or empty string values
-      const filteredParams = Object.fromEntries(
-        Object.entries(urlsToUpdate).filter(([_, value]) => value !== undefined && value !== null && value !== '')
-      );
-
-      setformContents(formContent);
-      Location.search({ ...Location.search(), ...filteredParams });
-    }
-
-    // Reset Pagination Data
-    const latestUrlParams = Location.search();
-    const paginationData = {
-      current: resetPage || Number(latestUrlParams.current) || 1,
-      pageSize: Number(latestUrlParams.pageSize) || pagination.pageSize,
-    };
-
-    // Call API
-    try {
-      await fetchReportData(id, values, dbPtr, paginationData);
-    } finally {
-      setLoading(false);
-      setCardLoading(false);
-    }
-  };
-
-  // Pagination Handler
-  const handlePagination = async (newPagination) => {
-    try {
-      await fetchReportData(id, formContents, dbPtr, newPagination);
-    } finally {
-      setLoading(false);
-      setCardLoading(false);
-    }
-  };
-
-  let model = {
-    fields: details,
-  };
-
-  return (
-    <Card className="reporting-dashboard card card-shadow">
-      {/** If dashBoardIds exist and contain elements, render MenuDashBoard*/}
-
-      {dashBoardIds?.length > 0 ? (
-        <MenuDashBoardComponent
-          dashBoardIds={dashBoardIds} //Pass the available dashboard IDs to the componen
-          activeId={Number(urlParams?.selected_card || 0)}
-          callback={(record) => {
-            const selectedCard = record?.id;
-            if (record.other_details) {
-              // Convert the other_details string to a JSON object
-              let json = JSON.parse(record.other_details);
-              const newScriptId = json.script_id;
-
-              scriptId.current = newScriptId;
-
-              // Reset Pagination on card click
-              setPagination((prev) => ({
-                ...prev,
-                current: 1,
-                total: 0,
-              }));
-
-              //Update URL
-              Location.search({
-                ...Location.search(),
-                current: 1,
-                pageSize: pagination.pageSize,
-                script_id: newScriptId,
-                selected_card: selectedCard,
-              });
-
-              // menudashBoardVisible = true;
-              // Show the dashboard component
-              setDashBoardVisible(true);
-              // Fetch and update patient details based on the selected item
-              getPatientDetails(newScriptId);
-              // setDashBoard(true);
-            }
-          }}
-        ></MenuDashBoardComponent>
-      ) : null}
-
-      {/* Content Below */}
-      {loading ? (
-        <>
-          <Skeleton active />
-        </>
-      ) : (
-        <>
-          <div>
-            {/* <Card className="form-card" style={{ padding: '10px 10px' }}> */}
-            {details && details[0] && !loading ? (
-              <FormCreator
-                {...formLayout}
-                layout={formLayout}
-                initialValues={{
-                  layout: formLayout,
-                }}
-                styles={{ paddingRight: '15px', alignItems: 'center' }}
-                fields={details}
-                formContent={formContents}
-                // formContent={{ [model]: {} }}
-                modelIndex="requestId"
-                model={model}
-                onSubmit={handleSubmit}
-                callback={() => {
-                  // history.goBack();
-                }}
-              />
-            ) : null}
-            {/* </Card> */}
-          </div>
-
-          {/** GuestList component start*/}
-          <GuestList
-            patients={patients}
-            columns={columns}
-            summaryColumns={summaryColumns}
-            isFixedIndex={isFixedIndex}
-            showScanner={showScanner}
-            barcodeFilterKey={barcodeFilterKey}
-            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
-            refresh={refresh}
-            config={config}
-            loading={cardLoading}
-            pagination={pagination}
-            handlePagination={handlePagination}
-            attributes={attributes}
-            fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
-          />
-          {/** GuestList component end*/}
-        </>
-      )}
-    </Card>
-  );
-}
-
-/**
- *
- * @param root0
- * @param root0.patients
- * @param root0.CustomComponents
- * @param root0.summaryColumns
- * @param root0.refresh
- * @param root0.isFixedIndex
- * @returns {*}
- */
-//Renders a table displaying a list of patients with dynamic columns
-function GuestList({
-  patients,
-  columns,
-  loading,
-  CustomComponents,
-  refresh,
-  isFixedIndex,
-  barcodeFilterKey,
-  showScanner,
-  config,
-  pagination,
-  handlePagination,
-  attributes,
-  fetchReportData,
-}) {
-  /**
-   * @param {*} propValues
-   */
-  const propValues = (attributes && JSON.parse(attributes)) || {};
-
-  const { buttonAttributes = [] } = propValues;
-
-  var [query, setQuery] = useState('');
-
-  const [exportData, setExportData] = useState({});
-
-  // const [data, setData] = useState([]);
-
-  //visibility of the QR scanner modal.
-  const [isScannerVisible, setScannerVisible] = useState(false);
-
-  // Stores the patients filtered specifically by QR scan match.
-  const [filteredPatients, setFilteredPatients] = useState([]); // Show all initially
-
-  // patient object to redirect to upon successful QR scan.
-  const [redirectPatient, setRedirectPatient] = useState(null);
-
-  const [visible, setVisible] = useState(false);
-
-  const [ActiveComponent, setActiveComponent] = useState(null);
-
-  let history = useHistory();
-
-  const { isMobile, dispatch } = useContext(GlobalContext);
-  const [single, setSingle] = useState({});
-
-  // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
-  const cols = buildDisplayColumns({
-    columns,
-    patients,
-    isFixedIndex,
-    CustomComponents,
-    refresh,
-  });
-
-  /**
-   *
-   * @param {*} result
-   */
-
-  // function changeView(result) {
-  //     setView(result);
-  // }
-
-  /**
-   *
-   * @param {*} event
-   */
-
-  function onSearch(event) {
-    setQuery(event.target.value);
-  }
-
-  /**
-   *
-   */
-
-  useEffect(() => {
-    //Cheaking if there is patient data exists
-    if (patients) {
-      let data = patients?.map((entry) => {
-        entry.rowIndex = entry.opb_id;
-
-        entry.dispatch = dispatch;
-
-        return entry;
-      });
-
-      // setData(data);
-
-      // Define export data
-      // 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, columns]);
-
-  let filtered;
-
-  if (patients) {
-    filtered = patients.filter((record) => {
-      if (query) {
-        // Keys
-        let keys = Object.keys(record);
-
-        let flag = false;
-
-        keys.forEach((key) => {
-          let ele = record[key];
-
-          if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
-            flag = true;
-          }
-        });
-
-        /**Will return flag */
-        return flag;
-      } else {
-        return true;
-      }
-    });
-  }
-
-  /**
-   * Checks for a match in the filtered patient list based on a scanned code,
-   * updates the relevant state if a match is found, and redirects to the
-   * patient's detail page. Displays a warning if no match is found.
-   *
-   * @param {string} code - The scanned code to match against a specific field of each patient.
-   */
-
-  const handleScanSuccess = (code) => {
-    // Filters patients based on the scanned code and the selected barcode key(using attributes 'barcodeFilterKey')
-    const matched = filtered.filter((patient) => patient[barcodeFilterKey] === code);
-
-    if (matched.length) {
-      const patient = matched[0];
-      setFilteredPatients(matched);
-      setRedirectPatient(matched);
-      message.success(`Match found for ${code}, redirecting...`);
-
-      const actionColumn = columns.find((col) => col.field === 'action') || columns.find((col) => col.type === 'action');
-      if (actionColumn) {
-        const redirectLink = getRedirectLink(actionColumn, patient);
-        // history.push(redirectLink);
-        window.location.href = redirectLink;
-      }
-    } else {
-      Modal.warning({
-        title: 'No matching records.',
-        content: `No match for scanned code: ${code}`,
-      });
-    }
-  };
-
-  //open the edit modal
-  const handleOpenEdit = (button) => {
-    const componentName = button.component;
-    const ComponentToRender = ReportingDashboardComp[componentName];
-
-    if (!ComponentToRender) {
-      console.error(`Component ${componentName} not found!`);
-      return;
-    }
-
-    setSingle({});
-    setActiveComponent(() => ComponentToRender);
-    setVisible(true);
-  };
-
-  // close the edit modal
-  const handleCloseEdit = () => {
-    setShowEdit(false);
-  };
-  return (
-    <>
-      <div className="table-header">
-        <div className="table-left">
-          {/* shwoing caption is not correct so this commented */}
-          {/* <span  className="menu-caption">{config.caption}</span> */}
-          <Search placeholder="Enter Search Value" allowClear onChange={onSearch} />
-          {/* <p className="size-hint">{patients.length} records.</p> */}
-        </div>
-
-        <div className="table-right">
-          {/* QR Scan start */}
-          {showScanner ? (
-            <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
-              Scan QR
-            </Button>
-          ) : null}
-          {/** Add User button */}
-          {Array.isArray(buttonAttributes) &&
-            buttonAttributes.map((btn, index) => (
-              <Button key={index} size="small" type="primary" style={{ marginLeft: 8 }} onClick={() => handleOpenEdit(btn)}>
-                {btn.title}
-              </Button>
-            ))}
-
-          <Modal open={visible} onCancel={() => setVisible(false)} footer={null} destroyOnClose width={950} style={{ top: 10 }}>
-            {ActiveComponent && (
-              <ActiveComponent
-                formContent={single}
-                callback={() => {
-                  setVisible(false);
-                  refresh();
-                  setVisible(false);
-                  fetchReportData();
-                }}
-                // {...dynamicProps}
-              />
-            )}
-          </Modal>
-
-          <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
-            <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
-          </Modal>
-
-          <div>
-            {/* QR Scan End */}
-            {/*table data export to csc component*/}
-            {exportData.exportDatas && (
-              <ExportReactCSV
-                title={config.caption}
-                headers={exportData.exportDatas.exportDataHeaders}
-                csvData={exportData.exportDatas.exportDataColumns}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div>
-      
-        <Card>
-          {loading ? (
-            <>
-              <Skeleton active paragraph={{ rows: 6 }} />
-            </>
-          ) : (
-            <TableComponent
-              size="small"
-              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}
-              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]);
-                  });
-                });
-
-                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>
-                  </>
-                );
-              }}
-            />
-          )}
-
-          {/* Pagination aligned to the right */}
-          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
-            <Pagination
-              showSizeChanger
-              current={pagination.current}
-              pageSize={pagination.pageSize}
-              total={pagination.total}
-              pageSizeOptions={[20, 30, 50, 100]}
-              onChange={(page, pageSize) => handlePagination({ current: page, pageSize })}
-            />
-          </div>
-
-          {/*If patient data exists show the number else to 0 */}
-          <p className="size-hint">{patients ? patients.length : 0} records. </p>
-        </Card>
-        {/* </> */}
-        {/* )} */}
-      </div>
-    </>
-  );
-}
+import React, { useState, useEffect, useContext, useRef } from 'react';
+
+import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
+
+import { QrcodeOutlined } from '@ant-design/icons';
+
+import { Location, FormCreator, GlobalContext, ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+
+import { CoreScripts } from './../../../../models/';
+
+import moment from 'moment-timezone';
+
+import Button from '../../../../lib/elements/basic/button/button';
+
+import './reporting-dashboard.scss';
+
+// import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
+import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
+import { useHistory } from 'react-router-dom';
+
+import * as ReportingDashboardComp from '../index';
+import buildDisplayColumns from './display-columns/build-display-columns';
+import { getRedirectLink } from './display-columns/display-cell-renderer';
+
+// import { isPdfFile } from 'pdfjs-dist';
+
+var genericComponents = require('./../../../../lib');
+
+const { Search } = Input;
+
+/**
+ * ReportingDashboard component renders the dashboard and handles patient details,
+ * configuration, and form layout for generating reports.
+ *
+ * @param {Object} props - The component's props.
+ * @param {Object} props.match - The match object containing the URL parameters.
+ * @param {Object} props.CustomComponents - Custom components for rendering.
+ * @param {string} props.reportId - The report ID.
+ * @param {boolean} props.isFixedIndex - Determines if the index is fixed.
+ * @param {Array<string>} props.dashBoardIds - The list of dashboard IDs.
+ *
+ * @returns {JSX.Element} The rendered ReportingDashboard component.
+ */
+export default function ReportingDashboard({
+  match,
+  scope,
+  CustomComponents,
+  reportId,
+  isFixedIndex,
+  dashBoardIds,
+  barcodeFilterKey,
+  showScanner,
+  dbPtr,
+  attributes,
+}) {
+  const [config, setConfig] = useState({});
+
+  // State to manage the layout of the form
+  const [formLayout, setFormLayout] = useState('inline');
+
+  const [loading, setLoading] = useState(true);
+
+  const [cardLoading, setCardLoading] = useState(true);
+
+  const [dashboardVisible, setDashBoardVisible] = useState(false);
+
+  const [formContents, setformContents] = useState({});
+
+  const scriptId = useRef(null);
+
+  //In case of reports from core_script , there will be id from params
+  // In case of normal menu we need to take id from props
+  let id = reportId ? reportId : match.params.id;
+
+  const { CustomModels = {} } = useContext(GlobalContext);
+
+  const [details, setDetails] = useState([]);
+
+  const [columns, setColumns] = useState([]); // To set columns
+
+  const [summaryColumns, setSummaryColumns] = useState([]);
+
+  const [patients, setPatients] = useState([]); //Patients list array
+
+  const urlParams = Location.search();
+
+  // Pagination
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+  });
+
+  // Settings db pointer
+  if (!dbPtr) dbPtr = localStorage.db_ptr;
+
+  /**
+   * Fetches patient details from the server and updates the relevant state.
+   * This includes input parameters, columns, summary columns, and configuration.
+   *
+   * @returns {Promise<void>} A promise that resolves when the patient details have been fetched and the state has been updated.
+   */
+  async function getPatientDetails(idOverride) {
+    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);
+
+      if (result.summary_columns) {
+        setSummaryColumns(JSON.parse(result.summary_columns));
+      }
+
+      setConfig({ ...result });
+    });
+  }
+
+  // useEffect(() => {
+  //   if (!dashboardVisible) {
+  //     refresh(false);
+  //   }
+  // }, [dashboardVisible]);
+
+  /**
+   *
+   *
+   * Manage initial render
+   */
+
+  useEffect(() => {
+    getPatientDetails();
+  }, []);
+
+  /**
+   * Effect hook that triggers the `getPatientDetails` function
+   * whenever the `match.params.id` value changes.
+   *
+   * @returns {void} This hook does not return anything.
+   */
+  // useEffect(() => {
+  //   getPatientDetails();
+  // }, [match.params.id]);
+
+  let parameters;
+
+  /**
+   * Some parameters would need binding with the model
+   *
+   * @param {*} inputParameters Input parameters from the report configuration.
+   */
+
+  //Prepare input parameters by mapping default values and binding models if needed
+  async function prepareInputParameters(record) {
+    setLoading(true);
+    let urlParams = Location.search();
+
+    // If script id exist set into variable
+    if (urlParams.script_id) scriptId.current = urlParams.script_id;
+
+    let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
+
+    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
+
+    let formContent = {};
+
+    parameters = await parameters?.map((record) => {
+      // Only if the url params does have a matching value ,
+      // we should not consider the default  value
+
+      if (urlParams[record.field]) {
+        if (record.type === 'date') {
+          formContent[record.field] = moment.utc(urlParams[record.field]);
+        }
+
+        // return formContent;
+      } else {
+        // let StartDate, EndDate;
+        switch (record.default) {
+          case 'startOfDay':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).startOf('day');
+            break;
+
+          case 'endOfDay':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).endOf('day');
+            break;
+
+          case 'startOfWeek':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).startOf('week');
+            break;
+
+          case 'endOfWeek':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).endOf('week');
+            break;
+
+          case 'currentDate':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
+            break;
+
+          default:
+            break;
+        }
+      }
+
+      // If it is a date field and still no value, set it to today's date
+      if (record.type === 'date' && !formContent[record.field]) {
+        formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
+      }
+
+      if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
+        // let model = "";
+        let model = CustomModels[record.modelName];
+
+        return {
+          ...record,
+          model,
+          required: record.required,
+        };
+      } else {
+        return {
+          ...record,
+          required: true,
+        };
+      }
+    });
+    // Update form content state
+    setformContents(formContent);
+
+    // Trigger form submission
+    onFinish(formContent, null, record.input_parameters);
+
+    setLoading(false);
+
+    // Check if input parameters are enabled or disabled in otherDetails
+    if (otherDetails?.isDisableInputParameters) {
+      // If enabled, clear the details array
+      setDetails([]);
+    } else {
+      //// Filter the array "parameters" and keep only elements where "type" is present (truthy)
+      //Keep only parameters that have a "type" → used for UI display
+      let filter = parameters.filter((ele) => ele.type);
+      // Update the "details" state with the filtered results
+
+      setDetails([...filter]);
+    }
+  }
+
+  // Refresh patient details.
+
+  function refresh() {
+    getPatientDetails();
+  }
+
+  const fetchReportData = async (id, values, dbPtr, pagination) => {
+    const { current, pageSize } = pagination || {};
+    // If card script id is exist load that id otherwise load id
+    const coreScriptId = scriptId.current ? scriptId.current : id;
+
+    setLoading(true);
+    try {
+      // Prepare payload for backend: format only here
+      const formattedValues = {};
+      Object.keys(values).forEach((key) => {
+        const val = values[key];
+        formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+      });
+      // Pagination Data
+      const paginationData = {
+        page: pagination.current || 1,
+        limit: pagination.pageSize || 10,
+      };
+      // Combine form data + pagination
+      let formBody = {
+        body: {
+          ...formattedValues,
+          ...paginationData,
+        },
+      };
+      // Optional override if `scope` exists
+      if (scope) {
+        formBody = { body: { ...scope, ...paginationData } };
+      }
+      // Fetch result
+      const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
+
+      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
+
+      // Handle both result formats
+      let resultDetails = apiData[0] || [];
+      if (result?.result && result?.result[0]) {
+        resultDetails = result.result[0];
+      }
+      // 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
+        Location.search({ ...Location.search(), current, pageSize });
+
+        setPagination((prev) => ({
+          ...prev,
+          current: pagination.current,
+          pageSize: pagination.pageSize,
+          total: resultDetails?.[0]?.TotalCount ?? pagination?.total,
+        }));
+      }
+    } catch (error) {
+      console.error('Error fetching report data:', error);
+    } finally {
+      // Always runs, success or error
+      setLoading(false);
+    }
+  };
+
+  // Handle Submit
+  const handleSubmit = (values) => {
+    const { pageSize } = pagination;
+    const resetPage = 1;
+
+    // Reset script id on Submit
+    scriptId.current = null;
+
+    // Get current query params
+    const currentUrlParams = Location.search();
+    const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+
+    // Construct new query string
+    const newParams = new URLSearchParams({
+      ...cleanParams,
+      current: resetPage,
+      pageSize,
+    });
+
+    // Replace URL
+    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+    window.history.replaceState({}, '', newUrl);
+
+    // Trigger submit handler
+    onFinish(values, resetPage);
+  };
+
+  /**
+   *
+   * @param {*} values
+   */
+
+  const onFinish = async (values, resetPage, inputParamsString) => {
+    setLoading(true);
+    setCardLoading(true);
+    // // Check if the dashboard is visible and both start and end values are provided
+    // If true, proceed with hiding the dashboard by setting dashboardVisible to false
+    if (dashboardVisible && values.start && values.end) {
+      setDashBoardVisible((prev) => {
+        if (!prev) return prev; // Prevent unnecessary updates
+
+        return false;
+      });
+    }
+    const paramsString = inputParamsString || (config.input_parameters ? config.input_parameters : null);
+    // Cheacking if there is data and making the data url friendly, ie, if there is date in url
+    if (paramsString) {
+      let urlsToUpdate = {};
+
+      let parameterValue = JSON.parse(paramsString);
+
+      // Variable to store/update the form initial Values
+
+      let formContent = {};
+
+      parameters = parameterValue.map((parameter) => {
+        //Getting url friendly value by matching the url values and input_parameter values
+        let value = values[parameter.field];
+
+        // Keep Moment object in state for picker
+        if (parameter.type === 'date' && value) {
+          formContent[parameter.field] = value.isValid ? value : moment(value); // ensure Moment
+          // Format for URL
+          urlsToUpdate[parameter.field] = moment(value).format('YYYY-MM-DD');
+        } else {
+          formContent[parameter.field] = value;
+          if (parameter.type) {
+            urlsToUpdate[parameter.field] = value;
+          }
+        }
+
+        return parameter;
+      });
+
+      //  Remove keys with undefined, null, or empty string values
+      const filteredParams = Object.fromEntries(
+        Object.entries(urlsToUpdate).filter(([_, value]) => value !== undefined && value !== null && value !== '')
+      );
+
+      setformContents(formContent);
+      Location.search({ ...Location.search(), ...filteredParams });
+    }
+
+    // Reset Pagination Data
+    const latestUrlParams = Location.search();
+    const paginationData = {
+      current: resetPage || Number(latestUrlParams.current) || 1,
+      pageSize: Number(latestUrlParams.pageSize) || pagination.pageSize,
+    };
+
+    // Call API
+    try {
+      await fetchReportData(id, values, dbPtr, paginationData);
+    } finally {
+      setLoading(false);
+      setCardLoading(false);
+    }
+  };
+
+  // Pagination Handler
+  const handlePagination = async (newPagination) => {
+    try {
+      await fetchReportData(id, formContents, dbPtr, newPagination);
+    } finally {
+      setLoading(false);
+      setCardLoading(false);
+    }
+  };
+
+  let model = {
+    fields: details,
+  };
+
+  return (
+    <Card className="reporting-dashboard card card-shadow">
+      {/** If dashBoardIds exist and contain elements, render MenuDashBoard*/}
+
+      {dashBoardIds?.length > 0 ? (
+        <MenuDashBoardComponent
+          dashBoardIds={dashBoardIds} //Pass the available dashboard IDs to the componen
+          activeId={Number(urlParams?.selected_card || 0)}
+          callback={(record) => {
+            const selectedCard = record?.id;
+            if (record.other_details) {
+              // Convert the other_details string to a JSON object
+              let json = JSON.parse(record.other_details);
+              const newScriptId = json.script_id;
+
+              scriptId.current = newScriptId;
+
+              // Reset Pagination on card click
+              setPagination((prev) => ({
+                ...prev,
+                current: 1,
+                total: 0,
+              }));
+
+              //Update URL
+              Location.search({
+                ...Location.search(),
+                current: 1,
+                pageSize: pagination.pageSize,
+                script_id: newScriptId,
+                selected_card: selectedCard,
+              });
+
+              // menudashBoardVisible = true;
+              // Show the dashboard component
+              setDashBoardVisible(true);
+              // Fetch and update patient details based on the selected item
+              getPatientDetails(newScriptId);
+              // setDashBoard(true);
+            }
+          }}
+        ></MenuDashBoardComponent>
+      ) : null}
+
+      {/* Content Below */}
+      {loading ? (
+        <>
+          <Skeleton active />
+        </>
+      ) : (
+        <>
+          <div>
+            {/* <Card className="form-card" style={{ padding: '10px 10px' }}> */}
+            {details && details[0] && !loading ? (
+              <FormCreator
+                {...formLayout}
+                layout={formLayout}
+                initialValues={{
+                  layout: formLayout,
+                }}
+                styles={{ paddingRight: '15px', alignItems: 'center' }}
+                fields={details}
+                formContent={formContents}
+                // formContent={{ [model]: {} }}
+                modelIndex="requestId"
+                model={model}
+                onSubmit={handleSubmit}
+                callback={() => {
+                  // history.goBack();
+                }}
+              />
+            ) : null}
+            {/* </Card> */}
+          </div>
+
+          {/** GuestList component start*/}
+          <GuestList
+            patients={patients}
+            columns={columns}
+            summaryColumns={summaryColumns}
+            isFixedIndex={isFixedIndex}
+            showScanner={showScanner}
+            barcodeFilterKey={barcodeFilterKey}
+            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
+            refresh={refresh}
+            config={config}
+            loading={cardLoading}
+            pagination={pagination}
+            handlePagination={handlePagination}
+            attributes={attributes}
+            fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
+          />
+          {/** GuestList component end*/}
+        </>
+      )}
+    </Card>
+  );
+}
+
+/**
+ *
+ * @param root0
+ * @param root0.patients
+ * @param root0.CustomComponents
+ * @param root0.summaryColumns
+ * @param root0.refresh
+ * @param root0.isFixedIndex
+ * @returns {*}
+ */
+//Renders a table displaying a list of patients with dynamic columns
+function GuestList({
+  patients,
+  columns,
+  loading,
+  CustomComponents,
+  refresh,
+  isFixedIndex,
+  barcodeFilterKey,
+  showScanner,
+  config,
+  pagination,
+  handlePagination,
+  attributes,
+  fetchReportData,
+}) {
+  /**
+   * @param {*} propValues
+   */
+  const propValues = (attributes && JSON.parse(attributes)) || {};
+
+  const { buttonAttributes = [] } = propValues;
+
+  var [query, setQuery] = useState('');
+
+  const [exportData, setExportData] = useState({});
+
+  // const [data, setData] = useState([]);
+
+  //visibility of the QR scanner modal.
+  const [isScannerVisible, setScannerVisible] = useState(false);
+
+  // Stores the patients filtered specifically by QR scan match.
+  const [filteredPatients, setFilteredPatients] = useState([]); // Show all initially
+
+  // patient object to redirect to upon successful QR scan.
+  const [redirectPatient, setRedirectPatient] = useState(null);
+
+  const [visible, setVisible] = useState(false);
+
+  const [ActiveComponent, setActiveComponent] = useState(null);
+
+  let history = useHistory();
+
+  const { isMobile, dispatch } = useContext(GlobalContext);
+  const [single, setSingle] = useState({});
+
+  // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
+  const cols = buildDisplayColumns({
+    columns,
+    patients,
+    isFixedIndex,
+    CustomComponents,
+    refresh,
+  });
+
+  /**
+   *
+   * @param {*} result
+   */
+
+  // function changeView(result) {
+  //     setView(result);
+  // }
+
+  /**
+   *
+   * @param {*} event
+   */
+
+  function onSearch(event) {
+    setQuery(event.target.value);
+  }
+
+  /**
+   *
+   */
+
+  useEffect(() => {
+    //Cheaking if there is patient data exists
+    if (patients) {
+      let data = patients?.map((entry) => {
+        entry.rowIndex = entry.opb_id;
+
+        entry.dispatch = dispatch;
+
+        return entry;
+      });
+
+      // setData(data);
+
+      // Define export data
+      // 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, columns]);
+
+  let filtered;
+
+  if (patients) {
+    filtered = patients.filter((record) => {
+      if (query) {
+        // Keys
+        let keys = Object.keys(record);
+
+        let flag = false;
+
+        keys.forEach((key) => {
+          let ele = record[key];
+
+          if (ele && typeof ele === 'string' && ele.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
+            flag = true;
+          }
+        });
+
+        /**Will return flag */
+        return flag;
+      } else {
+        return true;
+      }
+    });
+  }
+
+  /**
+   * Checks for a match in the filtered patient list based on a scanned code,
+   * updates the relevant state if a match is found, and redirects to the
+   * patient's detail page. Displays a warning if no match is found.
+   *
+   * @param {string} code - The scanned code to match against a specific field of each patient.
+   */
+
+  const handleScanSuccess = (code) => {
+    // Filters patients based on the scanned code and the selected barcode key(using attributes 'barcodeFilterKey')
+    const matched = filtered.filter((patient) => patient[barcodeFilterKey] === code);
+
+    if (matched.length) {
+      const patient = matched[0];
+      setFilteredPatients(matched);
+      setRedirectPatient(matched);
+      message.success(`Match found for ${code}, redirecting...`);
+
+      const actionColumn = columns.find((col) => col.field === 'action') || columns.find((col) => col.type === 'action');
+      if (actionColumn) {
+        const redirectLink = getRedirectLink(actionColumn, patient);
+        // history.push(redirectLink);
+        window.location.href = redirectLink;
+      }
+    } else {
+      Modal.warning({
+        title: 'No matching records.',
+        content: `No match for scanned code: ${code}`,
+      });
+    }
+  };
+
+  //open the edit modal
+  const handleOpenEdit = (button) => {
+    const componentName = button.component;
+    const ComponentToRender = ReportingDashboardComp[componentName];
+
+    if (!ComponentToRender) {
+      console.error(`Component ${componentName} not found!`);
+      return;
+    }
+
+    setSingle({});
+    setActiveComponent(() => ComponentToRender);
+    setVisible(true);
+  };
+
+  // close the edit modal
+  const handleCloseEdit = () => {
+    setShowEdit(false);
+  };
+  return (
+    <>
+      <div className="table-header">
+        <div className="table-left">
+          {/* shwoing caption is not correct so this commented */}
+          {/* <span  className="menu-caption">{config.caption}</span> */}
+          <Search placeholder="Enter Search Value" allowClear onChange={onSearch} />
+          {/* <p className="size-hint">{patients.length} records.</p> */}
+        </div>
+
+        <div className="table-right">
+          {/* QR Scan start */}
+          {showScanner ? (
+            <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
+              Scan QR
+            </Button>
+          ) : null}
+          {/** Add User button */}
+          {Array.isArray(buttonAttributes) &&
+            buttonAttributes.map((btn, index) => (
+              <Button key={index} size="small" type="primary" style={{ marginLeft: 8 }} onClick={() => handleOpenEdit(btn)}>
+                {btn.title}
+              </Button>
+            ))}
+
+          <Modal open={visible} onCancel={() => setVisible(false)} footer={null} destroyOnClose width={950} style={{ top: 10 }}>
+            {ActiveComponent && (
+              <ActiveComponent
+                formContent={single}
+                callback={() => {
+                  setVisible(false);
+                  refresh();
+                  setVisible(false);
+                  fetchReportData();
+                }}
+                // {...dynamicProps}
+              />
+            )}
+          </Modal>
+
+          <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
+            <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
+          </Modal>
+
+          <div>
+            {/* QR Scan End */}
+            {/*table data export to csc component*/}
+            {exportData.exportDatas && (
+              <ExportReactCSV
+                title={config.caption}
+                headers={exportData.exportDatas.exportDataHeaders}
+                csvData={exportData.exportDatas.exportDataColumns}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div>
+      
+        <Card>
+          {loading ? (
+            <>
+              <Skeleton active paragraph={{ rows: 6 }} />
+            </>
+          ) : (
+            <TableComponent
+              size="small"
+              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}
+              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]);
+                  });
+                });
+
+                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>
+                  </>
+                );
+              }}
+            />
+          )}
+
+          {/* Pagination aligned to the right */}
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
+            <Pagination
+              showSizeChanger
+              current={pagination.current}
+              pageSize={pagination.pageSize}
+              total={pagination.total}
+              pageSizeOptions={[20, 30, 50, 100]}
+              onChange={(page, pageSize) => handlePagination({ current: page, pageSize })}
+            />
+          </div>
+
+          {/*If patient data exists show the number else to 0 */}
+          <p className="size-hint">{patients ? patients.length : 0} records. </p>
+        </Card>
+        {/* </> */}
+        {/* )} */}
+      </div>
+    </>
+  );
+}