tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/layout/toolbar/metrics-header/metrics-header.component.ts

@@ -0,0 +1,1555 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  HostListener,
+  OnInit,
+} from "@angular/core";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import { AuthService } from "../../../../services/auth.service";
+import { GlobalStateService } from "tango-app-ui-global";
+import { NavigationEnd, Router } from "@angular/router";
+@Component({
+  selector: "lib-metrics-header",
+  templateUrl: "./metrics-header.component.html",
+  styleUrl: "./metrics-header.component.scss",
+})
+export class MetricsHeaderComponent implements OnInit {
+  dayjs = dayjs;
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+    return isValidDate ? "invalid-date" : false;
+  };
+
+  selectedDateRange: any = {
+    startDate: dayjs().subtract(30, "days"),
+    endDate: dayjs().subtract(1, "days"),
+  };
+  selectedFilters: any = {
+    client: null,
+    clientName: null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+    group: [],
+    location: [],
+    country: [],
+    zoneName: [],
+  };
+  Opendropdown: boolean = false;
+  dropdownOpen: string | null = null; // 'location' or 'group'
+  searchLocationText: string = "";
+  searchGroupText: string = "";
+  locations: any[] = [];
+  filteredLocations: any[] = [];
+  groupsData: any[] = [];
+  filteredGroups: any[] = [];
+  filteredStores: any[] = [];
+  filteredZones: any[] = [];
+  stores: any[] = [];
+  zones: any[] = [];
+  searchStoreText: string = "";
+  searchZoneText: string = "";
+  clientList: any = [];
+  selectedClient: any;
+  locationLabel: any[] = [];
+  groupLabel: any[] = [];
+  users: any;
+  url: any;
+  filteredCountries: any[] = [];
+  countryLabel: any[] = [];
+  searchCountryText: string = "";
+  countries: any[] = [];
+  constructor(
+    private auth: AuthService,
+    private router: Router,
+    public gs: GlobalStateService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  @HostListener("document:click", ["$event"])
+  onClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest(".dropdown2")) {
+      this.Opendropdown = false;
+    }
+  }
+  closeDropdown1() {
+    this.Opendropdown = false;
+  }
+  ngOnInit(): void {
+    // this.setRangesBasedOnRoute();
+
+    // Listen for route changes to update ranges
+    // this.router?.events?.subscribe((event) => {
+    //   if (event instanceof NavigationEnd) {
+    //     this.setRangesBasedOnRoute();
+    //   }
+    // });
+    this.url = this.router.url.split("?")[0].split("/");
+    const user = JSON.parse(localStorage.getItem("user-info") as string);
+    this.users = user;
+    this.gs?.manageRefreshTrigger?.subscribe((e) => {
+      if (e) {
+        if (user.userType === "tango") {
+          this.getClient();
+        } else {
+          const storedFilters = localStorage.getItem("header-filters");
+          if (storedFilters) {
+            const headerFilters = JSON.parse(storedFilters);
+            this.filteredStores = headerFilters?.stores.map((store: any) => ({
+              ...store,
+              checked: store.checked,
+            }));
+            this.filteredZones = headerFilters?.zoneName.map((store: any) => ({
+              ...store,
+              checked: store.checked,
+            }));
+          }
+        }
+      }
+    });
+
+    // Fetch client data if the user is of type 'tango'
+    if (user.userType === "tango") {
+      this.getClient();
+    } else {
+      this.getCountry();
+      this.getLocations();
+      this.getGroups();
+      this.getStore();
+      const clientFilters = localStorage.getItem("client-details");
+      if (clientFilters) {
+        const headerclientFilters = JSON.parse(clientFilters);
+        this.selectedClient = {
+          trafficDateRange: headerclientFilters.trafficDateRange,
+        };
+      }
+    }
+
+    // Load filters from localStorage if they exist
+    const storedFilters = localStorage.getItem("header-filters");
+    if (storedFilters) {
+      const headerFilters = JSON.parse(storedFilters);
+
+      // Initialize selectedFilters with defaults or existing values
+      this.selectedFilters = {
+        client: headerFilters.client || this.users.client,
+        clientName: headerFilters.clientName || "",
+        clients: headerFilters.clients || [],
+        store: headerFilters.store || null,
+        date: headerFilters.date || {},
+        stores: headerFilters.stores || [],
+        group: headerFilters.group || [],
+        location: headerFilters.location || [],
+        country: headerFilters.country || [],
+        zoneName: headerFilters.zoneName || [],
+      };
+
+      // Sync filtered data with stored selections
+      this.filteredCountries = this.syncWithLocalStorage(headerFilters.country);
+      this.filteredLocations = this.syncWithLocalStorage(
+        headerFilters.location
+      );
+      this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
+      this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
+      this.filteredZones = this.syncWithLocalStorage(headerFilters.zoneName);
+      // Format date range if it exists
+      if (headerFilters.date) {
+        this.selectedDateRange = {
+          startDate: this.dayjs(
+            headerFilters.date.startDate,
+            "YYYY-MM-DD"
+          ).format("DD-MM-YYYY"),
+          endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format(
+            "DD-MM-YYYY"
+          ),
+        };
+      } else {
+        this.selectedDateRange = {
+          startDate: this.dayjs(
+            this.selectedDateRange.startDate,
+            "YYYY-MM-DD"
+          ).format("DD-MM-YYYY"),
+          endDate: this.dayjs(
+            this.selectedDateRange.endDate,
+            "YYYY-MM-DD"
+          ).format("DD-MM-YYYY"),
+        };
+      }
+      // console.log("3")
+      // Emit data via service and update localStorage
+      this.emitAndStoreFilters();
+    } else {
+      // Initialize empty states if no header filters are present in localStorage
+      this.resetFilters();
+      // console.log("2")
+    }
+  }
+  private syncWithLocalStorage(items: any[]): any[] {
+    return items
+      ? items.map((item: any) => ({
+          ...item,
+          checked: item.checked === true,
+        }))
+      : [];
+  }
+
+  private emitAndStoreFilters(): void {
+    this.gs.dataRangeValue.next(this.selectedFilters);
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+    // console.log("1")
+  }
+
+  /**
+   * Reset selectedFilters and all related arrays to empty states
+   */
+  private resetFilters(): void {
+    this.selectedFilters = {
+      client: null,
+      clientName: "",
+      clients: [],
+      store: null,
+      date: {},
+      stores: [],
+      group: [],
+      location: [],
+      country: [],
+      zoneName: [],
+    };
+    this.filteredLocations = [];
+    this.filteredGroups = [];
+    this.filteredStores = [];
+    this.filteredCountries = [];
+    this.filteredZones = [];
+  }
+  getClient() {
+    this.auth.getClients().subscribe({
+      next: (e) => {
+        if (e) {
+          this.clientList = e.data.result;
+          const headerFilters: any = JSON.parse(
+            localStorage.getItem("header-filters") || "{}"
+          );
+          if (headerFilters.client) {
+            this.clientList.find((obj: any) => {
+              if (obj.clientId === headerFilters.client) {
+                this.selectedClient = obj;
+              }
+            });
+            // const startDate = this.dayjs(headerFilters.date.startDate);
+            // const endDate = this.dayjs(headerFilters.date.endDate);
+            // const differenceInDays = endDate.diff(startDate, 'days');
+            // if (differenceInDays >= 90 && this.selectedClient?.trafficDateRange === 90) {
+            //   this.selectedDateRange = {
+            //     startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").subtract(-90, 'days').format("DD-MM-YYYY"),
+            //     endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+            //   };
+            // } else {
+            //   this.selectedDateRange = {
+            //     startDate: this.dayjs(this.selectedDateRange.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+            //     endDate: this.dayjs(this.selectedDateRange.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+            //   };
+            // }
+
+            this.selectedFilters.client = headerFilters.client;
+            this.selectedFilters.clientName = headerFilters.clientName;
+            this.selectedFilters.clients = [headerFilters.client];
+            this.selectedFilters.store = headerFilters.store;
+            this.selectedFilters.date = headerFilters.date;
+            this.selectedFilters.stores = headerFilters.stores;
+            this.selectedFilters.group = headerFilters.group;
+            this.selectedFilters.location = headerFilters.location;
+            this.selectedFilters.country = headerFilters.country;
+            this.selectedFilters.zoneName = headerFilters.zoneName;
+            this.gs.dataRangeValue.next(this.selectedFilters);
+            // console.log("2")
+            // Ensure locations and groups are loaded before fetching stores
+            this.getCountry();
+            this.getLocations();
+            this.getGroups();
+            // Fetch stores only after locations and groups are set
+            this.getStore();
+          } else {
+            this.selectedClient = this.clientList[0];
+            this.selectedFilters.client = this.selectedClient.clientId;
+            this.selectedFilters.clientName = this.selectedClient.clientName;
+            this.selectedFilters.clients = [this.selectedClient.clientId];
+            this.selectedFilters.store = headerFilters.store;
+            this.selectedFilters.date = headerFilters.date;
+            this.selectedFilters.stores = headerFilters.stores;
+            this.selectedFilters.group = headerFilters.group;
+            this.selectedFilters.location = headerFilters.location;
+            this.selectedFilters.country = headerFilters.country;
+            this.selectedFilters.zoneName = headerFilters.zoneName;
+            localStorage.setItem(
+              "header-filters",
+              JSON.stringify(this.selectedFilters)
+            );
+            this.gs.dataRangeValue.next(this.selectedFilters);
+            // console.log("3")
+            this.cd.detectChanges();
+            // Ensure locations and groups are loaded before fetching stores
+            this.getCountry();
+            this.getLocations();
+            this.getGroups();
+            // Fetch stores only after locations and groups are set
+            this.getStore();
+          }
+        } else {
+          this.selectedClient = this.clientList[0];
+          this.selectedFilters.client = this.selectedClient.clientId;
+          this.selectedFilters.clientName = this.selectedClient.clientName;
+          // Ensure locations and groups are loaded before fetching stores
+          this.getCountry();
+          this.getLocations();
+          this.getGroups();
+          // Fetch stores only after locations and groups are set
+          this.getStore();
+          this.getZone();
+          localStorage.setItem(
+            "header-filters",
+            JSON.stringify(this.selectedFilters)
+          );
+          this.gs.dataRangeValue.next(this.selectedFilters);
+          // console.log("4")
+          this.cd.detectChanges();
+        }
+        this.getUserInfo(this.selectedFilters.client);
+      },
+    });
+  }
+  getUserInfo(client: any) {
+    let obj = {
+      clientId: client ? client : "",
+    };
+    if (client) {
+      this.auth.getHeaderUsers(obj).subscribe({
+        next: (e) => {
+          localStorage.setItem(
+            "usersEmail-info",
+            JSON.stringify(e?.data?.userEmailData || [])
+          );
+        },
+      });
+    }
+  }
+  onClientSelect(event: any): void {
+    // Update the selected client
+    this.selectedClient = event;
+    // Clear previous filtered data and selections
+    this.filteredGroups = [];
+    this.filteredStores = [];
+    this.filteredLocations = [];
+    this.selectedFilters.stores = [];
+    this.selectedFilters.group = [];
+    this.selectedFilters.location = [];
+    this.selectedFilters.country = [];
+    this.selectedFilters.zoneName = [];
+
+    // Fetch header filters from localStorage
+    const headerFilters: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+
+    // Update the selected filters with the new client
+    this.selectedFilters.client = this.selectedClient.clientId;
+    this.selectedFilters.clientName = this.selectedClient.clientName;
+
+    // Remove old store, group, and location data from the header filters
+    delete headerFilters.stores;
+    delete headerFilters.groups;
+    delete headerFilters.location;
+    delete headerFilters.country;
+    delete headerFilters.zoneName;
+
+    // Fetch new data based on the new client
+    this.getCountry();
+    this.getLocations();
+    this.getStore();
+    this.getGroups();
+
+    // Update localStorage with the new client selection and empty filter data
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+    window.location.reload();
+    // Emit data to the global service
+    // this.gs.dataRangeValue.next(this.selectedFilters);
+    // Trigger change detection to reflect UI changes
+    this.cd.detectChanges();
+  }
+
+  ranges: any = {
+    Today: [dayjs(), dayjs()],
+    Yesterday: [dayjs().subtract(1, "days"), dayjs().subtract(1, "days")],
+    "This Week": [dayjs().subtract(7, "days"), dayjs().subtract(1, "days")],
+    "Last Week": [
+      dayjs().subtract(14, "days").startOf("day"),
+      dayjs().subtract(8, "days").endOf("day"),
+    ],
+    "This Month": [dayjs().subtract(30, "days"), dayjs().subtract(1, "days")],
+    "Last Month": [
+      dayjs().subtract(1, "month").startOf("month"),
+      dayjs().subtract(1, "month").endOf("month"),
+    ],
+  };
+
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      if (this.selectedClient?.traxDateRange === 90) {
+        this.isCustomDate = (m: dayjs.Dayjs) => {
+          const isValidDate =
+            m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+          return isValidDate ? "invalid-date" : false;
+        };
+      } else {
+        this.isCustomDate = (m: dayjs.Dayjs) => {
+          const isValidDate =
+            m > this.dayjs() ||
+            m > this.dayjs(event.startDate.add(180, "days"));
+          return isValidDate ? "invalid-date" : false;
+        };
+      }
+    }
+  }
+
+  datechange(event: any) {
+    if (event && event.startDate && event.endDate) {
+      if (
+        this.dayjs(event.startDate).isValid() &&
+        this.dayjs(event.endDate).isValid()
+      ) {
+        this.selectedDateRange.startDate = event.startDate;
+        this.selectedDateRange.endDate = event.endDate;
+        var datetime = {
+          startDate: this.dayjs(event.startDate, "DD-MM-YYYY").format(
+            "YYYY-MM-DD"
+          ),
+          endDate: this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+        };
+        this.selectedFilters.date = datetime;
+        localStorage.setItem(
+          "header-filters",
+          JSON.stringify(this.selectedFilters)
+        );
+        window.location.reload();
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+      }
+    }
+  }
+  opendropdown(e: MouseEvent) {
+    e.stopPropagation();
+    this.Opendropdown = !this.Opendropdown;
+  }
+  getLocations(): void {
+    const country = this.countries
+      .filter((country) => country.checked)
+      .map((country) => country.country);
+    // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
+    let obj = {
+      clientId: this.selectedFilters.client
+        ? this.selectedFilters.client
+        : this.users.clientId,
+      country,
+      city: [],
+      group: [],
+    };
+    this.auth.getLocation(obj).subscribe({
+      next: (res: any) => {
+        let cityList = this.selectedFilters?.location
+          ?.filter((location: any) => location.checked)
+          .map((loc: any) => loc.city);
+        // Map the fetched locations with default unchecked state
+        this.locations = res?.data?.locationData.map((city: any) => ({
+          city: city.city,
+          // checked: cityList?.length ? cityList.includes(city.city) : true,
+          checked: cityList?.includes(city.city) ? true : false,
+        }));
+
+        // Sync the fetched locations with any stored checked values in localStorage
+        if (
+          this.selectedFilters.location &&
+          Array.isArray(this.selectedFilters.location)
+        ) {
+          this.filteredLocations = this.locations.map((location) => {
+            const matchedLocation = this.selectedFilters.location.find(
+              (loc: any) => loc.city === location.city
+            );
+            return matchedLocation
+              ? { ...location, checked: matchedLocation.checked }
+              : location;
+          });
+        } else {
+          this.filteredLocations = this.locations;
+        }
+
+        if (this.searchLocationText) {
+          this.filteredLocations = this.locations.filter((location: any) =>
+            location.city
+              .toLowerCase()
+              .includes(this.searchLocationText.toLowerCase())
+          );
+        }
+        const selectedLocations = this.locations
+          .filter((location) => location.checked)
+          .map((location) => location.city);
+        if (selectedLocations.length > 0) {
+          setTimeout(() => {
+            this.getGroups();
+            this.getStore(); // Fetch stores based on selected groups
+          }, 1000);
+        }
+
+        if (!selectedLocations.length && country.length) {
+          this.getGroups();
+        }
+      },
+      error: (err) => {
+        console.error("Failed to fetch locations", err);
+      },
+    });
+  }
+
+  isAllLocationsSelected(): boolean {
+    return this.filteredLocations.every((location) => location.checked);
+  }
+
+  selectedLocationsLabel(): string {
+    const selectedLocations = (this.locationLabel = this.searchLocationText
+      .length
+      ? this.locations
+          .filter((location) => location.checked)
+          .map((location) => location.city)
+      : this.filteredLocations
+          .filter((location) => location.checked)
+          .map((location) => location.city));
+    return selectedLocations.length === 0
+      ? ""
+      : selectedLocations.length === 1
+      ? selectedLocations[0]
+      : `${selectedLocations.length} Region`;
+  }
+
+  removeLocation(): void {
+    this.Reset();
+  }
+
+  getGroups(): void {
+    const country = this.countries
+      .filter((country) => country.checked)
+      .map((country) => country.country);
+    let city;
+    city = this.locations
+      .filter((location) => location.checked)
+      .map((location) => location.city);
+
+    if (!city.length && country.length) {
+      city = this.locations.map((loc) => loc.city);
+    }
+    const obj = {
+      country,
+      city,
+      clientId: this.selectedFilters.client
+        ? this.selectedFilters.client
+        : this.users.clientId,
+      group: [],
+    };
+    this.auth.getGroups(obj).subscribe({
+      next: (res: any) => {
+        let checkedGroup = this.selectedFilters?.group
+          ?.filter((group: any) => group.checked)
+          .map((group: any) => group.groupName);
+        const combinedGroups = res?.data?.groupData?.map((groupName: any) => ({
+          groupName: groupName.groupName,
+          checked: checkedGroup?.includes(groupName.groupName) ? true : false,
+          // checked: checkedGroup?.length ? checkedGroup.includes(groupName.groupName) : true,
+        }));
+        this.groupsData = combinedGroups;
+        if (this.searchGroupText.length) {
+          this.filteredGroups = combinedGroups.filter((item: any) =>
+            item.groupName.toLowerCase().includes(this.searchGroupText)
+          );
+        } else {
+          this.filteredGroups = combinedGroups;
+        }
+
+        // Auto-fetch stores when groups are selected
+        const selectedGroups = this.groupsData
+          .filter((group) => group.checked)
+          .map((group) => group.groupName);
+        if (selectedGroups.length > 0) {
+          setTimeout(() => {
+            this.getStore(); // Fetch stores based on selected groups
+          }, 1000);
+        }
+      },
+      error: (err) => {
+        console.error("Failed to fetch groups", err);
+      },
+    });
+  }
+
+  toggleDropdown(
+    type: "country" | "location" | "group" | "store" | "zone"
+  ): void {
+    if (this.dropdownOpen === type) {
+      // If the dropdown is open, close it and avoid resetting the selected values unnecessarily
+      this.dropdownOpen = null;
+    } else {
+      // Open the specific dropdown and handle data fetching only if necessary
+      this.dropdownOpen = type;
+
+      if (type === "country") {
+        // Fetch countries only if not already fetched and no search text exists
+        if (
+          (!this.filteredCountries || this.filteredCountries.length === 0) &&
+          !this.searchCountryText.trim()
+        ) {
+          this.getCountry();
+        }
+      }
+
+      if (type === "group") {
+        // Fetch groups only if there are selected cities and no active search text
+        const selectedCities = this.locations
+          .filter((location) => location.checked)
+          .map((location) => location.city);
+
+        // Fetch groups only if locations are selected, no search text exists, and dropdown is opened
+        if (
+          this.filteredLocations.length > 0 ||
+          (selectedCities.length > 0 && !this.searchGroupText.trim())
+        ) {
+          this.getGroups();
+        } else {
+          this.filteredGroups = []; // Clear groups if no locations are selected
+        }
+      }
+
+      if (type === "store") {
+        // Fetch stores only if not already fetched and no search text is active
+        if (
+          (!this.filteredStores || this.filteredStores.length === 0) &&
+          !this.searchStoreText.trim()
+        ) {
+          this.getStore();
+        }
+      }
+
+      if (type === "zone") {
+        // Fetch stores only if not already fetched and no search text is active
+        if (
+          (!this.filteredZones || this.filteredZones.length === 0) &&
+          !this.searchZoneText.trim()
+        ) {
+          this.getZone();
+        }
+      }
+    }
+  }
+
+  handleGroupDropdownClick(): void {
+    if (this.dropdownOpen === "group") {
+      this.resetSelectedGroups();
+    }
+    this.toggleDropdown("group");
+  }
+
+  resetSelectedGroups(): void {
+    this.filteredGroups.forEach((group) => (group.checked = false));
+    this.searchGroupText = "";
+  }
+  selectedGroupsLabel(): string {
+    const selectedGroups = (this.groupLabel = this.searchGroupText.length
+      ? this.groupsData.filter((group) => group.checked)
+      : this.filteredGroups.filter((group) => group.checked));
+    return selectedGroups.length === 0
+      ? ""
+      : selectedGroups.length === 1
+      ? selectedGroups[0].groupName
+      : `${selectedGroups.length} Clusters`;
+  }
+  removeGroup(): void {
+    this.Reset();
+  }
+
+  isAllGroupsSelected(): boolean {
+    return this.filteredGroups.length
+      ? this.filteredGroups.every((group) => group.checked)
+      : false;
+  }
+
+  getStore(): void {
+    const country = this.countries
+      .filter((country) => country.checked)
+      .map((country) => country.country);
+    const city = this.locations
+      .filter((location) => location.checked)
+      .map((location) => location.city);
+    const group = this.groupsData
+      .filter((group) => group.checked)
+      .map((group) => group.groupName);
+
+    const data = {
+      country,
+      city,
+      clusters: group,
+      clientId: this.users.clientId || this.selectedFilters.client,
+    };
+
+    this.auth.getHeaderStores(data).subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          // Initialize stores from API response
+          this.stores = res.data.storesData;
+          // Check if there are previously selected stores
+          const checkedStoreIds = this.selectedFilters?.stores
+            ? this.selectedFilters.stores
+                .filter((store: any) => store.checked)
+                .map((store: any) => store.storeId)
+            : [];
+          // Sync the `checked` state
+          this.stores.forEach((store) => {
+            store.checked = checkedStoreIds.length
+              ? checkedStoreIds.includes(store.storeId) // Use previous selection
+              : true; // Default to true if no previous selection
+          });
+
+          // Apply search filter if search text is present
+          if (this.searchStoreText.length) {
+            this.filteredStores = this.stores.filter((store) =>
+              store.storeName
+                .toLowerCase()
+                .includes(this.searchStoreText.toLowerCase())
+            );
+          } else {
+            this.filteredStores = [...this.stores];
+          }
+
+          // Update `selectedFilters.stores` to reflect the current state
+          this.selectedFilters.stores = this.filteredStores.map((store) => ({
+            storeId: store.storeId,
+            storeName: store.storeName,
+            checked: store.checked,
+          }));
+          // this.selectedFilters.country = country;
+
+          // Save updated filters to localStorage
+          localStorage.setItem(
+            "header-filters",
+            JSON.stringify(this.selectedFilters)
+          );
+          this.getZone();
+          // Trigger UI change detection
+          this.cd.detectChanges();
+        } else {
+          // Handle empty or error response
+          this.clearStoresState();
+        }
+      },
+      error: (err) => {
+        console.error("Failed to fetch stores", err);
+        this.clearStoresState();
+      },
+    });
+  }
+
+  getZone() {
+    const country = this.countries
+      .filter((country) => country.checked)
+      .map((country) => country.country);
+
+    const city = this.locations
+      .filter((location) => location.checked)
+      .map((location) => location.city);
+
+    const group = this.groupsData
+      .filter((group) => group.checked)
+      .map((group) => group.groupName);
+
+    const storeId = this.filteredStores
+      .filter((group) => group.checked)
+      .map((group) => group.storeId);
+
+    const data = {
+      country,
+      city,
+      clusters: group,
+      clientId: this.users.clientId || this.selectedFilters.client,
+      storeId: storeId,
+    };
+
+    this.auth.getHeaderZone(data).subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          // Initialize zones with Overall Store first, unchecked by default
+          this.zones = [
+            { _id: "overall", tagName: "Overall Store", checked: false },
+            ...(res?.data?.zoneData?.map((zone: any) => ({
+              _id: zone._id,
+              tagName: zone.tagName,
+              checked: false, // initialize unchecked; will update below
+            })) || []),
+          ];
+
+          // Get previously selected zone IDs (checked ones)
+          const checkedStoreIds = this.selectedFilters?.zoneName
+            ? this.selectedFilters.zoneName
+                .filter((zone: any) => zone.checked)
+                .map((zone: any) => zone._id)
+            : [];
+
+          // Sync checked state with previous selections or default:
+          // If no previous selection, Overall Store unchecked, others checked
+          this.zones.forEach((zone) => {
+            if (checkedStoreIds.length) {
+              zone.checked = checkedStoreIds.includes(zone._id);
+            } else {
+              zone.checked = zone._id !== "overall";
+            }
+          });
+
+          // Apply search filter if any
+          if (this.searchZoneText.length) {
+            this.filteredZones = this.zones.filter((zone) =>
+              zone.tagName
+                .toLowerCase()
+                .includes(this.searchZoneText.toLowerCase())
+            );
+          } else {
+            this.filteredZones = [...this.zones];
+          }
+
+          // Update selectedFilters.zoneName with current checked states
+          this.selectedFilters.zoneName = this.filteredZones.map((zone) => ({
+            _id: zone._id,
+            tagName: zone.tagName,
+            checked: zone.checked,
+          }));
+
+          // Save updated filters to localStorage
+          localStorage.setItem(
+            "header-filters",
+            JSON.stringify(this.selectedFilters)
+          );
+
+          // Trigger change detection if needed
+          this.cd.detectChanges();
+        } else {
+          this.clearZoneState();
+        }
+      },
+      error: (err: any) => {
+        console.error("Failed to fetch zones", err);
+        this.clearZoneState();
+      },
+    });
+  }
+
+  private clearZoneState(): void {
+    this.zones = [];
+    this.filteredZones = [];
+    this.selectedFilters.zonename = [];
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+  }
+  // Clear stores state and reset filters
+  private clearStoresState(): void {
+    this.stores = [];
+    this.filteredStores = [];
+    this.selectedFilters.stores = [];
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+  }
+
+  resetSelectedStores(): void {
+    this.filteredStores.forEach((store) => (store.checked = false));
+    this.searchStoreText = "";
+  }
+
+  selectedStoresLabel(): string {
+    const selectedStores = this.searchStoreText.length
+      ? this.stores.filter((store) => store.checked)
+      : this.filteredStores.filter((store) => store.checked);
+    return selectedStores.length === 0
+      ? "0 Stores"
+      : selectedStores.length === 1
+      ? selectedStores[0].storeName
+      : `${selectedStores.length} Stores`;
+  }
+
+  selectedZonesLabel(): string {
+    const selectedStores = this.searchZoneText.length
+      ? this.zones.filter((zone) => zone.checked)
+      : this.filteredZones.filter((zone) => zone.checked);
+    return selectedStores.length === 0
+      ? "0 Zones"
+      : selectedStores.length === 1
+      ? selectedStores[0].tagName
+      : `${selectedStores.length} Zones`;
+  }
+
+  isAllStoresSelected(): boolean {
+    return (
+      this.filteredStores.length > 0 &&
+      this.filteredStores.every((store) => store.checked)
+    );
+  }
+  isAllZonesSelected(): boolean {
+    return this.filteredZones
+      .filter((zone) => zone._id !== "overall")
+      .every((zone) => zone.checked);
+  }
+
+  // Method to handle dropdown item selection
+  updateSelectedStores(): void {
+    this.filteredStores.forEach((store) => {
+      const filteredStore = this.stores.findIndex(
+        (fStore) => fStore.storeId === store.storeId
+      );
+      if (filteredStore != -1) {
+        this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
+      }
+    });
+    // Update selectedFilters based on the current store selection
+    this.selectedFilters.stores = this.stores.filter((store) => store.checked);
+
+    // Update localStorage with the latest selection
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+
+    // Emit updated filters via service
+    // this.gs.dataRangeValue.next(this.selectedFilters);
+
+    // Trigger change detection if necessary
+    if (this.selectedFilters.stores.length > 0) this.getZone();
+    else this.zones = [];
+    this.filteredZones = [];
+    this.selectedFilters.zoneName = [];
+    this.cd.detectChanges();
+  }
+
+  updateSelectedZones(clickedZoneId: string): void {
+    this.filteredZones.forEach((zone) => {
+      const index = this.zones.findIndex((z) => z._id === zone._id);
+      if (index !== -1) {
+        this.zones[index].checked = zone.checked;
+      }
+    });
+
+    const overallZone = this.zones.find((z) => z._id === "overall");
+    const overallChecked = overallZone?.checked ?? false;
+    const othersSelected = this.zones.some(
+      (z) => z._id !== "overall" && z.checked
+    );
+
+    if (clickedZoneId === "overall" && overallChecked) {
+      this.zones = this.zones.map((z) => ({
+        ...z,
+        checked: z._id === "overall",
+      }));
+    }
+    if (clickedZoneId !== "overall" && overallChecked) {
+      if (overallZone) {
+        overallZone.checked = false;
+      }
+    }
+    this.filteredZones = [...this.zones];
+    this.selectedFilters.zoneName = this.zones.filter((z) => z.checked);
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+    this.cd.detectChanges();
+  }
+
+  toggleSelectAllLocations(event: any): void {
+    const isChecked = event.target.checked;
+    this.filteredLocations.forEach(
+      (location) => (location.checked = isChecked)
+    );
+    this.updateSelectedLocations();
+  }
+
+  toggleSelectAllStores(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    // Apply the selection to both filtered and full list of stores
+    this.filteredStores.forEach((store) => (store.checked = checked));
+    this.stores.forEach((store) => {
+      const filteredStore = this.filteredStores.find(
+        (fStore) => fStore.storeId === store.storeId
+      );
+      if (filteredStore) {
+        store.checked = checked; // Sync the checked state with full store list
+      }
+    });
+
+    // Update the selected stores and persist the selection
+    this.updateSelectedStores();
+  }
+
+  toggleSelectAllZones(event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    this.filteredZones.forEach((zone) => {
+      if (zone._id !== "overall") {
+        zone.checked = checked;
+      } else {
+        zone.checked = false;
+      }
+    });
+    this.zones.forEach((zone) => {
+      const match = this.filteredZones.find((fz) => fz._id === zone._id);
+      if (match) {
+        zone.checked = match.checked;
+      }
+    });
+    // Since this is bulk, pass a dummy value — any non-overall zone is fine
+    const anySelectedZone = this.filteredZones.find((z) => z._id !== "overall");
+    const clickedId = anySelectedZone ? anySelectedZone._id : "";
+    this.updateSelectedZones(clickedId);
+  }
+
+  updateSelectedLocations(): void {
+    // When locations are selected, fetch the related groups
+    const selectedCities = this.filteredLocations
+      .filter((location) => location.checked)
+      .map((location) => location.city);
+    this.filteredLocations.forEach((location: any) => {
+      let findLocationIndex = this.locations.findIndex(
+        (loc: any) => loc.city == location.city
+      );
+      if (findLocationIndex != -1) {
+        this.locations[findLocationIndex].checked = location.checked;
+      }
+    });
+    if (selectedCities.length > 0 || !selectedCities.length) {
+      this.selectedFilters.stores = [];
+      this.groupsData = [];
+      this.getGroups(); // Fetch groups based on selected cities
+      // If there are selected groups, fetch the stores based on selected groups
+      this.getStore();
+      this.selectedFilters.location = this.locations;
+    } else {
+      this.filteredGroups = []; // Clear groups if no locations are selected
+      this.selectedFilters.location = [];
+    }
+
+    this.selectedFilters.group = [];
+    this.filteredStores = []; // Reset stores as well
+    this.searchGroupText = "";
+    this.searchStoreText = "";
+    // this.Opendropdown = false;
+  }
+
+  toggleSelectAllGroups(event: any): void {
+    const isChecked = event.target.checked;
+    this.filteredGroups.forEach((group) => (group.checked = isChecked));
+    this.updateSelectedGroups();
+  }
+
+  updateSelectedGroups(): void {
+    // Fetch the relevant stores after groups are selected
+    const selectedGroups = this.filteredGroups
+      .filter((group) => group.checked)
+      .map((group) => group.groupName);
+
+    this.filteredGroups.forEach((group: any) => {
+      let findGroupIndex = this.groupsData.findIndex(
+        (item: any) => item.groupName == group.groupName
+      );
+      if (findGroupIndex != -1) {
+        this.groupsData[findGroupIndex].checked = group.checked;
+      }
+    });
+    if (selectedGroups.length > 0 || !selectedGroups.length) {
+      this.selectedFilters.stores = [];
+      // If there are selected groups, fetch the stores based on selected groups
+      this.getStore();
+      this.selectedFilters.group = this.groupsData;
+    } else {
+      // If no groups are selected, clear the stores list
+      this.filteredStores = [];
+
+      // Also, update localStorage to reflect the cleared store selection
+      this.selectedFilters.stores = [];
+      localStorage.setItem(
+        "header-filters",
+        JSON.stringify(this.selectedFilters)
+      );
+
+      // Emit data via service
+      // this.gs.dataRangeValue.next(this.selectedFilters);
+    }
+
+    // Clear the search store text when groups are updated
+    this.searchStoreText = "";
+  }
+
+  Reset(): void {
+    setTimeout(() => {
+      this.filteredCountries = [];
+      this.filteredGroups = [];
+      this.filteredStores = [];
+      this.filteredLocations = [];
+      this.locations = [];
+      this.groupsData = [];
+      this.stores = [];
+      this.filteredZones = [];
+      this.zones = [];
+      this.countries = [];
+      this.searchLocationText = "";
+      this.searchGroupText = "";
+      this.searchStoreText = "";
+      this.selectedFilters.stores = [];
+      this.selectedFilters.group = [];
+      this.selectedFilters.location = [];
+      this.selectedFilters.country = [];
+      this.selectedFilters.zoneName = [];
+
+      this.getCountry();
+      this.getLocations();
+      this.getStore();
+      this.getGroups();
+
+      localStorage.setItem(
+        "header-filters",
+        JSON.stringify(this.selectedFilters)
+      );
+      window.location.reload();
+      // this.gs.dataRangeValue.next(this.selectedFilters);
+      this.cd.detectChanges();
+
+      this.Opendropdown = false;
+    }, 100);
+  }
+
+  filterLocations(): void {
+    const searchText = this.searchLocationText.toLowerCase();
+
+    if (searchText) {
+      // Preserve the checked state during filtering
+      this.filteredLocations = this.locations
+        .map((location) => ({
+          ...location,
+          checked:
+            this.filteredLocations.find((l) => l.city === location.city)
+              ?.checked || false,
+        }))
+        .filter((location) =>
+          location?.city?.toLowerCase().includes(searchText)
+        );
+    } else {
+      // Restore the original checked state when search text is cleared
+      this.filteredLocations = this.locations.map((location) => ({
+        ...location,
+        checked:
+          this.selectedFilters.location.find(
+            (l: any) => l.city === location.city
+          )?.checked || false,
+      }));
+    }
+  }
+
+  filterGroups(): void {
+    const searchText = this.searchGroupText.toLowerCase();
+
+    if (searchText) {
+      // Preserve the checked state during filtering
+      this.filteredGroups = this.groupsData
+        .map((group) => ({
+          ...group,
+          checked:
+            this.filteredGroups.find((g) => g.groupName === group.groupName)
+              ?.checked || false,
+        }))
+        .filter((group) =>
+          group?.groupName?.toLowerCase().includes(searchText)
+        );
+    } else {
+      // Restore the original checked state when search text is cleared
+      this.filteredGroups = this.groupsData.map((group) => ({
+        ...group,
+        checked:
+          this.selectedFilters.group.find(
+            (g: any) => g.groupName === group.groupName
+          )?.checked || false,
+      }));
+    }
+  }
+
+  filterStores(): void {
+    const searchText = this.searchStoreText.toLowerCase();
+    // Preserve checked states during filtering
+    if (searchText) {
+      // Filter based on search text while preserving checked state
+      this.filteredStores = this.stores
+        .map((store) => ({
+          ...store,
+          // Check if the store is already checked in filteredStores, fallback to original stores' checked state
+          checked:
+            this.selectedFilters.stores.find(
+              (s: any) => s.storeId === store.storeId
+            )?.checked ||
+            store.checked ||
+            false,
+        }))
+        .filter((store) => store.storeName.toLowerCase().includes(searchText));
+    } else {
+      // When the search text is cleared, restore the original list with preserved checked states
+      this.filteredStores = this.stores.map((store) => ({
+        ...store,
+        // Preserve the checked state based on the selected filters
+        checked:
+          this.selectedFilters.stores.find(
+            (s: any) => s.storeId === store.storeId
+          )?.checked ||
+          store.checked ||
+          false,
+      }));
+    }
+  }
+
+  filterZones(): void {
+    const searchText = this.searchZoneText.toLowerCase();
+    // Preserve checked states during filtering
+    if (searchText) {
+      // Filter based on search text while preserving checked state
+      this.filteredZones = this.zones
+        .map((zone) => ({
+          ...zone,
+          // Check if the store is already checked in filteredStores, fallback to original stores' checked state
+          checked:
+            this.selectedFilters.zoneName.find((s: any) => s._id === zone._id)
+              ?.checked ||
+            zone.checked ||
+            false,
+        }))
+        .filter((zone) => zone.tagName.toLowerCase().includes(searchText));
+    } else {
+      // When the search text is cleared, restore the original list with preserved checked states
+      this.filteredZones = this.zones.map((zone) => ({
+        ...zone,
+        // Preserve the checked state based on the selected filters
+        checked:
+          this.selectedFilters.zoneName.find((s: any) => s._id === zone._id)
+            ?.checked ||
+          zone.checked ||
+          false,
+      }));
+    }
+  }
+
+  closeDropdown(): void {
+    this.dropdownOpen = null;
+  }
+
+  @HostListener("document:click", ["$event"])
+  clickOutside(event: MouseEvent): void {
+    const clickedInside = (event.target as HTMLElement).closest(
+      ".dropdown-container"
+    );
+    const clickedoutSide = (event.target as HTMLElement).closest(".dropdown2");
+    if (!clickedInside) {
+      this.closeDropdown();
+    }
+    if (!clickedoutSide) {
+      this.closeDropdown1();
+    }
+  }
+
+  // getCountry(): void {
+  //   // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
+  //   let obj ={
+  //    clientId: this.selectedFilters.client ? this.selectedFilters.client :this.users.clientId,
+  //   }
+  //   this.auth.getCountry(obj).subscribe({
+  //     next: (res: any) => {
+  //       let countryList = this.selectedFilters?.country?.filter((country:any) => country.checked).map((loc:any) => loc.allCountry);
+  //       // Map the fetched countries with default unchecked state
+  //       this.countires = res?.data?.countryData.map((allCountry: any) => ({
+  //         allCountry: allCountry.allCountry,
+  //         checked: countryList?.includes(allCountry.allCountry) ? true : false,
+  //       }));
+
+  //       // Sync the fetched countries with any stored checked values in localStorage
+  //       if (this.selectedFilters.country && Array.isArray(this.selectedFilters.country)) {
+  //         this.filteredCountries = this.countries.map(country => {
+  //           const matchedLocation = this.selectedFilters.country.find((loc: any) => loc.allCountry === country.allCountry);
+  //           return matchedLocation ? { ...country, checked: matchedLocation.checked } : country;
+  //         });
+  //       } else {
+  //         this.filteredCountries = this.countries;
+  //       }
+
+  //       if(this.searchLocationText) {
+  //         this.filteredCountries = this.countries.filter((country:any) => country.city.toLowerCase().includes(this.searchLocationText.toLowerCase()))
+  //       }
+  //       const selectedCountries = this.countries.filter((country) => country.checked).map((country) => country.allCountry);
+  //       if (selectedCountries.length > 0) {
+  //         setTimeout(()=>{
+  //           this.getStore(); // Fetch stores based on selected groups
+  //         },1000)
+  //       }
+  //     },
+  //     error: (err) => {
+  //       console.error("Failed to fetch countries", err);
+  //     },
+  //   });
+  // }
+
+  // selectedCountriesLabel(): string {
+  //   const selectedCountries = this.countryLabel = this.searchLocationText.length ? this.countries
+  //     .filter(country => country.checked).map(country => country.allCountry) :  this.filteredCountries
+  //     .filter(country => country.checked).map(country => country.allCountry);
+  //   return selectedCountries.length === 0
+  //     ? ''
+  //     : selectedCountries.length === 1
+  //     ? selectedCountries[0]
+  //     : `${selectedCountries.length} countries`;
+  // }
+
+  // isAllCountriesSelected(): boolean {
+  //   return this.filteredCountries.every(country => country.checked);
+
+  // }
+  // filterCountries(): void {
+  //   const searchText = this.searchCountryText.toLowerCase();
+
+  //   if (searchText) {
+  //     // Preserve the checked state during filtering
+  //     this.filteredCountries = this.countires
+  //       .map(country => ({
+  //         ...country,
+  //         checked: this.filteredCountries.find(l => l.allCountry === country.allCountry)?.checked || false
+  //       }))
+  //       .filter(location =>
+  //         location?.allCountry?.toLowerCase().includes(searchText)
+  //       );
+  //   } else {
+  //     // Restore the original checked state when search text is cleared
+  //     this.filteredCountries = this.countires.map(country => ({
+  //       ...country,
+  //       checked: this.selectedFilters.country.find((l:any) => l.allCountry === country.allCountry)?.checked || false
+  //     }));
+  //   }
+  // }
+
+  getCountry(): void {
+    let obj = {
+      clientId: this.selectedFilters.client
+        ? this.selectedFilters.client
+        : this.users.clientId,
+    };
+
+    this.auth.getCountry(obj).subscribe({
+      next: (res: any) => {
+        // Extract selected countries from existing filters (if any)
+        let countryList = this.selectedFilters?.country
+          ?.filter((country: any) => country.checked)
+          .map((loc: any) => loc.country);
+
+        // Map API response to frontend model
+        this.countries = res?.data?.countryData.map((item: any) => ({
+          country: item.country,
+          // checked: countryList?.length ? countryList.includes(item.country) : true,
+          // checked: cityList?.length ? cityList.includes(city.city) : true,
+          checked: countryList?.includes(item.country) ? true : false,
+        }));
+        if (
+          this.selectedFilters.country &&
+          Array.isArray(this.selectedFilters.country)
+        ) {
+          this.filteredCountries = this.countries.map((location) => {
+            const matchedLocation = this.selectedFilters.country.find(
+              (loc: any) => loc.country === location.country
+            );
+            return matchedLocation
+              ? { ...location, checked: matchedLocation.checked }
+              : location;
+          });
+        } else {
+          this.filteredCountries = this.countries;
+        }
+
+        // Initially, all countries are visible
+        this.filteredCountries = [...this.countries];
+
+        // If a search text already exists, filter immediately
+        if (this.searchCountryText) {
+          this.filterCountries();
+        }
+
+        // Fetch stores if at least one country is selected
+        let selectedCountries = this.countries.filter(
+          (country) => country.checked
+        );
+        if (selectedCountries.length > 0) {
+          setTimeout(() => {
+            this.getLocations();
+            this.getStore(); // fetch stores
+          }, 1000);
+        }
+      },
+      error: (err) => {
+        console.error("Failed to fetch countries", err);
+      },
+    });
+  }
+
+  selectedCountriesLabel(): string {
+    const selectedCountries = this.searchCountryText.length
+      ? this.filteredCountries
+          .filter((country) => country.checked)
+          .map((country) => country.country)
+      : this.countries
+          .filter((country) => country.checked)
+          .map((country) => country.country);
+
+    return selectedCountries.length === 0
+      ? ""
+      : selectedCountries.length === 1
+      ? selectedCountries[0]
+      : `${selectedCountries.length} countries`;
+  }
+
+  filterCountries(): void {
+    const searchText = this.searchCountryText.toLowerCase();
+
+    if (searchText) {
+      // Filter and preserve checked state
+      this.filteredCountries = this.countries
+        .map((country) => ({
+          ...country,
+          checked:
+            this.filteredCountries.find((c) => c.country === country.country)
+              ?.checked || false,
+        }))
+        .filter((country) =>
+          country.country.toLowerCase().includes(searchText)
+        );
+    } else {
+      // Reset to full list
+      this.filteredCountries = this.countries.map((country: Country) => ({
+        ...country,
+        checked:
+          this.selectedFilters.country?.find(
+            (c: any) => c.country === country.country
+          )?.checked || false,
+      }));
+    }
+  }
+
+  isAllCountriesSelected(): boolean {
+    return (
+      this.filteredCountries.length > 0 &&
+      this.filteredCountries.every((country) => country.checked)
+    );
+  }
+  toggleSelectAllCountries(event: any): void {
+    const isChecked = event.target.checked;
+    this.filteredCountries.forEach((country) => (country.checked = isChecked));
+    this.updateSelectedCountries();
+  }
+
+  updateSelectedCountries(): void {
+    // When locations are selected, fetch the related groups
+    const selectedCountries = this.filteredCountries
+      .filter((country) => country.checked)
+      .map((country) => country.country);
+    this.filteredCountries.forEach((country: any) => {
+      let findCountryIndex = this.countries.findIndex(
+        (loc: any) => loc.country == country.country
+      );
+      if (findCountryIndex != -1) {
+        this.countries[findCountryIndex].checked = country.checked;
+      }
+    });
+    if (selectedCountries.length > 0 || !selectedCountries.length) {
+      this.selectedFilters.stores = [];
+      this.groupsData = [];
+      this.locations = [];
+      this.selectedFilters.zoneName = [];
+      this.getLocations();
+      this.getGroups(); // Fetch groups based on selected cities
+      // If there are selected groups, fetch the stores based on selected groups
+      this.getStore();
+      this.getZone();
+      this.selectedFilters.country = this.filteredCountries;
+    } else {
+      this.filteredGroups = []; // Clear groups if no locations are selected
+      this.selectedFilters.country = [];
+    }
+
+    this.selectedFilters.group = [];
+    this.filteredStores = []; // Reset stores as well
+    this.filteredZones = [];
+    this.searchGroupText = "";
+    this.searchStoreText = "";
+    // this.Opendropdown = false;
+  }
+
+  removeCountry(): void {
+    this.Reset();
+  }
+
+  Apply(): void {
+    // Close the dropdown
+    this.Opendropdown = false;
+
+    // Fetch existing filters from localStorage
+    const headerFilters: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+    this.selectedFilters.store = null;
+
+    // Ensure current selections are reflected
+    this.selectedFilters.country = this.filteredCountries;
+    this.selectedFilters.location = this.locations;
+    this.selectedFilters.group = this.groupsData;
+    this.selectedFilters.stores = headerFilters.stores
+      ? headerFilters.stores
+      : this.stores;
+    this.selectedFilters.zoneName = headerFilters.zoneName
+      ? headerFilters.zoneName
+      : this.zones;
+    // this.selectedFilters.zoneName = this.filteredZones;
+    // Store updated filters back in localStorage
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+    // this.gs.dataRangeValue.next(this.selectedFilters);
+    window.location.reload();
+    // Emit the updated filters via the service
+    // this.gs.dataRangeValue.next(this.selectedFilters);
+    // Trigger refresh if necessary
+    // this.gs.manageRefreshTrigger.next(true);
+    this.cd.detectChanges();
+  }
+}
+interface City {
+  city: string;
+}
+
+interface Location {
+  city: City;
+  checked: boolean;
+}
+interface Country {
+  country: string;
+  checked: boolean;
+}
+