ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1-dev.31

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

@@ -1,34 +1,19 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 
-import { Table, Skeleton, Input, Tag, Modal, message, Pagination, Tooltip } from 'antd';
+import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
 
-import { QrcodeOutlined } from '@ant-design/icons';
-
-import * as Icons from '@ant-design/icons';
-
-import { Location, FormCreator, GlobalContext, ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
+import { Location, FormCreator, GlobalContext, Card } from './../../../../lib/';
 
 import { CoreScripts } from './../../../../models/';
 
 import moment from 'moment-timezone';
 
-import Button from '../../../../lib/elements/basic/button/button';
-
-import { Link } from 'react-router-dom';
-
 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 { isPdfFile } from 'pdfjs-dist';
-
-var genericComponents = require('./../../../../lib');
 
-const { Search } = Input;
+import ReportingTable from './reporting-table';
 
 /**
  * ReportingDashboard component renders the dashboard and handles patient details,
@@ -58,15 +43,20 @@ export default function ReportingDashboard({
   const [config, setConfig] = useState({});
 
   // State to manage the layout of the form
-  const [formLayout, setFormLayout] = useState('inline');
+  const [formLayout] = useState('inline');
 
   const [loading, setLoading] = useState(true);
 
   const [cardLoading, setCardLoading] = useState(true);
 
+  const [searchParameters, setSearchParameters] = useState([]);
+
+  const [searchValues, setSearchValues] = useState({});
+
   const [dashboardVisible, setDashBoardVisible] = useState(false);
 
   const [formContents, setformContents] = useState({});
+  const [liveFormContents, setLiveFormContents] = useState({});
 
   const scriptId = useRef(null);
 
@@ -80,9 +70,9 @@ export default function ReportingDashboard({
 
   const [columns, setColumns] = useState([]); // To set columns
 
-  const [summaryColumns, setSummaryColumns] = useState([]);
+  const [, setSummaryColumns] = useState([]);
 
-  const [patients, setPatients] = useState([]); //Patients list array
+  const [reportRequestPayload, setReportRequestPayload] = useState(null);
 
   const urlParams = Location.search();
 
@@ -103,20 +93,9 @@ 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
-      // if (result.display_columns) {
-      //   // Parse and set columns from stored JSON
-
-      //   setColumns(JSON.parse(result.display_columns));
-      // } else {
-      //   console.log("ssssssssssssssssssss")
-      //   // Reset columns if no display columns exist
-
-      //   setColumns([]);
-      // }
       let parsedColumns = [];
 
       if (result.display_columns) {
@@ -124,7 +103,7 @@ export default function ReportingDashboard({
       }
       setColumns(parsedColumns);
 
-      await prepareInputParameters(result, parsedColumns);
+      await prepareInputParameters(result, parsedColumns, fetchId);
 
       if (result.summary_columns) {
         setSummaryColumns(JSON.parse(result.summary_columns));
@@ -169,7 +148,7 @@ export default function ReportingDashboard({
    */
 
   //Prepare input parameters by mapping default values and binding models if needed
-  async function prepareInputParameters(record, parsedColumns) {
+  async function prepareInputParameters(record, parsedColumns, fetchId) {
     setLoading(true);
     let urlParams = Location.search();
 
@@ -178,9 +157,11 @@ export default function ReportingDashboard({
 
     let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
 
-    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
+    parameters = record.input_parameters ? JSON.parse(record.input_parameters) : [];
 
     let formContent = {};
+    const searchFields = (parameters || []).filter((p) => p.type === 'search' && p.search_enabled === 'yes');
+    setSearchParameters([...searchFields]);
 
     parameters = await parameters?.map((record) => {
       // Only if the url params does have a matching value ,
@@ -224,11 +205,19 @@ export default function ReportingDashboard({
       if (record.type === 'date' && !formContent[record.field]) {
         formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
       }
-
+      if (record.type === 'search') {
+        if (!formContent[record.field]) formContent[record.field] = [];
+        return {
+          ...record,
+          reportId: fetchId,
+          onReset: () => getPatientDetails(fetchId),
+          required: record.required,
+        };
+      }
       if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
         // let model = "";
         let model = CustomModels[record.modelName];
-        formContent[record.modelName] = model;
+
         return {
           ...record,
           model,
@@ -243,6 +232,7 @@ export default function ReportingDashboard({
     });
     // Update form content state
     setformContents(formContent);
+    setLiveFormContents(formContent);
 
     // Trigger form submission
     onFinish(formContent, null, record.input_parameters, parsedColumns);
@@ -254,130 +244,169 @@ export default function ReportingDashboard({
       // 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]);
+      // Keep all parameters with a type (including search) to render in FormCreator
+      setDetails([...parameters.filter((ele) => ele.type)]);
     }
   }
 
   // Refresh patient details.
 
   function refresh() {
-    getPatientDetails();
+    getPatientDetails(scriptId.current || id);
   }
 
-  const fetchReportData = async (id, values, dbPtr, pagination, parsedColumns,paramsString) => {
-    const { current, pageSize } = pagination || {};
-    // If card script id is exist load that id otherwise load id
-    const coreScriptId = scriptId.current ? scriptId.current : id;
+  const buildReportRequestPayload = (values = {}, paginationOverride) => {
+    const pager = paginationOverride || pagination;
+    const formattedValues = {};
 
-    setLoading(true);
-    try {
-      // Prepare payload for backend: format only here
-      const formattedValues = {};
-      let inputParams = [];
-      inputParams = JSON.parse(paramsString);
-      // Iterate through all keys in the values object
-
-      inputParams.forEach(({ field }) => {
-        const val = values[field];
-
-        // field exists in values → format & assign
-        if (val !== undefined) {
-          formattedValues[field] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
-        }
-        // field missing in values → set null
-        else {
-          formattedValues[field] = null;
-        }
-      });
-      // });
-      // Pagination Data
-      const paginationData = {
-        page: pagination.current || 1,
-        limit: pagination.pageSize || 10,
-      };
-      // Combine form data + pagination
-      let formBody = {
+    Object.keys(values || {}).forEach((key) => {
+      const val = values[key];
+      formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+    });
+
+    const paginationData = {
+      page: pager.current || 1,
+      limit: pager.pageSize || 10,
+    };
+
+    if (scope) {
+      return {
         body: {
-          ...formattedValues,
+          ...scope,
           ...paginationData,
         },
       };
-      // Optional override if `scope` exists
-      if (scope) {
-        formBody = { body: { ...scope, ...paginationData } };
-      }
+    }
 
-      // Fetch result
-      const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
-      // Handle both result formats
-      let resultDetails = result[0];
-      if (result?.result && result?.result[0]) {
-        resultDetails = result.result[0];
-      }
-      // Update patients
-      setPatients(resultDetails || []);
-      // Check if columns are not yet defined
-      if (parsedColumns.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,
-          }));
-        });
+    return {
+      body: {
+        ...formattedValues,
+        ...paginationData,
+      },
+    };
+  };
+
+  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 (result.length) {
-        // Set Pgination data into URL
-        Location.search({ ...Location.search(), current, pageSize });
+    if (!hasSearchValues) {
+      runSubmit(formValues);
+      return;
+    }
 
-        setPagination((prev) => ({
-          ...prev,
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: resultDetails?.[0]?.TotalCount ?? pagination?.total,
-        }));
+    // 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');
       }
-    } catch (error) {
-      console.error('Error fetching report data:', error);
-      message.warn('Please try again');
-    } finally {
-      // Always runs, success or error
-      setLoading(false);
+
+      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);
     }
   };
 
-  // Handle Submit
-  const handleSubmit = (values) => {
+  const runSubmit = (finalValues) => {
     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;
+    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
 
-    // Construct new query string
-    const newParams = new URLSearchParams({
-      ...cleanParams,
-      current: resetPage,
-      pageSize,
-    });
+    if (!hasSearchValues) {
+      const currentUrlParams = Location.search();
+      const { script_id, selected_card, ...cleanParams } = currentUrlParams;
 
-    // Replace URL
-    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
+      const newParams = new URLSearchParams({
+        ...cleanParams,
+        current: resetPage,
+        pageSize,
+      });
 
-    // Trigger submit handler
-    onFinish(values, resetPage);
+      const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+      window.history.replaceState({}, '', newUrl);
+    }
+
+    onFinish(finalValues, resetPage);
+  };
+
+  const selectedSearchFields = details.filter((field) => {
+    if (field.type !== 'search') return false;
+
+    const value = liveFormContents[field.field];
+    return Array.isArray(value) ? value.length > 0 : !!value;
+  });
+
+  const handleRemoveSearchField = (fieldName) => {
+    const updatedValues = {
+      ...liveFormContents,
+      [fieldName]: [],
+    };
+
+    setLiveFormContents(updatedValues);
+    handleSubmit(updatedValues);
   };
 
   /**
@@ -412,6 +441,12 @@ export default function ReportingDashboard({
         //Getting url friendly value by matching the url values and input_parameter values
         let value = values[parameter.field];
 
+        // If the value is missing at the root level (which happens when search fields are moved 
+        // into search_values during submission), try to retrieve it from the nested object.
+        if (value === undefined && values.search_values && values.search_values[parameter.field] !== undefined) {
+          value = values.search_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
@@ -432,7 +467,8 @@ export default function ReportingDashboard({
         Object.entries(urlsToUpdate).filter(([_, value]) => value !== undefined && value !== null && value !== '')
       );
 
-      setformContents((prev) => ({ ...prev, ...formContent }));
+      setformContents(formContent);
+      setLiveFormContents(formContent);
       Location.search({ ...Location.search(), ...filteredParams });
     }
 
@@ -445,17 +481,12 @@ export default function ReportingDashboard({
 
     // Call API
     try {
-      await fetchReportData(id, values, dbPtr, paginationData, parsedColumns,paramsString);
-    } finally {
-      setLoading(false);
-      setCardLoading(false);
-    }
-  };
-
-  // Pagination Handler
-  const handlePagination = async (newPagination) => {
-    try {
-      await fetchReportData(id, formContents, dbPtr, newPagination);
+      setPagination((prev) => ({
+        ...prev,
+        current: paginationData.current,
+        pageSize: paginationData.pageSize,
+      }));
+      setReportRequestPayload(buildReportRequestPayload(values, paginationData));
     } finally {
       setLoading(false);
       setCardLoading(false);
@@ -470,23 +501,6 @@ export default function ReportingDashboard({
     <Card className="reporting-dashboard card card-shadow">
       {/** If dashBoardIds exist and contain elements, render MenuDashBoard*/}
 
-      {/* Page Header */}
-      {/* <div className="page-header">
-                <div>
-                    <Title style={{ marginBottom: '0px' }} level={4}>
-                        {config.caption || 'Report'}
-                    </Title>
-                </div>
-
-                <div className="right">
-                    <div className="date-and-fltr">
-                        <Button onClick={refresh} type="secondary" size={'small'}>
-                            <ReloadOutlined />
-                        </Button>
-                    </div>
-                </div>
-            </div> */}
-      {/* Page Header Ends */}
       {dashBoardIds?.length > 0 ? (
         <MenuDashBoardComponent
           dashBoardIds={dashBoardIds} //Pass the available dashboard IDs to the componen
@@ -545,691 +559,50 @@ export default function ReportingDashboard({
                 }}
                 styles={{ paddingRight: '15px', alignItems: 'center' }}
                 fields={details}
+                reportId={id}
                 formContent={formContents}
                 // formContent={{ [model]: {} }}
                 modelIndex="requestId"
                 model={model}
                 onSubmit={handleSubmit}
+                onFormValuesChange={setLiveFormContents}
                 callback={() => {
                   // history.goBack();
                 }}
               />
             ) : null}
-            {/* </Card> */}
           </div>
 
-          {/** GuestList component start*/}
-          <GuestList
-            patients={patients}
+          <ReportingTable
             columns={columns}
-            summaryColumns={summaryColumns}
             isFixedIndex={isFixedIndex}
             showScanner={showScanner}
+            reportId={reportId}
+            requestId={scriptId.current ? scriptId.current : id}
+            requestPayload={reportRequestPayload}
+            dbPtr={dbPtr}
             barcodeFilterKey={barcodeFilterKey}
-            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
+            CustomComponents={CustomComponents}
             refresh={refresh}
             config={config}
+            
             loading={cardLoading}
             pagination={pagination}
-            handlePagination={handlePagination}
+            onPaginationChange={(nextPagination) => {
+              Location.search({
+                ...Location.search(),
+                current: nextPagination.current,
+                pageSize: nextPagination.pageSize,
+              });
+              setPagination((prev) => ({
+                ...prev,
+                ...nextPagination,
+              }));
+            }}
             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 getRedirectLink = (entry, record) => {
-    let redirectLink = entry.redirect_link;
-    if (entry.replace_variables) {
-      entry.replace_variables.forEach((replacement) => {
-        const value = record[replacement.field] || '';
-        redirectLink = redirectLink.replace(new RegExp(`@${replacement.field};`, 'g'), value);
-      });
-    }
-    return redirectLink;
-  };
-
-  // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
-  const cols = [
-    ...[
-      {
-        title: '#',
-        dataIndex: 'index',
-        key: 'ColumnIndex',
-        width: 60,
-        render: (value, item, index) => index + 1,
-        key: 'ColumnIndex',
-        fixed: isFixedIndex ? 'left' : null,
-      },
-    ],
-    ...columns.map((entry) => {
-      // if (entry.sort) {
-      //     return {
-      //         render: (record) => {
-
-      //             if (entry.render) {
-
-      //                 return entry.render(record);
-      //             } else {
-      //                 return record[entry.dataIndex]
-      //             }
-      //         },
-      //         title: entry.title,
-      //         key: entry.field,
-      //         sorter: (a, b) => entry.sort(a, b),
-      //         sortDirections: ['ascend', 'descend', 'ascend'],
-      //     };
-      // } else {
-      return {
-        render: (record) => {
-          let textColor = 'inherit';
-
-          if (entry.color) {
-            textColor = entry.color;
-          }
-          /** We can have x types of components that is to be rendered here */
-
-          /**1. Column Data */
-
-          /**2. Action  */
-
-          /**3. Custom Component - In future .   */
-
-          if (entry.render) {
-            return entry.render(record);
-
-            // The type of component can be differentiated by type/ we can also reuse
-            // any field present in the columns to avoid any additional field
-          } else if (entry.type === 'link') {
-            //Cheacking type of action to be done ie,If it contains a type then it will match with the record
-            // for example initally we are implementing it for a type link
-            // ie, we will return a link in query with the field as link and type link in display_columns
-            //So here we match the field returned by query with the type in display_columns
-
-            if (record[entry.field]) {
-              return (
-                <a href={record[entry.field]} target="_blank" rel="noopener noreferrer">
-                  View
-                </a>
-              );
-            }
-          } else if (entry.field === 'action') {
-            let redirectLink = entry.redirect_link;
-
-            // The variables to be replaced can be maintained
-            // as a configuration in the entry or the column configuration
-
-            // We iterate through all the variables that are present in the configuration
-            // and replace the link to generate the final link
-
-            entry.replace_variables.forEach((replacement) => {
-              redirectLink = redirectLink.replace(new RegExp('@' + replacement.field + ';', 'g'), record[replacement.field]);
-            });
-
-            return <Link to={`${redirectLink}`}>{entry.display_name_link ? entry.display_name_link : 'View'}</Link>;
-          } else if (entry.field === 'custom') {
-            // Make all the components in modules available for use in custom column of core script
-            // var genericComponents = require('./../../../../../../../nura-api-new/nura-desk/src/modules');
-            var genericComponents = CustomComponents;
-
-            // Arrive the component name
-            let componentName = entry.component;
-
-            let LoadedComponent = null;
-            // If there is custom components mensioned in the display_columns,
-            // then matching the custom components with the generic components
-            if (componentName) {
-              if (componentName && genericComponents[componentName]) {
-                LoadedComponent = genericComponents[componentName];
-              }
-            }
-
-            let propValue = {};
-            // If there is props value
-            if (entry.props) {
-              // Looping the props from the props mensioned in display_columns,
-              // Matching the field of record props field with the and return the
-              entry.props.forEach((values) => {
-                // Matching the fields of record with the props field
-                let valueCreation = record[values.field];
-                // Returning the values of field matched by fields
-                propValue[values.value] = valueCreation;
-              });
-            }
-
-            return (
-              <LoadedComponent
-                // Configuration will define
-                {...entry.config}
-                callback={() => {
-                  refresh();
-                }}
-                // record={record}
-
-                {...record}
-                // assigning the props
-                {...propValue}
-              />
-            );
-          } else {
-            // Check if both `color_code` exists in the record and `enableColor` is true
-            if (record.color_code && entry.enableColor) {
-              // If the column type is 'tag', render the field inside an Ant Design <Tag> with color
-              if (entry.columnType === 'tag') {
-                return <Tag color={record.color_code}>{record[entry.field]}</Tag>;
-
-                // If the column type is 'span', render the field inside a <span> with inline color style
-              } else if (entry.columnType === 'span') {
-                return <span style={{ color: record.color_code, overflowWrap: 'break-word', WebkitLineClamp: 3 }}>{record[entry.field]}</span>;
-              }
-            } else {
-              /**
-               * This code dynamically displays icons based on  data and a configuration
-               * When a column's configuration includes a displayIcons JSON, the code will check the corresponding data field.
-               *  If the field's value (e.g., "Pending") matches a key in that JSON,
-               * the system will display the specified icon with its defined color and size.
-               */
-              if (entry.displayIcons) {
-                // Get the field value
-                const fieldValue = record[entry.field]?.toString();
-
-                // Get the configuration for the icon from the JSON.
-                const displayConfig = entry.displayIcons[fieldValue];
-                if (displayConfig) {
-                  // Look up the actual component from our iconMap using the name from the JSON.
-                  const DynamicIcon = Icons[displayConfig.icon];
-                  // If a component is found, render it with the specified color and size.
-                  if (DynamicIcon) {
-                    return (
-                      <DynamicIcon
-                        style={{
-                          color: displayConfig.color,
-                          fontSize: displayConfig.size,
-                        }}
-                      />
-                    );
-                  }
-                }
-              } else {
-                //If the value is neither 'Y' nor 'N', return the actual field value
-                return <span style={{ color: textColor, whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{record[entry.field]}</span>;
-              }
-            }
-          }
-        },
-        field: entry.field,
-        // title: entry.title,
-        // title: (
-        //   <Tooltip title={entry.title}>
-        //     {entry.title}
-        //   </Tooltip>
-        // ),
-        title: (
-          <Tooltip title={entry.tooltip || entry.title}>
-            <span>{entry.title}</span>
-          </Tooltip>
-        ),
-        key: entry.field,
-        width: entry.width ? parseInt(entry.width) : 160,
-        fixed: entry.isFixedColumn ? entry.isFixedColumn : null, // Conditionally setting the 'fixed' key to 'left' if 'isColumnStatic' is true; otherwise, setting it to null.
-        // Check if filtering is enabled and patients is an array
-        filters:
-          entry.isFilterEnabled && Array.isArray(patients)
-            ? [...new Set(patients.map((item) => item[entry.field]).filter(Boolean))].map((value) => ({ text: value, value }))
-            : null,
-        // Apply the filter only if it's enabled for the column
-        onFilter: entry.isFilterEnabled ? (value, record) => record[entry.field] === value : null,
-        //If sorting is enabled for this entry, provide a sorter function
-        sorter: entry.isSortingEnabled ? (a, b) => String(a[entry.field]).localeCompare(String(b[entry.field])) : null,
-
-        // Apply the filter search
-        filterSearch: entry.isFilterEnabled ? entry.isFilterEnabled : false,
-        exportDefinition: (record) => {
-          //Custom components should not be downloaded
-          // return entry.field === 'custom' ? null : record[entry.field];
-          if (entry.field === 'custom') {
-            // Find the field key in props that corresponds to 'description'
-            const description = entry.props?.find((p) => p.value === 'description')?.field;
-
-            // Return the value from record.props if it exists
-            return description && record[description] ? record[description] : null;
-          }
-          return record[entry.field];
-        },
-        // Add align property based on column type
-        align: entry.type === 'number' ? 'right' : 'left',
-      };
-      // }
-    }),
-    // ...[
-    //     {
-    //         title: '',
-    //         key: 'action',
-    //         render: (text, record) => {
-    //             let detail = model.slice(0, model.length - 1);
-
-    //             return (
-    //                 <Space size="middle">
-    //                     {!schema.hideView && !actions.length ? <Link to={`/${city}/${model}/${text.id}`}>View</Link> : null}
-
-    //                     {actions.map((action) => (
-    //                         <Link to={action.url(record)}>{action.caption}</Link>
-    //                     ))}
-    //                 </Space>
-    //             );
-    //         },
-    //     },
-    // ],
-
-    // ...[
-    //     {
-    //         title: '',
-    //         key: 'action',
-    //         render: (text, record) => {
-    //             let detail = model.slice(0, model.length - 1);
-
-    //             return (
-    //                 <Link to={`${menu.path.replace(':id',visitid)}?op_no=${OpNo}`}>
-    //                     <Button size={'small'}>
-    //                         <PlayCircleOutlined />
-    //                         Go to Menu
-    //                     </Button>
-    //                 </Link>
-    //             );
-    //         },
-    //     },
-    // ],
-  ];
-
-  /**
-   *
-   * @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) {
-      // Commented due to a production issue:
-      // When displayColumns is not defined, rowIndex and dispatch fields were getting displayed in the table.
-      // Also, the `data` variable is not used in the code below, and the setData state is already commented out.
-
-      // 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');
-      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>
-        {/* {view ? (
-                    <>
-                        <CardList dataSource={data} columns={columns} />
-                    </>
-                ) : (
-                    <> */}
-        <Card>
-          {loading ? (
-            <>
-              <Skeleton active paragraph={{ rows: 6 }} />
-            </>
-          ) : (
-            <TableComponent
-              size="small"
-              scroll={{ x: 'max-content', y: '60vh' }}
-              tableLayout="fixed"
-              sticky
-              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>
-    </>
-  );
-}
-
-// //Mobile view card Section
-// function CardList({ dataSource, url }) {
-//     const { user = {}, dispatch } = useContext(GlobalContext);
-
-//     function onClick(item) {
-//         Location.navigate({
-//             url: `/lab-detail/${item.BillID}`,
-//         });
-
-//         dispatch({ type: 'index', payload: item.rowIndex });
-//     }
-
-//     return dataSource.map((item, index) => {
-//         // to={`/lab-detail/${item.BillID}`}
-//         return (
-//             <div
-//                 key={index}
-//                 className="report-item"
-//                 onClick={() => {
-//                     onClick(item);
-//                 }}
-//             >
-//                 <GuestCard record={item} />
-//             </div>
-//         );
-//     });
-// }
-
-// function GuestCard({ record }) {
-//     return (
-//         <Card className="card vehicle-card">
-//             <div className="card">
-//                 <h2 className="title">{record.PName}</h2>
-
-//                 <h4 className="values">{record.OpNo}</h4>
-
-//                 <h3 className="values">{record.Test}</h3>
-
-//                 <h3 className="values">Primary Result : {record.PrimaryResult || 'Pending'}</h3>
-
-//                 <Text type="secondary">{record.Mobile}</Text>
-
-//                 <h4 className="values">{record.Date}</h4>
-//             </div>
-//         </Card>
-//     );
-// }
-//     );
-// }