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

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

@@ -1,1045 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  HostListener,
-  OnInit,
-} from "@angular/core";
-import dayjs from "dayjs";
-import "dayjs/locale/en";
-import { GlobalStateService } from "tango-app-ui-global";
-import { Router } from "@angular/router";
-import { AuthService } from "../../../../services/auth.service";
-
-@Component({
-  selector: 'lib-trax-header',
-  templateUrl: './trax-header.component.html',
-  styleUrl: './trax-header.component.scss'
-})
-export class TraxHeaderComponent 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.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.getLocations();
-      this.getGroups();
-      this.getStore();
-      const clientFilters = localStorage.getItem("client-details");
-      if (clientFilters) {
-        const headerclientFilters = JSON.parse(clientFilters);
-      this.selectedClient = {
-      traxDateRange : headerclientFilters.traxDateRange
-      }
-      }
-      this.getDateRanges();
-//       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) {
-        const startDate = this.dayjs(headerFilters.date.startDate);
-        const endDate = this.dayjs(headerFilters.date.endDate);
-        const differenceInDays = endDate.diff(startDate, 'days');
-        if (differenceInDays >= 7) {
-        this.selectedDateRange = {
-          startDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").subtract(6, "days").format("DD-MM-YYYY"),
-          endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-        };
-      } else{
-        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();
-    }
-    this.getDateRanges();
-    this.getUserInfo(this.selectedFilters?.client)
-    },
-    
-  });
-
-}
-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();
-}
-
-
-getDateRanges(): any {
-
-  if (this.selectedClient?.traxDateRange === 7) {
-    this.ranges = {
-      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'),
-      ],
-    };
-  } else {
-    this.ranges = {
-     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'),
-       ],
-    };
-  }
-
-}
-
-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'),
-//     ],
-// };
-
-resetValidation() {
-  this.isCustomDate = (m: dayjs.Dayjs) => {
-    // Check if the given date is before yesterday
-    return m.isAfter(this.dayjs(), 'day') ? 'invalid-date' : false;
-  };
-}
-  onStartDateChange(event: any) {
-    if (this.dayjs(event.startDate).isValid()) {
-
-      if(this.selectedClient?.traxDateRange === 7){
-        this.isCustomDate = (m: dayjs.Dayjs) => {
-          const isValidDate =
-            m > this.dayjs() || m > this.dayjs(event.startDate.add(6, "days"));
-          return isValidDate ? "invalid-date" : false;
-        };
-      } else {
-      this.isCustomDate = (m: dayjs.Dayjs) => {
-        const isValidDate =
-          m > this.dayjs() || m > this.dayjs(event.startDate.add(30, "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)
-        );
-        this.resetValidation();
-        // window.location.reload()
-      this.gs.dataRangeValue.next(this.selectedFilters);
-      }
-    } 
- 
-  }
-  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 || [])
-          );
-        } 
-      })
-    }
-  }
-  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.getHeadertraxStores(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 =[];
-        this.selectedFilters.stores = this.filteredStores.map(store => ({
-          ...store,
-          checked: false
-        }));
-        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;
-}
-
-
-
-// limitedRanges = {
-//   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'),
-//   ],
-// };
-
-// ranges: any; // This will hold the currently active range options
-
-// setRangesBasedOnRoute(): void {
-//   this.url = this.router.url.split("?")[0].split('/');
-//   // Change "your-specific-route" to the route path where you want the limited options
-//   if (this.url[2]==='trax') {
-//     this.ranges = this.limitedRanges;
-    // const storedFilters = localStorage.getItem("header-filters");
-    // if (storedFilters) {
-    //   const headerFilters = JSON.parse(storedFilters);
-    //   const startDate = this.dayjs(headerFilters.date.startDate);
-    //   const endDate = this.dayjs(headerFilters.date.endDate);
-    //   const differenceInDays = endDate.diff(startDate, 'days');
-    //   this.selectedFilters.client = headerFilters.clientId;
-    //   this.selectedFilters.clientName = headerFilters.clientName;
-    // // Set the date range based on the condition
-    // if (differenceInDays >= 7) {
-    //   // Use the stored date range if it is 7 days or more
-    //   this.selectedDateRange = {
-    //     startDate: this.dayjs(headerFilters.date.endDate).subtract(6, "days").format("DD-MM-YYYY"), 
-    //     endDate: this.dayjs(headerFilters.date.endDate).format("DD-MM-YYYY"),  
-    //   };
-    //   var datetime = {
-    //     startDate: this.dayjs(headerFilters.date.endDate).subtract(6, "days").format("YYYY-MM-DD"), 
-    //     endDate: this.dayjs(headerFilters.date.endDate).format("YYYY-MM-DD"),  
-    //   };
-    // } else {
-    //   this.selectedDateRange = {
-    //     startDate: this.dayjs(headerFilters.date.startDate).format("DD-MM-YYYY"), 
-    //     endDate: this.dayjs(headerFilters.date.endDate).format("DD-MM-YYYY"),  
-    //   };
-    //   var datetime = {
-    //     startDate: this.dayjs(headerFilters.date.startDate).format("YYYY-MM-DD"), 
-    //     endDate: this.dayjs(headerFilters.date.endDate).format("YYYY-MM-DD"),  
-    //   };
-    // }
-    // this.selectedFilters =storedFilters;
-    // this.selectedFilters.date = datetime;
-//       localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
-//   }
-//   } else {
-//     this.ranges = this.fullRanges;
-//   }
-// }