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

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

@@ -0,0 +1,400 @@
+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

@@ -0,0 +1,259 @@
+<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>