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

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

@@ -1,1200 +0,0 @@
-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;
-}