@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/common/directives/SearchTemplate.jsx

@@ -0,0 +1,784 @@
+import React, { lazy, Suspense, useEffect, useState } from 'react';
+import { Controller, FormProvider, useForm } from 'react-hook-form';
+import SEARCH_TERM from '@/common/constants/search.constant';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import Grid from '@mui/material/Grid2';
+import '@/common/directives/SearchTemplate.scss';
+import PropTypes from 'prop-types';
+import {
+  Autocomplete,
+  Button,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+const LocationDirective = lazy(() => import('@/views/feature-components/LocationDirective/LocationDirective'));
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import { execute } from '@/common/services/QueryBuilder';
+import { showToast } from '@/common/toaster/toaster';
+import { Box } from '@mui/system';
+import dayjs from 'dayjs';
+
+function SearchTemplate({
+  terms = [],
+  memberType = [],
+  search = {},
+  setSearch,
+  searchData,
+  handleOverlayState,
+  setSelectedLocationId,
+  selectedLocation,
+  setSelectedLocation,
+  selectedLocationIdRef,
+  selectedLocationRef,
+}) {
+  let minPhoneNoLength = GeneralUtil.isImomcare ? 9 : 10;
+  let baseTerms = [
+    { name: SEARCH_TERM.memberId, value: 'member id', order: 1, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.familyId, value: 'family id', order: 2, config: {}, searchFor: memberType },
+    {
+      name: SEARCH_TERM.mobileNumber,
+      value: 'mobile number',
+      order: 3,
+      config: { minlength: minPhoneNoLength, maxlength: 10 },
+      searchFor: memberType,
+    },
+    { name: SEARCH_TERM.location, value: 'location', order: 4, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.villageName, value: 'village name', order: 5, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.name, value: 'name', order: 6, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.lmp, value: 'lmp', order: 7, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.edd, value: 'edd', order: 8, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.abhaNumber, value: 'abha number', order: 9, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.abhaAddress, value: 'abha address', order: 10, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.maaVatsalya, value: 'maaVatsalya', order: 11, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.dob, value: 'dob', order: 12, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.pmjay, value: 'pmjay', order: 13, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.ration, value: 'ration', order: 14, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.username, value: 'username', order: 15, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.contactNumber, value: 'contact number', order: 15, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.awcId, value: 'AWC ID', order: 17, config: {}, searchFor: memberType },
+    { name: SEARCH_TERM.icdsCode, value: 'ICDS Code', order: 18, config: {}, searchFor: memberType },
+  ];
+  const [filteredLabels, setFilteredLabels] = useState([]);
+  const [selectedIndex, setSelectedIndex] = useState(null);
+  const [villageOptions, setVillageOptions] = useState([]);
+  const methods = useForm({
+    defaultValues: { searchBy: '' },
+    mode: 'onChange',
+  });
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    resetField,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const searchBy = watch('searchBy');
+  useEffect(() => {
+    if (search && typeof search === 'object' && filteredLabels) {
+      const index = filteredLabels.map((label) => label.value).indexOf(search['searchBy']);
+      setSelectedIndex(index);
+      Object.entries(search).forEach(([key, value]) => {
+        setValue(key, value || ''); // Set value or fallback to an empty string
+      });
+    }
+  }, [filteredLabels]);
+
+  useEffect(() => {
+    reset();
+  }, []);
+
+  const clearFilters = () => {
+    reset();
+    setSearch({});
+  };
+
+  const onSubmit = async (values) => {
+    try {
+      setSearch(values);
+      searchData(search);
+      handleOverlayState();
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in search', type: 'error' });
+    }
+  };
+
+  const validateAbhaNumber = (healthIdNumber) => {
+    if (healthIdNumber != undefined) {
+      let newValue = healthIdNumber.split('-').join('').slice(2);
+      let finalValue = healthIdNumber.slice(0, 2);
+
+      if (newValue.length > 0) {
+        newValue = newValue.match(/.{1,4}/g).join('-');
+        finalValue = finalValue + '-' + newValue;
+        if (finalValue.length >= 17) {
+          setValue('searchString', healthIdNumber.slice(0, 17));
+          return true;
+        } else {
+          setValue('searchString', finalValue);
+          return false;
+        }
+      }
+    }
+  };
+
+  const filterTerms = () => {
+    let newFilteredLabels = [];
+    baseTerms.forEach((baseTerm) => {
+      terms.forEach((term) => {
+        if (baseTerm.name === term.name) {
+          if (term.order != undefined) {
+            baseTerm.order = term.order;
+          }
+          if (term.config != undefined) {
+            baseTerm.config = term.config;
+          }
+          if (term.searchFor != undefined) {
+            baseTerm.searchFor = term.searchFor;
+          }
+          newFilteredLabels.push(baseTerm);
+        }
+      });
+    });
+    return newFilteredLabels;
+  };
+
+  useEffect(() => {
+    let newFilteredLabels = [];
+    if (terms.length > 0) {
+      newFilteredLabels = filterTerms();
+    }
+
+    if (terms.length === 0 || newFilteredLabels.length === 0) {
+      newFilteredLabels = baseTerms;
+    }
+    if (newFilteredLabels.length > 0) {
+      newFilteredLabels = newFilteredLabels.sort((a, b) => {
+        return a.order - b.order;
+      });
+    }
+    setFilteredLabels(newFilteredLabels);
+  }, [terms]);
+
+  const shouldHideLabel = (labelName) => {
+    return (labelName === 'Abha Number' || labelName === 'Abha Address') && GeneralUtil.isImomcare;
+  };
+  const getVillageOptions = async (value) => {
+    try {
+      let queryDto = {
+        code: 'location_search_for_web',
+        parameters: {
+          locationString: value,
+        },
+      };
+      const res = await execute(queryDto);
+      setVillageOptions(res?.data?.result);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleFieldChange = (field, value) => {
+    if (field) {
+      if (field === 'searchBy') {
+        setSearch({ [field]: value });
+        resetField('searchString');
+        resetField('familyMobileNumber');
+        setSelectedLocation({});
+        setSelectedLocationId(null);
+        selectedLocationIdRef.current = null;
+        selectedLocationRef.current = {};
+      } else {
+        setSearch({ ...search, [field]: value });
+      }
+    }
+  };
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Grid container>
+          {memberType?.length > 0 && (
+            <Grid size={{ xs: 12 }}>
+              <div>
+                <FormControl>
+                  <FormLabel>Search For:</FormLabel>
+                  <Controller
+                    name="searchFor"
+                    control={control}
+                    render={({ field }) => (
+                      <RadioGroup {...field} row>
+                        {memberType.map((type, index) => (
+                          <div key={index + 1} style={{ paddingLeft: '10px' }}>
+                            <FormControlLabel
+                              key={type}
+                              value={type}
+                              control={<Radio size="" />}
+                              label={type}
+                              sx={{ display: 'inline-flex', alignItems: 'center' }}
+                            />
+                          </div>
+                        ))}
+                      </RadioGroup>
+                    )}
+                  />
+                </FormControl>
+              </div>
+            </Grid>
+          )}
+
+          {((memberType.length > 0 && memberType.includes(search.searchFor)) || memberType.length === 0) &&
+            filteredLabels.length > 0 && (
+              <Grid size={{ xs: 12 }}>
+                <div>
+                  <FormControl>
+                    <div>Search For:</div>
+                    <Controller
+                      name="searchBy"
+                      control={control}
+                      render={({ field }) => (
+                        <RadioGroup {...field}>
+                          {filteredLabels.map((_, index) => {
+                            if (index % 3 === 0) {
+                              const labelsToDisplay = filteredLabels.slice(index, index + 3);
+                              return (
+                                <div key={index + 1} style={{ paddingLeft: '10px' }}>
+                                  {labelsToDisplay.map((innerLabel, innerIndex) => {
+                                    if (shouldHideLabel(innerLabel.name)) return null;
+                                    return (
+                                      <FormControlLabel
+                                        key={innerIndex + 1}
+                                        value={innerLabel.value}
+                                        control={<Radio size="" />}
+                                        label={innerLabel.name}
+                                        onChange={() => {
+                                          reset();
+                                          const index = filteredLabels
+                                            .map((label) => label.value)
+                                            .indexOf(innerLabel.value);
+                                          setSelectedIndex(index);
+                                          setValue('searchBy', innerLabel?.value);
+                                          handleFieldChange('searchBy', innerLabel?.value);
+                                        }}
+                                        sx={{ display: 'inline-flex', alignItems: 'center' }}
+                                      />
+                                    );
+                                  })}
+                                </div>
+                              );
+                            }
+                            return null;
+                          })}
+                        </RadioGroup>
+                      )}
+                    />
+                  </FormControl>
+                </div>
+              </Grid>
+            )}
+
+          <Grid size={{ xs: 12 }} className="p-[10px]">
+            <Suspense>
+              {searchBy === 'location' && (
+                <div>
+                  <LocationDirective
+                    childForm={true}
+                    templateType="twoPart"
+                    selectedLocation={selectedLocation}
+                    key={filteredLabels[selectedIndex]?.config?.fetchUptoLevel}
+                    selectedLocationRef={selectedLocationRef}
+                    setSelectedLocation={setSelectedLocation}
+                    fetchAccordingToUserAoi={filteredLabels[selectedIndex]?.config?.isFetchAoi || false}
+                    requiredUptoLevel={filteredLabels[selectedIndex]?.config?.requiredUptoLevel}
+                    fetchUptoLevel={filteredLabels[selectedIndex]?.config?.fetchUptoLevel}
+                    selectedIdRef={selectedLocationIdRef}
+                    setSelectedId={setSelectedLocationId}
+                  />
+                </div>
+              )}
+            </Suspense>
+            {searchBy === 'name' && (
+              <div>
+                <Suspense>
+                  <LocationDirective
+                    childForm={true}
+                    templateType="twoPart"
+                    selectedLocation={selectedLocation}
+                    key={filteredLabels[selectedIndex]?.config?.fetchUptoLevel}
+                    selectedLocationRef={selectedLocationRef}
+                    setSelectedLocation={setSelectedLocation}
+                    fetchAccordingToUserAoi={filteredLabels[selectedIndex]?.config?.isFetchAoi || false}
+                    requiredUptoLevel={filteredLabels[selectedIndex]?.config?.requiredUptoLevel}
+                    fetchUptoLevel={filteredLabels[selectedIndex]?.config?.fetchUptoLevel}
+                    selectedIdRef={selectedLocationIdRef}
+                    setSelectedId={setSelectedLocationId}
+                  />
+                </Suspense>
+                <div style={{ width: '48%' }}>
+                  <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                    <CustomTextField
+                      control={control}
+                      id="searchString"
+                      name="searchString"
+                      errors={errors}
+                      onChange={(e) => {
+                        handleFieldChange('searchString', e.target.value);
+                      }}
+                      label=""
+                      size="small"
+                      rules={{
+                        required: {
+                          value: true,
+                          message: 'Please Enter the name',
+                        },
+                        minLength: {
+                          value: filteredLabels[selectedIndex]?.config?.minlength,
+                          message: `Name should be at least ${filteredLabels[selectedIndex]?.config?.minlength} characters`,
+                        },
+                        maxLength: {
+                          value: filteredLabels[selectedIndex]?.config?.maxlength,
+                          message: `Name should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} characters`,
+                        },
+                        validate: {},
+                      }}
+                    />
+                  </FormControl>
+                </div>
+              </div>
+            )}
+            {searchBy === 'village name' && (
+              <div>
+                <label htmlFor="searchVillage">Search Village</label>
+                <FormControl fullWidth sx={{ marginBottom: 2 }}>
+                  <Controller
+                    name="searchVillage"
+                    control={control}
+                    rules={{ required: 'Please select an option' }}
+                    render={({ field }) => (
+                      <Autocomplete
+                        {...field}
+                        options={villageOptions}
+                        getOptionLabel={(option) => option?.hierarchy || ''}
+                        isOptionEqualToValue={(option, value) => option?.hierarchy === value?.hierarchy}
+                        onChange={(_, newValue) => {
+                          field.onChange(newValue);
+                          setSelectedLocationId(newValue?.id);
+                        }}
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            size="small"
+                            error={Boolean(errors.searchOption)}
+                            helperText={errors.searchOption?.message}
+                            onChange={(e) => {
+                              getVillageOptions(e?.target?.value);
+                            }}
+                          />
+                        )}
+                      />
+                    )}
+                  />
+                </FormControl>
+              </div>
+            )}
+            {searchBy === 'mobile number' && !GeneralUtil.isImomcare && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    type="number"
+                    placeholder="Enter contact number"
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the mobile number',
+                      },
+                      minLength: {
+                        value: filteredLabels[selectedIndex]?.config?.minlength,
+                        message: `Mobile numbershould be at least ${filteredLabels[selectedIndex]?.config?.minlength} digits`,
+                      },
+                      maxLength: {
+                        value: filteredLabels[selectedIndex]?.config?.maxlength,
+                        message: `Mobile number should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} digits`,
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+                <Controller
+                  name="familyMobileNumber"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControlLabel
+                      control={
+                        <Checkbox
+                          {...field}
+                          checked={Boolean(field.value)} // Ensure `checked` is a boolean
+                          color="success"
+                          onChange={(e) => {
+                            const newValue = e.target.checked;
+                            handleFieldChange('familyMobileNumber', newValue); // Pass the updated value
+                            field.onChange(newValue); // Notify react-hook-form about the change
+                          }}
+                        />
+                      }
+                      label="Search mobile number in family"
+                    />
+                  )}
+                />
+              </div>
+            )}
+            {searchBy === 'contact number' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    type="number"
+                    placeholder="Enter contact number"
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the Contact number',
+                      },
+                      minLength: {
+                        value: filteredLabels[selectedIndex]?.config?.minlength,
+                        message: `Contact numbershould be at least ${filteredLabels[selectedIndex]?.config?.minlength} digits`,
+                      },
+                      maxLength: {
+                        value: filteredLabels[selectedIndex]?.config?.maxlength,
+                        message: `Contact number should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} digits`,
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+
+            {searchBy === 'member id' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    placeholder={`Enter ${searchBy}`}
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the Member id',
+                      },
+                      minLength: {
+                        value: filteredLabels[selectedIndex]?.config?.minlength,
+                        message: `Member id should be at least ${filteredLabels[selectedIndex]?.config?.minlength} characters`,
+                      },
+                      maxLength: {
+                        value: filteredLabels[selectedIndex]?.config?.maxlength,
+                        message: `Member id should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} characters`,
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+
+            {searchBy === 'username' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    placeholder={`Enter ${searchBy}`}
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the username',
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+
+            {searchBy === 'family id' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    placeholder={`Enter ${searchBy}`}
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the family id',
+                      },
+                      minLength: {
+                        value: filteredLabels[selectedIndex]?.config?.minlength,
+                        message: `Family id should be at least ${filteredLabels[selectedIndex]?.config?.minlength} characters`,
+                      },
+                      maxLength: {
+                        value: filteredLabels[selectedIndex]?.config?.maxlength,
+                        message: `Family id should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} characters`,
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+
+            {searchBy === 'maaVatsalya' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    placeholder={`Enter Maa Vatsalya Card no.`}
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the Maa Vatsalya no.',
+                      },
+                      minLength: {
+                        value: filteredLabels[selectedIndex]?.config?.minlength,
+                        message: `Maa Vatsalya no. should be at least ${filteredLabels[selectedIndex]?.config?.minlength} characters`,
+                      },
+                      maxLength: {
+                        value: filteredLabels[selectedIndex]?.config?.maxlength,
+                        message: `Maa Vatsalya no. should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} characters`,
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+
+            {searchBy === 'abha number' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    placeholder={`Enter ${searchBy}`}
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the abha number',
+                      },
+                      validate: {
+                        validateAbhaNumberTest: (value) => {
+                          if (!validateAbhaNumber(value)) {
+                            return 'Please enter a valid abha number';
+                          }
+                        },
+                      },
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+            {searchBy === 'abha address' && (
+              <div>
+                <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                  <CustomTextField
+                    control={control}
+                    id="searchString"
+                    placeholder={`Enter Abha Address`}
+                    name="searchString"
+                    errors={errors}
+                    onChange={(e) => {
+                      handleFieldChange('searchString', e.target.value);
+                    }}
+                    label=""
+                    size="small"
+                    rules={{
+                      required: {
+                        value: true,
+                        message: 'Please Enter the Abha Address',
+                      },
+                      minLength: {
+                        value: filteredLabels[selectedIndex]?.config?.minlength,
+                        message: `Abha Address should be at least ${filteredLabels[selectedIndex]?.config?.minlength} characters`,
+                      },
+                      maxLength: {
+                        value: filteredLabels[selectedIndex]?.config?.maxlength,
+                        message: `Abha Address should should not be more than ${filteredLabels[selectedIndex]?.config?.maxlength} characters`,
+                      },
+                      validate: {},
+                    }}
+                  />
+                </FormControl>
+              </div>
+            )}
+
+            {searchBy === 'dob' && (
+              <div>
+                <Suspense>
+                  <LocationDirective
+                    childForm={true}
+                    templateType="twoPart"
+                    selectedLocation={selectedLocation}
+                    key={filteredLabels[selectedIndex]?.config?.fetchUptoLevel}
+                    selectedLocationRef={selectedLocationRef}
+                    setSelectedLocation={setSelectedLocation}
+                    fetchAccordingToUserAoi={filteredLabels[selectedIndex]?.config?.isFetchAoi || false}
+                    requiredUptoLevel={filteredLabels[selectedIndex]?.config?.requiredUptoLevel}
+                    fetchUptoLevel={filteredLabels[selectedIndex]?.config?.fetchUptoLevel}
+                    selectedIdRef={selectedLocationIdRef}
+                    setSelectedId={setSelectedLocationId}
+                  />
+                </Suspense>
+                <div style={{ width: '48%' }}>
+                  <FormControl fullWidth sx={{ marginBottom: '5px' }}>
+                    <Controller
+                      name="searchString"
+                      control={control}
+                      defaultValue={''}
+                      rules={{
+                        required: {
+                          value: true,
+                          message: `Please select dob`,
+                        },
+                      }}
+                      render={({ field }) => (
+                        <TextField
+                          {...field}
+                          type="date"
+                          slotProps={{
+                            inputLabel: {
+                              shrink: true, // Keeps the label visible even when the input is filled
+                            },
+                            input: {
+                              max: filteredLabels[selectedIndex]?.config?.maxDate
+                                ? dayjs(filteredLabels[selectedIndex]?.config?.maxDate).format('YYYY-MM-DD')
+                                : null,
+                              min: filteredLabels[selectedIndex]?.config?.minDate
+                                ? dayjs(filteredLabels[selectedIndex]?.config?.minDate).format('YYYY-MM-DD')
+                                : null,
+                            },
+                          }}
+                          value={field.value || ''}
+                          onChange={(e) => {
+                            const { value } = e.target;
+                            handleFieldChange('searchString', value);
+                            field.onChange(value);
+                          }}
+                          size="small"
+                          error={!!errors['searchString']}
+                        />
+                      )}
+                    />
+                    {errors['searchString'] && (
+                      <p className="error-help-text-searchtemplate">{errors['searchString'].message}</p>
+                    )}
+                  </FormControl>
+                </div>
+              </div>
+            )}
+          </Grid>
+        </Grid>
+        <hr />
+        <Box p={1}>
+          <Grid container alignItems="center">
+            {/* Left Button */}
+            <Grid size={{ xs: 6 }}>
+              <Button variant="contained" color="secondary" size="small" onClick={clearFilters}>
+                Remove Filter
+              </Button>
+            </Grid>
+
+            {/* Right Buttons */}
+            <Grid size={{ xs: 6 }} display="flex" justifyContent="flex-end" gap={1}>
+              <Button
+                variant="contained"
+                sx={{ backgroundColor: 'gray', color: 'white' }}
+                size="small"
+                onClick={handleOverlayState}
+              >
+                Close
+              </Button>
+              <Button variant="contained" color="primary" type="submit" size="small" disabled={!searchBy}>
+                Search
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </form>
+    </FormProvider>
+  );
+}
+
+export default SearchTemplate;
+SearchTemplate.propTypes = {
+  terms: PropTypes.any,
+  memberType: PropTypes.any,
+  search: PropTypes.any,
+  setSearch: PropTypes.any,
+  searchData: PropTypes.any,
+  setSelectedLocationId: PropTypes.any,
+  selectedLocation: PropTypes.any,
+  setSelectedLocation: PropTypes.any,
+  selectedLocationIdRef: PropTypes.any,
+  selectedLocationRef: PropTypes.any,
+  handleOverlayState: PropTypes.any,
+};