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

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

@@ -0,0 +1,899 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  HostListener,
+  OnDestroy,
+  OnInit,
+} from "@angular/core";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import { GlobalStateService } from "tango-app-ui-global";
+import { NavigationEnd, Router } from "@angular/router";
+import { AuthService } from "../../../../services/auth.service";
+@Component({
+  selector: 'lib-traffic-nob',
+  templateUrl: './traffic-nob.component.html',
+  styleUrl: './traffic-nob.component.scss'
+})
+export class TrafficNobComponent 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: [],
+  };
+  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;
+  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('.dropdown1')) {
+      this.Opendropdown = false;
+    }
+  }
+  closeDropdown1(){
+    this.Opendropdown = false;
+  }
+  ngOnInit(): void {
+    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.getLocations();
+      this.getGroups();
+      this.getStore();
+//       this.emitAndStoreFilters();
+// console.log("1")
+    }
+   
+    // 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 || []
+      };
+  
+      // Sync filtered data with stored selections
+      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: []
+    };
+    this.filteredLocations = [];
+    this.filteredGroups = [];
+    this.filteredStores = [];
+  }
+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;
+            }
+          });
+        
+          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.gs.dataRangeValue.next(this.selectedFilters);
+          // console.log("2")
+                 // Ensure locations and groups are loaded before fetching stores
+ 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;
+        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.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.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();
+    }
+    },
+  });
+}
+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 = [];
+
+  // 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;
+  
+  // Fetch new data based on the new client
+  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()) {
+     
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate =
+          m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "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 headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
+    let obj ={
+     clientId: this.selectedFilters.client ? this.selectedFilters.client :this.users.clientId,
+     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?.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.getStore(); // Fetch stores based on selected groups
+          },1000)
+        }
+      },
+      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 city = this.locations
+      .filter(location => location.checked)
+      .map(location => location.city);
+    const obj = { 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,
+        }));
+        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: '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 === '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 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 = { city, clusters:group, clientId: this.users.clientId ? this.users.clientId : this.selectedFilters.client };
+  
+    this.auth.getHeaderStores(data).subscribe({
+      next: (res: any) => {
+        if(res &&res.code ===200){
+        this.stores = res.data.storesData;      
+        // Retrieve checked store IDs from selectedFilters
+        const checkedStoreIds = this.selectedFilters?.stores
+          ? this.selectedFilters.stores.filter((store: any) => store.checked).map((store: any) => store.storeId)
+          : [];
+
+        this.stores.forEach(store => {
+          if (checkedStoreIds.includes(store.storeId)) {
+            store.checked = true; // Sync the checked state with full store list
+          }
+        });
+        
+  
+        // Map the stores and retain the 'checked' status
+        if(this.searchStoreText.length) {
+          this.filteredStores = this.stores?.filter(store => store.storeName.toLowerCase().includes(this.searchStoreText));
+        }
+        else {
+          this.filteredStores = this.stores;
+        }
+        // Ensure selectedFilters is in sync with filteredStores
+        if (!this.selectedFilters.stores || !this.selectedFilters.stores.length) {
+          this.stores.forEach(store => {
+            store.checked = true; // Sync the checked state with full store list
+          });
+          
+          // No previously selected stores, mark all as checked
+       this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
+            ...store,
+            checked: true
+          }));
+        } else {
+          // Update selectedFilters to reflect current state of stores
+          this.selectedFilters.stores = this.filteredStores.map(store => ({
+            ...store,
+            checked: store.checked
+          }));
+        }
+        // Update localStorage with the latest selectedFilters
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+  
+        // Emit data via service
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection to reflect changes in the UI
+        this.cd.detectChanges();
+      } else {
+        this.stores =[];
+        this.selectedFilters.stores=[];
+        this.filteredStores =[];
+        this.selectedFilters.stores = this.filteredStores.map(store => ({
+          ...store,
+          checked: false
+        }));
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+      }
+    },
+      error: (err) => {
+        this.stores =[];   
+        this.selectedFilters.stores = this.filteredStores.map(store => ({
+          ...store,
+          checked: false
+        }));
+        this.filteredStores =[];
+        this.selectedFilters.stores=[];
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        console.error("Failed to fetch stores", err);
+      },
+    });
+  }
+  
+
+  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();
+    // if (!isChecked) {
+    //   this.selectedFilters.stores =[];
+    //    // If there are selected groups, fetch the stores based on selected groups
+    //    this.getStore();
+    //  }
+  }
+
+  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.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 =[];
+
+ 
+  // Fetch locations, groups, and stores again
+  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)
+  }
+  
+  
+  
+  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.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));
+    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();
+  }
+  
+  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(
+      ".dropdown1"
+    );
+    if (!clickedInside) {
+      this.closeDropdown();
+    }
+    if(!clickedoutSide) {
+      this.closeDropdown1();
+    }
+
+  }
+}
+interface City {
+  city: string;
+}
+
+interface Location {
+  city: City;
+  checked: boolean;
+}
+
+