@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/feature-components/LocationDirective/LocationDirectiveV2.jsx

@@ -0,0 +1,909 @@
+import React, { useEffect } from 'react';
+import { Box, FormControl, InputLabel, Select, MenuItem, Typography, CircularProgress } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { getParent, retrieveNextLevel } from '@/common/services/LocationService';
+import { retriveLocationType } from '@/common/services/LocationType';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { showToast } from '@/common/toaster/toaster';
+import PropTypes from 'prop-types';
+import { useState, useRef } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import cloneDeep from 'lodash/cloneDeep';
+import { useSelector } from 'react-redux';
+import CustomDropdown from '@/views/custom-components/CustomDropdown';
+
+export const LocationSelectionComponent = ({
+  locations,
+  setLocations,
+  selectedLocation = {},
+  setSelectedLocation,
+  templateType = 'inline',
+  fetchAccordingToUserAoi = false,
+  demographicFilterRequired = false,
+  requiredUptoLevel = 1,
+  fetchUptoLevel,
+  multipleOnLevel,
+  onChange,
+  setSelectedDemographic = () => { },
+  allDistrictReq,
+  setAllDistrictReq = () => { },
+  setPassedLocationLevel,
+  allBlockReq,
+  setAllBlockReq = () => { },
+  allPhcReq,
+  setAllPhcReq = () => { },
+  reloadFunction = () => { },
+  childForm = false,
+  uiLocationId = null,
+  changedUsingUi = null,
+  setFetchUptoLevelLimit = () => { },
+  setUiSelectedLocation = () => { },
+  setUiLocations = () => { },
+  clearPreviousLocation = false,
+  triggerFirstRun = 0,
+  locationBreadCrumbSelected = null,
+}) => {
+  const { translate } = useTranslateProvider();
+  const [noLocationInHierarchyMessage, setNoLocationInHierarchyMessage] = useState(null);
+  const [onFirstRunTemp, setOnFirstRunTemp] = useState(false);
+  const [minLevel, setMinLevel] = useState(1);
+  const [requiredLocationLevel, setRequiredLocationLevel] = useState(requiredUptoLevel);
+  const [demoGraphicFilterNeeded, setDemoGraphicFilterNeeded] = useState(demographicFilterRequired);
+  const [loading, setLoading] = useState(false);
+  const { user: loggedInUser } = useSelector((state) => state.Authenticate);
+  const fetchingLevels = useRef(new Set());
+
+  const allRegion = { id: -1, locType: 'Region', name: 'All District', type: 'R' };
+  const allBlocks = { id: -2, locType: 'District', name: 'All Block', type: 'D' };
+  const allPHC = { id: -3, locType: 'Block', name: 'All PHC', type: 'B' };
+  const [locationTypes, setLocationTypes] = useState([]);
+
+  const getSelectedOptionIds = (optionSelected) => {
+    if (Array.isArray(optionSelected)) {
+      return optionSelected
+        .map((option) => option?.id)
+        .filter((optionId) => optionId !== null && optionId !== undefined);
+    }
+
+    return optionSelected?.id !== null && optionSelected?.id !== undefined
+      ? [optionSelected.id]
+      : [];
+  };
+
+  const hasSelectedOption = (optionSelected) =>
+    getSelectedOptionIds(optionSelected).length > 0;
+
+  const getFirstSelectedOption = (optionSelected) => {
+    return Array.isArray(optionSelected) ? optionSelected[0] : optionSelected;
+  };
+
+  const getFormValueForLevel = (optionSelected, isMultiple) => {
+    const selectedIds = getSelectedOptionIds(optionSelected);
+
+    return isMultiple ? selectedIds : selectedIds[0] || '';
+  };
+
+  // Initialize onFirstRun when locations change
+  useEffect(() => {
+    if (onFirstRunTemp && locations.length > 0) {
+      locations.forEach((location) => {
+        if (location.locationDetails.length === 1) {
+          onFirstRun(location);
+        }
+      });
+    }
+  }, [locations, onFirstRunTemp]);
+
+  const getLastSelectedLevel = (selection = {}) => {
+    return Object.keys(selection)
+      .filter((key) => key.startsWith('level'))
+      .map((key) => Number(key.replace('level', '')))
+      .filter((level) => {
+        const value = selection[`level${level}`];
+        return Array.isArray(value) ? value.length > 0 : value != null;
+      })
+      .sort((a, b) => b - a)[0];
+  };
+
+  const clearLastSelectedLevel = () => {
+    const lastSelectedLevel = getLastSelectedLevel(selectedLocation);
+
+    if (!lastSelectedLevel) {
+      return;
+    }
+
+    // 2. CHECK IF CLEARED
+    // Check for empty array (multiple) or empty string/null (single)
+
+    if (lastSelectedLevel > locations[0].level) {
+      const cleanedSelectedLocation = clearLowerLevelLocation(lastSelectedLevel - 1, selectedLocation);
+
+      const newSelectedLocation = {
+        ...cleanedSelectedLocation,
+      };
+
+      setValue(`level${lastSelectedLevel - 1}`, newSelectedLocation[`level${lastSelectedLevel - 1}`], {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+      onLocationChange(
+        locations.find((loc) => loc?.level === lastSelectedLevel - 1),
+        false,
+        newSelectedLocation
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (clearPreviousLocation) {
+      clearLastSelectedLevel();
+    }
+  }, [clearPreviousLocation]);
+  useEffect(() => {
+    if (
+      uiLocationId &&
+      changedUsingUi &&
+      changedUsingUi?.clicked &&
+      uiLocationId.locationId &&
+      (fetchUptoLevel >= uiLocationId.level || fetchUptoLevel == '' || fetchUptoLevel == null) &&
+      locationTypes != null
+    ) {
+      let maxlevel = Math.max(...locationTypes.map((item) => item.level));
+      let currentLevel = selectedLocation?.finalSelected?.level;
+      setOnFirstRunTemp(false);
+      if (maxlevel == currentLevel && selectedLocation[`level${maxlevel}`] != null) {
+        showToast({
+          message: 'Reached maximum allowed level of location. No data available below this level.',
+          type: 'warn',
+        });
+        return;
+      }
+
+      const selectedValue = uiLocationId.locationId;
+      const level = uiLocationId.level;
+      let updatedSelection;
+      const isMultiple = multipleOnLevel && level >= multipleOnLevel;
+      const location = locations.find((loc) => loc?.level === level);
+      const selectedIds = Array.isArray(selectedValue)
+        ? selectedValue
+        : [selectedValue];
+      if (isMultiple) {
+        updatedSelection = location?.locationDetails?.filter((opt) => selectedIds.includes(opt.id));
+      } else {
+        updatedSelection = location?.locationDetails?.find((opt) => selectedIds.includes(opt.id));
+      }
+
+      // Clean selectedLocation of all lower levels
+      const cleanedSelectedLocation = clearLowerLevelLocation(level, selectedLocation);
+
+      // Set new value for this level only on the cleaned object
+      const newSelectedLocation = {
+        ...cleanedSelectedLocation,
+        [`level${level}`]: updatedSelection,
+      };
+      setSelectedLocation(newSelectedLocation);
+      setValue(
+        `level${level}`,
+        getFormValueForLevel(updatedSelection, isMultiple),
+        {
+          shouldValidate: true,
+          shouldDirty: true,
+        }
+      );
+      onLocationChange(location, false, newSelectedLocation);
+    } else if (!(fetchUptoLevel >= uiLocationId?.level) && changedUsingUi?.clicked && !uiLocationId?.linkActive) {
+      showToast({ message: 'Maximum location selected', type: 'info' });
+      setFetchUptoLevelLimit(true);
+    }
+  }, [uiLocationId, changedUsingUi]);
+
+  const onFirstRun = (location) => {
+    let latestSelectedLocation = {
+      ...location,
+      [`level${location.level}`]: location.locationDetails[0],
+      level: location.level,
+      optionsLists: selectedLocation?.optionsLists || {},
+    };
+    setSelectedLocation(() => latestSelectedLocation);
+    onLocationChange(latestSelectedLocation, false, latestSelectedLocation);
+    setOnFirstRunTemp(false);
+  };
+
+  // Use parent form context if used as a child, otherwise create local form
+  let methods;
+  if (childForm) {
+    methods = useFormContext();
+  } else {
+    methods = useForm({
+      mode: 'all',
+    });
+  }
+
+  const {
+    control,
+    setValue,
+    formState: { errors },
+    reset: resetForm,
+  } = methods;
+
+  // Returns a new selectedLocation object with all lower levels removed
+  const clearLowerLevelLocation = (selectedLocationLevel, selectedLocation) => {
+    const cleaned = { ...selectedLocation };
+    // Remove lower level selections
+    Object.keys(cleaned).forEach((key) => {
+      if (key.startsWith('level')) {
+        const level = parseInt(key.replace('level', ''));
+        if (level > selectedLocationLevel) {
+          delete cleaned[key];
+          methods.resetField(`level${level}`, { defaultValue: '' });
+        }
+      }
+    });
+    // Remove lower level optionsLists
+    if (cleaned.optionsLists) {
+      const newOptionsLists = { ...cleaned.optionsLists };
+      Object.keys(newOptionsLists).forEach((key) => {
+        const level = parseInt(key.replace('level', ''));
+        if (level > selectedLocationLevel) {
+          delete newOptionsLists[key];
+        }
+      });
+      cleaned.optionsLists = newOptionsLists;
+    }
+    setLocations((prev) => prev.filter((location) => location.level <= selectedLocationLevel));
+    return cleaned;
+  };
+
+  const onDemographicChange = (e) => {
+    const value = e.target.value;
+    setSelectedLocation((prev) => ({ ...prev, selectedDemographic: value }));
+    setSelectedDemographic(value);
+  };
+
+  const retrieveLocationTypes = async () => {
+    try {
+      const response = await retriveLocationType({}, { showLoader: false });
+      return response.data.filter((r) => r.isActive);
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in loading Location Types', type: 'error' });
+    }
+  };
+
+  // Initialization logic
+  useEffect(() => {
+    const initialize = async () => {
+      setLoading(true);
+      try {
+        const types = await retrieveLocationTypes();
+        if (types) setLocationTypes(types.filter((loc) => loc.isActive));
+
+        if (!demographicFilterRequired || !fetchAccordingToUserAoi) {
+          setDemoGraphicFilterNeeded(false);
+        }
+
+        if (!allDistrictReq || allDistrictReq === 'false') {
+          setAllDistrictReq(false);
+        } else if (demographicFilterRequired === 'true') {
+          setAllDistrictReq(true);
+        }
+
+        if (!allBlockReq || allBlockReq === 'false') {
+          setAllBlockReq(false);
+        } else if (demographicFilterRequired === 'true') {
+          setAllBlockReq(true);
+        }
+
+        if (!allPhcReq || allPhcReq === 'false') {
+          setAllPhcReq(false);
+        } else if (demographicFilterRequired === 'true') {
+          setAllPhcReq(true);
+        }
+
+        if (selectedLocation && selectedLocation.optionsLists && Object.keys(selectedLocation.optionsLists).length > 0) {
+          const reconstructedLocations = Object.keys(selectedLocation.optionsLists)
+            .map((key) => {
+              const level = parseInt(key.replace('level', ''));
+              const type = types.find((t) => t.level === level);
+              return {
+                level,
+                locationLabel: type ? type.name : '',
+                locationDetails: selectedLocation.optionsLists[key],
+              };
+            })
+            .sort((a, b) => a.level - b.level);
+          setLocations(reconstructedLocations);
+        } else {
+          setOnFirstRunTemp(true);
+          await onLocationChange(null, true, selectedLocation);
+        }
+      } catch (error) {
+        console.error('Initialization error:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    if (!locations || locations.length === 0) {
+      initialize();
+    }
+  }, []);
+
+  useEffect(() => {
+    setNoLocationInHierarchyMessage(null);
+    reloadFunction?.();
+
+    if (locations.length > 0 && selectedLocation && Object.keys(selectedLocation).length === 0) {
+      clearLowerLevelLocation(minLevel, selectedLocation);
+      resetForm();
+    }
+  }, [selectedLocation]);
+
+  useEffect(() => {
+    if (triggerFirstRun > 0) {
+      resetForm();
+      setNoLocationInHierarchyMessage(null);
+      setUiLocations(null);
+      setUiSelectedLocation(null);
+
+      const performReset = async () => {
+        setLoading(true);
+        try {
+          setLocations([]);
+          const emptySelection = {};
+          setSelectedLocation(emptySelection);
+          setOnFirstRunTemp(true);
+          await onLocationChange(null, true, emptySelection);
+        } catch (error) {
+          console.error('Reset error:', error);
+        } finally {
+          setLoading(false);
+        }
+      };
+      performReset();
+    }
+  }, [triggerFirstRun]);
+  useEffect(() => {
+    if (locationBreadCrumbSelected) {
+      setOnFirstRunTemp(false);
+      if (locations.length > 0) {
+        const selectedState =
+          locationBreadCrumbSelected.fullState || selectedLocation;
+        const cleanedSelectedLocation = clearLowerLevelLocation(
+          locationBreadCrumbSelected.level,
+          selectedState
+        );
+        const selectedLevelValue =
+          selectedState?.[`level${locationBreadCrumbSelected.level}`] ||
+          locationBreadCrumbSelected.fullState?.finalSelected?.optionSelected;
+
+        const newSelectedLocation = {
+          ...cleanedSelectedLocation,
+          [`level${locationBreadCrumbSelected.level}`]: selectedLevelValue,
+        };
+        const isMultiple =
+          multipleOnLevel && locationBreadCrumbSelected.level >= multipleOnLevel;
+
+        setValue(
+          `level${locationBreadCrumbSelected.level}`,
+          getFormValueForLevel(
+            newSelectedLocation[`level${locationBreadCrumbSelected.level}`],
+            isMultiple
+          ),
+          {
+            shouldValidate: true,
+            shouldDirty: true,
+          }
+        );
+        1;
+        onLocationChange(
+          locations.find((loc) => loc?.level === locationBreadCrumbSelected.level),
+          false,
+          newSelectedLocation
+        );
+      }
+    }
+  }, [locationBreadCrumbSelected]);
+
+  useEffect(() => {
+    if (locations.length > 0 && selectedLocation) {
+      locations.forEach((location) => {
+        const level = location.level;
+        const isMultiple = multipleOnLevel && level >= multipleOnLevel;
+        if (selectedLocation[`level${level}`]) {
+          setValue(
+            `level${level}`,
+            isMultiple
+              ? Array.isArray(selectedLocation[`level${level}`])
+                ? selectedLocation[`level${level}`].map((v) => v?.id)
+                : selectedLocation[`level${level}`]?.id ? [selectedLocation[`level${level}`].id] : []
+              : selectedLocation[`level${level}`]?.id || ''
+          );
+        }
+      });
+    }
+  }, [locations, selectedLocation, multipleOnLevel, setValue]);
+
+  const addLocationHierarchy = async (locationIds, level, loadInit) => {
+    if (fetchingLevels.current.has(level)) {
+      return;
+    }
+    fetchingLevels.current.add(level);
+    try {
+      const response = await retrieveNextLevel(
+        locationIds,
+        level,
+        fetchAccordingToUserAoi,
+        loggedInUser.languagePreference
+      );
+
+      let locationData = null;
+      if (response && response.length > 0) {
+        locationData = response[0];
+        const isDistrictReq = allDistrictReq && allDistrictReq !== 'false';
+        const isBlockReq = allBlockReq && allBlockReq !== 'false';
+        const isPhcReq = allPhcReq && allPhcReq !== 'false';
+
+        if (isDistrictReq && level === 2 && (GeneralUtil.isMedplat || GeneralUtil.isTecho)) {
+          locationData.locationDetails = [allRegion, ...locationData.locationDetails];
+        } else if (isBlockReq && level === 3 && (GeneralUtil.isMedplat || GeneralUtil.isTecho)) {
+          locationData.locationDetails = [allBlocks, ...locationData.locationDetails];
+        } else if (isPhcReq && level === 4 && (GeneralUtil.isMedplat || GeneralUtil.isTecho)) {
+          locationData.locationDetails = [allPHC, ...locationData.locationDetails];
+        }
+        if (loadInit) {
+          setMinLevel(locationData.level);
+          if (requiredLocationLevel === 1) {
+            setRequiredLocationLevel(locationData.level);
+          }
+        }
+      } else if (requiredLocationLevel >= level) {
+        const nextLevelNames = locationTypes?.filter((type) => type.level === level)?.map((type) => type.name) || [];
+
+        setNoLocationInHierarchyMessage(nextLevelNames.length ? nextLevelNames.join('/') : null);
+        showToast({
+          message: 'Could not find any location under the selected hierarchy',
+          type: 'error',
+        });
+      }
+      // Update locations and optionsLists together using functional updates
+      setLocations((prevLocations) => {
+        const newLocations = [...prevLocations];
+        if (locationData) {
+          const exists = newLocations.some((loc) => loc.level === locationData.level);
+          if (!exists) {
+            newLocations.push(locationData);
+          }
+        }
+
+        // Build optionsLists from the updated locations array
+        const optionsLists = {};
+        newLocations.forEach((location) => {
+          if (location) {
+            optionsLists[`level${location.level}`] = location.locationDetails;
+          }
+        });
+
+        // Update selectedLocation with the new optionsLists
+        setSelectedLocation((prev) => ({
+          ...prev,
+          optionsLists,
+        }));
+
+        return newLocations;
+      });
+    } catch (error) {
+      console.error(error);
+      showToast({
+        message: 'Error in loading location hierarchy',
+        type: 'error',
+      });
+    } finally {
+      fetchingLevels.current.delete(level);
+    }
+  };
+  const onLocationChange = async (location, loadInit, selectedLocation) => {
+    try {
+      let locationIds = [],
+        level;
+      // clear lower levels
+      if (
+        location ||
+        (selectedLocation.finalSelected &&
+          !hasSelectedOption(selectedLocation.finalSelected.optionSelected))
+      ) {
+        clearLowerLevelLocation(location.level, selectedLocation);
+        level = location.level + 1;
+      }
+
+      if (selectedLocation && location && selectedLocation['level' + location.level]) {
+        if (multipleOnLevel && location.level >= multipleOnLevel) {
+          locationIds = getSelectedOptionIds(selectedLocation['level' + location.level]);
+        } else {
+          locationIds = getSelectedOptionIds(selectedLocation['level' + location.level]);
+        }
+      }
+      let locationSelected = cloneDeep(location);
+      if (location) {
+        locationSelected.optionSelected = selectedLocation['level' + location.level];
+        locationSelected['level' + location.level + 'options'] = locations[locations.length - 1].locationDetails;
+      }
+      let latestSelectedLocation = { ...cloneDeep(selectedLocation), finalSelected: locationSelected };
+      setSelectedLocation(() => latestSelectedLocation);
+      if (
+        (((fetchUptoLevel && location && location.level + 1 <= fetchUptoLevel) || loadInit || !fetchUptoLevel) &&
+          latestSelectedLocation.finalSelected &&
+          (((!multipleOnLevel || location.level < multipleOnLevel) && latestSelectedLocation.finalSelected.optionSelected) ||
+            (multipleOnLevel &&
+              location.level >= multipleOnLevel &&
+              getSelectedOptionIds(latestSelectedLocation.finalSelected.optionSelected).length === 1))) ||
+        loadInit
+      ) {
+        // when selected location is not all blocks set relative parent
+        let level3Id;
+        if (level === 4 && multipleOnLevel && location.level >= multipleOnLevel) {
+          const level3Selection = latestSelectedLocation.level3;
+          level3Id =
+            Array.isArray(level3Selection) && level3Selection.length > 0
+              ? level3Selection[0].id
+              : !Array.isArray(level3Selection) && level3Selection?.id
+                ? level3Selection.id
+                : -2;
+        } else if (level === 4) {
+          level3Id = getFirstSelectedOption(latestSelectedLocation.level3)?.id;
+        }
+        if (level === 4 && level3Id !== -2) {
+          const res = await getParent(level3Id, loggedInUser.languagePreference);
+          if (res) {
+            setSelectedLocation((prevSelectedLocation) => ({
+              ...prevSelectedLocation,
+              level2: res,
+            }));
+            setValue('level2', res?.id || '', { shouldValidate: true, shouldDirty: true });
+            setLocations((prevLocations) => prevLocations.slice(0, -1));
+
+            await addLocationHierarchy([res?.id], 3, loadInit);
+            await addLocationHierarchy(locationIds, level, loadInit);
+          }
+        }
+        // added -2 for all blocks when selected location is all blocks set parent all districts
+        else if (level === 4 && level3Id === -2 && (GeneralUtil.isMedplat || GeneralUtil.isTecho)) {
+          setSelectedLocation((prevSelectedLocation) => ({
+            ...prevSelectedLocation,
+            level2: allRegion,
+          }));
+          setValue('level2', allRegion?.id || '', { shouldValidate: true, shouldDirty: true });
+          setLocations((prevLocations) => prevLocations.slice(0, -1));
+
+          await addLocationHierarchy([-1], 3, loadInit);
+          await addLocationHierarchy(locationIds, level, loadInit);
+        } else if (
+          level === 5 &&
+          getFirstSelectedOption(latestSelectedLocation?.level4)?.id === -3 &&
+          (GeneralUtil.isMedplat || GeneralUtil.isTecho)
+        ) {
+          setSelectedLocation((prevSelectedLocation) => ({
+            ...prevSelectedLocation,
+            level2: allRegion,
+            level3: allBlocks,
+          }));
+          setValue('level2', allRegion?.id || '', { shouldValidate: true, shouldDirty: true });
+          setValue('level3', allBlocks?.id || '', { shouldValidate: true, shouldDirty: true });
+          setLocations((prevLocations) => prevLocations.slice(0, -1));
+
+          await addLocationHierarchy([-2], 4, loadInit);
+          await addLocationHierarchy(locationIds, level, loadInit);
+        } else if (level === 2 && fetchUptoLevel != level) {
+          await addLocationHierarchy(locationIds, level, loadInit);
+          await addLocationHierarchy(locationIds, level + 1, loadInit);
+        } else {
+          await addLocationHierarchy(locationIds, level, loadInit);
+        }
+      }
+      // to get selected parent (Region) automatically on selection of child (District) when (
+      else if (
+        latestSelectedLocation.finalSelected &&
+        latestSelectedLocation.finalSelected.optionSelected &&
+        fetchUptoLevel &&
+        location &&
+        location.level === 3 &&
+        location.level == fetchUptoLevel
+      ) {
+        let level3Id;
+        if (multipleOnLevel && latestSelectedLocation.level3 && Array.isArray(latestSelectedLocation.level3)) {
+          level3Id =
+            latestSelectedLocation.level3 && latestSelectedLocation.level3.length > 0
+              ? latestSelectedLocation.level3[0].id
+              : -2;
+        } else {
+          level3Id = getFirstSelectedOption(latestSelectedLocation.level3)?.id;
+        }
+        const res = await getParent(level3Id, loggedInUser.languagePreference);
+        if (res) {
+          setSelectedLocation((prevSelectedLocation) => ({
+            ...prevSelectedLocation,
+            level2: res,
+          }));
+          setValue('level2', res?.id || '', { shouldValidate: true, shouldDirty: true });
+          setLocations((prevLocations) => prevLocations.slice(0, -1));
+
+          await addLocationHierarchy([res?.id], 3, loadInit);
+        }
+      }
+      // to get previous level details when option is unselected;
+      else if (
+        ((!multipleOnLevel || location?.level < multipleOnLevel) && !latestSelectedLocation?.finalSelected?.optionSelected) ||
+        (multipleOnLevel &&
+          location?.level >= multipleOnLevel &&
+          getSelectedOptionIds(latestSelectedLocation?.finalSelected?.optionSelected).length == 0)
+      ) {
+        level = location.level - 1;
+        if (level === 1) {
+          await addLocationHierarchy([2], 3, loadInit);
+        }
+        const previousLevel = locations.find((loc) => loc.level === level);
+        if (previousLevel) {
+          setSelectedLocation((prevSelectedLocation) => ({
+            ...prevSelectedLocation,
+            finalSelected: {
+              ...prevSelectedLocation.finalSelected,
+              previousLevelLabel: previousLevel.locationLabel,
+              previousLevelOptions: previousLevel.locationDetails,
+            },
+          }));
+        }
+        if (latestSelectedLocation['level' + level]) {
+          const updatedSelectedLocation = {
+            ...latestSelectedLocation,
+          };
+          if (multipleOnLevel && level >= multipleOnLevel) {
+            updatedSelectedLocation.finalSelected.optionSelected = latestSelectedLocation['level' + level];
+          } else {
+            updatedSelectedLocation.finalSelected.optionSelected = latestSelectedLocation['level' + level];
+          }
+          if (setPassedLocationLevel) {
+            setPassedLocationLevel(level - 1);
+          }
+          setSelectedLocation(() => updatedSelectedLocation);
+        } else {
+          // setField(() => null);
+          if (setPassedLocationLevel) {
+            setPassedLocationLevel(null);
+          }
+        }
+      }
+      if (
+        !loadInit &&
+        latestSelectedLocation &&
+        (((!multipleOnLevel || location.level < multipleOnLevel) && latestSelectedLocation.finalSelected.optionSelected) ||
+          (multipleOnLevel &&
+            location.level >= multipleOnLevel &&
+            getSelectedOptionIds(latestSelectedLocation.finalSelected.optionSelected).length > 0))
+      ) {
+        if (!(multipleOnLevel && location.level >= multipleOnLevel)) {
+          // setField(() => null);
+          if (setPassedLocationLevel) {
+            setPassedLocationLevel(null);
+          }
+        }
+        if (setPassedLocationLevel) {
+          setPassedLocationLevel(level - 1);
+        }
+      }
+      // setValue(`level${level}`, latestSelectedLocation[`level${level}`] || null);
+      if (onChange && typeof onChange === 'function') {
+        onChange();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const renderLocationSelect = (location, selectedLocation) => {
+    const level = location.level;
+    const isMultiple = multipleOnLevel && level >= multipleOnLevel;
+    let required = false;
+    if (requiredUptoLevel && requiredUptoLevel > 0) {
+      required = level <= requiredUptoLevel;
+    }
+    // setValue(`level${level}`, selectedLocation[`level${level}`] || null);
+    return (
+      <>
+        <Typography>
+          {translate('Select')} {location.locationLabel}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </Typography>
+        <CustomDropdown
+          required={required}
+          multiple={isMultiple}
+          id={'level' + level}
+          control={control}
+          name={`level${level}`}
+          isNullSelectDisabled={false}
+          errors={errors}
+          options={selectedLocation?.optionsLists?.[`level${level}`]}
+          getOptionDisabled={(option) => {
+            return option.id === '';
+          }}
+          value={
+            isMultiple
+              ? Array.isArray(selectedLocation?.[`level${level}`])
+                ? selectedLocation[`level${level}`].map((v) => v?.id)
+                : selectedLocation?.[`level${level}`]?.id
+                  ? [selectedLocation[`level${level}`].id]
+                  : []
+              : Array.isArray(selectedLocation?.[`level${level}`])
+                ? selectedLocation[`level${level}`][0]?.id || ''
+                : selectedLocation?.[`level${level}`]?.id || ''
+          }
+          placeholder={`${translate('Select')} ${location.locationLabel}`}
+          onChange={(event) => {
+            setOnFirstRunTemp(false);
+            const selectedValue = event.target.value;
+            let updatedSelection;
+
+            // 2. CHECK IF CLEARED
+            // Check for empty array (multiple) or empty string/null (single)
+            const isCleared = !selectedValue || (Array.isArray(selectedValue) && selectedValue.length === 0);
+
+            if (isCleared) {
+              setUiLocations(locations);
+              setUiSelectedLocation(selectedLocation);
+              if (level > locations[0].level) {
+                updatedSelection = isMultiple ? [] : null;
+                const cleanedSelectedLocation = clearLowerLevelLocation(level - 1, selectedLocation);
+
+                const newSelectedLocation = {
+                  ...cleanedSelectedLocation,
+                };
+
+                setValue(`level${level - 1}`, newSelectedLocation[`level${level - 1}`], {
+                  shouldValidate: true,
+                  shouldDirty: true,
+                });
+                onLocationChange(
+                  locations.find((loc) => loc?.level === level - 1),
+                  false,
+                  newSelectedLocation
+                );
+              }
+              if (level === locations[0].level) {
+                // setOnFirstRunTemp(true);
+                updatedSelection = isMultiple ? [] : null;
+                const cleanedSelectedLocation = clearLowerLevelLocation(level, selectedLocation);
+
+                const newSelectedLocation = {
+                  ...cleanedSelectedLocation,
+                };
+
+                onLocationChange(
+                  locations.find((loc) => loc?.level === level),
+                  false,
+                  newSelectedLocation
+                );
+              }
+            } else {
+              // 3. Calculate Selection if not cleared
+              if (isMultiple) {
+                // Ensure rawValue is treated as an array for filtering
+                const valueArray = Array.isArray(selectedValue) ? selectedValue : [selectedValue];
+                updatedSelection = location.locationDetails.filter((opt) => valueArray.includes(opt.id));
+              } else {
+                updatedSelection = location.locationDetails.find((opt) => opt.id === selectedValue);
+              }
+              const cleanedSelectedLocation = clearLowerLevelLocation(level, selectedLocation);
+
+              // Set new value for this level only on the cleaned object
+              const newSelectedLocation = {
+                ...cleanedSelectedLocation,
+                [`level${level}`]: updatedSelection,
+              };
+              setSelectedLocation(newSelectedLocation);
+              setValue(
+                `level${level}`,
+                getFormValueForLevel(updatedSelection, isMultiple),
+                {
+                  shouldValidate: true,
+                  shouldDirty: true,
+                }
+              );
+              onLocationChange(location, false, newSelectedLocation);
+            }
+
+            // Clean selectedLocation of all lower levels
+          }}
+          displayName="name"
+          optionValue="id"
+          rules={required ? { required: `${location.locationLabel} ${translate('is required')}` } : {}}
+        />
+      </>
+    );
+  };
+
+  const renderDemographicFilter = () => (
+    <FormControl fullWidth sx={{ mb: 2 }}>
+      <InputLabel>{translate('Demographic')}</InputLabel>
+      <Select
+        value={selectedLocation.selectedDemographic || ''}
+        label={translate('Demographic')}
+        onChange={onDemographicChange}
+      >
+        <MenuItem value="">{translate('Both')}</MenuItem>
+        <MenuItem value="U">{translate('Urban')}</MenuItem>
+        <MenuItem value="R">{translate('Rural')}</MenuItem>
+      </Select>
+    </FormControl>
+  );
+
+  const renderInlineTemplate = () => (
+    <>
+      {locations.map((location) => (
+        <React.Fragment key={location.level}>{renderLocationSelect(location, selectedLocation)}</React.Fragment>
+      ))}
+      {demoGraphicFilterNeeded && renderDemographicFilter()}
+    </>
+  );
+
+  const renderTwoPartTemplate = () => (
+    <Grid container spacing={2}>
+      {locations.map((location) => (
+        <Grid size={{ xs: 6 }} key={location.level}>
+          {renderLocationSelect(location, selectedLocation)}
+        </Grid>
+      ))}
+    </Grid>
+  );
+
+  if (loading) {
+    return (
+      <Box display="flex" justifyContent="center" py={4}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {noLocationInHierarchyMessage && (
+        <Typography color="error" sx={{ mb: 2 }}>
+          {translate('Could not retrieve')} {noLocationInHierarchyMessage}. {translate('Please add it first')}
+        </Typography>
+      )}
+      {templateType === 'inline' ? renderInlineTemplate() : renderTwoPartTemplate()}
+    </Box>
+  );
+};
+
+LocationSelectionComponent.propTypes = {
+  selectedLocation: PropTypes.object,
+  setSelectedLocation: PropTypes.func.isRequired,
+  templateType: PropTypes.any,
+  fetchAccordingToUserAoi: PropTypes.bool,
+  demographicFilterRequired: PropTypes.bool,
+  requiredUptoLevel: PropTypes.number,
+  fetchUptoLevel: PropTypes.number,
+  multipleOnLevel: PropTypes.number,
+  onChange: PropTypes.func,
+  setSelectedDemographic: PropTypes.func,
+  allDistrictReq: PropTypes.bool,
+  setPassedLocationLevel: PropTypes.func,
+  allBlockReq: PropTypes.bool,
+  allPhcReq: PropTypes.bool,
+  reloadFunction: PropTypes.func,
+  childForm: PropTypes.bool,
+  locations: PropTypes.any,
+  setLocations: PropTypes.any,
+  uiLocationId: PropTypes.any,
+  changedUsingUi: PropTypes.any,
+  setFetchUptoLevelLimit: PropTypes.any,
+  setAllDistrictReq: PropTypes.any,
+  setAllBlockReq: PropTypes.any,
+  setAllPhcReq: PropTypes.any,
+  setUiLocations: PropTypes.any,
+  setUiSelectedLocation: PropTypes.any,
+  clearPreviousLocation: PropTypes.any,
+  triggerFirstRun: PropTypes.number,
+  locationBreadCrumbSelected: PropTypes.any,
+};
+
+export default LocationSelectionComponent;