ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

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

@@ -1,519 +1,519 @@
-import React, { useState, useEffect } from 'react';
-import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
-import { QrcodeOutlined } from '@ant-design/icons';
-import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
-import moment from 'moment-timezone';
-import { CoreScripts } from './../../../../models/';
-import Button from '../../../../lib/elements/basic/button/button';
-import buildDisplayColumns from './display-columns/build-display-columns';
-import { getRedirectLink } from './display-columns/display-cell-renderer';
-import * as ReportingDashboardComp from '../index';
-
-const { Search } = Input;
-const genericComponents = require('./../../../../lib');
-
-/**
- * @typedef {Object} ReportingTablePagination
- * @property {number} [current] Current page number.
- * @property {number} [pageSize] Number of rows per page.
- * @property {number} [total] Total number of records available.
- */
-
-/**
- * @typedef {Object} ReportingTableRequestPayload
- * @property {Object} [body] Request body sent when loading reporting data.
- */
-
-/**
- * @typedef {Object} ReportingTableProps
- * @property {Array<Object>} [patients] Preloaded table rows supplied by a parent component.
- * @property {Array<Object>} [columns] Preconfigured display column definitions.
- * @property {boolean} [loading] External loading state used when parent owns data fetching.
- * @property {Object.<string, React.ComponentType<any>>} [CustomComponents] Custom renderers/actions available to display columns.
- * @property {Function} [refresh] Refresh callback passed down to nested action components.
- * @property {boolean} [isFixedIndex] Enables fixed index rendering in generated columns.
- * @property {string} [barcodeFilterKey] Record field compared against scanned QR/barcode values.
- * @property {boolean} [showScanner] Controls whether the QR scanner button is shown.
- * @property {Object} [config] Reporting configuration returned by the core script.
- * @property {ReportingTablePagination} [pagination] External pagination state.
- * @property {(pager: ReportingTablePagination) => void} [handlePagination] Parent-owned pagination handler.
- * @property {string} [attributes] JSON string containing extra button/config attributes.
- * @property {Function} [fetchReportData] Parent refresh callback used in controlled mode.
- * @property {string|number} [reportId] Report id used to load configuration and rows.
- * @property {string|number} [requestId] Alternative report request id used for independent loading.
- * @property {ReportingTableRequestPayload} [requestPayload] Optional request payload override for listing calls.
- * @property {(pager: ReportingTablePagination) => void} [onPaginationChange] Callback fired after independent pagination updates.
- * @property {string} [mode] Report mode used when fetching by mode/submode.
- * @property {string} [submode] Report submode used when fetching by mode/submode.
- * @property {Object} [replacements] Dynamic replacements used by some report APIs and action links.
- * @property {boolean} [isNuradesk] Switches to Nuradesk-specific report loading behavior.
- * @property {string} [dbPtr] Optional branch pointer override for report API calls.
- */
-
-/**
- * ReportingTable renders report rows with search, summary, export, QR scan, and
- * pagination support.
- *
- * The component supports two data modes:
- * - controlled mode: parent supplies rows/columns/loading/pagination
- * - independent mode: the component fetches configuration and listing data
- *   using `reportId`, `requestId`, or mode/submode inputs
- *
- * @param {ReportingTableProps} props
- * @returns {React.ReactNode}
- */
-export default function ReportingTable({
-  patients: propsPatients,
-  columns: propsColumns,
-  loading: propsLoading,
-  CustomComponents,
-  refresh,
-  isFixedIndex,
-  barcodeFilterKey,
-  showScanner,
-  config: propsConfig,
-  pagination: propsPagination,
-  handlePagination: propsHandlePagination,
-  attributes,
-  fetchReportData,
-  reportId,
-  requestId,
-  requestPayload,
-  // dbPtr: propsDbPtr,
-  onPaginationChange,
-  mode,
-  submode,
-  replacements,
-  isNuradesk,
-  dbPtr
-}) {
-  const [internalPatients, setInternalPatients] = useState([]);
-  const [internalColumns, setInternalColumns] = useState([]);
-  const [internalLoading, setInternalLoading] = useState(false);
-  const [internalConfig, setInternalConfig] = useState({});
-  const [internalPagination, setInternalPagination] = useState({ current: 1, pageSize: 20, total: 0 });
-
-  // Independent mode is enabled when enough identifiers are present for the
-  // table to load its own schema and data instead of relying on parent props.
-  const shouldFetchData = !!(requestId || reportId || replacements.submode || replacements.mode);
-  const requestPayloadKey = JSON.stringify(requestPayload || {});
-
-  const propValues = (attributes && JSON.parse(attributes)) || {};
-  const { buttonAttributes = [] } = propValues;
-
-  const [query, setQuery] = useState('');
-  const [exportData, setExportData] = useState({});
-  const [isScannerVisible, setScannerVisible] = useState(false);
-  const [visible, setVisible] = useState(false);
-  const [ActiveComponent, setActiveComponent] = useState(null);
-  const [single, setSingle] = useState({});
-
-  // The table can operate in either controlled or self-fetching mode. These
-  // selectors keep the render path mode-agnostic after initial setup.
-  const patients = shouldFetchData ? internalPatients : propsPatients;
-  const columns = propsColumns?.length ? propsColumns : internalColumns;
-  const loading = shouldFetchData ? internalLoading : propsLoading;
-  const config = Object.keys(propsConfig || {}).length ? propsConfig : internalConfig;
-  const pagination = shouldFetchData ? internalPagination : propsPagination;
-  const otherDetails = config?.other_details1 ? JSON.parse(config.other_details1) : {};
-  const cols = buildDisplayColumns({
-    columns,
-    patients,
-    isFixedIndex,
-    CustomComponents: { ...CustomComponents, ...genericComponents, ...ReportingDashboardComp },
-    refresh,
-    otherDetails,
-  });
-
-  /**
-   * Updates the local text filter used for in-memory search across row values.
-   *
-   * @param {React.ChangeEvent<HTMLInputElement>} event
-   */
-  function onSearch(event) {
-    setQuery(event.target.value);
-  }
-
-  /**
-   * Loads reporting configuration and paginated data when the component is
-   * operating in independent mode.
-   *
-   * Flow:
-   * 1. Resolve the active report key and db pointer.
-   * 2. Fetch report configuration to build display columns/caption metadata.
-   * 3. Fetch listing data using the current page and page size.
-   * 4. Sync local pagination and notify the parent if needed.
-   *
-   * @param {ReportingTablePagination} [pager]
-   * @returns {Promise<void>}
-   */
-  const loadIndependentData = async (pager) => {
-    setInternalLoading(true);
-    const dbPointer = dbPtr || localStorage.db_ptr;
-
-    const currentPager = pager || internalPagination;
-    let reportKey = requestId || reportId || replacements?.mode;
-
-    try {
-      if (!reportKey) return;
-
-      // Load the report definition first so display columns and captions stay in
-      // sync with the server-side report being requested.
-      let formBody = {
-        reportId: reportId,
-      };
-      if (replacements?.mode && replacements?.submode) {
-        formBody = {
-          mode: replacements.mode,
-          submode: replacements.submode,
-          // replacements: { ...replacements },
-        };
-      }
-
-      let data = await CoreScripts.getCorescript({ ...formBody },dbPointer);
-      if (data?.result?.display_columns) {
-        setInternalColumns(JSON.parse(data.result.display_columns));
-      }
-      setInternalConfig(data); 
-      // if (isNuradesk) {
-      //   setInternalPatients(data.result || []);
-      //   setInternalColumns(Object.keys(data.result[0]).map((key) => ({ title: key, field: key })));
-      // }
-      // }
-
-      // Then request the actual row data for the active page.
-      const baseBody = requestPayload?.body || {};
-      let body = {
-        body: {
-          ...baseBody,
-          page: currentPager.current,
-          limit: currentPager.pageSize,
-          ...(requestPayload?.body ? {} : { mode, submode }),
-        },
-      };
-      // if (!isNuradesk) {
-      if (isNuradesk) {
-        reportKey = data.result.id;
-        body = {
-          body: {
-            ...replacements,
-            page: currentPager.current,
-            limit: currentPager.pageSize,
-          },
-        };
-      }
-      const result = await CoreScripts.getReportingLisitng(reportKey, body, dbPtr);
-      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
-      const resultDetails = apiData[0] || [];
-
-      setInternalPatients(resultDetails || []);
-      // Fall back to inferred columns when the report definition does not
-      // provide an explicit `display_columns` config.
-      if (!data.result.display_columns && resultDetails.length > 0) {
-        setInternalColumns(Object.keys(resultDetails[0]).map((key) => ({ title: key, field: key })));
-      }
-      // }
-
-      const nextPagination = {
-        current: currentPager.current,
-        pageSize: currentPager.pageSize,
-        total: resultDetails?.[0]?.TotalCount ?? internalPagination.total,
-      };
-
-      setInternalPagination((prev) => ({
-        ...prev,
-        ...nextPagination,
-      }));
-
-      if (onPaginationChange) {
-        onPaginationChange(nextPagination);
-      }
-    } catch (error) {
-      console.error('Error loading independent table data', error);
-    } finally {
-      setInternalLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (propsPagination?.current || propsPagination?.pageSize || propsPagination?.total === 0) {
-      setInternalPagination((prev) => ({
-        ...prev,
-        current: propsPagination?.current || prev.current,
-        pageSize: propsPagination?.pageSize || prev.pageSize,
-        total: typeof propsPagination?.total === 'number' ? propsPagination.total : prev.total,
-      }));
-    }
-  }, [propsPagination?.current, propsPagination?.pageSize, propsPagination?.total]);
-
-  useEffect(() => {
-    if (shouldFetchData) {
-      const nextPager = {
-        current: propsPagination?.current || 1,
-        pageSize: propsPagination?.pageSize || internalPagination.pageSize,
-      };
-      loadIndependentData(nextPager);
-    }
-  }, [requestId, reportId, mode, submode, requestPayloadKey]);
-
-  /**
-   * Routes pagination changes to either the internal loader or the parent
-   * handler, depending on the current data mode.
-   *
-   * @param {ReportingTablePagination} pager
-   */
-  const handlePaginationInternal = (pager) => {
-    if (shouldFetchData) {
-      loadIndependentData(pager);
-    } else if (propsHandlePagination) {
-      propsHandlePagination(pager);
-    }
-  };
-
-  useEffect(() => {
-    if (patients) {
-      // Export uses the visible display column structure and appends the same
-      // summary row that appears in the table when summary columns are enabled.
-      const exportCols = cols.map((col) => {
-        if (col.title && typeof col.title === 'object' && col.title.props) {
-          return { ...col, title: col.title.props.title };
-        }
-        return col;
-      });
-      const summaryCols = columns.filter((col) => col.enable_summary);
-      let dataToExport = [...patients];
-
-      if (summaryCols.length > 0) {
-        const summaryValues = calculateSummaryValues(summaryCols, patients);
-        const summaryRow = { isSummaryRow: true };
-
-        cols.forEach((col) => {
-          const colKey = col.field || col.key || col.dataIndex;
-          if (colKey && !summaryRow[colKey]) {
-            summaryRow[colKey] = '';
-          }
-
-          if (summaryValues[col.field] !== undefined) {
-            summaryRow[col.field] = summaryValues[col.field];
-          } else {
-            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 });
-      }
-    }
-  }, [patients, columns]);
-
-  let filtered = patients;
-  if (patients && query) {
-    filtered = patients.filter((record) => {
-      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;
-        }
-      });
-      return flag;
-    });
-  }
-
-  /**
-   * Handles successful QR scans by looking up a matching record and navigating
-   * through the first configured action column.
-   *
-   * @param {string} code
-   */
-  const handleScanSuccess = (code) => {
-    const matched = filtered.filter((patient) => patient[barcodeFilterKey] === code);
-    if (matched.length) {
-      const patient = matched[0];
-      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,CustomComponents);
-        window.location.href = redirectLink;
-      }
-    } else {
-      Modal.warning({
-        title: 'No matching records.',
-        content: `No match for scanned code: ${code}`,
-      });
-    }
-  };
-
-  /**
-   * Opens a reporting dashboard action component declared in `buttonAttributes`.
-   *
-   * @param {Object} button
-   */
-  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);
-  };
-
-  /**
-   * Computes summary values for the current page based on per-column summary
-   * configuration.
-   *
-   * Supported functions:
-   * - `sum`
-   * - `count`
-   * - `avg`
-   * - `min`
-   * - `max`
-   *
-   * @param {Array<Object>} summaryCols
-   * @param {Array<Object>} pageData
-   * @returns {Object.<string, number>}
-   */
-  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"
-        style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, paddingTop: 10, paddingBottom: 10 }}
-      >
-        <div className="table-right" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, flexWrap: 'wrap' }}>
-          <div className="table-search" style={{ minWidth: 240, width: 280, maxWidth: '100%', flex: '0 0 auto' }}>
-            <Search placeholder="Enter Search Value" allowClear onChange={onSearch} />
-          </div>
-          {showScanner && (
-            <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
-              Scan QR
-            </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 && refresh();
-                  shouldFetchData ? loadIndependentData() : fetchReportData && fetchReportData();
-                }}
-              />
-            )}
-          </Modal>
-          <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
-            <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
-          </Modal>
-          <div>
-            {exportData.exportDatas && !isNuradesk && (
-              <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}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-      <div>
-        <Card>
-          {loading ? (
-            <Skeleton active paragraph={{ rows: 6 }} />
-          ) : (
-            <TableComponent
-              size="small"
-              // Change x to '100%' or true to make it responsive to the container width
-              // Your vertical logic (adjust '10' based on how many rows fit on your screen)
-              scroll={{ x: 'max-content', y: (filtered?.length || 0) > 11 ? 400 : undefined }}
-              rowKey={(record) => record.OpNo}
-              dataSource={filtered}
-              columns={cols}
-              sticky
-              pagination={false}
-              summary={(pageData) => {
-                const summaryCols = columns.filter((col) => col.enable_summary);
-                if (!summaryCols.length) return null;
-                const summaryValues = calculateSummaryValues(summaryCols, pageData);
-                return (
-                  <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>
-                );
-              }}
-            />
-          )}
-          <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) => handlePaginationInternal({ current: page, pageSize })}
-            />
-          </div>
-          <p className="size-hint">{patients ? patients.length : 0} records.</p>
-        </Card>
-      </div>
-    </>
-  );
-}
+import React, { useState, useEffect } from 'react';
+import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
+import { QrcodeOutlined } from '@ant-design/icons';
+import { ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+import moment from 'moment-timezone';
+import { CoreScripts } from './../../../../models/';
+import Button from '../../../../lib/elements/basic/button/button';
+import buildDisplayColumns from './display-columns/build-display-columns';
+import { getRedirectLink } from './display-columns/display-cell-renderer';
+import * as ReportingDashboardComp from '../index';
+
+const { Search } = Input;
+const genericComponents = require('./../../../../lib');
+
+/**
+ * @typedef {Object} ReportingTablePagination
+ * @property {number} [current] Current page number.
+ * @property {number} [pageSize] Number of rows per page.
+ * @property {number} [total] Total number of records available.
+ */
+
+/**
+ * @typedef {Object} ReportingTableRequestPayload
+ * @property {Object} [body] Request body sent when loading reporting data.
+ */
+
+/**
+ * @typedef {Object} ReportingTableProps
+ * @property {Array<Object>} [patients] Preloaded table rows supplied by a parent component.
+ * @property {Array<Object>} [columns] Preconfigured display column definitions.
+ * @property {boolean} [loading] External loading state used when parent owns data fetching.
+ * @property {Object.<string, React.ComponentType<any>>} [CustomComponents] Custom renderers/actions available to display columns.
+ * @property {Function} [refresh] Refresh callback passed down to nested action components.
+ * @property {boolean} [isFixedIndex] Enables fixed index rendering in generated columns.
+ * @property {string} [barcodeFilterKey] Record field compared against scanned QR/barcode values.
+ * @property {boolean} [showScanner] Controls whether the QR scanner button is shown.
+ * @property {Object} [config] Reporting configuration returned by the core script.
+ * @property {ReportingTablePagination} [pagination] External pagination state.
+ * @property {(pager: ReportingTablePagination) => void} [handlePagination] Parent-owned pagination handler.
+ * @property {string} [attributes] JSON string containing extra button/config attributes.
+ * @property {Function} [fetchReportData] Parent refresh callback used in controlled mode.
+ * @property {string|number} [reportId] Report id used to load configuration and rows.
+ * @property {string|number} [requestId] Alternative report request id used for independent loading.
+ * @property {ReportingTableRequestPayload} [requestPayload] Optional request payload override for listing calls.
+ * @property {(pager: ReportingTablePagination) => void} [onPaginationChange] Callback fired after independent pagination updates.
+ * @property {string} [mode] Report mode used when fetching by mode/submode.
+ * @property {string} [submode] Report submode used when fetching by mode/submode.
+ * @property {Object} [replacements] Dynamic replacements used by some report APIs and action links.
+ * @property {boolean} [isNuradesk] Switches to Nuradesk-specific report loading behavior.
+ * @property {string} [dbPtr] Optional branch pointer override for report API calls.
+ */
+
+/**
+ * ReportingTable renders report rows with search, summary, export, QR scan, and
+ * pagination support.
+ *
+ * The component supports two data modes:
+ * - controlled mode: parent supplies rows/columns/loading/pagination
+ * - independent mode: the component fetches configuration and listing data
+ *   using `reportId`, `requestId`, or mode/submode inputs
+ *
+ * @param {ReportingTableProps} props
+ * @returns {React.ReactNode}
+ */
+export default function ReportingTable({
+  patients: propsPatients,
+  columns: propsColumns,
+  loading: propsLoading,
+  CustomComponents,
+  refresh,
+  isFixedIndex,
+  barcodeFilterKey,
+  showScanner,
+  config: propsConfig,
+  pagination: propsPagination,
+  handlePagination: propsHandlePagination,
+  attributes,
+  fetchReportData,
+  reportId,
+  requestId,
+  requestPayload,
+  // dbPtr: propsDbPtr,
+  onPaginationChange,
+  mode,
+  submode,
+  replacements,
+  isNuradesk,
+  dbPtr
+}) {
+  const [internalPatients, setInternalPatients] = useState([]);
+  const [internalColumns, setInternalColumns] = useState([]);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [internalConfig, setInternalConfig] = useState({});
+  const [internalPagination, setInternalPagination] = useState({ current: 1, pageSize: 20, total: 0 });
+
+  // Independent mode is enabled when enough identifiers are present for the
+  // table to load its own schema and data instead of relying on parent props.
+  const shouldFetchData = !!(requestId || reportId || replacements.submode || replacements.mode);
+  const requestPayloadKey = JSON.stringify(requestPayload || {});
+
+  const propValues = (attributes && JSON.parse(attributes)) || {};
+  const { buttonAttributes = [] } = propValues;
+
+  const [query, setQuery] = useState('');
+  const [exportData, setExportData] = useState({});
+  const [isScannerVisible, setScannerVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [ActiveComponent, setActiveComponent] = useState(null);
+  const [single, setSingle] = useState({});
+
+  // The table can operate in either controlled or self-fetching mode. These
+  // selectors keep the render path mode-agnostic after initial setup.
+  const patients = shouldFetchData ? internalPatients : propsPatients;
+  const columns = propsColumns?.length ? propsColumns : internalColumns;
+  const loading = shouldFetchData ? internalLoading : propsLoading;
+  const config = Object.keys(propsConfig || {}).length ? propsConfig : internalConfig;
+  const pagination = shouldFetchData ? internalPagination : propsPagination;
+  const otherDetails = config?.other_details1 ? JSON.parse(config.other_details1) : {};
+  const cols = buildDisplayColumns({
+    columns,
+    patients,
+    isFixedIndex,
+    CustomComponents: { ...CustomComponents, ...genericComponents, ...ReportingDashboardComp },
+    refresh,
+    otherDetails,
+  });
+
+  /**
+   * Updates the local text filter used for in-memory search across row values.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event
+   */
+  function onSearch(event) {
+    setQuery(event.target.value);
+  }
+
+  /**
+   * Loads reporting configuration and paginated data when the component is
+   * operating in independent mode.
+   *
+   * Flow:
+   * 1. Resolve the active report key and db pointer.
+   * 2. Fetch report configuration to build display columns/caption metadata.
+   * 3. Fetch listing data using the current page and page size.
+   * 4. Sync local pagination and notify the parent if needed.
+   *
+   * @param {ReportingTablePagination} [pager]
+   * @returns {Promise<void>}
+   */
+  const loadIndependentData = async (pager) => {
+    setInternalLoading(true);
+    const dbPointer = dbPtr || localStorage.db_ptr;
+
+    const currentPager = pager || internalPagination;
+    let reportKey = requestId || reportId || replacements?.mode;
+
+    try {
+      if (!reportKey) return;
+
+      // Load the report definition first so display columns and captions stay in
+      // sync with the server-side report being requested.
+      let formBody = {
+        reportId: reportId,
+      };
+      if (replacements?.mode && replacements?.submode) {
+        formBody = {
+          mode: replacements.mode,
+          submode: replacements.submode,
+          // replacements: { ...replacements },
+        };
+      }
+
+      let data = await CoreScripts.getCorescript({ ...formBody },dbPointer);
+      if (data?.result?.display_columns) {
+        setInternalColumns(JSON.parse(data.result.display_columns));
+      }
+      setInternalConfig(data); 
+      // if (isNuradesk) {
+      //   setInternalPatients(data.result || []);
+      //   setInternalColumns(Object.keys(data.result[0]).map((key) => ({ title: key, field: key })));
+      // }
+      // }
+
+      // Then request the actual row data for the active page.
+      const baseBody = requestPayload?.body || {};
+      let body = {
+        body: {
+          ...baseBody,
+          page: currentPager.current,
+          limit: currentPager.pageSize,
+          ...(requestPayload?.body ? {} : { mode, submode }),
+        },
+      };
+      // if (!isNuradesk) {
+      if (isNuradesk) {
+        reportKey = data.result.id;
+        body = {
+          body: {
+            ...replacements,
+            page: currentPager.current,
+            limit: currentPager.pageSize,
+          },
+        };
+      }
+      const result = await CoreScripts.getReportingLisitng(reportKey, body, dbPtr);
+      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
+      const resultDetails = apiData[0] || [];
+
+      setInternalPatients(resultDetails || []);
+      // Fall back to inferred columns when the report definition does not
+      // provide an explicit `display_columns` config.
+      if (!data.result.display_columns && resultDetails.length > 0) {
+        setInternalColumns(Object.keys(resultDetails[0]).map((key) => ({ title: key, field: key })));
+      }
+      // }
+
+      const nextPagination = {
+        current: currentPager.current,
+        pageSize: currentPager.pageSize,
+        total: resultDetails?.[0]?.TotalCount ?? internalPagination.total,
+      };
+
+      setInternalPagination((prev) => ({
+        ...prev,
+        ...nextPagination,
+      }));
+
+      if (onPaginationChange) {
+        onPaginationChange(nextPagination);
+      }
+    } catch (error) {
+      console.error('Error loading independent table data', error);
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (propsPagination?.current || propsPagination?.pageSize || propsPagination?.total === 0) {
+      setInternalPagination((prev) => ({
+        ...prev,
+        current: propsPagination?.current || prev.current,
+        pageSize: propsPagination?.pageSize || prev.pageSize,
+        total: typeof propsPagination?.total === 'number' ? propsPagination.total : prev.total,
+      }));
+    }
+  }, [propsPagination?.current, propsPagination?.pageSize, propsPagination?.total]);
+
+  useEffect(() => {
+    if (shouldFetchData) {
+      const nextPager = {
+        current: propsPagination?.current || 1,
+        pageSize: propsPagination?.pageSize || internalPagination.pageSize,
+      };
+      loadIndependentData(nextPager);
+    }
+  }, [requestId, reportId, mode, submode, requestPayloadKey]);
+
+  /**
+   * Routes pagination changes to either the internal loader or the parent
+   * handler, depending on the current data mode.
+   *
+   * @param {ReportingTablePagination} pager
+   */
+  const handlePaginationInternal = (pager) => {
+    if (shouldFetchData) {
+      loadIndependentData(pager);
+    } else if (propsHandlePagination) {
+      propsHandlePagination(pager);
+    }
+  };
+
+  useEffect(() => {
+    if (patients) {
+      // Export uses the visible display column structure and appends the same
+      // summary row that appears in the table when summary columns are enabled.
+      const exportCols = cols.map((col) => {
+        if (col.title && typeof col.title === 'object' && col.title.props) {
+          return { ...col, title: col.title.props.title };
+        }
+        return col;
+      });
+      const summaryCols = columns.filter((col) => col.enable_summary);
+      let dataToExport = [...patients];
+
+      if (summaryCols.length > 0) {
+        const summaryValues = calculateSummaryValues(summaryCols, patients);
+        const summaryRow = { isSummaryRow: true };
+
+        cols.forEach((col) => {
+          const colKey = col.field || col.key || col.dataIndex;
+          if (colKey && !summaryRow[colKey]) {
+            summaryRow[colKey] = '';
+          }
+
+          if (summaryValues[col.field] !== undefined) {
+            summaryRow[col.field] = summaryValues[col.field];
+          } else {
+            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 });
+      }
+    }
+  }, [patients, columns]);
+
+  let filtered = patients;
+  if (patients && query) {
+    filtered = patients.filter((record) => {
+      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;
+        }
+      });
+      return flag;
+    });
+  }
+
+  /**
+   * Handles successful QR scans by looking up a matching record and navigating
+   * through the first configured action column.
+   *
+   * @param {string} code
+   */
+  const handleScanSuccess = (code) => {
+    const matched = filtered.filter((patient) => patient[barcodeFilterKey] === code);
+    if (matched.length) {
+      const patient = matched[0];
+      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,CustomComponents);
+        window.location.href = redirectLink;
+      }
+    } else {
+      Modal.warning({
+        title: 'No matching records.',
+        content: `No match for scanned code: ${code}`,
+      });
+    }
+  };
+
+  /**
+   * Opens a reporting dashboard action component declared in `buttonAttributes`.
+   *
+   * @param {Object} button
+   */
+  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);
+  };
+
+  /**
+   * Computes summary values for the current page based on per-column summary
+   * configuration.
+   *
+   * Supported functions:
+   * - `sum`
+   * - `count`
+   * - `avg`
+   * - `min`
+   * - `max`
+   *
+   * @param {Array<Object>} summaryCols
+   * @param {Array<Object>} pageData
+   * @returns {Object.<string, number>}
+   */
+  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"
+        style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8, paddingTop: 10, paddingBottom: 10 }}
+      >
+        <div className="table-right" style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8, flexWrap: 'wrap' }}>
+          <div className="table-search" style={{ minWidth: 240, width: 280, maxWidth: '100%', flex: '0 0 auto' }}>
+            <Search placeholder="Enter Search Value" allowClear onChange={onSearch} />
+          </div>
+          {showScanner && (
+            <Button size="small" type="primary" icon={<QrcodeOutlined />} onClick={() => setScannerVisible(true)}>
+              Scan QR
+            </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 && refresh();
+                  shouldFetchData ? loadIndependentData() : fetchReportData && fetchReportData();
+                }}
+              />
+            )}
+          </Modal>
+          <Modal open={isScannerVisible} title="Scan QR Code" footer={null} onCancel={() => setScannerVisible(false)} destroyOnClose>
+            <QrScanner onScanSuccess={handleScanSuccess} onClose={() => setScannerVisible(false)} />
+          </Modal>
+          <div>
+            {exportData.exportDatas && !isNuradesk && (
+              <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}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      <div>
+        <Card>
+          {loading ? (
+            <Skeleton active paragraph={{ rows: 6 }} />
+          ) : (
+            <TableComponent
+              size="small"
+              // Change x to '100%' or true to make it responsive to the container width
+              // Your vertical logic (adjust '10' based on how many rows fit on your screen)
+              scroll={{ x: 'max-content', y: (filtered?.length || 0) > 11 ? 400 : undefined }}
+              rowKey={(record) => record.OpNo}
+              dataSource={filtered}
+              columns={cols}
+              sticky
+              pagination={false}
+              summary={(pageData) => {
+                const summaryCols = columns.filter((col) => col.enable_summary);
+                if (!summaryCols.length) return null;
+                const summaryValues = calculateSummaryValues(summaryCols, pageData);
+                return (
+                  <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>
+                );
+              }}
+            />
+          )}
+          <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) => handlePaginationInternal({ current: page, pageSize })}
+            />
+          </div>
+          <p className="size-hint">{patients ? patients.length : 0} records.</p>
+        </Card>
+      </div>
+    </>
+  );
+}