@argusoft/medplat-app-shell 1.0.6 → 1.0.8

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

@@ -0,0 +1,992 @@
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { getParent, retrieveNextLevel } from '@/common/services/LocationService';
+import { retriveLocationType } from '@/common/services/LocationType';
+import { showToast } from '@/common/toaster/toaster';
+import CustomDropdown from '@/views/custom-components/CustomDropdown';
+import { InputLabel } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { useSelector } from 'react-redux';
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+
+/**
+ * A  component that handles the location selection directive.
+ *
+ * @module LocationDirective
+ * @param {Object} props - The props object.
+ * @param {Function} props.setSelectedLocation - Callback function to set the selected location.
+ * @param {Object} props.selectedLocationRef - A reference to the currently selected location.
+ * @param {string} [props.templateType='inline'] - The type of template for rendering (default is 'inline').
+ * @param {Function} props.fetchAccordingToUserAoi - Function to fetch data according to the user's AOI.
+ * @param {boolean} props.demographicFilterRequired - Determines if demographic filtering is required.
+ * @param {number} props.requiredUptoLevel - The level up to which data is required.
+ * @param {number} props.fetchUptoLevel - The level up to which data should be fetched.
+ * @param {boolean} props.multipleOnLevel - Flag indicating if multiple selections are allowed on a specific level.
+ * @param {boolean} props.allDistrictReq - Flag indicating if all districts are required.
+ * @param {boolean} props.allBlockReq - Flag indicating if all blocks are required.
+ * @param {any} props.resetKey - When this value changes, LocationDirective will reset all its fields and state. Use a unique value (e.g., Date.now()) to trigger a reset from parent.
+ *
+ * @returns {JSX.Element} The rendered location directive component.
+ */
+
+const LocationDirective = ({
+  childForm = false,
+  selectedLocation,
+  setSelectedLocation, //Send Setter Method of state variable (selectedLocation) for two-way binding
+  selectedLocationRef, //Send Ref Variable instead of (selectedLocation in older versions)
+  templateType = 'inline',
+  fetchAccordingToUserAoi = false,
+  demographicFilterRequired,
+  requiredUptoLevel = 1,
+  fetchUptoLevel,
+  multipleOnLevel,
+  allDistrictReq,
+  allBlockReq,
+  selectedIdRef, //Send Ref Variable instead of (ngModel in older versions)
+  setSelectedId,
+  size, //Send Setter method of state variable (selectedId) for two-way binding
+  isLoading,
+  onChange,
+  resetKey,
+}) => {
+  const [showDirective, setShowDirective] = useState(false);
+  const [locationTypes, setLocationTypes] = useState([]);
+  const [locations, setLocations] = useState([]);
+  const [areaOfIntervention, setAreaOfIntervention] = useState([]);
+  const locationsRef = useRef(locations);
+  const { translate } = useTranslateProvider();
+
+  const [onFirstRunTemp, setOnFirstRunTemp] = useState(false);
+  const [minLevel, setMinLevel] = useState(1);
+  const [levelAoi, setLevelAoi] = useState(true);
+
+  const allRegion = {
+    id: -1,
+    locType: 'Region',
+    name: 'All District',
+    type: 'R',
+  };
+  const allBlocks = {
+    id: -2,
+    locType: 'District',
+    name: 'All Block',
+    type: 'D',
+  };
+  const allowedEnv = ['medplat'];
+  const demographicOptions = [
+    { value: '', key: 'Both' },
+    { value: 'U', key: 'Urban' },
+    { value: 'R', key: 'Rural' },
+  ];
+  const presentEnv = import.meta.env.ENVIRONMENT;
+  let noLocationInHierarchyMessage = null;
+  const { user: loggedInUser } = useSelector((state) => state.Authenticate);
+
+  /**
+   * Retrieves active location types from the server and updates the state.
+   * @async
+   * @function retrieveLocationTypes
+   * @returns {Promise<void>} Resolves when location types are successfully retrieved and state is updated.
+   */
+
+  const retrieveLocationTypes = async () => {
+    try {
+      const response = await retriveLocationType({}, { showLoader: false });
+      const data = response.data.filter((r) => r.isActive);
+      setLocationTypes(() => data);
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error in loading Location Types', type: 'error' });
+    }
+  };
+
+  /**
+   * Clears the selected locations for levels lower than the specified `selectedLocationLevel`.
+   * @function clearLowerLevelSelection
+   * @param {number} selectedLocationLevel - The level at which the selection is cleared for all lower levels.
+   * @returns {void}
+   */
+
+  const clearLowerLevelSelection = (selectedLocationLevel) => {
+    if (
+      selectedLocationRef.current.finalSelected &&
+      selectedLocationRef.current.finalSelected.level > selectedLocationLevel
+    ) {
+      locationsRef.current = locationsRef.current.filter((location) => {
+        if (selectedLocationRef.current['level' + location.level] && location.level > selectedLocationLevel) {
+          const updatedSelectedLocation = { ...selectedLocationRef.current };
+          delete updatedSelectedLocation['level' + location.level];
+          setValue(`level${location.level}`);
+          selectedLocationRef.current = updatedSelectedLocation;
+          setSelectedLocation(() => updatedSelectedLocation);
+        }
+        return location.level <= selectedLocationLevel;
+      });
+      setLocations(() => locationsRef.current);
+    }
+    locationsRef.current = locationsRef.current.filter((location) => location.level <= selectedLocationLevel);
+    setLocations(() => locationsRef.current);
+  };
+
+  /**
+   * Handles the selection of a location from a dropdown or input event.
+   * @function handleLocationSelect
+   * @param {Object} e - The event object from the input or dropdown selection.
+   * @param {string} e.target.name - The name attribute representing the level of the location.
+   * @param {(string|string[])} e.target.value - The ID or array of IDs for the selected location(s).
+   * @returns {void}
+   */
+
+  const handleLocationUpadte = (name, locationId) => {
+    const fetchedLevel = parseInt(name.split('')[name.length - 1]);
+    const locationInput = locationsRef.current.find((location) => location.level === fetchedLevel);
+    const selectedLocationObject =
+      fetchedLevel === multipleOnLevel
+        ? locationId.map((id) => locationInput.locationDetails.find((location) => location.id === id))
+        : locationInput.locationDetails.find((location) => location.id === locationId);
+    selectedLocationRef.current = {
+      ...selectedLocationRef.current,
+      [name]: selectedLocationObject,
+    };
+    setSelectedLocation(() => selectedLocationRef.current);
+    setValue(name, locationId);
+    onLocationChange(locationInput);
+  };
+
+  const handleLocationSelect = (e) => {
+    const { name, value: locationId } = e.target;
+    const fetchedLevel = parseInt(name.split('')[name.length - 1]);
+    const locationInput = locationsRef.current.find((location) => location.level === fetchedLevel);
+    const selectedLocationObject =
+      fetchedLevel === multipleOnLevel
+        ? locationId.map((id) => locationInput.locationDetails.find((location) => location.id === id))
+        : locationInput.locationDetails.find((location) => location.id === locationId);
+    selectedLocationRef.current = {
+      ...selectedLocationRef.current,
+      [name]: selectedLocationObject,
+    };
+    setSelectedLocation(() => selectedLocationRef.current);
+    onLocationChange(locationInput);
+  };
+
+  const handleAreaOfIntervention = (e) => {
+    setOnFirstRunTemp(false);
+    const selectedLocationObject = areaOfIntervention?.find((location) => location.id === e.target.value);
+    selectedLocationRef.current = {
+      [`level${selectedLocationObject?.level}`]: selectedLocationObject,
+    };
+    setSelectedLocation(() => selectedLocationRef.current);
+    locationsRef.current = [];
+    onLocationChange({
+      level: selectedLocationObject?.level,
+      locationLabel: selectedLocationObject?.locationLabel,
+      locationDetails: selectedLocationObject,
+    });
+  };
+  /**
+   * Handles changes to the demographic selection.
+   * @function handleDemographicChange
+   * @param {Object} e - The event object from the input or selection change.
+   * @param {string} e.target.value - The value of the selected demographic.
+   * @returns {void}
+   */
+
+  const handleDemographicChange = (e) => {
+    const { value: selectedDemographic } = e.target;
+    selectedLocationRef.current = {
+      ...selectedLocationRef.current,
+      selectedDemographic,
+    };
+    setSelectedLocation(() => selectedLocationRef.current);
+  };
+
+  const updateAreaOfIntervention = (index, newValue) => {
+    setAreaOfIntervention((prev) => {
+      const updated = [...prev]; // copy the array
+      updated[index] = newValue; // update at the specific index
+      return updated;
+    });
+  };
+  const fetchMoreLevels = async (locationIds, level, index) => {
+    try {
+      const response = await retrieveNextLevel(
+        locationIds,
+        level,
+        fetchAccordingToUserAoi,
+        loggedInUser.languagePreference
+      );
+
+      if (fetchAccordingToUserAoi && response[0]?.locationDetails?.length === 1) {
+        response[0]?.locationDetails?.forEach((location) => {
+          fetchMoreLevels(location?.id, response[0].level + 1, index);
+          // updateAreaOfIntervention(index, [{ locationDetails: [location], level: response[0].level }]);
+          updateAreaOfIntervention(index, {
+            ...location,
+            level: response[0].level,
+            locationLabel: response[0].locationLabel,
+          });
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  /**
+   * Adds location hierarchy by retrieving the next level of location details.
+   *
+   * @async
+   * @function addLocationHierarchy
+   * @param {Array} locationIds - Array of location IDs to fetch the next level of hierarchy.
+   * @param {number} level - The current level of location hierarchy being processed.
+   * @param {boolean} loadInit - Flag indicating whether this is the initial load of the location hierarchy.
+   * @returns {Promise<void>} - A Promise that resolves once the hierarchy has been added or updated.
+   * @throws {Error} Will throw an error if there is an issue retrieving the next level of locations.
+   */
+  const addLocationHierarchy = async (locationIds, level, loadInit) => {
+    try {
+      setLevelAoi(false);
+      const response = await retrieveNextLevel(
+        locationIds,
+        level,
+        fetchAccordingToUserAoi,
+        loggedInUser.languagePreference
+      );
+      if (fetchAccordingToUserAoi && response[0]?.locationDetails?.length > 1 && levelAoi) {
+        response[0].locationDetails?.forEach((location, index) => {
+          fetchMoreLevels(location?.id, response[0].level + 1, index);
+          updateAreaOfIntervention(index, {
+            ...location,
+            level: response[0].level,
+            locationLabel: response[0].locationLabel,
+          });
+        });
+      } else {
+        if (response && response.length > 0) {
+          if (allDistrictReq && level === 2 && allowedEnv.includes(presentEnv)) {
+            response[0].locationDetails.unshift(allRegion);
+          } else if (allBlockReq && level === 3 && allowedEnv.includes(presentEnv)) {
+            response[0].locationDetails.unshift(allBlocks);
+          }
+          const filteredLocations = response[0]?.locationDetails?.filter((loc) => loc.name !== null);
+          locationsRef.current = [...locationsRef.current, { ...response[0], locationDetails: filteredLocations }];
+          setLocations(() => locationsRef.current);
+          if (loadInit) {
+            setMinLevel(() => response[0].level);
+            if (requiredUptoLevel === 1) {
+              requiredUptoLevel = response[0].level;
+            }
+          }
+        } else if (requiredUptoLevel >= level) {
+          let nextLevelNames =
+            Array.isArray(locationTypes) && locationTypes.length
+              ? locationTypes.filter((type) => type.level === level).map((type) => type.name)
+              : [];
+          noLocationInHierarchyMessage =
+            Array.isArray(nextLevelNames) && nextLevelNames.length ? nextLevelNames.join('/') : null;
+        }
+        const previousLevel = level - 1;
+        if (
+          multipleOnLevel !== 2 &&
+          previousLevel === 2 &&
+          selectedLocationRef.current['level' + previousLevel] &&
+          selectedLocationRef.current['level' + level]
+        ) {
+          const previousSelected = selectedLocationRef.current['level' + previousLevel];
+          setValue(`level${previousLevel}`, previousSelected?.id);
+        }
+
+        let updatedSelectedLocation = {
+          ...selectedLocationRef.current,
+          optionsList: [],
+        };
+        locationsRef.current.forEach((location) => {
+          updatedSelectedLocation.optionsList['level' + location.level] = location.locationDetails;
+        });
+        selectedLocationRef.current = updatedSelectedLocation;
+        setSelectedLocation(() => updatedSelectedLocation);
+      }
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Error adding hierarchy', type: 'error' });
+    }
+  };
+
+  /**
+   * Handles the location change event, updating the selected location hierarchy and fetching the next level if necessary.
+   *
+   * @async
+   * @function onLocationChange
+   * @param {Object} location - The currently selected location object.
+   * @param {boolean} loadInit - A flag to determine if this is the initial load.
+   * @returns {Promise<void>} - A Promise that resolves when the location hierarchy has been updated.
+   */
+
+  const onLocationChange = async (location, loadInit) => {
+    let locationIds = [];
+    let level;
+    if (
+      location ||
+      (selectedLocationRef.current.finalSelected && !selectedLocationRef.current?.finalSelected?.optionSelected?.id)
+    ) {
+      clearLowerLevelSelection(location?.level);
+      level = location.level + 1;
+    }
+
+    if (selectedLocationRef.current && location && selectedLocationRef.current['level' + location.level]) {
+      if (multipleOnLevel === location.level) {
+        locationIds = selectedLocationRef.current['level' + location.level].map((selected) => selected.id);
+      } else {
+        locationIds.push(selectedLocationRef.current['level' + location.level].id);
+      }
+    }
+    const locationSelected = JSON.parse(JSON.stringify(location));
+    if (location) {
+      locationSelected.optionSelected = selectedLocationRef.current['level' + location.level];
+      locationSelected['level' + location.level + 'options'] =
+        locationsRef.current[locationsRef.current.length - 1]?.locationDetails;
+    }
+    const updatedSelectedLocation = {
+      ...selectedLocationRef.current,
+      finalSelected: locationSelected,
+    };
+    selectedLocationRef.current = updatedSelectedLocation;
+    setSelectedLocation(() => updatedSelectedLocation);
+    if (
+      (((fetchUptoLevel && location && location.level + 1 <= fetchUptoLevel) || loadInit || !fetchUptoLevel) &&
+        selectedLocationRef.current.finalSelected &&
+        ((multipleOnLevel !== location.level && selectedLocationRef.current?.finalSelected?.optionSelected) ||
+          (multipleOnLevel === location.level &&
+            selectedLocationRef.current?.finalSelected?.optionSelected.length > 0))) ||
+      loadInit
+    ) {
+      // when selected location is not all blocks set relative parent
+      let level3Id;
+      if (level === 4 && multipleOnLevel === location.level) {
+        level3Id =
+          selectedLocationRef.current.level3 && selectedLocationRef.current.level3.length > 0
+            ? selectedLocationRef.current.level3[0].id
+            : -2;
+      } else if (level === 4) {
+        level3Id = selectedLocationRef.current.level3.id;
+      }
+      if (level === 4 && level3Id !== -2) {
+        getParent(level3Id, loggedInUser.languagePreference)
+          .then((res) => {
+            const updatedSelectedLocation = {
+              ...selectedLocationRef.current,
+              level2: res,
+            };
+            selectedLocationRef.current = updatedSelectedLocation;
+            setSelectedLocation(() => updatedSelectedLocation);
+            const newLocations = [...locationsRef.current];
+            newLocations.pop();
+            locationsRef.current = newLocations;
+            setLocations(() => locationsRef.current);
+            // setValue(`level2`, res.id);
+
+            addLocationHierarchy([res.id], 3, loadInit).then(function () {
+              addLocationHierarchy(locationIds, level, loadInit);
+            });
+          })
+          .catch((error) => {
+            console.error('API Call Error', error);
+          });
+      } else if (level === 4 && level3Id === -2 && allowedEnv.includes(presentEnv)) {
+        const updatedSelectedLocation = {
+          ...selectedLocationRef.current,
+          level2: allRegion,
+        };
+        selectedLocationRef.current = updatedSelectedLocation;
+        setSelectedLocation(() => updatedSelectedLocation);
+        const newLocations = [...locationsRef.current];
+        newLocations.pop();
+        locationsRef.current = newLocations;
+        setLocations(() => locationsRef.current);
+        addLocationHierarchy([-1], 3, loadInit).then(function () {
+          addLocationHierarchy(locationIds, level, loadInit);
+        });
+      } else if (level === 2 && fetchUptoLevel !== level) {
+        addLocationHierarchy(locationIds, level, loadInit).then(function () {
+          addLocationHierarchy(locationIds, level + 1, loadInit);
+        });
+      } else {
+        await addLocationHierarchy(locationIds, level, loadInit);
+      }
+    } else if (
+      selectedLocationRef.current?.finalSelected?.optionSelected &&
+      fetchUptoLevel &&
+      location &&
+      location.level === 3 &&
+      location.level === fetchUptoLevel
+    ) {
+      let level3Id;
+      if (multipleOnLevel) {
+        level3Id =
+          selectedLocationRef.current.level3 && selectedLocationRef.current.level3.length > 0
+            ? selectedLocationRef.current.level3[0].id
+            : -2;
+      } else {
+        level3Id = selectedLocationRef.current.level3.id;
+      }
+      getParent(level3Id, loggedInUser.languagePreference)
+        .then(function (res) {
+          const updatedSelectedLocation = {
+            ...selectedLocationRef.current,
+            level2: res,
+          };
+          selectedLocationRef.current = updatedSelectedLocation;
+          setSelectedLocation(() => updatedSelectedLocation);
+          const newLocations = [...locationsRef.current];
+          newLocations.pop();
+          locationsRef.current = newLocations;
+          setLocations(() => locationsRef.current);
+          setValue(`level2`, res.id);
+          addLocationHierarchy([res.id], 3, loadInit);
+        })
+        .catch((error) => {
+          showToast({ message: `Api Call Failure ${error}`, type: 'error' });
+        });
+    }
+
+    // to get previous level details when option is unselected;
+    else if (
+      (multipleOnLevel !== location.level && !selectedLocationRef.current?.finalSelected?.optionSelected) ||
+      (multipleOnLevel === location.level && selectedLocationRef.current?.finalSelected?.optionSelected.length === 0)
+    ) {
+      level = location.level - 1;
+      if (level === 1) {
+        addLocationHierarchy([2], 3, loadInit);
+      }
+
+      let previousLevel = locationsRef.current.find((location) => location.level === level);
+
+      if (previousLevel) {
+        const updatedSelectedLocation = {
+          ...selectedLocationRef.current,
+          finalSelected: {
+            ...selectedLocationRef.current.finalSelected,
+            previousLevelLabel: previousLevel.locationLabel,
+            previousLevelOptions: previousLevel.locationDetails,
+          },
+        };
+        selectedLocationRef.current = updatedSelectedLocation;
+        setSelectedLocation(() => updatedSelectedLocation);
+      }
+      if (selectedLocationRef.current['level' + level]) {
+        if (multipleOnLevel === level) {
+          selectedIdRef.current = selectedLocationRef.current['level' + level].map((selected) => selected.id);
+          setSelectedId(() => selectedIdRef.current);
+        } else {
+          if (multipleOnLevel) {
+            let ids = [];
+            ids.push(selectedLocationRef.current['level' + level].id);
+            selectedIdRef.current = ids;
+            setSelectedId(() => selectedIdRef.current);
+          } else {
+            selectedIdRef.current = selectedLocationRef.current['level' + level].id;
+            setSelectedId(() => selectedIdRef.current);
+          }
+        }
+      } else {
+        selectedIdRef.current = null;
+        setSelectedId(() => selectedIdRef.current);
+      }
+    }
+
+    if (
+      !loadInit &&
+      selectedLocationRef.current &&
+      ((multipleOnLevel !== location.level && selectedLocationRef.current?.finalSelected?.optionSelected) ||
+        (multipleOnLevel === location.level && selectedLocationRef.current?.finalSelected?.optionSelected.length > 0))
+    ) {
+      if (multipleOnLevel) {
+        let finalLocationIds = [];
+        if (Array.isArray(selectedLocationRef.current?.finalSelected?.optionSelected)) {
+          finalLocationIds = selectedLocationRef.current.finalSelected.optionSelected.map((selected) => selected.id);
+        } else {
+          finalLocationIds.push(selectedLocationRef.current.finalSelected.optionSelected.id);
+        }
+        selectedIdRef.current = finalLocationIds;
+        setSelectedId(() => selectedIdRef.current);
+      } else {
+        selectedIdRef.current = selectedLocationRef.current.finalSelected.optionSelected.id;
+        setSelectedId(() => selectedIdRef.current);
+      }
+    }
+    onChange && onChange(selectedLocationRef.current);
+  };
+
+  /**
+   * Handles the first run logic for location selection, setting the initial location details if only one option is available.
+   *
+   * @function onFirstRun
+   * @param {Object} location - The location object containing location details and level.
+   * @param {Array} location.locationDetails - Array of location details at the current level.
+   * @param {number} location.level - The current level of the location hierarchy.
+   */
+
+  const onFirstRun = (location) => {
+    if (onFirstRunTemp && location.locationDetails.length === 1) {
+      const updatedLocations = {
+        ...selectedLocationRef.current,
+        [`level${location.level}`]: location.locationDetails[0],
+        level: location.level,
+      };
+      selectedLocationRef.current = updatedLocations;
+      setSelectedLocation(() => updatedLocations);
+      onLocationChange(selectedLocationRef.current, false);
+      setOnFirstRunTemp(() => false);
+
+      setValue(`level${location.level}`, updatedLocations[`level${location.level}`]?.id);
+    }
+  };
+
+  // Initialization logic for first dropdown
+  const initializeLocationDirective = () => {
+    retrieveLocationTypes();
+    demographicFilterRequired = demographicFilterRequired === 'true' && fetchAccordingToUserAoi !== 'false';
+
+    if (!allDistrictReq || allDistrictReq === 'false') {
+      allDistrictReq = false;
+    } else if (demographicFilterRequired === 'true') {
+      allDistrictReq = true;
+    }
+
+    if (!allBlockReq || allBlockReq === 'false') {
+      allBlockReq = false;
+    } else if (demographicFilterRequired === 'true') {
+      allBlockReq = true;
+    }
+
+    fetchAccordingToUserAoi = fetchAccordingToUserAoi && fetchAccordingToUserAoi !== 'false';
+    if (selectedLocation && selectedLocation.finalSelected) {
+      let prevSelectedLocation = JSON.parse(JSON.stringify(selectedLocation));
+      onLocationChange(null, true);
+      setOnFirstRunTemp(() => true);
+      for (let i = 1; i <= prevSelectedLocation?.finalSelected?.level; i++) {
+        let name = 'level' + i;
+        setTimeout(() => {
+          handleLocationUpadte(name, prevSelectedLocation[name]?.id);
+          if (i === prevSelectedLocation?.finalSelected?.level) {
+            setShowDirective(true);
+          }
+        }, 500 * i);
+      }
+    } else {
+      onLocationChange(null, true);
+      setOnFirstRunTemp(true);
+      setShowDirective(true);
+    }
+  };
+
+  // Initial mount effect: only run if resetKey is undefined (first mount)
+  useEffect(() => {
+    if (resetKey === undefined) {
+      initializeLocationDirective();
+    }
+  }, [resetKey]);
+
+  /**
+   * useEffect hook to handle the first run logic for location hierarchy based on the locations in `locationsRef`.
+   *
+   * @function useEffect
+   * @param {Array} locationsRef.current - The current array of location objects.
+   */
+
+  useEffect(() => {
+    if (onFirstRunTemp) {
+      locationsRef.current.forEach((location) => {
+        onFirstRun(location);
+      });
+    }
+  }, [locationsRef.current]);
+
+  /**
+   * useEffect hook to clear lower-level selections and reset messages based on changes to `selectedLocationRef.current`.
+   *
+   * @function useEffect
+   * @param {Object} selectedLocationRef.current - The current state of selected location details.
+   */
+
+  useEffect(() => {
+    noLocationInHierarchyMessage = null;
+    if (Object.keys(selectedLocationRef.current).length === 0) {
+      clearLowerLevelSelection(minLevel);
+    }
+  }, [selectedLocationRef.current]);
+
+  let methods;
+  if (childForm) {
+    methods = useFormContext();
+  } else {
+    methods = useForm({ mode: 'all' });
+  }
+
+  const {
+    control,
+    setValue,
+    formState: { errors },
+  } = methods;
+
+  // Reset logic when resetKey changes
+  useEffect(() => {
+    if (resetKey !== undefined) {
+      setLocations([]);
+      setAreaOfIntervention([]);
+      locationsRef.current = [];
+      setShowDirective(false);
+      setOnFirstRunTemp(false);
+      setMinLevel(1);
+      setLevelAoi(true);
+      if (selectedLocationRef && typeof selectedLocationRef === 'object') {
+        selectedLocationRef.current = {};
+      }
+      if (setSelectedLocation) setSelectedLocation({});
+      if (selectedIdRef && typeof selectedIdRef === 'object') {
+        selectedIdRef.current = '';
+      }
+      if (setSelectedId) setSelectedId('');
+      // Reset all form fields related to location
+      if (methods && methods.resetField) {
+        const fieldsToReset = ['level1', 'level2', 'level3', 'level4', 'AOI', 'selectedDemographic'];
+        fieldsToReset.forEach((field) => methods.resetField(field));
+      } else if (methods && methods.setValue) {
+        const fieldsToReset = ['level1', 'level2', 'level3', 'level4', 'AOI', 'selectedDemographic'];
+        fieldsToReset.forEach((field) => methods.setValue(field, undefined));
+      }
+      // Trigger initial dropdown rendering after reset
+      initializeLocationDirective();
+    }
+  }, [resetKey]);
+
+  if (noLocationInHierarchyMessage) {
+    return (
+      <div data-testid="locationdirective-error-message" className="text-red-500">
+        Could not retrieve {noLocationInHierarchyMessage}. Please add it first
+      </div>
+    );
+  }
+
+  if (showDirective && templateType === 'inline') {
+    return (
+      <LocationDirectiveSkeleton isLoading={isLoading}>
+        <Grid container component="form" direction="column">
+          {fetchAccordingToUserAoi && areaOfIntervention?.length > 1 && (
+            <Grid
+              size={{ xs: 12, sm: 12, md: 12, lg: 12 }}
+              data-testid={`locationdirective-inline-location-area-of-intervention`}
+            >
+              <InputLabel
+                // required={location.level <= requiredUptoLevel}
+                data-testid={`locationdirective-inline-location-label-area-of-intervention`}
+              >
+                {translate('Area of Intervention')}
+              </InputLabel>
+              <CustomDropdown
+                control={control}
+                id={`AOI`}
+                name={`AOI`}
+                size={size}
+                options={areaOfIntervention}
+                displayName="name"
+                optionValue="id"
+                multiple={3 === multipleOnLevel}
+                errors={errors}
+                onChange={handleAreaOfIntervention}
+                // rules={{
+                //   required: {
+                //     value: areaOfIntervention[0].level <= requiredUptoLevel,
+                //     message: `Please Select Location Level ${areaOfIntervention[0].level}`,
+                //   },
+                // }}
+                // dataTestId={`areaOfIntervention[0]directive-inline-dropdown-${areaOfIntervention[0].level}`}
+                className="mb-4"
+              />
+            </Grid>
+          )}
+          {locationsRef.current.length > 0 &&
+            locationsRef.current.map((location, index) => (
+              <Grid
+                size={{ xs: 12, sm: 12, md: 12, lg: 12 }}
+                key={location.id || index}
+                data-testid={`locationdirective-inline-location-${location.id || index}`}
+              >
+                <InputLabel
+                  required={location.level <= requiredUptoLevel}
+                  data-testid={`locationdirective-inline-location-label-${location.id || index}`}
+                >
+                  {translate(location.locationLabel)}
+                </InputLabel>
+                <CustomDropdown
+                  control={control}
+                  id={`location${location.level}`}
+                  name={`level${location.level}`}
+                  size={size}
+                  options={location.locationDetails}
+                  displayName="name"
+                  optionValue="id"
+                  errors={errors}
+                  onChange={handleLocationSelect}
+                  multiple={location.level === multipleOnLevel}
+                  rules={{
+                    required: {
+                      value: location.level <= requiredUptoLevel,
+                      message: `Please Select  ${location.locationLabel}`,
+                    },
+                  }}
+                  dataTestId={`locationdirective-inline-dropdown-${location.level}`}
+                  className="mb-4"
+                />
+              </Grid>
+            ))}
+          {demographicFilterRequired && (
+            <Grid size={{ xs: 12, sm: 12, md: 12, lg: 12 }} className="mb-[5px]">
+              <InputLabel className="text-[14px]">{translate('Demographic')}</InputLabel>
+              <CustomDropdown
+                control={control}
+                id="demographic-filter"
+                name="selectedDemographic"
+                size={size}
+                options={demographicOptions}
+                optionValue="value"
+                displayName="key"
+                onChange={handleDemographicChange}
+                dataTestId="locationdirective-inline-demographic-dropdown"
+              />
+            </Grid>
+          )}
+        </Grid>
+      </LocationDirectiveSkeleton>
+    );
+  } else if (showDirective && templateType === 'twoPart') {
+    return (
+      <LocationDirectiveSkeleton isLoading={isLoading}>
+        <Grid container spacing={2} component="form" className="pb-[1.5rem]" direction="row" width="100%">
+          {fetchAccordingToUserAoi && areaOfIntervention?.length > 1 && (
+            <Grid
+              size={{ xs: 12, sm: 12, md: 12, lg: 12 }}
+              data-testid={`locationdirective-inline-location-area-of-intervention`}
+            >
+              <InputLabel
+                // required={location.level <= requiredUptoLevel}
+                data-testid={`locationdirective-inline-location-label-area-of-intervention`}
+              >
+                {translate('Area of Intervention')}
+              </InputLabel>
+              <CustomDropdown
+                control={control}
+                id={`AOI`}
+                name={`AOI`}
+                size={size}
+                options={areaOfIntervention}
+                displayName="name"
+                optionValue="id"
+                multiple={3 === multipleOnLevel}
+                errors={errors}
+                onChange={handleAreaOfIntervention}
+                // rules={{
+                //   required: {
+                //     value: areaOfIntervention[0].level <= requiredUptoLevel,
+                //     message: `Please Select Location Level ${areaOfIntervention[0].level}`,
+                //   },
+                // }}
+                // dataTestId={`areaOfIntervention[0]directive-inline-dropdown-${areaOfIntervention[0].level}`}
+                className="mb-4"
+              />
+            </Grid>
+          )}
+          {locationsRef.current.length > 0 &&
+            locationsRef.current.map((location, index) => (
+              <Grid
+                size={{ xs: 12, sm: 6, md: 6 }}
+                key={location.id || index}
+                data-testid={`locationdirective-two-part-location-${location.id || index}`}
+              >
+                <InputLabel
+                  className="text-[14px]"
+                  required={location.level <= requiredUptoLevel}
+                  data-testid={`locationdirective-two-part-location-label-${location.id || index}`}
+                >
+                  {translate(location.locationLabel)}
+                </InputLabel>
+                <CustomDropdown
+                  control={control}
+                  id={`location${location.level}`}
+                  name={`level${location.level}`}
+                  size={size}
+                  options={location.locationDetails}
+                  displayName="name"
+                  optionValue="id"
+                  errors={errors}
+                  onChange={handleLocationSelect}
+                  rules={{
+                    required: {
+                      value: location.level <= requiredUptoLevel,
+                      message: `Please Select ${location.locationLabel}`,
+                    },
+                  }}
+                  dataTestId={`locationdirective-two-part-dropdown-${location.level}`}
+                />
+              </Grid>
+            ))}
+        </Grid>
+      </LocationDirectiveSkeleton>
+    );
+  } else if (showDirective && templateType === 'linear') {
+    return (
+      <LocationDirectiveSkeleton isLoading={isLoading}>
+        <Grid container component="form" direction="column">
+          {fetchAccordingToUserAoi && areaOfIntervention?.length > 1 && (
+            <Grid
+              size={{ xs: 12, sm: 12, md: 12, lg: 12 }}
+              data-testid={`locationdirective-inline-location-area-of-intervention`}
+            >
+              <InputLabel
+                // required={location.level <= requiredUptoLevel}
+                data-testid={`locationdirective-inline-location-label-area-of-intervention`}
+              >
+                {translate('Area of Intervention')}
+              </InputLabel>
+              <CustomDropdown
+                control={control}
+                id={`AOI`}
+                name={`AOI`}
+                size={size}
+                options={areaOfIntervention}
+                displayName="name"
+                optionValue="id"
+                multiple={3 === multipleOnLevel}
+                errors={errors}
+                onChange={handleAreaOfIntervention}
+                // rules={{
+                //   required: {
+                //     value: areaOfIntervention[0].level <= requiredUptoLevel,
+                //     message: `Please Select Location Level ${areaOfIntervention[0].level}`,
+                //   },
+                // }}
+                // dataTestId={`areaOfIntervention[0]directive-inline-dropdown-${areaOfIntervention[0].level}`}
+                className="mb-4"
+              />
+            </Grid>
+          )}
+          {locationsRef.current.length > 0 &&
+            locationsRef.current.map((location, index) => (
+              <Grid
+                size={{ xs: 12, sm: 12, md: 12, lg: 12 }}
+                className="m-2 flex flex-row justify-between items-center"
+                key={location.id || index}
+                data-testid={`locationdirective-inline-location-${location.id || index}`}
+              >
+                <Grid size={{ xs: 3 }}>
+                  <InputLabel
+                    className="text-sm break-words whitespace-pre-wrap text-black"
+                    required={location.level <= requiredUptoLevel}
+                    data-testid={`locationdirective-inline-location-label-${location.id || index}`}
+                  >
+                    {translate(location.locationLabel)}
+                  </InputLabel>
+                </Grid>
+                <Grid size={{ xs: 8 }}>
+                  <CustomDropdown
+                    control={control}
+                    id={`location${location.level}`}
+                    name={`level${location.level}`}
+                    size={size}
+                    options={location.locationDetails}
+                    displayName="name"
+                    optionValue="id"
+                    errors={errors}
+                    onChange={handleLocationSelect}
+                    rules={{
+                      required: {
+                        value: location.level <= requiredUptoLevel,
+                        message: `Please Select  ${location.locationLabel}`,
+                      },
+                    }}
+                    multiple={location.level === multipleOnLevel}
+                    dataTestId={`locationdirective-inline-dropdown-${location.level}`}
+                  />
+                </Grid>
+              </Grid>
+            ))}
+          {demographicFilterRequired && (
+            <Grid size={{ xs: 12, sm: 12, md: 12, lg: 12 }} className="mb-[5px]">
+              <InputLabel className="text-[14px]">{translate('Demographic')}</InputLabel>
+              <CustomDropdown
+                control={control}
+                id="demographic-filter"
+                name="selectedDemographic"
+                size={size}
+                options={demographicOptions}
+                optionValue="value"
+                displayName="key"
+                onChange={handleDemographicChange}
+                dataTestId="locationdirective-inline-demographic-dropdown"
+              />
+            </Grid>
+          )}
+        </Grid>
+      </LocationDirectiveSkeleton>
+    );
+  }
+};
+
+export default LocationDirective;
+
+LocationDirective.propTypes = {
+  childForm: PropTypes.any,
+  setSelectedLocation: PropTypes.any,
+  selectedLocationRef: PropTypes.any,
+  templateType: PropTypes.any,
+  fetchAccordingToUserAoi: PropTypes.any,
+  demographicFilterRequired: PropTypes.any,
+  requiredUptoLevel: PropTypes.any,
+  fetchUptoLevel: PropTypes.any,
+  multipleOnLevel: PropTypes.any,
+  allDistrictReq: PropTypes.any,
+  allBlockReq: PropTypes.any,
+  setSelectedId: PropTypes.any,
+  selectedIdRef: PropTypes.any,
+  size: PropTypes.any,
+  selectedLocation: PropTypes.any,
+  isLoading: PropTypes.any,
+  onChange: PropTypes.any,
+  resetKey: PropTypes.any,
+};
+
+const LocationDirectiveSkeleton = ({ children, isLoading }) => {
+  const useSkeleton = useSelector(getUseSkeleton);
+  if (!useSkeleton) {
+    return children;
+  }
+  if (!isLoading) {
+    return children;
+  }
+
+  return (
+    <div className="  p-3">
+      <div className="flex flex-col space-y-4">
+        <div className="flex flex-row ">
+          <button className="bg-gray-300 animate-pulse mr-[50px] rounded-sm w-[70px] h-[30px]"></button>
+          <button className="bg-gray-300 animate-pulse rounded-sm w-60 h-[30px]"></button>
+        </div>
+        <div className="flex flex-row ">
+          <button className="bg-gray-300 animate-pulse mr-[50px] rounded-sm w-[70px] h-[30px]"></button>
+          <button className="bg-gray-300 animate-pulse rounded-sm w-60 h-[30px]"></button>
+        </div>
+        <div className="flex flex-row ">
+          <button className="bg-gray-300 animate-pulse mr-[50px] rounded-sm w-[70px] h-[30px]"></button>
+          <button className="bg-gray-300 animate-pulse rounded-sm w-60 h-[30px]"></button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+LocationDirectiveSkeleton.propTypes = {
+  children: PropTypes.any,
+  isLoading: PropTypes.any,
+};