ui-soxo-bootstrap-core 2.6.40-dev.0 → 2.6.40-dev.11

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

@@ -1,1096 +1,1116 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-
-import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
-
-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 { 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,
-  attributes,
-}) {
-  const [config, setConfig] = useState({});
-
-  // State to manage the layout of the form
-  const [formLayout, setFormLayout] = useState('vertical');
-
-  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);
-
-  //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 }) => {
-      // Check if display columns are provided from backend
-      let parsedColumns = [];
-
-      if (result.display_columns) {
-        parsedColumns = JSON.parse(result.display_columns);
-      }
-      setColumns(parsedColumns);
-
-      await prepareInputParameters(result, parsedColumns, fetchId);
-
-      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, parsedColumns, fetchId) {
-    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 = 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 ,
-      // 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 (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];
-
-        return {
-          ...record,
-          model,
-          required: record.required,
-        };
-      } else {
-        return {
-          ...record,
-          required: true,
-        };
-      }
-    });
-    // Update form content state
-    setformContents(formContent);
-    setLiveFormContents(formContent);
-
-    // Trigger form submission
-    onFinish(formContent, null, record.input_parameters, parsedColumns);
-
-    setLoading(false);
-
-    // Check if input parameters are enabled or disabled in otherDetails
-    if (otherDetails?.isDisableInputParameters) {
-      // If enabled, clear the details array
-      setDetails([]);
-    } else {
-      // Keep all parameters with a type (including search) to render in FormCreator
-      setDetails([...parameters.filter((ele) => ele.type)]);
-    }
-  }
-
-  // Refresh patient details.
-
-  function refresh() {
-    getPatientDetails();
-  }
-
-  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 : [];
-
-    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);
-
-      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) => {
-    // 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;
-    const resetPage = 1;
-
-    scriptId.current = null;
-
-    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
-
-    if (!hasSearchValues) {
-      const currentUrlParams = Location.search();
-      const searchKeys = new Set(searchParameters.map((parameter) => parameter.field));
-      const cleanParams = Object.fromEntries(
-        Object.entries(currentUrlParams).filter(
-          ([key]) => key !== 'script_id' && key !== 'selected_card' && !searchKeys.has(key)
-        )
-      );
-
-      const newParams = new URLSearchParams({
-        ...cleanParams,
-        current: resetPage,
-        pageSize,
-      });
-
-      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);
-  };
-
-  /**
-   *
-   * @param {*} values
-   */
-
-  const onFinish = async (values, resetPage, inputParamsString, parsedColumns) => {
-    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];
-
-        // 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
-          // 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;
-      });
-
-      const currentParams = Location.search();
-      // Mark existing empty values as null so Location.search removes stale query params.
-      const filteredParams = Object.fromEntries(
-        Object.entries(urlsToUpdate).flatMap(([key, value]) => {
-          const shouldRemove = value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
-          if (shouldRemove && !Object.prototype.hasOwnProperty.call(currentParams, key)) {
-            return [];
-          }
-
-          return [[key, shouldRemove ? null : value]];
-        })
-      );
-
-      setformContents(formContent);
-      setLiveFormContents(formContent);
-      Location.search({ ...currentParams, ...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, parsedColumns);
-    } 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*/}
-
-      {dashBoardIds?.length > 0 ? (
-        <MenuDashBoardComponent
-          dashBoardIds={dashBoardIds} //Pass the available dashboard IDs to the componen
-          activeId={Number(urlParams?.selected_card || 0)}
-          dbPtr={dbPtr}
-          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}
-                reportId={id}
-                formContent={formContents}
-                // formContent={{ [model]: {} }}
-                modelIndex="requestId"
-                model={model}
-                onSubmit={handleSubmit}
-                onFormValuesChange={setLiveFormContents}
-                callback={() => {
-                  // history.goBack();
-                }}
-              />
-            ) : null}
-          </div>
-
-          {/** GuestList component start*/}
-          <GuestList
-            patients={patients}
-            columns={columns}
-            summaryColumns={summaryColumns}
-            isFixedIndex={isFixedIndex}
-            showScanner={showScanner}
-            barcodeFilterKey={barcodeFilterKey}
-            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
-            refresh={refresh}
-            config={config}
-            loading={cardLoading}
-            pagination={pagination}
-            handlePagination={handlePagination}
-            attributes={attributes}
-            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>
-    </>
-  );
-}
+import React, { useState, useEffect, useContext, useRef } from 'react';
+
+import { Table, Skeleton, Input, Modal, message, Pagination, Tag } from 'antd';
+
+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 { 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,
+  attributes,
+}) {
+  const [config, setConfig] = useState({});
+
+  // State to manage the layout of the form
+  const [formLayout, setFormLayout] = useState('vertical');
+
+  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 [reportMailRequest, setReportMailRequest] = useState({
+    scriptId: null,
+    inputParameters: {},
+  });
+
+  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 }) => {
+      // Check if display columns are provided from backend
+      let parsedColumns = [];
+
+      if (result.display_columns) {
+        parsedColumns = JSON.parse(result.display_columns);
+      }
+      setColumns(parsedColumns);
+
+      await prepareInputParameters(result, parsedColumns, fetchId);
+
+      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, parsedColumns, fetchId) {
+    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 = 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 ,
+      // 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 (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];
+
+        return {
+          ...record,
+          model,
+          required: record.required,
+        };
+      } else {
+        return {
+          ...record,
+          required: true,
+        };
+      }
+    });
+    // Update form content state
+    setformContents(formContent);
+    setLiveFormContents(formContent);
+
+    // Trigger form submission
+    onFinish(formContent, null, record.input_parameters, parsedColumns);
+
+    setLoading(false);
+
+    // Check if input parameters are enabled or disabled in otherDetails
+    if (otherDetails?.isDisableInputParameters) {
+      // If enabled, clear the details array
+      setDetails([]);
+    } else {
+      // Keep all parameters with a type (including search) to render in FormCreator
+      setDetails([...parameters.filter((ele) => ele.type)]);
+    }
+  }
+
+  // Refresh patient details.
+
+  function refresh() {
+    getPatientDetails();
+  }
+
+  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 : [];
+
+    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 } };
+      }
+
+      setReportMailRequest({
+        scriptId: coreScriptId,
+        inputParameters: formBody,
+      });
+
+      // 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) => {
+    // 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;
+    const resetPage = 1;
+
+    scriptId.current = null;
+
+    const hasSearchValues = finalValues.search_values && Object.values(finalValues.search_values).some((v) => Array.isArray(v) && v.length > 0);
+
+    if (!hasSearchValues) {
+      const currentUrlParams = Location.search();
+      const searchKeys = new Set(searchParameters.map((parameter) => parameter.field));
+      const cleanParams = Object.fromEntries(
+        Object.entries(currentUrlParams).filter(
+          ([key]) => key !== 'script_id' && key !== 'selected_card' && !searchKeys.has(key)
+        )
+      );
+
+      const newParams = new URLSearchParams({
+        ...cleanParams,
+        current: resetPage,
+        pageSize,
+      });
+
+      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);
+  };
+
+  /**
+   *
+   * @param {*} values
+   */
+
+  const onFinish = async (values, resetPage, inputParamsString, parsedColumns) => {
+    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];
+
+        // 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
+          // 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;
+      });
+
+      const currentParams = Location.search();
+      // Mark existing empty values as null so Location.search removes stale query params.
+      const filteredParams = Object.fromEntries(
+        Object.entries(urlsToUpdate).flatMap(([key, value]) => {
+          const shouldRemove = value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
+          if (shouldRemove && !Object.prototype.hasOwnProperty.call(currentParams, key)) {
+            return [];
+          }
+
+          return [[key, shouldRemove ? null : value]];
+        })
+      );
+
+      setformContents(formContent);
+      setLiveFormContents(formContent);
+      Location.search({ ...currentParams, ...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, parsedColumns);
+    } 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*/}
+
+      {dashBoardIds?.length > 0 ? (
+        <MenuDashBoardComponent
+          dashBoardIds={dashBoardIds} //Pass the available dashboard IDs to the componen
+          activeId={Number(urlParams?.selected_card || 0)}
+          dbPtr={dbPtr}
+          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}
+                reportId={id}
+                formContent={formContents}
+                // formContent={{ [model]: {} }}
+                modelIndex="requestId"
+                model={model}
+                onSubmit={handleSubmit}
+                onFormValuesChange={setLiveFormContents}
+                callback={() => {
+                  // history.goBack();
+                }}
+              />
+            ) : null}
+          </div>
+
+          {/** GuestList component start*/}
+          <GuestList
+            patients={patients}
+            columns={columns}
+            summaryColumns={summaryColumns}
+            isFixedIndex={isFixedIndex}
+            showScanner={showScanner}
+            barcodeFilterKey={barcodeFilterKey}
+            CustomComponents={{ ...CustomComponents, ...genericComponents, ...ReportingDashboardComp }}
+            refresh={refresh}
+            config={config}
+            loading={cardLoading}
+            pagination={pagination}
+            handlePagination={handlePagination}
+            attributes={attributes}
+            selectedSearchFields={selectedSearchFields}
+            handleRemoveSearchField={handleRemoveSearchField}
+            fetchReportData={(paginationUpdate) => fetchReportData(id, formContents, dbPtr, paginationUpdate || pagination)}
+            reportScriptId={reportMailRequest.scriptId}
+            reportInputParameters={reportMailRequest.inputParameters}
+          />
+          {/** 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,
+  reportScriptId,
+  reportInputParameters,
+}) {
+  /**
+   * @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}
+                  fileName={`${config.caption || 'Report'}.xlsx`}
+                  pdfFileName={`${config.caption || 'Report'}.pdf`}
+                  scriptId={reportScriptId}
+                  inputParameters={reportInputParameters}
+                  dropdown
+                />
+              </>
+            )}
+          </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>
+    </>
+  );
+}