ui-soxo-bootstrap-core 2.6.59 → 2.6.61

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

@@ -1,652 +1,652 @@
-import React, { useState, useEffect, useContext, useRef } from 'react';
-
-import { Table, Skeleton, Input, Modal, message, Tag } from 'antd';
-
-import { Location, FormCreator, GlobalContext, Card } from './../../../../lib/';
-
-import { CoreScripts } from './../../../../models/';
-
-import moment from 'moment-timezone';
-
-import './reporting-dashboard.scss';
-
-// import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
-import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
-
-import ReportingTable from './reporting-table';
-
-// Input parameter that decides which date column the report is filtered by
-const DATE_FILTER_FIELD = 'date_filter_type';
-
-/**
- * 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] = useState('inline');
-
-  const [loading, setLoading] = useState(true);
-
-  const [cardLoading, setCardLoading] = useState(true);
-
-  const [searchParameters, setSearchParameters] = useState([]);
-
-  const [searchValues, setSearchValues] = useState({});
-
-  const [dashboardVisible, setDashBoardVisible] = useState(false);
-
-  const [formContents, setformContents] = useState({});
-  const [liveFormContents, setLiveFormContents] = useState({});
-  const [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 [, setSummaryColumns] = useState([]);
-
-  const [reportRequestPayload, setReportRequestPayload] = useState(null);
-
-  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) {
-    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]);
-        } else if (record.type !== 'search') {
-          // Restore plain values ( eg : select filters ) back from the url
-          formContent[record.field] = 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:
-            // Any other default is taken as the value itself ( eg : select filters )
-            if (record.default !== undefined && record.default !== null && record.type !== 'date') {
-              formContent[record.field] = record.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);
-      }
-
-      // For a static select with no value yet , preselect the first option
-      if (record.type === 'select' && Array.isArray(record.options) && formContent[record.field] === undefined) {
-        formContent[record.field] = record.options[0]?.valueMember;
-      }
-      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 {
-      // The date filter input is shown only when the filter is enabled in otherDetails .
-      // Otherwise it stays hidden holding its default value , so the report keeps filtering
-      // on the default date
-      const filterKey = otherDetails ? Object.keys(otherDetails).find((key) => key.toLowerCase().trim() === 'enableuserfilter') : null;
-
-      const isFilterEnabled = filterKey ? otherDetails[filterKey] === true || otherDetails[filterKey] === 'true' : false;
-
-      // Keep all parameters with a type (including search) to render in FormCreator
-      setDetails([
-        ...parameters
-          .filter((ele) => ele.type)
-          .map((ele) => (ele.field === DATE_FILTER_FIELD ? { ...ele, visible: isFilterEnabled } : ele)),
-      ]);
-    }
-  }
-
-  // Refresh patient details.
-
-  function refresh() {
-    getPatientDetails(scriptId.current || id);
-  }
-
-  const buildReportRequestPayload = (values = {}, paginationOverride) => {
-    const pager = paginationOverride || pagination;
-    const formattedValues = {};
-
-    Object.keys(values || {}).forEach((key) => {
-      const val = values[key];
-      formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
-    });
-
-    const paginationData = {
-      page: pager.current || 1,
-      limit: pager.pageSize || 10,
-    };
-
-    if (scope) {
-      return {
-        body: {
-          ...scope,
-          ...paginationData,
-        },
-      };
-    }
-
-    return {
-      body: {
-        ...formattedValues,
-        ...paginationData,
-      },
-    };
-  };
-
-  const handleSubmit = (values) => {
-    // Extract search fields from the form values
-    const searchKeys = searchParameters.map((p) => p.field);
-    const currentSearchValues = {};
-    const formValues = {};
-
-    Object.keys(values).forEach((key) => {
-      if (searchKeys.includes(key)) {
-        currentSearchValues[key] = values[key];
-      } else {
-        formValues[key] = values[key];
-      }
-    });
-
-    const hasSearchValues = Object.values(currentSearchValues).some((v) => Array.isArray(v) && v.length > 0);
-
-    if (!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 {
-      setPagination((prev) => ({
-        ...prev,
-        current: paginationData.current,
-        pageSize: paginationData.pageSize,
-      }));
-      setReportRequestPayload(buildReportRequestPayload(values, paginationData));
-    } 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>
-
-          <ReportingTable
-            columns={columns}
-            isFixedIndex={isFixedIndex}
-            showScanner={showScanner}
-            reportId={reportId}
-            requestId={scriptId.current ? scriptId.current : id}
-            requestPayload={reportRequestPayload}
-            dbPtr={dbPtr}
-            barcodeFilterKey={barcodeFilterKey}
-            CustomComponents={CustomComponents}
-            refresh={refresh}
-            config={config}
-            
-            loading={cardLoading}
-            pagination={pagination}
-            onPaginationChange={(nextPagination) => {
-              Location.search({
-                ...Location.search(),
-                current: nextPagination.current,
-                pageSize: nextPagination.pageSize,
-              });
-              setPagination((prev) => ({
-                ...prev,
-                ...nextPagination,
-              }));
-            }}
-            attributes={attributes}
-          />
-        </>
-      )}
-    </Card>
-  );
-}
+import React, { useState, useEffect, useContext, useRef } from 'react';
+
+import { Table, Skeleton, Input, Modal, message, Tag } from 'antd';
+
+import { Location, FormCreator, GlobalContext, Card } from './../../../../lib/';
+
+import { CoreScripts } from './../../../../models/';
+
+import moment from 'moment-timezone';
+
+import './reporting-dashboard.scss';
+
+// import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
+import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
+
+import ReportingTable from './reporting-table';
+
+// Input parameter that decides which date column the report is filtered by
+const DATE_FILTER_FIELD = 'date_filter_type';
+
+/**
+ * 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] = useState('inline');
+
+  const [loading, setLoading] = useState(true);
+
+  const [cardLoading, setCardLoading] = useState(true);
+
+  const [searchParameters, setSearchParameters] = useState([]);
+
+  const [searchValues, setSearchValues] = useState({});
+
+  const [dashboardVisible, setDashBoardVisible] = useState(false);
+
+  const [formContents, setformContents] = useState({});
+  const [liveFormContents, setLiveFormContents] = useState({});
+  const [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 [, setSummaryColumns] = useState([]);
+
+  const [reportRequestPayload, setReportRequestPayload] = useState(null);
+
+  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) {
+    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]);
+        } else if (record.type !== 'search') {
+          // Restore plain values ( eg : select filters ) back from the url
+          formContent[record.field] = 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:
+            // Any other default is taken as the value itself ( eg : select filters )
+            if (record.default !== undefined && record.default !== null && record.type !== 'date') {
+              formContent[record.field] = record.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);
+      }
+
+      // For a static select with no value yet , preselect the first option
+      if (record.type === 'select' && Array.isArray(record.options) && formContent[record.field] === undefined) {
+        formContent[record.field] = record.options[0]?.valueMember;
+      }
+      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 {
+      // The date filter input is shown only when the filter is enabled in otherDetails .
+      // Otherwise it stays hidden holding its default value , so the report keeps filtering
+      // on the default date
+      const filterKey = otherDetails ? Object.keys(otherDetails).find((key) => key.toLowerCase().trim() === 'enableuserfilter') : null;
+
+      const isFilterEnabled = filterKey ? otherDetails[filterKey] === true || otherDetails[filterKey] === 'true' : false;
+
+      // Keep all parameters with a type (including search) to render in FormCreator
+      setDetails([
+        ...parameters
+          .filter((ele) => ele.type)
+          .map((ele) => (ele.field === DATE_FILTER_FIELD ? { ...ele, visible: isFilterEnabled } : ele)),
+      ]);
+    }
+  }
+
+  // Refresh patient details.
+
+  function refresh() {
+    getPatientDetails(scriptId.current || id);
+  }
+
+  const buildReportRequestPayload = (values = {}, paginationOverride) => {
+    const pager = paginationOverride || pagination;
+    const formattedValues = {};
+
+    Object.keys(values || {}).forEach((key) => {
+      const val = values[key];
+      formattedValues[key] = moment.isMoment(val) ? val.format('YYYY-MM-DD') : val;
+    });
+
+    const paginationData = {
+      page: pager.current || 1,
+      limit: pager.pageSize || 10,
+    };
+
+    if (scope) {
+      return {
+        body: {
+          ...scope,
+          ...paginationData,
+        },
+      };
+    }
+
+    return {
+      body: {
+        ...formattedValues,
+        ...paginationData,
+      },
+    };
+  };
+
+  const handleSubmit = (values) => {
+    // Extract search fields from the form values
+    const searchKeys = searchParameters.map((p) => p.field);
+    const currentSearchValues = {};
+    const formValues = {};
+
+    Object.keys(values).forEach((key) => {
+      if (searchKeys.includes(key)) {
+        currentSearchValues[key] = values[key];
+      } else {
+        formValues[key] = values[key];
+      }
+    });
+
+    const hasSearchValues = Object.values(currentSearchValues).some((v) => Array.isArray(v) && v.length > 0);
+
+    if (!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 {
+      setPagination((prev) => ({
+        ...prev,
+        current: paginationData.current,
+        pageSize: paginationData.pageSize,
+      }));
+      setReportRequestPayload(buildReportRequestPayload(values, paginationData));
+    } 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>
+
+          <ReportingTable
+            columns={columns}
+            isFixedIndex={isFixedIndex}
+            showScanner={showScanner}
+            reportId={reportId}
+            requestId={scriptId.current ? scriptId.current : id}
+            requestPayload={reportRequestPayload}
+            dbPtr={dbPtr}
+            barcodeFilterKey={barcodeFilterKey}
+            CustomComponents={CustomComponents}
+            refresh={refresh}
+            config={config}
+            
+            loading={cardLoading}
+            pagination={pagination}
+            onPaginationChange={(nextPagination) => {
+              Location.search({
+                ...Location.search(),
+                current: nextPagination.current,
+                pageSize: nextPagination.pageSize,
+              });
+              setPagination((prev) => ({
+                ...prev,
+                ...nextPagination,
+              }));
+            }}
+            attributes={attributes}
+          />
+        </>
+      )}
+    </Card>
+  );
+}