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

package/src/lib/modules/layout/toolbar/toolbar.component.ts

@@ -1,400 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
-import { Subject, Subscription, window } from "rxjs";
-import {
-  GlobalStateService,
-  LayoutService,
-  PageInfoService,
-} from "tango-app-ui-global";
-import { ILayout, LayoutType } from "tango-app-ui-global";
-import { AuthService } from "../../../services/auth.service";
-
-@Component({
-  selector: "lib-toolbar",
-  templateUrl: "./toolbar.component.html",
-  styleUrls: ["./toolbar.component.scss"],
-})
-export class ToolbarComponent implements OnInit, OnDestroy {
-  private unsubscribe: Subscription[] = [];
-
-  // Public props
-  @Input() currentLayoutType: LayoutType | null;
-  @Input() appToolbarLayout:
-    | "classic"
-    | "accounting"
-    | "extended"
-    | "reports"
-    | "saas";
-
-  // toolbar
-  appToolbarDisplay: boolean;
-  appToolbarContainer: "fixed" | "fluid";
-  appToolbarContainerCSSClass: string = "";
-  appToolbarFixedDesktop: boolean;
-  appToolbarFixedMobile: boolean;
-  appPageTitleDisplay: boolean;
-
-  // page title
-  appPageTitleDirection: string = "";
-  appPageTitleCSSClass: string = "";
-  appPageTitleBreadcrumb: boolean;
-  appPageTitleDescription: boolean;
-  querParams: any;
-  singleSelect: boolean;
-  multiSelect: boolean;
-  datepicker: boolean;
-  singleSelectdatepicker: boolean;
-  singleStore: boolean;
-  headervalue: any;
-  storeId: any;
-  users: any;
-  selectedFilters: any = {
-    client: null,
-    clients: [],
-    store: null,
-    stores: [],
-    date: null,
-  };
-  trafficdatepicker: boolean;
-  traxdatepicker: boolean;
-  urlString:any;
-  traxwithoutdatepicker:boolean;
-  storesSingle:boolean;
-  nobWithoutClient:boolean;
-  merticsHeader: boolean;
-  singleClientStoreDate:boolean;
-  constructor(
-    private layout: LayoutService,
-    private router: Router,
-    private route: ActivatedRoute,
-    public gs: GlobalStateService,
-    private auth : AuthService
-  ) {}
-
-  ngOnInit(): void {
-    if ("user-info" in localStorage) {
-      const userData: any = JSON.parse(
-        localStorage.getItem("user-info") || "{}"
-      );
-      this.users = userData;
-    }
-    if ("header-filters" in localStorage) {
-      const data: any = JSON.parse(
-        localStorage.getItem("header-filters") || "{}"
-      );
- this.client = data?.client;
-    }
-    this.getUserInfo(this.client ? this.client : this.users.client)
-    this.showPageTitle();
-    const subscr = this.layout.layoutConfigSubject
-      .asObservable()
-      .subscribe((config: ILayout) => {
-        this.updateProps(config);
-      });
-    this.unsubscribe.push(subscr);
-  }
-
-  updateProps(config: ILayout) {
-    this.appToolbarDisplay = this.layout.getProp(
-      "app.toolbar.display",
-      config
-    ) as boolean;
-    if (!this.appToolbarDisplay) {
-      return;
-    }
-
-    this.appPageTitleDisplay = this.layout.getProp(
-      "app.pageTitle.display",
-      config
-    ) as boolean;
-    this.appToolbarContainer = this.layout.getProp(
-      "app.toolbar.container",
-      config
-    ) as "fluid" | "fixed";
-    this.appToolbarContainerCSSClass =
-      this.appToolbarContainer === "fixed"
-        ? "container-xxl"
-        : "container-fluid";
-    const containerClass = this.layout.getProp(
-      "app.toolbar.containerClass",
-      config
-    ) as string;
-    if (containerClass) {
-      this.appToolbarContainerCSSClass += ` ${containerClass}`;
-    }
-
-    this.appToolbarFixedDesktop = this.layout.getProp(
-      "app.toolbar.fixed.desktop",
-      config
-    ) as boolean;
-    if (this.appToolbarFixedDesktop) {
-      document.body.setAttribute("data-kt-app-toolbar-fixed", "true");
-    }
-
-    this.appToolbarFixedMobile = this.layout.getProp(
-      "app.toolbar.fixed.mobile",
-      config
-    ) as boolean;
-    if (this.appToolbarFixedMobile) {
-      document.body.setAttribute("data-kt-app-toolbar-fixed-mobile", "true");
-    }
-
-    // toolbar
-    this.appPageTitleDirection = this.layout.getProp(
-      "app.pageTitle.direction",
-      config
-    ) as string;
-    this.appPageTitleCSSClass = this.layout.getProp(
-      "app.pageTitle.class",
-      config
-    ) as string;
-    this.appPageTitleBreadcrumb = this.layout.getProp(
-      "app.pageTitle.breadCrumb",
-      config
-    ) as boolean;
-    this.appPageTitleDescription = this.layout.getProp(
-      "app.pageTitle.description",
-      config
-    ) as boolean;
-
-    document.body.setAttribute("data-kt-app-toolbar-enabled", "true");
-  }
-  private readonly destroy$ = new Subject();
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-    this.destroy$.next(true);
-    this.destroy$.complete();
-    // localStorage.removeItem("usersEmail-info");
-  }
-  client:any;
-  urlString1:any;
-  showPageTitle() {
-    // debugger
-    let URL: string = "";
-    if ("header-filters" in localStorage) {
-      const data: any = JSON.parse(
-        localStorage.getItem("header-filters") || "{}"
-      );
-     const store =  this.route.snapshot.queryParamMap as any      
-      this.storeId =  data?.store;
-
-      if(store?.params?.['storeId']){
-        this.storeId = store.params['storeId']
-        data.store = store.params['storeId']
-        localStorage.setItem('header-filters', JSON.stringify(data))
-      }
-      const currentUrl = this.router.url;
-      const updatedUrl = currentUrl.replace(
-        /\/manage\/stores\/\d+-\d+\//,
-        `/manage/stores/`
-      );
-      URL = updatedUrl;
-      // this.router.navigate([URL])
-    }
-  const url = URL.split("?")[0].split('/');
-  this.urlString = URL;
-   this.urlString1= URL.split('/');
-  if (this.users?.userType === "tango") {
-    if (url[2] == "settings" || URL == "/manage/users/client"  ||
-    URL == "/manage/stores" ||  URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" ||
-    URL == "/manage/stores/addition-method" ||
-    URL == "/manage/stores/add-single-store" || URL === "/manage/trax/gallery" || URL == "/notifications/alerts?tab=alert" ||  URL == "/notifications/alerts?tab=download" || URL === "/manage/trax/audit" ) {
-      this.setUIProperties(true, false, false, false, false,false,false,false,false,false,false,false,false);
-    }  else if (url[3] == "edge-app") {
-      this.setUIProperties(false, false, false, false, true,false,false,false,false,false,false,false,false);
-    } else if (
-      URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` ||  URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
-      URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
-      URL == `/manage/stores/zones?storeId=${this.storeId}` ||
-      URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
-      // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
-      URL == `/manage/stores/mat?storeId=${this.storeId}`
-    ) {
-      this.setUIProperties(false, false, false, true, false,false,false,false,false,false,false,false,false);
-    }else if (URL == "/tickets/stores" || URL == "/manage/users/tango/audit") {
-      this.setUIProperties(false, false, true, false, false, false, false, false, false, false,false,false,false);
-    }
-    else if(url[2] === 'controlcenter'){
-      if(URL == `/manage/controlcenter/playback?storeId=${this.storeId}`|| URL == `/manage/controlcenter/playback`){
-        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false,false,false);
-      }
-      else {
-      this.setUIProperties(false, false, false, false,true,false,false,false,false,false,false,false,false);
-    } 
-  }else if (URL == "/profile" || url[2]==="data-mismatch" || url[2]==="employeetraining"  
-       || URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] ==="tickets" && url[2] === "audit") || url.includes('list')) {
-      this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false,false,false);
-    } else if(URL == "/manage/traffic/nob"){
-      this.setUIProperties(false, false, false, false,false,false,false,false,false,true,false,false,false);
-    } else if(url[2] === "zones"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,false,true);
-    } else if(url[2] === "traffic" || URL == "/manage/analyse/reports"){
-        this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false,false,false);
-    }else if(URL == "/manage/employee-metrics/beeahGroup" || URL == "/manage/employee-metrics/beeahLive"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,true,false);
-    } else if(url[2] === "employee-metrics" && url[3] === "heatmap"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false,false,false);
-    } else if(url[2] === "employee-metrics"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,true,false,false);
-    } else if(url[2] == 'trax'){
-      if(url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order')|| url[3] == 'create-task' || url[3] == 'task-configure')) {
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,false,false);
-      } 
-      // else if(url[2] == 'trax' && (url.includes('taskinfo'))){
-      //   this.setUIProperties(false, false, false, false,false,false,false,true,false,false,false,false);
-      // }
-      else if(url[2] == 'trax' && url.includes('start')){
-        this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false,false,false);
-      }
-      else if(url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery')) || url.includes('audit')) {
-        this.setUIProperties(true, false, false, false,false,false,false,false,false,false,false,false,false);
-      }   else {
-      this.setUIProperties(false, false, false, false,false,false,true,false,false,false,false,false,false);
-      }
-    } else if(url[2] == 'planogram'){
-          if(url[2] == 'planogram' && (url.includes('verification'))){
-        this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false,false,false); 
-      }
-      if(url[2] == 'planogram' && (url.includes('layout-builder'))) {
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,false,false);
-      }else {
-        if(url[2] == 'planogram' && url[3] == 'manage-planogram') {
-          this.setUIProperties(false,false,false,false,false,false,false,false,false,false,false,false,false);
-        }
-        else {
-          this.setUIProperties(true, false, false, false,false,false,false,false,false,false,false,false,false);
-        }
-      }
-    } else{
-      if(url[3] == 'plano') {
-        this.setUIProperties(false, false, false, true, false,false,false,false,false,false,false,false,false);
-      }
-      else {
-      this.setUIProperties(false, false, false, false,true,false,false,false,false,false,false,false,false);
-      }
-    }
-  } else {
-      if(URL ==='/manage/planogram/manage-planograms/verification'){
-        this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false,false,false); 
-      }
-    if (url[3] == "edge-app" ) {
-      this.setUIProperties(false, false, true, false, false,false,false,false,false,false,false,false,false);
-    } else if (
-      URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` ||  URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
-      URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
-      URL == `/manage/stores/zones?storeId=${this.storeId}` ||
-      URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
-      // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
-      URL == `/manage/stores/mat?storeId=${this.storeId}`
-    ) {
-      this.setUIProperties(false, false, false, true, false,false,false,false,false,false,false,false,false);
-    } else if(url[2] === 'controlcenter'){
-      if(URL == `/manage/controlcenter/playback?storeId=${this.storeId}`|| URL == `/manage/controlcenter/playback`){
-        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false,false,false);
-      }
-      else {
-      this.setUIProperties(false, false, false, false,true,false,false,false,false,false,false,false,false);
-    } 
-  } else if (URL == "/profile" || URL == "/manage/users/client" || URL == "/manage/users/tango" ||
-    URL == "/manage/stores" ||  URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" || url[2] == "settings" || 
-    URL == "/manage/stores/addition-method" ||
-    URL == "/manage/stores/add-single-store" || url[2]==="data-mismatch" || url[2]==="employeetraining"  || URL == "/notifications/alerts?tab=alert" ||  URL == "/notifications/alerts?tab=download"
-     || URL == "/manage/users/tango" || URL === "/manage/controlcenter" || URL ==='manage/controlcenter/template-manager' || url[2]==='controlcenter' ||  url.includes('list')) {
-      this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false,false,false);
-    }else if(URL == "/manage/traffic/nob"){
-      this.setUIProperties(false, false, false, false,false,false,false,false,false,true,false,false,false);
-    }else if(url[2] === "zones"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,false,true);
-    } else if(url[2] === "traffic" || URL == "/manage/analyse/reports"){
-        this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false,false,false);
-    }else if(URL == "/manage/employee-metrics/beeahGroup" || URL == "/manage/employee-metrics/beeahLive"){
-         this.setUIProperties(false, false, false, true, false,false,false,false,false,false,false,false,false);
-    } else if(url[2] === "employee-metrics" && url[3] === "heatmap"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,true,false,false,false,false);
-    } else if(url[2] === "employee-metrics"){
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,true,false,false);
-    } else if(url[2] == 'trax'){
-      if(url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
-        this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,false,false);
-      }
-      // else if(url[2] == 'trax' && (url.includes('taskinfo'))){
-      //   this.setUIProperties(false, false, false, false,false,false,false,true,false,false,false,false);
-      // }
-      else if(url[2] == 'trax' && url.includes('start')){
-        this.setUIProperties(false, false, false, false, false,false,false,false,false,false,false,false,false);
-      }
-      else if(url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery') || url.includes('audit'))) {
-        this.setUIProperties(true, false, false, false,false,false,false,false,false,false,false,false,false);
-      }   else {
-      this.setUIProperties(false, false, false, false,false,false,true,false,false,false,false,false,false);
-      }
-    } else if(url[2] == 'planogram'){
-      this.setUIProperties(false, false, false, false,false,true,false,false,false,false,false,false,false); 
-      //  if(url[2] == 'planogram' && (url.includes('verification'))){
-      // }
-      // if(url[2] == 'planogram' && (url.includes('layout-builder'))) {
-      //   this.setUIProperties(false, false, false, false,false,false,false,false,false,false,false,false);
-      // } else {
-      //   this.setUIProperties(true, false, false, false,false,false,false,false,false,false,false,false);
-      // }
-    }else {
-      if (url[3] == "plano") {
-        this.setUIProperties(false,false,false,true,false,false,false,false,false,false,false,false,false);
-      } else {
-        this.setUIProperties(false, false, true, false, false,false,false,false,false,false,false,false,false);
-      }
-    }
-  }
-  const viewsWithPageTitles = ["classic", "reports", "saas"];
-  return (
-    this.appPageTitleDisplay &&
-    viewsWithPageTitles.some((t) => t === this.appToolbarLayout)
-  );
-}
-zoneHeader:any;
-setUIProperties(
-  singleSelect: boolean,
-  multiSelect: boolean,
-  datepicker: boolean,
-  singleStore: boolean,
-  singleSelectdatepicker: boolean,
-  trafficdatepicker:boolean,
-  traxdatepicker:boolean,
-  traxwithoutdatepicker:boolean,
-  storesSingle:boolean,
-  nobWithoutClient:boolean,
-  merticsHeader:boolean,
-  singleClientStoreDate:boolean,
-  zoneHeader:boolean
-): void {
-  this.singleSelect = singleSelect;
-  this.multiSelect = multiSelect;
-  this.datepicker = datepicker;
-  this.singleStore = singleStore;
-  this.singleSelectdatepicker = singleSelectdatepicker;
-  this.trafficdatepicker = trafficdatepicker;
-  this.traxdatepicker = traxdatepicker;
-  this.traxwithoutdatepicker = traxwithoutdatepicker;
-  this.storesSingle = storesSingle;
-  this.nobWithoutClient = nobWithoutClient;
-  this.merticsHeader = merticsHeader;
-this.singleClientStoreDate = singleClientStoreDate;
-this.zoneHeader = zoneHeader;
-}
-
-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 || []) 
-        );
-      } 
-    })
-  }
-}
-}

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

@@ -1,259 +0,0 @@
-<div class="">
-    <label *ngIf="selectedCountriesLabel()" class="badge badge-light-default mx-2">{{selectedCountriesLabel()}} 
-        <span class="cursor-pointer" (click)="removeCountry()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg></span>
-    </label>
-    <label *ngIf="selectedLocationsLabel()" class="badge badge-light-default mx-2">{{selectedLocationsLabel()}} 
-        <span class="cursor-pointer" (click)="removeLocation()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg></span>
-    </label>
-    <label *ngIf="selectedGroupsLabel()"  class="badge badge-light-default mx-2">{{selectedGroupsLabel()}} 
-        <span class="cursor-pointer" (click)="removeGroup()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
-        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg></span>
-    </label>
-    <label  class="badge badge-light-default">{{selectedStoresLabel()}}</label>
-</div>
-
-
-<div class="wrapper me-3" *ngIf="(gs.userAccess | async)?.userType === 'tango'">
-<lib-select [items]="clientList" [multi]="false" [searchField]="'clientName'" [disabled]="false" [idField]="'clientId'"
-(selected)="onClientSelect($event)" [selectedValues]="[selectedClient]"></lib-select>
-</div>
-<!-- <div class="d-flex align-items-center position-relative my-1">
-    <span class="svg-icon svg-icon-1 position-absolute ms-3">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-            <path
-                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
-                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
-        </svg>
-    </span>
-    <input class="fx-date-range form-control ps-14" style="min-width: 260px !important;" type="text" matInput
-        ngxDaterangepickerMd [drops]="'down'" [opens]="'right'" [ranges]="ranges" [showCustomRangeLabel]="true" [autoApply]="true"
-        [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off"
-        [(ngModel)]="selectedDateRange" (startDateChanged)="onStartDateChange($event)" [isCustomDate]="isCustomDate"
-        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
-        (datesUpdated)="datechange($event)" name="daterange" [readonly]="true" />
-</div> -->
-<div class="position-relative">
-    <button type="button" (click)="opendropdown($event)"  class="btn btn-default mx-2 rounded-3 text-nowrap border-val">
-        <!-- <span class="me-2">Filter</span> -->
-        <svg class="pl-3" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#344054" stroke-width="2" stroke-linecap="round"
-                stroke-linejoin="round" />
-        </svg>
-    </button>
-
-    <div *ngIf="Opendropdown" class="card p-5 dropdown2 position-absolute z-1 end-0" style="z-index: 1 !important;" (clickOutside)="closeDropdown1()">
-        <div class="dropdown-title d-flex justify-content-between mb-2">Filter Options
-            <button class="btn btn-outline w-25 ms-3 btn-resize" (click)="Reset()"> Reset </button>
-            <button class="btn btn-primary w-25  btn-resize" (click)="Apply()">Apply</button>
-        </div>
-
-             <!-- Country Dropdown -->
-<div class="dropdown-container" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('country')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer" 
-            [value]="selectedCountriesLabel()"
-            readonly
-            placeholder="Select country"
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'country'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search" 
-            placeholder="Search country" 
-            [(ngModel)]="searchCountryText" 
-            (ngModelChange)="filterCountries()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllCountries" 
-                [checked]="isAllCountriesSelected()" 
-                (change)="toggleSelectAllCountries($event)" 
-            />
-            <label class="form-check-label" for="selectAllCountries">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let country of filteredCountries"
-        >
-        <input 
-        class="form-check-input cursor-pointer" 
-        type="checkbox" 
-        [id]="country.country" 
-        [(ngModel)]="country.checked"
-        (change)="updateSelectedCountries()" 
-      />
-      <label class="form-check-label" [for]="country.country">
-        {{ country.country }}
-      </label>
-      
-        </div>
-    </div>
-</div>
-
-     <!-- Location Dropdown -->
-<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('location')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer" 
-            [value]="selectedLocationsLabel()"
-            readonly
-            placeholder="Select Region"
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'location'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search" 
-            placeholder="Search Region" 
-            [(ngModel)]="searchLocationText" 
-            (ngModelChange)="filterLocations()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllLocations" 
-                [checked]="isAllLocationsSelected()" 
-                (change)="toggleSelectAllLocations($event)" 
-            />
-            <label class="form-check-label" for="selectAllLocations">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let location of filteredLocations"
-        >
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                [id]="location.city" 
-                [(ngModel)]="location.checked"
-                (change)="updateSelectedLocations()" 
-            />
-            <label class="form-check-label" [for]="location.city">
-                {{ location.city }}
-            </label>
-        </div>
-    </div>
-</div>
-
-<!-- Group Dropdown -->
-<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('group')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer" 
-            [value]="selectedGroupsLabel()" readonly
-            placeholder="Select clusters"
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'group'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search" 
-            placeholder="Search clusters" 
-            [(ngModel)]="searchGroupText" 
-            (ngModelChange)="filterGroups()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllGroups" 
-                [checked]="isAllGroupsSelected()" 
-                (change)="toggleSelectAllGroups($event)" 
-            />
-            <label class="form-check-label" for="selectAllGroups">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let group of filteredGroups"
-        >
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                [id]="group.groupName"
-                [(ngModel)]="group.checked"
-                (change)="updateSelectedGroups()" 
-            />
-            <label class="form-check-label" [for]="group.groupName">
-                {{ group.groupName }}
-            </label>
-        </div>
-    </div>
-</div>
-
-
-<!-- Store Dropdown -->
-<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('store')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer"
-            [value]="selectedStoresLabel()"
-            readonly
-            placeholder="Select stores"
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'store'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search " 
-            placeholder="Search stores" 
-            [(ngModel)]="searchStoreText" 
-            (ngModelChange)="filterStores()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllStores" 
-                [checked]="isAllStoresSelected()" 
-                (change)="toggleSelectAllStores($event)" 
-            />
-            <label class="form-check-label" for="selectAllStores">
-                Select All
-            </label>
-        </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let store of filteredStores"
-        >
-            <input 
-                class="form-check-input" 
-                type="checkbox" 
-                [id]="store.storeId"
-                [(ngModel)]="store.checked"
-                (change)="updateSelectedStores()" 
-            />
-            <label class="form-check-label" [for]="store.storeId">
-                {{ store.storeName }}
-            </label>
-        </div>
-    </div>
-</div>
-
-
-
-
-
-
-
-    </div>
-</div>