tango-app-ui-shared 3.5.1-task.1 → 3.5.1-task.2

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

@@ -0,0 +1,1200 @@
+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-traffic-header",
+  templateUrl: "./traffic-header.component.html",
+  styleUrl: "./traffic-header.component.scss",
+})
+export class TrafficHeaderComponent 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: [],
+  };
+  Opendropdown: boolean = false;
+  dropdownOpen: string | null = null; // 'location' or 'group'
+  searchLocationText: string = "";
+  searchGroupText: string = "";
+  locations: any[] = [];
+  filteredLocations: any[] = [];
+  groupsData: any[] = [];
+  filteredGroups: any[] = [];
+  filteredStores: any[] = [];
+  stores:any[] = []
+  searchStoreText: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
+          }));
+        }
+        }
+      }
+    });
+ 
+    // 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 || []
+      };
+  
+      // 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);
+  
+      // 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: []
+    };
+    this.filteredLocations = [];
+    this.filteredGroups = [];
+    this.filteredStores = [];
+    this.filteredCountries = [];
+  }
+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.clients;
+          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.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 = headerFilters.clients;
+      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;
+        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();
+      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 = [];
+
+
+  // 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;
+
+  
+  // 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} locations`;
+  }
+
+  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'): 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();
+      } 
+    }
+    }
+  }
+  
+  
+  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));
+  
+          // 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();
+      }
+    });
+  }
+  
+  // 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`;
+  }
+
+  isAllStoresSelected(): boolean {
+    return this.filteredStores.length > 0 && this.filteredStores.every(store => store.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
+  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();
+  }
+
+  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(()=>{
+     // Clear selected groups, stores, and locations
+  this.filteredCountries = []
+  this.filteredGroups = [];
+  this.filteredStores = [];
+  this.filteredLocations = []; // Reset locations as well
+this.locations =[];this.groupsData =[]; this.stores =[];
+  // Clear search input fields
+  this.searchLocationText = "";
+  this.searchGroupText = "";
+  this.searchStoreText = "";
+this.selectedFilters.stores =[];
+this.selectedFilters.group =[];
+this.selectedFilters.location =[];
+this.selectedFilters.country =[];
+
+ 
+  // Fetch locations, groups, and stores again
+  this.getCountry();
+  this.getLocations();
+  this.getStore();
+  this.getGroups();
+  // Reset the filters in selectedFilters
+
+
+  // // Once stores are fetched, mark all as checked
+  // setTimeout(() => {
+  //   this.filteredStores = this.stores.map(store => ({
+  //     ...store,
+  //     checked: true  // Mark all stores as checked
+  //   }));
+
+  //   // Sync selectedFilters with the updated store state
+  //   this.selectedFilters.stores = this.filteredStores.map(store => ({
+  //     ...store,
+  //     checked: true
+  //   }));
+
+    // Update localStorage with the latest selectedFilters
+    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+ window.location.reload()
+    // Emit the reset filters to update other components if needed
+    // this.gs.dataRangeValue.next(this.selectedFilters);
+    // Trigger change detection
+    this.cd.detectChanges();
+   // Adding a slight delay to ensure stores are fetched first
+ 
+  
+    // Close dropdown after reset if necessary
+    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
+      }));
+    }
+  }
+
+  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.getLocations();
+      this.getGroups(); // Fetch groups based on selected cities
+      // If there are selected groups, fetch the stores based on selected groups
+      this.getStore();
+      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.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;
+    // 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;
+}