ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,1101 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+
+import { Table, Skeleton, Input, Tag, Modal, message, Pagination } 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 { 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 { isPdfFile } from 'pdfjs-dist';
+
+var genericComponents = require('./../../../../lib');
+
+const { Search } = Input;
+
+/**
+ * ReportingDashboard component renders the dashboard and handles patient details,
+ * configuration, and form layout for generating reports.
+ *
+ * @param {Object} props - The component's props.
+ * @param {Object} props.match - The match object containing the URL parameters.
+ * @param {Object} props.CustomComponents - Custom components for rendering.
+ * @param {string} props.reportId - The report ID.
+ * @param {boolean} props.isFixedIndex - Determines if the index is fixed.
+ * @param {Array<string>} props.dashBoardIds - The list of dashboard IDs.
+ *
+ * @returns {JSX.Element} The rendered ReportingDashboard component.
+ */
+export default function ReportingDashboard({
+  match,
+  scope,
+  CustomComponents,
+  reportId,
+  isFixedIndex,
+  dashBoardIds,
+  barcodeFilterKey,
+  showScanner,
+  dbPtr,
+}) {
+  const [config, setConfig] = useState({});
+
+  // State to manage the layout of the form
+  const [formLayout, setFormLayout] = useState('inline');
+
+  const [loading, setLoading] = useState(true);
+
+  const [cardLoading, setCardLoading] = useState(true);
+
+  const [dashboardVisible, setDashBoardVisible] = useState(false);
+
+  const [formContents, setformContents] = useState({});
+
+  const scriptId = useRef(null);
+
+  //In case of reports from core_script , there will be id from params
+  // In case of normal menu we need to take id from props
+  let id = reportId ? reportId : match.params.id;
+
+  const { CustomModels = {} } = useContext(GlobalContext);
+
+  const [details, setDetails] = useState([]);
+
+  const [columns, setColumns] = useState([]); // To set columns
+
+  const [summaryColumns, setSummaryColumns] = useState([]);
+
+  const [patients, setPatients] = useState([]); //Patients list array
+
+  const urlParams = Location.search();
+
+  // Pagination
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+  });
+
+  // Settings db pointer
+  if (!dbPtr) dbPtr = localStorage.db_ptr;
+
+  /**
+   * Fetches patient details from the server and updates the relevant state.
+   * This includes input parameters, columns, summary columns, and configuration.
+   *
+   * @returns {Promise<void>} A promise that resolves when the patient details have been fetched and the state has been updated.
+   */
+  async function getPatientDetails(idOverride) {
+    setPatients([]);
+    const fetchId = idOverride || id;
+    await CoreScripts.getRecord({ id: fetchId, dbPtr }).then(async ({ result }) => {
+      await prepareInputParameters(result);
+      setColumns(JSON.parse(result.display_columns));
+
+      if (result.summary_columns) {
+        setSummaryColumns(JSON.parse(result.summary_columns));
+      }
+
+      setConfig({ ...result });
+    });
+  }
+
+  // useEffect(() => {
+  //   if (!dashboardVisible) {
+  //     refresh(false);
+  //   }
+  // }, [dashboardVisible]);
+
+  /**
+   *
+   *
+   * Manage initial render
+   */
+
+  useEffect(() => {
+    getPatientDetails();
+  }, []);
+
+  /**
+   * Effect hook that triggers the `getPatientDetails` function
+   * whenever the `match.params.id` value changes.
+   *
+   * @returns {void} This hook does not return anything.
+   */
+  // useEffect(() => {
+  //   getPatientDetails();
+  // }, [match.params.id]);
+
+  let parameters;
+
+  /**
+   * Some parameters would need binding with the model
+   *
+   * @param {*} inputParameters Input parameters from the report configuration.
+   */
+
+  //Prepare input parameters by mapping default values and binding models if needed
+  async function prepareInputParameters(record) {
+    setLoading(true);
+    let urlParams = Location.search();
+
+    // If script id exist set into variable
+    if (urlParams.script_id) scriptId.current = urlParams.script_id;
+
+    let otherDetails = record.other_details1 ? JSON.parse(record.other_details1) : null;
+    parameters = JSON.parse(record.input_parameters);
+
+    let formContent = {};
+
+    parameters = await parameters.map((record) => {
+      // Only if the url params does have a matching value ,
+      // we should not consider the default  value
+
+      if (urlParams[record.field]) {
+        if (record.type === 'date') {
+          formContent[record.field] = moment.utc(urlParams[record.field]);
+        }
+
+        // return formContent;
+      } else {
+        // let StartDate, EndDate;
+        switch (record.default) {
+          case 'startOfDay':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).startOf('day');
+            break;
+
+          case 'endOfDay':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).endOf('day');
+            break;
+
+          case 'startOfWeek':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).startOf('week');
+            break;
+
+          case 'endOfWeek':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE).endOf('week');
+            break;
+
+          case 'currentDate':
+            formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
+            break;
+
+          default:
+            break;
+        }
+      }
+
+      // If it is a date field and still no value, set it to today's date
+      if (record.type === 'date' && !formContent[record.field]) {
+        formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
+      }
+
+      if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
+        // let model = "";
+        let model = CustomModels[record.modelName];
+
+        return {
+          ...record,
+          model,
+          required: record.required,
+        };
+      } else {
+        return {
+          ...record,
+          required: true,
+        };
+      }
+    });
+    // Update form content state
+    setformContents(formContent);
+
+    // Trigger form submission
+    onFinish(formContent, null, record.input_parameters);
+
+    setLoading(false);
+
+    // Check if input parameters are enabled or disabled in otherDetails
+    if (otherDetails?.isDisableInputParameters) {
+      // If enabled, clear the details array
+      setDetails([]);
+    } else {
+      //// Filter the array "parameters" and keep only elements where "type" is present (truthy)
+      //Keep only parameters that have a "type" → used for UI display
+      let filter = parameters.filter((ele) => ele.type);
+      // Update the "details" state with the filtered results
+
+      setDetails([...filter]);
+    }
+  }
+
+  // Refresh patient details.
+
+  function refresh() {
+    getPatientDetails();
+  }
+
+  const fetchReportData = async (id, values, dbPtr, pagination) => {
+    const { current, pageSize } = pagination || {};
+    // If card script id is exist load that id otherwise load id
+    const coreScriptId = scriptId.current ? scriptId.current : id;
+
+    setLoading(true);
+    try {
+      // Prepare payload for backend: format only here
+      const formattedValues = {};
+      Object.keys(values).forEach((key) => {
+        const val = values[key];
+        formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+      });
+      // Pagination Data
+      const paginationData = {
+        page: pagination.current || 1,
+        limit: pagination.pageSize || 10,
+      };
+      // Combine form data + pagination
+      let formBody = {
+        body: {
+          ...formattedValues,
+          ...paginationData,
+        },
+      };
+      // Optional override if `scope` exists
+      if (scope) {
+        formBody = { body: { ...scope, ...paginationData } };
+      }
+      // Fetch result
+      const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
+      // Handle both result formats
+      let resultDetails = result[0];
+      if (result?.result && result?.result[0]) {
+        resultDetails = result.result[0];
+      }
+
+      // Update patients
+      setPatients(resultDetails || []);
+
+      if (result.length) {
+        // Set Pgination data into URL
+        Location.search({ ...Location.search(), current, pageSize });
+
+        setPagination((prev) => ({
+          ...prev,
+          current: pagination.current,
+          pageSize: pagination.pageSize,
+          total: resultDetails?.[0]?.TotalCount ?? pagination?.total,
+        }));
+      }
+    } catch (error) {
+      console.error('Error fetching report data:', error);
+    } finally {
+      // Always runs, success or error
+      setLoading(false);
+    }
+  };
+
+  // Handle Submit
+  const handleSubmit = (values) => {
+    const { pageSize } = pagination;
+    const resetPage = 1;
+
+    // Reset script id on Submit
+    scriptId.current = null;
+
+    // Get current query params
+    const currentUrlParams = Location.search();
+    const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+
+    // Construct new query string
+    const newParams = new URLSearchParams({
+      ...cleanParams,
+      current: resetPage,
+      pageSize,
+    });
+
+    // Replace URL
+    const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+    window.history.replaceState({}, '', newUrl);
+
+    // Trigger submit handler
+    onFinish(values, resetPage);
+  };
+
+  /**
+   *
+   * @param {*} values
+   */
+
+  const onFinish = async (values, resetPage, inputParamsString) => {
+    setLoading(true);
+    setCardLoading(true);
+    // // Check if the dashboard is visible and both start and end values are provided
+    // If true, proceed with hiding the dashboard by setting dashboardVisible to false
+    if (dashboardVisible && values.start && values.end) {
+      setDashBoardVisible((prev) => {
+        if (!prev) return prev; // Prevent unnecessary updates
+
+        return false;
+      });
+    }
+    const paramsString = inputParamsString || (config.input_parameters ? config.input_parameters : null);
+    // Cheacking if there is data and making the data url friendly, ie, if there is date in url
+    if (paramsString) {
+      let urlsToUpdate = {};
+
+      let parameterValue = JSON.parse(paramsString);
+
+      // Variable to store/update the form initial Values
+
+      let formContent = {};
+
+      parameters = parameterValue.map((parameter) => {
+        //Getting url friendly value by matching the url values and input_parameter values
+        let value = values[parameter.field];
+
+        // Keep Moment object in state for picker
+        if (parameter.type === 'date' && value) {
+          formContent[parameter.field] = value.isValid ? value : moment(value); // ensure Moment
+          // Format for URL
+          urlsToUpdate[parameter.field] = moment(value).format('YYYY-MM-DD');
+        } else {
+          formContent[parameter.field] = value;
+          if (parameter.type) {
+            urlsToUpdate[parameter.field] = value;
+          }
+        }
+
+        return parameter;
+      });
+
+      //  Remove keys with undefined, null, or empty string values
+      const filteredParams = Object.fromEntries(
+        Object.entries(urlsToUpdate).filter(([_, value]) => value !== undefined && value !== null && value !== '')
+      );
+
+      setformContents(formContent);
+      Location.search({ ...Location.search(), ...filteredParams });
+    }
+
+    // Reset Pagination Data
+    const latestUrlParams = Location.search();
+    const paginationData = {
+      current: resetPage || Number(latestUrlParams.current) || 1,
+      pageSize: Number(latestUrlParams.pageSize) || pagination.pageSize,
+    };
+
+    // Call API
+    try {
+      await fetchReportData(id, values, dbPtr, paginationData);
+    } finally {
+      setLoading(false);
+      setCardLoading(false);
+    }
+  };
+
+  // Pagination Handler
+  const handlePagination = async (newPagination) => {
+    try {
+      await fetchReportData(id, formContents, dbPtr, newPagination);
+    } finally {
+      setLoading(false);
+      setCardLoading(false);
+    }
+  };
+
+  let model = {
+    fields: details,
+  };
+
+  return (
+    <Card className="reporting-dashboard card card-shadow">
+      {/** If dashBoardIds exist and contain elements, render MenuDashBoard*/}
+
+      {/* 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
+          activeId={Number(urlParams?.selected_card || 0)}
+          callback={(record) => {
+            const selectedCard = record?.id;
+            if (record.other_details) {
+              // Convert the other_details string to a JSON object
+              let json = JSON.parse(record.other_details);
+              const newScriptId = json.script_id;
+
+              scriptId.current = newScriptId;
+
+              // Reset Pagination on card click
+              setPagination((prev) => ({
+                ...prev,
+                current: 1,
+                total: 0,
+              }));
+
+              //Update URL
+              Location.search({
+                ...Location.search(),
+                current: 1,
+                pageSize: pagination.pageSize,
+                script_id: newScriptId,
+                selected_card: selectedCard,
+              });
+
+              // menudashBoardVisible = true;
+              // Show the dashboard component
+              setDashBoardVisible(true);
+              // Fetch and update patient details based on the selected item
+              getPatientDetails(newScriptId);
+              // setDashBoard(true);
+            }
+          }}
+        ></MenuDashBoardComponent>
+      ) : null}
+
+      {/* Content Below */}
+      {loading ? (
+        <>
+          <Skeleton active />
+        </>
+      ) : (
+        <>
+          <div>
+            {/* <Card className="form-card" style={{ padding: '10px 10px' }}> */}
+            {details && details[0] && !loading ? (
+              <FormCreator
+                {...formLayout}
+                layout={formLayout}
+                initialValues={{
+                  layout: formLayout,
+                }}
+                styles={{ paddingRight: '15px', alignItems: 'center' }}
+                fields={details}
+                formContent={formContents}
+                // formContent={{ [model]: {} }}
+                modelIndex="requestId"
+                model={model}
+                onSubmit={handleSubmit}
+                callback={() => {
+                  // history.goBack();
+                }}
+              />
+            ) : null}
+            {/* </Card> */}
+          </div>
+
+          {/** GuestList component start*/}
+          <GuestList
+            patients={patients}
+            columns={columns}
+            summaryColumns={summaryColumns}
+            isFixedIndex={isFixedIndex}
+            showScanner={showScanner}
+            barcodeFilterKey={barcodeFilterKey}
+            CustomComponents={{ ...CustomComponents, ...genericComponents }}
+            refresh={refresh}
+            config={config}
+            loading={cardLoading}
+            pagination={pagination}
+            handlePagination={handlePagination}
+          />
+          {/** 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,
+}) {
+  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);
+
+  let history = useHistory();
+
+  const { isMobile, dispatch } = useContext(GlobalContext);
+
+  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',
+        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}`}>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 }}>{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 }}>{record[entry.field]}</span>;
+              }
+            }
+          }
+        },
+        field: entry.field,
+        title: entry.title,
+        key: entry.field,
+        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) {
+      let data = patients?.map((entry) => {
+        entry.rowIndex = entry.opb_id;
+
+        entry.dispatch = dispatch;
+
+        return entry;
+      });
+
+      // setData(data);
+
+      // Define export data
+      let exportDatas = getExportData(patients, cols);
+
+      if (exportDatas.exportDataColumns.length && exportDatas.exportDataHeaders.length) {
+        setExportData({ exportDatas });
+      }
+    }
+  }, [patients]);
+
+  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}`,
+      });
+    }
+  };
+
+  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}
+
+          <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: true }}
+              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>
+//     );
+// }