ui-soxo-bootstrap-core 2.6.32-dev.5 → 2.6.33

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

@@ -2,30 +2,35 @@ import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
 
-import { Location, FormCreator, GlobalContext, Card } from './../../../../lib/';
+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 AdvancedSearchSelect from './adavance-search/advance-search';
 
-import ReportingTable from './reporting-table';
-// import * as ReportingDashboardComp from '../index';
-// import buildDisplayColumns from './display-columns/build-display-columns';
-// import AdvancedSearchSelect from './adavance-search/advance-search';
-
-// // import { isPdfFile } from 'pdfjs-dist';
+// import { isPdfFile } from 'pdfjs-dist';
 
-// var genericComponents = require('./../../../../lib');
+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.
@@ -51,7 +56,7 @@ export default function ReportingDashboard({
   const [config, setConfig] = useState({});
 
   // State to manage the layout of the form
-  const [formLayout] = useState('vertical');
+  const [formLayout, setFormLayout] = useState('vertical');
 
   const [loading, setLoading] = useState(true);
 
@@ -78,9 +83,9 @@ export default function ReportingDashboard({
 
   const [columns, setColumns] = useState([]); // To set columns
 
-  const [, setSummaryColumns] = useState([]);
+  const [summaryColumns, setSummaryColumns] = useState([]);
 
-  const [reportRequestPayload, setReportRequestPayload] = useState(null);
+  const [patients, setPatients] = useState([]); //Patients list array
 
   const urlParams = Location.search();
 
@@ -101,6 +106,7 @@ export default function ReportingDashboard({
    * @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
@@ -260,40 +266,85 @@ export default function ReportingDashboard({
   // Refresh patient details.
 
   function refresh() {
-    getPatientDetails(scriptId.current || id);
+    getPatientDetails();
   }
 
-  const buildReportRequestPayload = (values = {}, paginationOverride) => {
-    const pager = paginationOverride || pagination;
-    const formattedValues = {};
-
-    Object.keys(values || {}).forEach((key) => {
-      const val = values[key];
-      formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
-    });
+  const fetchReportData = async (id, values, dbPtr, pagination, parsedColumns) => {
+    const { current, pageSize } = pagination || {};
+    // If card script id is exist load that id otherwise load id
+    const coreScriptId = scriptId.current ? scriptId.current : id;
+    const normalizedColumns = Array.isArray(parsedColumns) ? parsedColumns : Array.isArray(columns) ? columns : [];
 
-    const paginationData = {
-      page: pager.current || 1,
-      limit: pager.pageSize || 10,
-    };
-
-    if (scope) {
-      return {
+    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: {
-          ...scope,
+          ...formattedValues,
           ...paginationData,
         },
       };
-    }
+      // Optional override if `scope` exists
+      if (scope) {
+        formBody = { body: { ...scope, ...paginationData } };
+      }
 
-    return {
-      body: {
-        ...formattedValues,
-        ...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 || []);
+
+      // When display_columns is missing, build columns from the response keys.
+      if (normalizedColumns.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);
+    }
   };
- const handleSubmit = (values) => {
+
+  const handleSubmit = (values) => {
     // Extract search fields from the form values
     const searchKeys = searchParameters.map((p) => p.field);
     const currentSearchValues = {};
@@ -373,86 +424,6 @@ export default function ReportingDashboard({
       runSubmit(finalValues);
     }
   };
-  // const handleSubmit = (values) => {
-  //   // Extract search fields from the form values
-  //   const searchKeys = searchParameters.map((p) => p.field);
-  //   const currentSearchValues = {};
-  //   const formValues = {};
-
-  //   Object.keys(values).forEach((key) => {
-  //     if (searchKeys.includes(key)) {
-  //       currentSearchValues[key] = values[key];
-  //     } else {
-  //       formValues[key] = values[key];
-  //     }
-  //   });
-
-  //   const hasSearchValues = Object.values(currentSearchValues).some((v) => Array.isArray(v) && v.length > 0);
-
-  //   if (!hasSearchValues) {
-  //     runSubmit(formValues);
-  //     return;
-  //   }
-
-  //   // Check if main form values (non-search) changed
-  //   const formChanged = Object.keys(formValues).some((key) => {
-  //     const newVal = formValues[key];
-  //     const oldVal = formContents[key];
-
-  //     if (moment.isMoment(newVal) && moment.isMoment(oldVal)) {
-  //       return !newVal.isSame(oldVal, 'day');
-  //     }
-
-  //     return newVal !== oldVal;
-  //   });
-
-  //   if (formChanged) {
-  //     Modal.confirm({
-  //       title: 'Filters changed',
-  //       content: 'You changed some filters. Do you want to search using these filters also?',
-  //       okText: 'Yes',
-  //       cancelText: 'No',
-
-  //       onOk() {
-  //         // YES → send form values + search condition
-  //         const finalValues = {
-  //           ...formValues,
-  //           search_values: currentSearchValues,
-  //         };
-
-  //         runSubmit(finalValues);
-  //       },
-
-  //       onCancel() {
-  //         // NO → reset form values
-  //         const resetValues = {};
-  //         Object.keys(formValues).forEach((key) => {
-  //           resetValues[key] = null;
-  //         });
-
-  //         const finalValues = {
-  //           ...resetValues,
-  //           search_values: currentSearchValues,
-  //         };
-
-  //         runSubmit(finalValues);
-  //       },
-  //     });
-  //   } else {
-  //     // no form change
-  //     const resetValues = {};
-  //     Object.keys(formValues).forEach((key) => {
-  //       resetValues[key] = null;
-  //     });
-
-  //     const finalValues = {
-  //       ...resetValues,
-  //       search_values: currentSearchValues,
-  //     };
-
-  //     runSubmit(finalValues);
-  //   }
-  // };
 
   const runSubmit = (finalValues) => {
     const { pageSize } = pagination;
@@ -581,12 +552,17 @@ export default function ReportingDashboard({
 
     // Call API
     try {
-      setPagination((prev) => ({
-        ...prev,
-        current: paginationData.current,
-        pageSize: paginationData.pageSize,
-      }));
-      setReportRequestPayload(buildReportRequestPayload(values, paginationData));
+      await fetchReportData(id, values, dbPtr, paginationData, parsedColumns);
+    } finally {
+      setLoading(false);
+      setCardLoading(false);
+    }
+  };
+
+  // Pagination Handler
+  const handlePagination = async (newPagination) => {
+    try {
+      await fetchReportData(id, formContents, dbPtr, newPagination);
     } finally {
       setLoading(false);
       setCardLoading(false);
@@ -674,39 +650,447 @@ export default function ReportingDashboard({
             ) : null}
           </div>
 
-          <ReportingTable
+          {/** GuestList component start*/}
+          <GuestList
+            patients={patients}
             columns={columns}
+            summaryColumns={summaryColumns}
             isFixedIndex={isFixedIndex}
             showScanner={showScanner}
-            reportId={reportId}
-            requestId={scriptId.current ? scriptId.current : id}
-            requestPayload={reportRequestPayload}
-            dbPtr={dbPtr}
             barcodeFilterKey={barcodeFilterKey}
-            CustomComponents={CustomComponents}
+            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
             refresh={refresh}
             config={config}
-            
             loading={cardLoading}
             pagination={pagination}
-            onPaginationChange={(nextPagination) => {
-              Location.search({
-                ...Location.search(),
-                current: nextPagination.current,
-                pageSize: nextPagination.pageSize,
-              });
-              setPagination((prev) => ({
-                ...prev,
-                ...nextPagination,
-              }));
-            }}
+            handlePagination={handlePagination}
             attributes={attributes}
-            // selectedSearchFields={selectedSearchFields}
-            // handleRemoveSearchField={handleRemoveSearchField}
-            // fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
+            selectedSearchFields={selectedSearchFields}
+            handleRemoveSearchField={handleRemoveSearchField}
+            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,
+  selectedSearchFields,
+  handleRemoveSearchField,
+  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 otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
+
+  // const otherDetails = config.other_details1 ? JSON.parse(config.other_details1) : {};
+  // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
+  const cols = buildDisplayColumns({
+    columns,
+    patients,
+    isFixedIndex,
+    CustomComponents,
+    refresh,
+    otherDetails,
+  });
+
+  /**
+   *
+   * @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;
+      });
+      const summaryCols = columns.filter((col) => col.enable_summary);
+      let dataToExport = [...patients];
+
+      if (summaryCols.length > 0) {
+        // Build one synthetic row for CSV export that mirrors the table layout:
+        // numeric summary cells are populated from `calculateSummaryValues`, while
+        // non-summary columns stay blank unless a configured caption should be shown.
+        const summaryValues = calculateSummaryValues(summaryCols, patients);
+        const summaryRow = { isSummaryRow: true };
+
+        cols.forEach((col, index) => {
+          // Start each export column empty so the appended row keeps the same shape
+          // as the data rows and does not leak index/helper values into the export.
+          const colKey = col.field || col.key || col.dataIndex;
+          if (colKey && !summaryRow[colKey]) {
+            summaryRow[colKey] = '';
+          }
+
+          if (summaryValues[col.field] !== undefined) {
+            // Fill columns that have an aggregate configured (sum, count, avg, etc.).
+            summaryRow[col.field] = summaryValues[col.field];
+          } else {
+            // If this column is marked as the caption target for a summary column,
+            // place the configured label (for example "Total") into that cell.
+            const captionConfig = columns.find((c) => col.field && c.caption_field === col.field);
+            if (captionConfig) {
+              summaryRow[col.field] = captionConfig.summary_caption || '';
+            }
+          }
+        });
+        dataToExport.push(summaryRow);
+      }
+      let exportDatas = getExportData(dataToExport, exportCols);
+
+      if (exportDatas.exportDataColumns.length && exportDatas.exportDataHeaders.length) {
+        setExportData({ exportDatas });
+      }
+    }
+  }, [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);
+  };
+  /**
+   * Calculates aggregate values for the configured summary columns.
+   *
+   * Each summary definition contributes one value keyed by its `field`. Missing
+   * row values are treated as `0` for numeric operations so the table summary and
+   * export summary row can be built from the same result object.
+   *
+   * Supported functions:
+   * `sum` - totals all numeric values in the field.
+   * `count` - returns the number of rows in the current dataset.
+   * `avg` - returns the arithmetic mean of the field values.
+   * `min` - returns the smallest numeric value in the field.
+   * `max` - returns the largest numeric value in the field.
+   *
+   * @param {Array<Object>} summaryCols - Column configs with `field` and `function`.
+   * @param {Array<Object>} pageData - Rows currently being summarized.
+   * @returns {Object} Aggregate values keyed by field name.
+   */
+  function calculateSummaryValues(summaryCols, pageData) {
+    const summaryValues = {};
+
+    summaryCols.forEach((col) => {
+      const field = col.field;
+
+      if (col.function === 'sum') {
+        summaryValues[field] = pageData.reduce((total, row) => total + Number(row[field] || 0), 0);
+      }
+
+      if (col.function === 'count') {
+        summaryValues[field] = pageData.length;
+      }
+
+      if (col.function === 'avg') {
+        const total = pageData.reduce((sum, row) => sum + Number(row[field] || 0), 0);
+        summaryValues[field] = pageData.length ? total / pageData.length : 0;
+      }
+      if (col.function === 'min') {
+        const values = pageData.map((row) => Number(row[field] || 0));
+        summaryValues[field] = values.length ? Math.min(...values) : 0;
+      }
+
+      if (col.function === 'max') {
+        const values = pageData.map((row) => Number(row[field] || 0));
+        summaryValues[field] = values.length ? Math.max(...values) : 0;
+      }
+    });
+
+    return summaryValues;
+  }
+  return (
+    <>
+      <div className="table-header">
+        <div className="table-left">
+          {/* {selectedSearchFields?.length > 0 ? (
+            <div className="search-tags-container">
+              {selectedSearchFields.map((field) => (
+                <Tag key={field.field} closable color="blue" onClose={() => handleRemoveSearchField(field.field)}>
+                  {field.caption}
+                </Tag>
+              ))}
+            </div>
+          ) : null} */}
+        </div>
+
+        <div className="table-right">
+          {/* shwoing caption is not correct so this commented */}
+          {/* <span  className="menu-caption">{config.caption}</span> */}
+          <Search className="table-search-input" placeholder="Enter Search Value" allowClear onChange={onSearch} />
+          <div className="table-export-button">
+            {exportData.exportDatas && (
+              <ExportReactCSV
+                title={config.caption}
+                headers={exportData.exportDatas.exportDataHeaders}
+                csvData={exportData.exportDatas.exportDataColumns}
+              />
+            )}
+          </div>
+
+          {/* 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>
+          {/* QR Scan End */}
+        </div>
+      </div>
+
+      <div>
+        <Card>
+          {loading ? (
+            <>
+              <Skeleton active paragraph={{ rows: 6 }} />
+            </>
+          ) : (
+            <TableComponent
+              size="small"
+              // scroll={{ x: 'max-content' }}
+              scroll={{ x: 'max-content', y: '60vh' }}
+              rowKey={(record) => record.OpNo}
+              dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data
+              columns={cols}
+              sticky
+              pagination={false}
+              summary={(pageData) => {
+                const summaryCols = columns.filter((col) => col.enable_summary);
+                if (!summaryCols.length) return null;
+                /** calculate summary*/
+
+                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>
+                );
+              }}
+            />
+          )}
+
+          {/* 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>
+    </>
+  );
+}