@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/common/dynamicView/InputFieldComponent.jsx

@@ -0,0 +1,1501 @@
+import React, { useState, useEffect, lazy, Suspense } from 'react';
+import { Controller } from 'react-hook-form';
+const LocationSelectionComponent = lazy(
+  () => import('@/views/feature-components/LocationDirective/LocationDirectiveV2')
+);
+import { TextField, MenuItem, Select, FormControl, FormGroup, Autocomplete } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import '@/common/dynamicView/InputViewComponent.scss';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import { showToast } from '@/common/toaster/toaster';
+
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import CustomDatePicker from '@/views/custom-components/CustomDatePicker';
+
+/**
+ * InputFieldComponent for handling various input types dynamically.
+ *
+ * This component manages different types of inputs such as date, month,
+ * selectize, and handles validations, state changes, and default values.
+ *
+ * @module InputFieldComponent
+ * @param {Object} props - The component props.
+ * @param {Object} props.config - Configuration object for the component.
+ * @param {Object} props.data - Current data state to be updated.
+ * @param {Function} props.setData - Function to update the data state.
+ * @param {Function} props.fieldChangeCallback - Callback function for field changes.
+ * @param {Function} props.fieldSelectizeCallback - Callback for selectize field changes.
+ * @param {boolean} [props.setDefaultValue=false] - Flag to set default values.
+ * @param {Function} props.locationChange - Callback for location changes.
+ * @param {Object} props.control - Control object for managing input states.
+ * @param {Object} props.errors - Error object for field validations.
+ *
+ * @returns {JSX.Element} The rendered component.
+ */
+export const InputFieldComponent = ({
+  config,
+  data,
+  setData,
+  fieldChangeCallback,
+  fieldSelectizeCallback,
+  setDefaultValue = false,
+  locationChange,
+  control,
+  errors,
+  dataTestId,
+  locations,
+  setLocations,
+  uiLocationId,
+  changedUsingUi,
+  setFetchUptoLevelLimit,
+
+  selectedLocation,
+  setSelectedLocation,
+  setUiLocations = () => { },
+  setUiSelectedLocation = () => { },
+  allDistrictReq,
+  setAllDistrictReq,
+  allBlockReq,
+  setAllBlockReq,
+  allPhcReq,
+  setAllPhcReq,
+  clearPreviousLocation,
+  triggerFirstRun,
+  locationPartSelected,
+}) => {
+  // const [selectedLocation, setSelectedLocation] = useState(config?.selectedLocation ? config?.selectedLocation : {});
+  useEffect(() => {
+    if (selectedLocation?.finalSelected && config?.fieldType === 'location') {
+      locationChange(config.fieldName, selectedLocation);
+    }
+  }, [selectedLocation]);
+  useEffect(() => {
+    if (config?.selectedLocation && Object.keys(config.selectedLocation).length > 0) {
+      setSelectedLocation(config.selectedLocation);
+    }
+  }, [config.selectedLocation]);
+  useEffect(() => { }, [locations]);
+  useEffect(() => { }, [locations]);
+
+  const [selectizeForComboOptions, setSelectizeForComboOptions] = useState([]);
+  const [selectedSelectizeForCombo, setSelectedSelectizeForCombo] = useState(null);
+  const [selectizeForMultiOptions, setSelectizeForMultiOptions] = useState([]);
+  const [selectedSelectizeForMulti, setSelectedSelectizeForMulti] = useState(null);
+
+  const [onlyMonthFrom, setOnlyMonthFrom] = useState('');
+  const [onlyMonthTo, setOnlyMonthTo] = useState('');
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+
+  const [minDate, setMinDate] = useState(null);
+  const [maxDate, setMaxDate] = useState(null);
+  const [fixedMinDate, setfixedMinDate] = useState(null);
+  const [fixedMaxDate, setfixedMaxDate] = useState(null);
+  const [minDateSelected, setMinDateSelected] = useState(false);
+  const [maxDateSelected, setMaxDateSelected] = useState(false);
+
+  const [minMonth, setMinMonth] = useState(null);
+  const [maxMonth, setMaxMonth] = useState(null);
+  const [fixedMinMonth, setfixedMinMonth] = useState(null);
+  const [fixedMaxMonth, setfixedMaxMonth] = useState(null);
+
+  const [mergedObj, setMergedObj] = useState({});
+  const [isDisabledFromConfiguration, setIsDisabledFromConfiguration] = useState(false);
+
+  /**
+   * Handles the field value change.
+   *
+   * @function fieldValueChanged
+   * @param {string} fieldName - The name of the field.
+   * @param {any} fieldValue - The new value of the field.
+   */
+
+
+  useEffect(() => {
+    if (triggerFirstRun > 0) {
+      setMinDateSelected(false);
+      setMaxDateSelected(false);
+      setMinDate(null);
+      setMaxDate(null);
+      setMinMonth(null);
+      setMaxMonth(null);
+      setSelectedSelectizeForCombo(null);
+      setSelectedSelectizeForMulti(null);
+    }
+  }, [triggerFirstRun]);
+
+  const fieldValueChanged = (fieldName, fieldValue) => {
+    if (config.fieldChangeCallback) {
+      fieldChangeCallback(fieldName, fieldValue);
+    }
+  };
+
+  /**
+   * Normalizes a given date to remove time information.
+   *
+   * @function normalizeDate
+   * @param {Date|string} date - The date to normalize.
+   * @returns {Date} The normalized date.
+   */
+  function normalizeDate(date) {
+    const normalizedDate = new Date(date);
+    normalizedDate.setHours(0, 0, 0, 0); // Set time to 00:00:00
+    return normalizedDate;
+  }
+
+  /**
+   * Validates and sets the minimum date value.
+   *
+   * @function minDateFieldValidation
+   * @param {string} fieldName - The name of the field.
+   * @param {any} fieldValue - The new value for the field.
+   */
+  const minDateFieldValidation = (fieldName, fieldValue) => {
+    if (fieldValue) {
+      setMinDateSelected(true);
+      setMinDate(normalizeDate(fieldValue));
+
+      const dateObject = normalizeDate(fieldValue);
+      const updatedData = { ...data };
+      updatedData[fieldName] = dateObject;
+
+      updatedData[`${dateFrom}_1`] = fieldValue;
+      updatedData[dateFrom] = dateObject;
+      setData(updatedData);
+      fieldValueChanged(fieldName, dateObject.toString());
+    } else {
+      setMinDate(null);
+    }
+  };
+
+  /**
+   * Validates and sets the maximum date value.
+   *
+   * @function maxDateFieldValidation
+   * @param {string} fieldName - The name of the field.
+   * @param {any} fieldValue - The new value for the field.
+   */
+  const maxDateFieldValidation = (fieldName, fieldValue) => {
+    if (fieldValue) {
+      setMaxDateSelected(true);
+
+      setMaxDate(normalizeDate(fieldValue));
+
+      const dateObject = normalizeDate(fieldValue);
+      const updatedData = { ...data };
+      updatedData[fieldName] = dateObject;
+      updatedData[`${dateTo}_1`] = fieldValue;
+      updatedData[dateTo] = dateObject;
+      setData(updatedData);
+      fieldValueChanged(fieldName, dateObject.toString());
+    } else {
+      setMaxDate(null);
+    }
+  };
+
+  /**
+   * Validates and sets the minimum month value.
+   *
+   * @function minMonthFieldValidation
+   * @param {string} fieldName - The name of the field.
+   * @param {any} fieldValue - The new value for the field.
+   */
+  const minMonthFieldValidation = (fieldName, fieldValue) => {
+    if (fieldValue) {
+      const [year, month] = fieldValue.format('YYYY-MM').split('-');
+      const dateObject = new Date(year, month - 1, 1);
+      const updatedData = { ...data };
+      updatedData[fieldName] = dateObject;
+      updatedData[onlyMonthFrom] = dateObject;
+      updatedData[`${onlyMonthFrom}_1`] = fieldValue;
+      setMinMonth(normalizeDate(fieldValue));
+      setData(updatedData);
+      fieldValueChanged(fieldName, dateObject.toString());
+    } else {
+      setMinMonth(null);
+    }
+  };
+
+  /**
+   * Validates and sets the maximum month value.
+   *
+   * @function maxMonthFieldValidation
+   * @param {string} fieldName - The name of the field.
+   * @param {any} fieldValue - The new value for the field.
+   */
+  const maxMonthFieldValidation = (fieldName, fieldValue) => {
+    if (fieldValue) {
+      const [year, month] = fieldValue.format('YYYY-MM').split('-');
+      const dateObject = new Date(year, month - 1, 1);
+      setMaxMonth(new Date(fieldValue));
+      const updatedData = { ...data };
+      updatedData[onlyMonthTo] = dateObject;
+      updatedData[fieldName] = dateObject;
+      updatedData[`${onlyMonthTo}_1`] = fieldValue;
+      setData(updatedData);
+      fieldValueChanged(fieldName, dateObject.toString());
+    } else {
+      setMaxMonth(null);
+    }
+  };
+
+  /**
+   * Checks the configuration to determine if the field should be disabled.
+   *
+   * @function checkDisableFromConfig
+   */
+  const checkDisableFromConfig = () => {
+    const equals = config.configJson?.disabledWhenStatusEqual?.includes(data?.status);
+    const notequals = config.configJson?.disabledWhenStatusNotEqual?.includes(data?.status);
+
+    if (equals || notequals) {
+      setIsDisabledFromConfiguration(true);
+    } else {
+      setIsDisabledFromConfiguration(false);
+    }
+  };
+
+  /**
+   * Merges multiple objects into a target object.
+   *
+   * @function mergeObjects
+   * @param {Object} target - The target object to merge into.
+   * @param {...Object} sources - The source objects to merge.
+   * @returns {Object} The merged object.
+   */
+  const mergeObjects = (target, ...sources) => {
+    sources.forEach((source) => {
+      if (source) {
+        Object.assign(target, source);
+      }
+    });
+    return target;
+  };
+
+  /**
+   * Sets default values for fields based on the configuration.
+   *
+   * @function setDefault
+   */
+  const setDefault = () => {
+    const fieldName = config?.resourceCategoryItemFieldDto?.fieldName;
+    const defaultValueConfig = config?.configJson?.defaultValue;
+    const fieldType = config?.resourceCategoryItemFieldDto?.fieldType;
+    if (!data[fieldName] && defaultValueConfig) {
+      let defaultValue;
+      switch (fieldType) {
+        case 'text':
+        case 'number':
+        case 'currency':
+          defaultValue = defaultValueConfig;
+          break;
+        case 'combo':
+        case 'multiselect':
+        case 'autocomplete':
+          defaultValue = config?.resourceCategoryItemFieldDto?.resourceCategoryItemFieldOptionList?.find(
+            (option) => option.id === defaultValueConfig
+          );
+          break;
+        case 'date':
+          if (defaultValueConfig?.isToday) {
+            defaultValue = new Date(); // Assuming today's date
+          }
+          break;
+        default:
+          break;
+      }
+      if (defaultValue) {
+        data({ ...data, [fieldName]: defaultValue });
+      }
+    }
+  };
+
+  /**
+   * Handles changes in data and performs necessary validations and updates.
+   *
+   * @function handleDataChange
+   */
+  const handleDataChange = () => {
+    if (data?.isRetrieved) {
+      checkDisableFromConfig(); // Call the function to check if it should be disabled
+
+      if (config?.resourceCategoryItemFieldDto?.fieldType === 'person') {
+        const fieldValue = data[config?.resourceCategoryItemFieldDto?.fieldName];
+
+        if (fieldValue?.isOrg) {
+          if (data?.address) {
+            data.address.isDisabled = true;
+          }
+        }
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (config?.fieldName) {
+      setOnlyMonthFrom('from_' + config.fieldName);
+      setOnlyMonthTo('to_' + config.fieldName);
+      setDateFrom('from_' + config.fieldName);
+      setDateTo('to_' + config.fieldName);
+    }
+    let merged = mergedObj;
+    if (config?.resourceCategoryItemFieldDto) {
+      merged = mergeObjects(merged, config.resourceCategoryItemFieldDto);
+      if (merged.configJson) {
+        merged = mergeObjects(merged, merged.configJson);
+      }
+      if (config.configJson) {
+        merged = mergeObjects(merged, config.configJson);
+      }
+      setMergedObj(merged);
+    }
+    if (config?.configJson?.isFormula) {
+      let formula = config.configJson.formula;
+      if (config.configJson?.formulaFieldsMap) {
+        Object.keys(config.configJson.formulaFieldsMap).forEach((fieldVariable) => {
+          const fieldName = config.configJson.formulaFieldsMap[fieldVariable];
+          const fieldValue = data[fieldName];
+          if (fieldValue) {
+            const value = fieldValue instanceof Date ? fieldValue.getTime() : fieldValue;
+            formula = formula.replace(new RegExp(fieldVariable, 'g'), value);
+          } else {
+            formula = null;
+          }
+        });
+
+        try {
+          const calculatedValue = Function('"use strict";return (' + formula + ')')();
+          data[config.resourceCategoryItemFieldDto.fieldName] = calculatedValue;
+        } catch (error) {
+          console.error(error);
+          data[config.resourceCategoryItemFieldDto.fieldName] = 0;
+        }
+      }
+    }
+
+    if (setDefaultValue) {
+      setDefault();
+    }
+
+    if (config.fieldType === 'selectizeForCombo') {
+      handleSelectizeInputChange(config.fieldType, '');
+    }
+
+    if (config.fieldType === 'selectizeForMulti') {
+      handleSelectizeInputChange(config.fieldType, '');
+    }
+
+    handleDataChange();
+
+    if (config.ckSetCustomMinMonth && (config.setCustomMinMonth || config.setCustomMinMonth === 0)) {
+      setfixedMinMonth(new Date().setMonth(new Date().getMonth() + Number(config.setCustomMinMonth)));
+    }
+    if (config.ckSetCustomMaxMonth && (config.setCustomMaxMonth || config.setCustomMaxMonth === 0)) {
+      setfixedMaxMonth(new Date().setMonth(new Date().getMonth() + Number(config.setCustomMaxMonth)));
+    }
+    if (config.ckSetFixedMinMonth && config.setFixedMinMonth) {
+      setfixedMinMonth(new Date(config.setFixedMinMonth).getTime());
+    }
+    if (config.ckSetFixedMaxMonth && config.setFixedMaxMonth) {
+      setfixedMaxMonth(new Date(config.setFixedMaxMonth).getTime());
+    }
+    if (config.setMonthRange) {
+      setfixedMinMonth(new Date().setMonth(new Date().getMonth() - Number(config.setMonthRange)));
+      setfixedMaxMonth(new Date().getTime());
+    }
+
+    if (config.setDateRange) {
+      setfixedMinDate(new Date(new Date().setDate(new Date().getDate() - Number(config.setDateRange))));
+      setfixedMaxDate(new Date());
+    }
+    if (config.ckSetCustomMinDate && (config.setCustomMinDate || config.setCustomMinDate === 0)) {
+      setfixedMinDate(new Date(new Date().setDate(new Date().getDate() + Number(config.setCustomMinDate))));
+    }
+    if (config.ckSetCustomMaxDate && (config.setCustomMaxDate || config.setCustomMaxDate === 0)) {
+      setfixedMaxDate(new Date(new Date().setDate(new Date().getDate() + Number(config.setCustomMaxDate))));
+    }
+    if (config.ckSetFixedMinDate && config.setFixedMinDate) {
+      setfixedMinDate(new Date(config.setFixedMinDate));
+    }
+    if (config.ckSetFixedMaxDate && config.setFixedMaxDate) {
+      setfixedMaxDate(new Date(config.setFixedMaxDate));
+    }
+
+    // if (config.isSetDefault && config.isSetDefault === true) {
+    switch (config.fieldType) {
+      case 'dateFromTo':
+        handleDateFromTo(config);
+        break;
+      case 'date':
+        handleDate(config);
+        break;
+      case 'onlyMonthFromTo':
+        handleOnlyMonthFromTo(config);
+        break;
+      case 'onlyMonth':
+        handleOnlyMonth(config);
+        break;
+      case 'dateNTime':
+        handleDateNTime(config);
+        break;
+      default:
+        break;
+    }
+    // }
+  }, [config, data, dateFrom, dateTo, onlyMonthFrom, onlyMonthTo]);
+
+  /**
+   * Handles setting default values for date range fields.
+   *
+   * @function handleDateFromTo
+   * @param {Object} config - The configuration object for the field.
+   */
+  const handleDateFromTo = (config) => {
+    let updatedData = { ...data };
+
+    if (!data[dateFrom] && !data[dateTo]) {
+      if (config.isSetDefault && config.isSetDefault === true) {
+        switch (config.defaultValueOption) {
+          case 'yesterday&lastndays':
+            updatedData = {
+              ...updatedData,
+              [dateTo]: new Date(new Date().setDate(new Date().getDate() - 1)),
+              [dateFrom]: new Date(new Date().setDate(new Date().getDate() - (config.setLastNdays + 1))),
+              [`${dateTo}_1`]: new Date(new Date().setDate(new Date().getDate() - 1)),
+              [`${dateFrom}_1`]: new Date(new Date().setDate(new Date().getDate() - (config.setLastNdays + 1))),
+            };
+            setMinDate(updatedData[dateFrom]);
+            setMaxDate(updatedData[dateTo]);
+            break;
+
+          case 'today&yesterday':
+            updatedData = {
+              ...updatedData,
+              [dateTo]: new Date(new Date().setDate(new Date().getDate())),
+              [dateFrom]: new Date(new Date().setDate(new Date().getDate() - 1)),
+              [`${dateTo}_1`]: new Date(new Date().setDate(new Date().getDate())),
+              [`${dateFrom}_1`]: new Date(new Date().setDate(new Date().getDate() - 1)),
+            };
+            setMinDate(updatedData[dateFrom]);
+            setMaxDate(updatedData[dateTo]);
+            break;
+
+          case 'today&lastndays':
+            updatedData = {
+              ...updatedData,
+              [dateTo]: new Date(new Date().setDate(new Date().getDate())),
+              [dateFrom]: new Date(new Date().setDate(new Date().getDate() - config.setLastNdays)),
+              [`${dateTo}_1`]: new Date(new Date().setDate(new Date().getDate())),
+              [`${dateFrom}_1`]: new Date(new Date().setDate(new Date().getDate() - (config.setLastNdays + 1))),
+            };
+
+            setMinDate(updatedData[dateFrom]);
+            setMaxDate(updatedData[dateTo]);
+            break;
+
+          default:
+            break;
+        }
+        setData(updatedData);
+      }
+    } else {
+      if (data[dateFrom]) {
+        setMinDate(new Date(data[dateFrom]));
+      }
+      if (data[dateTo]) {
+        setMaxDate(new Date(data[dateTo]));
+      }
+    }
+  };
+
+  /**
+   * Handles setting default values for a single date field.
+   *
+   * @function handleDate
+   * @param {Object} config - The configuration object for the field.
+   */
+  const handleDate = (config) => {
+    let updatedData = { ...data };
+    if (!data[config.fieldName]) {
+      if (config.isSetDefault && config.isSetDefault === true) {
+        switch (config.defaultValueOption) {
+          case 'today':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: new Date(),
+              [`${config.fieldName}_1`]: new Date(),
+            };
+            break;
+          case 'yesterday':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: new Date(new Date().setDate(new Date().getDate() - 1)),
+              [`${config.fieldName}_1`]: new Date(new Date().setDate(new Date().getDate() - 1)),
+            };
+            break;
+          case 'lastndays':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: new Date(new Date().setDate(new Date().getDate() - config.setLastNdays)),
+              [`${config.fieldName}_1`]: new Date(new Date().setDate(new Date().getDate() - config.setLastNdays)),
+            };
+            break;
+          default:
+            break;
+        }
+        setData(updatedData);
+      }
+    }
+
+    // Update data directly
+  };
+
+  /**
+   * Handles setting default values for month range fields.
+   *
+   * @function handleOnlyMonthFromTo
+   * @param {Object} config - The configuration object for the field.
+   */
+  const handleOnlyMonthFromTo = (config) => {
+    let updatedData = { ...data };
+    if (!data[onlyMonthFrom] && !data[onlyMonthTo]) {
+      if (config.isSetDefault && config.isSetDefault === true) {
+        switch (config.defaultValueOption) {
+          case 'currentmonth&lastmonth':
+            updatedData = {
+              ...updatedData,
+              [onlyMonthFrom]: new Date(new Date().setMonth(new Date().getMonth() - 1, 1)), // Start of last month
+              [onlyMonthTo]: new Date(new Date().setMonth(new Date().getMonth(), 1)), // Start of current month
+              [`${onlyMonthFrom}_1`]: new Date(new Date().setMonth(new Date().getMonth() - 1, 1)), // Start of last month
+              [`${onlyMonthTo}_1`]: new Date(new Date().setMonth(new Date().getMonth(), 1)),
+            };
+            setMinMonth(updatedData[onlyMonthFrom]);
+            setMaxMonth(updatedData[onlyMonthTo]);
+            break;
+
+          case 'current&lastnmonth':
+            updatedData = {
+              ...updatedData,
+              [onlyMonthFrom]: new Date(new Date().setMonth(new Date().getMonth() - config.setLastNmonths, 1)), // Start of last N months
+              [onlyMonthTo]: new Date(new Date().setMonth(new Date().getMonth(), 1)), // Start of current month
+              [`${onlyMonthFrom}_1`]: new Date(new Date().setMonth(new Date().getMonth() - config.setLastNmonths, 1)), // Start of last month
+              [`${onlyMonthTo}_1`]: new Date(new Date().setMonth(new Date().getMonth(), 1)),
+            };
+            setMinMonth(updatedData[onlyMonthFrom]);
+            setMaxMonth(updatedData[onlyMonthTo]);
+            break;
+
+          default:
+            break;
+        }
+        setData(updatedData);
+      }
+    } else {
+      if (data[onlyMonthFrom]) {
+        setMinMonth(new Date(data[onlyMonthFrom]));
+      }
+      if (data[onlyMonthTo]) {
+        setMaxMonth(new Date(data[onlyMonthTo]));
+      }
+    }
+  };
+  /**
+   * Handles setting default values for a single month field.
+   *
+   * @function handleOnlyMonth
+   * @param {Object} config - The configuration object for the field.
+   */
+  const handleOnlyMonth = (config) => {
+    let updatedData = { ...data };
+    if (!data[config.fieldName]) {
+      if (config.isSetDefault && config.isSetDefault === true) {
+        switch (config.defaultValueOption) {
+          case 'currentmonth':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: new Date(new Date().setMonth(new Date().getMonth(), 1)),
+              [`${config.fieldName}_1`]: new Date(new Date().setMonth(new Date().getMonth(), 1)),
+            };
+            break;
+
+          case 'lastmonth':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: new Date(new Date().setMonth(new Date().getMonth() - 1, 1)),
+              [`${config.fieldName}_1`]: new Date(new Date().setMonth(new Date().getMonth() - 1, 1)),
+            };
+            break;
+
+          default:
+            break;
+        }
+        setData(updatedData);
+      }
+    }
+  };
+
+  /**
+   * Handles setting default values for date and time fields.
+   *
+   * @function handleDateNTime
+   * @param {Object} config - The configuration object for the field.
+   */
+  const handleDateNTime = (config) => {
+    let updatedData = { ...data };
+
+    if (!data[config.fieldName]) {
+      if (config.isSetDefault && config.isSetDefault === true) {
+        switch (config.defaultValueOption) {
+          case 'today':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: normalizeDate(new Date()), // Set today's date
+            };
+            break;
+
+          case 'yesterday':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: normalizeDate(new Date(new Date().setDate(new Date().getDate() - 1))), // Set yesterday's date
+            };
+            break;
+
+          case 'lastndays':
+            updatedData = {
+              ...updatedData,
+              [config.fieldName]: normalizeDate(
+                new Date(new Date().setDate(new Date().getDate() - config.setLastNdays))
+              ), // Set date n days ago
+            };
+            break;
+
+          default:
+            break;
+        }
+        setData(updatedData);
+      }
+    }
+  };
+
+  /**
+   * Handles changes to a specific field's value.
+   *
+   * @function handleFieldChange
+   * @param {string} fieldName - The name of the field being updated.
+   * @param {*} value - The new value for the field.
+   */
+  const handleFieldChange = (fieldName, value) => {
+    setData({ ...data, [fieldName]: value });
+    fieldChangeCallback(fieldName, value);
+  };
+
+  const handleFieldChangeOnlyDate = (fieldName, value) => {
+    setData({ ...data, [fieldName]: new Date(value), [`${fieldName}_1`]: value });
+    fieldChangeCallback(fieldName, new Date(dayjs(value)));
+  };
+  const handleFieldChangeOnlyMonth = (fieldName, value) => {
+    setData({ ...data, [fieldName]: new Date(dayjs(value).startOf('month')), [`${fieldName}_1`]: value });
+    fieldChangeCallback(fieldName, new Date(dayjs(value).startOf('month')));
+  };
+
+  /**
+   * Handles changes to date and time fields.
+   *
+   * @function handleDateNTimeChange
+   * @param {string} fieldName - The name of the field being updated.
+   * @param {Object} date - The date object representing the new date.
+   */
+  const handleDateNTimeChange = (fieldName, date) => {
+    if (date?.$d) {
+      errors[config.fieldName] = null;
+      setData({ ...data, [fieldName]: date?.$d });
+    }
+  };
+  /**
+   * Handles input changes for selectize components.
+   *
+   * @function handleSelectizeInputChange
+   * @param {string} configType - The type of selectize input.
+   * @param {string} value - The new input value.
+   */
+  const handleSelectizeInputChange = async (configType, value) => {
+    if (configType === 'selectizeForCombo') {
+      try {
+        const res = await fieldSelectizeCallback(config.fieldName, value);
+
+        setSelectizeForComboOptions(res);
+      } catch (error) {
+        console.error(error);
+        showToast({ message: `Errror in loading ${config.fieldName}`, type: 'error' });
+      }
+    }
+    if (configType === 'selectizeForMulti') {
+      try {
+        const res = fieldSelectizeCallback(config.fieldName, value);
+        setSelectizeForMultiOptions(res.data);
+      } catch (error) {
+        console.error(error);
+        showToast({ message: `Errror in loading ${config.fieldName}`, type: 'error' });
+      }
+    }
+  };
+
+  /**
+   * Handles changes to selectize options.
+   *
+   * @function handleSelectizeChange
+   * @param {string} configType - The type of selectize input.
+   * @param {*} value - The new value for the selectize input.
+   */
+  const handleSelectizeChange = (configType, value) => {
+    if (configType === 'selectizeForCombo') {
+      setSelectedSelectizeForCombo(value);
+    }
+    if (configType === 'selectizeForMulti') {
+      setSelectedSelectizeForMulti(value);
+    }
+
+    handleFieldChange(config.fieldName, value?.value);
+
+    fieldValueChanged(config.fieldName, value?.value);
+  };
+
+  const renderInputField = () => {
+    switch (config.fieldType) {
+      case 'number':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <CustomTextField
+              control={control}
+              id={config.fieldName}
+              name={config.fieldName}
+              type="number"
+              errors={errors}
+              onChange={(e) => {
+                handleFieldChange(config.fieldName, e.target.value);
+              }}
+              dataTestId={dataTestId}
+              label=""
+              size="small"
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: config.requiredMessage || `Enter the ${config.displayName}`,
+                },
+                minLength: {
+                  value: config.minLength,
+                  message: config.minLengthMessage || `Minimum length is ${config.minLength}`,
+                },
+                maxLength: {
+                  value: config.maxLength,
+                  message: config.maxLengthMessage || `Maximum length is ${config.maxLength}`,
+                },
+                validate: {
+                  decimalAllowed: (value) => {
+                    if (config.decimalAllowed) {
+                      return /^-?\d*(\.\d+)?$/.test(value) || 'Invalid decimal number';
+                    }
+                    // Disallow decimals
+                    if (value) {
+                      return /^\d+$/.test(value) || 'Decimals are not allowed';
+                    }
+                  },
+                  negativeAllowed: (value) => {
+                    if (config.negativeAllowed) {
+                      // Allow negative numbers
+                      return /^-?\d*\.?\d*$/.test(value) || 'Invalid number format';
+                    }
+                    // Disallow negative numbers
+                    return /^\d*\.?\d*$/.test(value) || 'Negative numbers are not allowed';
+                  },
+                },
+              }}
+            />
+          </FormControl>
+        );
+
+      case 'boolean':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName}
+              control={control}
+              defaultValue=""
+              rules={{
+                validate: (value) => {
+                  if (config.isMandatory && value == '') {
+                    return `Please select ${config.fieldName}`;
+                  }
+                  return true;
+                },
+              }}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  size="small"
+                  disabled={isDisabledFromConfiguration}
+                  value={field.value || ''}
+                  error={errors[config.fieldName]}
+                  onChange={(e) => {
+                    field.onChange(e.target.value);
+                    handleFieldChange(config.fieldName, e.target.value);
+                  }}
+                  data-testid={dataTestId}
+                >
+                  <MenuItem value="">Select</MenuItem>
+                  <MenuItem value={config.yesValue || 'true'}>true</MenuItem>
+                  <MenuItem value={config.noValue || 'false'}>false</MenuItem>
+                </Select>
+              )}
+            />
+            {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+          </FormControl>
+        );
+
+      case 'comboForReport':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName}
+              control={control}
+              defaultValue="" // Setting the default value
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: config.requiredMessage || `Please select ${config.displayName}`,
+                },
+              }}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  size="small"
+                  disabled={isDisabledFromConfiguration}
+                  className={config.inputClass}
+                  value={field.value || ''}
+                  onChange={(e) => {
+                    field.onChange(e.target.value);
+                    handleFieldChange(config.fieldName, e.target.value);
+                  }}
+                  data-testid={dataTestId}
+                >
+                  {/* <MenuItem value="">Select</MenuItem> */}
+                  {config?.optionsByQuery?.map((option) => (
+                    <MenuItem key={option.key} value={option.key}>
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )}
+            />
+            {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+          </FormControl>
+        );
+
+      case 'multiselectForReport':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName}
+              control={control}
+              defaultValue={[]} // Default as an empty array for multi-select
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: config.requiredMessage || `Please select ${config.displayName}`,
+                },
+              }}
+              render={({ field }) => (
+                <Select
+                  {...field} // Integrating with react-hook-form
+                  multiple // Enables multi-select
+                  size="small"
+                  disabled={isDisabledFromConfiguration}
+                  className={config.inputClass}
+                  value={field.value || []} // Ensure it's an array for multiple selections
+                  onChange={(e) => {
+                    field.onChange(e.target.value);
+                    handleFieldChange(config.fieldName, e.target.value);
+                  }}
+                  renderValue={(selected) => selected.join(', ')} // Customize how selected items are displayed
+                  data-testid={dataTestId}
+                >
+                  {/* <MenuItem >Select</MenuItem> */}
+                  {config?.optionsByQuery?.map((option) => (
+                    <MenuItem key={option.key} value={option.key}>
+                      {option.value}
+                    </MenuItem>
+                  ))}
+                </Select>
+              )}
+            />
+            {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+          </FormControl>
+        );
+
+      case 'date':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <CustomDatePicker
+              control={control}
+              name={config.fieldName}
+              format="DD/MM/YYYY"
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: `Enter the ${config.displayName}`,
+                },
+              }}
+              onChange={(newValue) => {
+                handleFieldChangeOnlyDate(config.fieldName, newValue);
+              }}
+              errors={errors}
+              maxDate={fixedMaxDate ? dayjs(fixedMaxDate) : maxDate ? dayjs(maxDate) : null}
+              minDate={fixedMinDate ? dayjs(fixedMinDate) : minDate ? dayjs(minDate) : null}
+              dataTestId={dataTestId}
+            />
+          </FormControl>
+        );
+
+      case 'dateFromTo':
+        return (
+          <FormGroup>
+            <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+              <label>
+                From {config.displayName}
+                {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+              </label>
+              <CustomDatePicker
+                control={control}
+                name={`from_${config.fieldName}`}
+                format="DD/MM/YYYY"
+                rules={{
+                  required: {
+                    value: config.isMandatory || maxDateSelected, // Required if mandatory or max date selected
+                    message: `Enter from ${config.displayName}`, // Custom required message
+                  },
+                }}
+                onChange={(newValue) => {
+                  // const formattedDate = newValue ? dayjs(newValue).format('YYYY-MM-DD') : '';
+                  minDateFieldValidation(config.fieldName, newValue); // pass dayjs object for validation
+                }}
+                errors={errors}
+                maxDate={
+                  fixedMaxDate
+                    ? (() => {
+                      const maxDateValue = maxDate || fixedMaxDate;
+                      return dayjs(maxDateValue);
+                    })()
+                    : maxDate
+                      ? dayjs(maxDate)
+                      : null
+                }
+                minDate={fixedMinDate ? dayjs(fixedMinDate) : null}
+                dataTestId={dataTestId}
+              />
+            </FormControl>
+
+            {/* To Date Field */}
+            <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+              <label>
+                To {config.displayName}
+                {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+              </label>
+              <CustomDatePicker
+                control={control}
+                name={`to_${config.fieldName}`}
+                format="DD/MM/YYYY"
+                rules={{
+                  required: {
+                    value: config.isMandatory || minDateSelected, // Required if mandatory or min date selected
+                    message: `Enter to ${config.displayName}`, // Custom required message
+                  },
+                }}
+                onChange={(newValue) => {
+                  maxDateFieldValidation(config.fieldName, newValue); // pass dayjs object for validation
+                }}
+                errors={errors}
+                maxDate={fixedMaxDate ? dayjs(fixedMaxDate) : null}
+                minDate={
+                  fixedMinDate
+                    ? (() => {
+                      const minDateValue = minDate || fixedMinDate;
+                      return dayjs(minDateValue);
+                    })()
+                    : minDate
+                      ? dayjs(minDate)
+                      : null
+                }
+                dataTestId={dataTestId}
+              />
+            </FormControl>
+          </FormGroup>
+        );
+      case 'onlyMonth':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <CustomDatePicker
+              control={control}
+              name={config.fieldName}
+              format="MM/YYYY"
+              views={['month', 'year']}
+              rules={{
+                required: {
+                  value: config.isMandatory, // Make required based on the config or maxDateSelected
+                  message: `Enter from ${config.displayName}`, // Custom required message
+                },
+              }}
+              onChange={(newValue) => {
+                handleFieldChangeOnlyMonth(config.fieldName, newValue); // pass dayjs object for validation
+              }}
+              errors={errors}
+              maxDate={fixedMaxMonth ? dayjs(fixedMaxMonth) : null}
+              minDate={fixedMinMonth ? dayjs(fixedMinMonth) : null}
+              dataTestId={dataTestId}
+            />
+          </FormControl>
+        );
+      case 'onlyMonthFromTo':
+        return (
+          <FormGroup>
+            <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+              <label>
+                {config.displayName} From
+                {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+              </label>
+              <CustomDatePicker
+                control={control}
+                name={`from_${config.fieldName}`}
+                format="YYYY/MM"
+                openTo="month"
+                views={['year', 'month']}
+                rules={{
+                  required: {
+                    value: config.isMandatory, // Make required based on the config or maxDateSelected
+                    message: `Enter from ${config.displayName}`, // Custom required message
+                  },
+                  validate: (value) => {
+                    if (config.isMandatory && !value) {
+                      return `Please select a month for ${config.displayName} (From)`;
+                    }
+                  },
+                }}
+                onChange={(newValue) => {
+                  minMonthFieldValidation(config.fieldName, newValue); // pass dayjs object for validation
+                }}
+                errors={errors}
+                maxDate={
+                  fixedMaxMonth
+                    ? (() => {
+                      const maxMonthValue = maxMonth ? dayjs(maxMonth) : dayjs(fixedMaxMonth);
+                      return maxMonthValue;
+                    })()
+                    : maxMonth
+                      ? dayjs(maxMonth)
+                      : null
+                }
+                minDate={fixedMinMonth ? dayjs(fixedMinMonth) : null}
+                dataTestId={dataTestId}
+              />
+            </FormControl>
+
+            <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+              <label>
+                {config.displayName} To
+                {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+              </label>
+              <CustomDatePicker
+                control={control}
+                name={`to_${config.fieldName}`}
+                format="YYYY/MM"
+                openTo="month"
+                views={['year', 'month']}
+                rules={{
+                  required: {
+                    value: config.isMandatory, // Make required based on the config or minDateSelected
+                    message: `Enter to ${config.displayName}`, // Custom required message
+                  },
+                }}
+                onChange={(newValue) => {
+                  maxMonthFieldValidation(config.fieldName, newValue); // pass dayjs object for validation
+                }}
+                errors={errors}
+                maxDate={fixedMaxMonth ? dayjs(fixedMaxMonth) : null}
+                minDate={
+                  fixedMinMonth
+                    ? (() => {
+                      const formattedMinMonth = minMonth ? dayjs(minMonth) : dayjs(fixedMinMonth);
+                      return formattedMinMonth;
+                    })()
+                    : minMonth
+                      ? dayjs(minMonth)
+                      : null
+                }
+                dataTestId={dataTestId}
+              />
+            </FormControl>
+          </FormGroup>
+        );
+
+      case 'email':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <CustomTextField
+              control={control}
+              id={config.fieldName}
+              name={config.fieldName}
+              type="email" // Set type to 'email' for validation
+              errors={errors}
+              label=""
+              onChange={(e) => {
+                handleFieldChange(config.fieldName, e.target.value);
+              }}
+              size="small"
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: `Enter the ${config.displayName}`, // Custom required message
+                },
+                pattern: {
+                  value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, // Regular expression to validate email format
+                  message: 'Please enter a valid email address',
+                },
+              }}
+              dataTestId={dataTestId}
+            />
+          </FormControl>
+        );
+
+      case 'selectizeForCombo':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName} // Adjust name to match your form field
+              control={control}
+              defaultValue="" // Default value
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: `Select the ${config.displayName}`,
+                },
+              }}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={selectizeForComboOptions || []}
+                  size="small"
+                  value={selectedSelectizeForCombo || field.value}
+                  getOptionLabel={(option) => option.value || ''}
+                  isOptionEqualToValue={(option, value) => option.key === value.key}
+                  renderInput={(params) => <TextField {...params} error={!!errors[config.fieldName]} />}
+                  onInputChange={(_, val) => handleSelectizeInputChange('selectizeForCombo', val)}
+                  onChange={(e, val) => {
+                    field.onChange(val);
+                    handleSelectizeChange('selectizeForCombo', val);
+                  }}
+                  data-testid={dataTestId}
+                />
+              )}
+            />
+            {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+          </FormControl>
+        );
+      case 'selectizeForMulti':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName} // Adjust name to match your form field
+              control={control}
+              defaultValue="" // Default value
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: `Select the ${config.displayName}`,
+                },
+              }}
+              render={({ field }) => (
+                <Autocomplete
+                  {...field}
+                  options={selectizeForMultiOptions || []}
+                  size="small"
+                  value={selectedSelectizeForMulti || field.value}
+                  getOptionLabel={(option) => option.value || ''}
+                  isOptionEqualToValue={(option, value) => option.key === value.key}
+                  renderInput={(params) => <TextField {...params} error={!!errors[config.fieldName]} />}
+                  onInputChange={(_, val) => handleSelectizeInputChange('selectizeForMulti', val)}
+                  onChange={(e, val) => {
+                    field.onChange(val);
+                    handleSelectizeChange('selectizeForMulti', val);
+                  }}
+                  data-testid={dataTestId}
+                />
+              )}
+            />
+            {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+          </FormControl>
+        );
+
+      case 'location':
+        return (
+          <Suspense>
+            <LocationSelectionComponent
+              selectedLocation={config?.selectedLocation || selectedLocation}
+              setSelectedLocation={setSelectedLocation}
+              locations={locations}
+              setLocations={setLocations}
+              templateType="inline"
+              fetchAccordingToUserAoi={config.fetchAccordingToUserAoi}
+              demographicFilterRequired={config.demographicFilterRequired}
+              requiredUptoLevel={config.requiredUptoLevel || 0}
+              fetchUptoLevel={config.fetchUptoLevel}
+              childForm={true}
+              uiLocationId={uiLocationId}
+              changedUsingUi={changedUsingUi}
+              setFetchUptoLevelLimit={setFetchUptoLevelLimit}
+              setUiLocations={setUiLocations}
+              setUiSelectedLocation={setUiSelectedLocation}
+              allDistrictReq={allDistrictReq}
+              setAllDistrictReq={setAllDistrictReq}
+              allBlockReq={allBlockReq}
+              setAllBlockReq={setAllBlockReq}
+              allPhcReq={allPhcReq}
+              setAllPhcReq={setAllPhcReq}
+              clearPreviousLocation={clearPreviousLocation}
+              triggerFirstRun={triggerFirstRun}
+              locationBreadCrumbSelected={locationPartSelected}
+              multipleOnLevel={config.multipleOnLevel }
+            />
+          </Suspense>
+        );
+
+      case 'dateNTime':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+
+            <Controller
+              name={config.fieldName}
+              control={control}
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: config.requiredMessage || `Enter the ${config.displayName}`,
+                },
+              }}
+              render={({ field, fieldState }) => (
+                <LocalizationProvider dateAdapter={AdapterDayjs}>
+                  <DateTimePicker
+                    sx={{ width: '100%' }}
+                    format="DD/MM/YYYY hh:mm A"
+                    maxDate={fixedMaxDate ? dayjs(fixedMaxDate) : null}
+                    minDate={fixedMinDate ? dayjs(fixedMinDate) : null}
+                    slotProps={{
+                      textField: {
+                        size: 'small',
+                        error: !!fieldState.error,
+                        inputProps: {
+                          'data-testid': `${dataTestId}`,
+                        },
+                      },
+                    }}
+                    {...field}
+                    onChange={(date) => {
+                      field.onChange(date);
+                      handleDateNTimeChange(config.fieldName, date); // Keep the value as a Dayjs object
+                    }}
+                    value={field.value ? dayjs(field.value) : null} // Ensure value is a Dayjs object or null
+                  // data-testid={dataTestId}
+                  />
+                </LocalizationProvider>
+              )}
+            />
+            {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+          </FormControl>
+        );
+      case 'dateRangePicker':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName}
+              control={control}
+              defaultValue={{
+                startDate: '',
+                endDate: '',
+              }}
+              rules={{
+                validate: (value) => {
+                  const { startDate, endDate } = value;
+                  const errors = {};
+
+                  if (config.isMandatory && (!startDate || !endDate)) {
+                    return `Please select both start and end dates for ${config.displayName}`;
+                  }
+
+                  return Object.keys(errors).length ? errors : true;
+                },
+              }}
+              render={({ field, fieldState }) => (
+                <Grid container spacing={1}>
+                  {/* Start Date Input */}
+                  <Grid item xs={12}>
+                    <TextField
+                      type="date"
+                      fullWidth
+                      size="small"
+                      disabled={isDisabledFromConfiguration}
+                      value={field.value.startDate || ''}
+                      onChange={(e) => {
+                        field.onChange({ ...field.value, startDate: e.target.value });
+                        setData({ ...data, [config.fieldName]: { ...field.value, startDate: e.target.value } });
+                      }}
+                      inputProps={{
+                        min: fixedMinDate ? dayjs(fixedMinDate).format('YYYY-MM-DD') : undefined,
+                        max:
+                          field.value.endDate || (fixedMaxDate ? dayjs(fixedMaxDate).format('YYYY-MM-DD') : undefined),
+                      }}
+                      data-testid={`${dataTestId}-from`}
+                      error={!!fieldState.error}
+                      slotProps={{
+                        inputLabel: { shrink: true },
+                      }}
+                    />
+                    {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+                  </Grid>
+                  {/* End Date Input */}
+                  <Grid item xs={12}>
+                    <TextField
+                      type="date"
+                      fullWidth
+                      size="small"
+                      disabled={isDisabledFromConfiguration}
+                      value={field.value.endDate || ''}
+                      onChange={(e) => {
+                        field.onChange({ ...field.value, endDate: e.target.value });
+                        setData({ ...data, [config.fieldName]: { ...field.value, endDate: e.target.value } });
+                      }}
+                      inputProps={{
+                        min:
+                          field.value.startDate ||
+                          (fixedMinDate ? dayjs(fixedMinDate).format('YYYY-MM-DD') : undefined),
+                        max: fixedMaxDate ? dayjs(fixedMaxDate).format('YYYY-MM-DD') : undefined,
+                      }}
+                      data-testid={`${dataTestId}-to`}
+                      error={!!fieldState.error}
+                      slotProps={{ inputLabel: { shrink: true } }}
+                    />
+                    {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+                  </Grid>
+                </Grid>
+              )}
+            />
+          </FormControl>
+        );
+      case 'singleCheckbox':
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <Controller
+              name={config.fieldName}
+              control={control}
+              defaultValue={false} // Default value for checkbox is false
+              rules={{
+                required: config.isMandatory ? `${config.displayName} is required` : false,
+              }}
+              render={({ field }) => (
+                <div className="control control-checkbox">
+                  <input
+                    type="checkbox"
+                    checked={field.value}
+                    onChange={(e) => {
+                      field.onChange(e.target.checked);
+                      handleFieldChange(config.fieldName, e.target.checked); // Handle the change event
+                    }}
+                    data-testid={dataTestId}
+                  />
+                  <div className="control_indicator"></div>
+                  {errors[config.fieldName] && <p className="error-help-text">{errors[config.fieldName].message}</p>}
+                </div>
+              )}
+            />
+          </FormControl>
+        );
+      default:
+        return (
+          <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+            <label>
+              {config.displayName} {config.isMandatory && <span style={{ color: 'red' }}>*</span>}
+            </label>
+            <CustomTextField
+              control={control}
+              id={config.fieldName}
+              name={config.fieldName}
+              errors={errors}
+              label=""
+              size="small"
+              onChange={(e) => {
+                handleFieldChange(config.fieldName, e.target.value);
+              }}
+              rules={{
+                required: {
+                  value: config.isMandatory,
+                  message: config.requiredMessage || 'This field is required',
+                },
+                minLength: config.minLength
+                  ? {
+                    value: config.minLength,
+                    message: config.minLengthMessage || `Minimum length is ${config.minLength}`,
+                  }
+                  : undefined,
+                maxLength: config.maxLength
+                  ? {
+                    value: config.maxLength,
+                    message: config.maxLengthMessage || `Maximum length is ${config.maxLength}`,
+                  }
+                  : undefined,
+              }}
+              dataTestId={dataTestId}
+            />
+          </FormControl>
+        );
+    }
+  };
+
+  return renderInputField();
+};