ui-soxo-bootstrap-core 2.6.30 → 2.6.32-dev.0

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

@@ -0,0 +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>
+    </>
+  );
+}

package/package.json

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