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

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DatepickerComponent } from './datepicker.component';
-
-describe('DatepickerComponent', () => {
-  let component: DatepickerComponent;
-  let fixture: ComponentFixture<DatepickerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DatepickerComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(DatepickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,174 +0,0 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
-import dayjs from "dayjs";
-import "dayjs/locale/en";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-import { LayoutService } from "tango-app-ui-global";
-import { AuthService } from "../../../../services/auth.service";
-import { Subscription } from "rxjs";
-import { GlobalStateService } from "tango-app-ui-global";
-@Component({
-  selector: "lib-datepicker",
-  templateUrl: "./datepicker.component.html",
-  styleUrl: "./datepicker.component.scss",
-})
-export class DatepickerComponent implements OnDestroy, OnInit {
-  dayjs = dayjs;
-  private unsubscribe: Subscription[] = [];
-  isCustomDate = (m: dayjs.Dayjs) => {
-    const isValidDate =  m > this.dayjs();    
-    return isValidDate ? 'invalid-date' : false;
-}
-  selectedDateRange: any = {};
-  selectedFilters: any = {
-    client: null,
-    clientName:null,
-    clients: [],
-    store: null,
-    stores: [],
-    date: null,
-  };
-  users: any;
-  
-
-  constructor(
-    private layout: LayoutService,
-    private gs: GlobalStateService,
-    private service: AuthService,
-    private cd: ChangeDetectorRef
-  ) {}
-
-  ngOnDestroy() {
-    this.unsubscribe.forEach((sb) => sb.unsubscribe());
-  }
-
-  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 headerFilters: any = JSON.parse(
-        localStorage.getItem("header-filters") || "{}"
-      );
-      this.selectedFilters.client = this.users.clientId;
-      this.selectedFilters.clients = [this.users.clientId];
-      this.selectedFilters.clientName = headerFilters.clientName;
-      this.selectedFilters.store = headerFilters.store;
-      this.selectedFilters.date = headerFilters.date;
-
-      this.selectedDateRange = {
-        startDate:this.dayjs( headerFilters?.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-        endDate: this.dayjs( headerFilters?.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
-      };
-   
-      localStorage.setItem(
-        "header-filters",
-        JSON.stringify(this.selectedFilters)
-      );
-      this.gs.dataRangeValue.next(this.selectedFilters);
-    } else {
-      this.selectedFilters.client = this.users.clientId;
-      this.selectedFilters.clients = [this.users.clientId];
-      this.selectedDateRange = {
-        startDate: this.dayjs().subtract(1, "days").format("DD-MM-YYYY"), // Yesterday
-        endDate: this.dayjs().subtract(1, "days").format("DD-MM-YYYY"),   // Yesterday
-      };
-  
-      // Set datetime to yesterday's date as well
-      var datetime = {
-        startDate: this.dayjs().subtract(1, "days").format("YYYY-MM-DD"), // Yesterday
-        endDate: this.dayjs().subtract(1, "days").format("YYYY-MM-DD"),   // Yesterday
-      };
-      // var datetime = {
-      //   startDate: this.dayjs().subtract(1, 'days').format("YYYY-MM-DD"), // Yesterday
-      //   endDate: this.dayjs().subtract(1, 'days').format("YYYY-MM-DD"),   // Yesterday
-      // };
-      this.selectedFilters.date = datetime;
-      localStorage.setItem(
-        "header-filters",
-        JSON.stringify(this.selectedFilters)
-      );
-      this.gs.dataRangeValue.next(this.selectedFilters);
-    }
-    this.getUserInfo(this.selectedFilters.client)
-  }
-  getUserInfo(client:any){
-    let obj ={
-        clientId: client ? client :''
-    }
-    if(client){
-      this.service.getHeaderUsers(obj).subscribe({
-        next: (e) => {
-          localStorage.setItem(
-            "usersEmail-info",
-            JSON.stringify(e?.data?.userEmailData || [])
-          );
-        } 
-      })
-    }
-  }
-  ranges: any = {
-    Today: [this.dayjs(), this.dayjs()],
-    Yesterday: [
-      this.dayjs().subtract(1, "days"),
-      this.dayjs().subtract(1, "days"),
-    ],
-    "This Week": [this.dayjs().subtract(7, "days"), this.dayjs().subtract(1, "days")],
-    "Last Week": [
-      this.dayjs().subtract(14, "days").startOf("days"),
-      this.dayjs().subtract(8, "days").endOf("days"),
-    ],
-   "This Month": [
-    this.dayjs().subtract(30, "days"), // Start date is 30 days before today
-    this.dayjs().subtract(1, "days") // End date is Yesterday
-  ],
-    "Last Month": [
-      this.dayjs().subtract(1, "month").startOf("month"),
-      this.dayjs().subtract(1, "month").endOf("month"),
-    ],
-  };
-
-  onStartDateChange(event: any) {
-    if (this.dayjs(event.startDate).isValid()) {
-      this.isCustomDate = (m: dayjs.Dayjs) => {
-        const isValidDate =
-          m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
-        return isValidDate ? "invalid-date" : false;
-      };
-    }
-  }
-
-  datechange(event: any) {
-    if (event && event.startDate && event.endDate) {
-      if (
-        this.dayjs(event.startDate).isValid() &&
-        this.dayjs(event.endDate).isValid()
-      ) {
-        this.selectedDateRange.startDate = event.startDate
-        this.selectedDateRange.endDate = event.endDate
-        var datetime = {
-          startDate: this.dayjs(event.startDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
-          endDate: this.dayjs(event.endDate,"DD-MM-YYYY").format("YYYY-MM-DD"),
-        };
-        this.selectedFilters.date = datetime;
-      }
-    } else {
-      const headerFilters: any = JSON.parse(
-        localStorage.getItem("header-filters") || "{}"
-      );
-      this.selectedFilters.date = headerFilters.date;
-    }
-   
-    this.selectedFilters.client = this.users.clientId;
-    this.selectedFilters.clients = [this.users.clientId];
-    this.selectedFilters.date = this.selectedFilters.date;
-    this.gs.dataRangeValue.next(this.selectedFilters);
-    localStorage.setItem(
-      "header-filters",
-      JSON.stringify(this.selectedFilters)
-    );
-  }
-}

package/src/lib/modules/layout/toolbar/extended/extended.component.html

@@ -1,100 +0,0 @@
-<!--begin::Label-->
-<span class="fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block">Team:</span>
-<!--end::Label-->
-
-<!--begin::Users-->
-<div class="symbol-group symbol-hover flex-shrink-0 me-2">
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <div class="symbol-label fw-bold bg-warning text-inverse-warning">A</div>
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-1.jpg" alt="" />
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-2.jpg" alt="" />
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <div class="symbol-label fw-bold bg-primary text-inverse-primary">S</div>
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-5.jpg" alt="" />
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <div class="symbol-label fw-bold bg-danger text-inverse-danger">P</div>
-  </div>
-  <!--end::User-->
-
-  <!--begin::User-->
-  <div class="symbol symbol-circle symbol-35px">
-    <img src="./assets/media/avatars/300-20.jpg" alt="" />
-  </div>
-  <!--end::User-->
-</div>
-<!--end::Users-->
-
-<!--begin::Button-->
-<div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite a team member">
-  <a href="#" class="btn btn-sm btn-icon">
-    <lib-keenicon name="plus-square" class="fs-2hx text-success"></lib-keenicon>
-  </a>
-</div>
-<!--end::Button-->
-<!--end::Toolbar start-->
-
-<!--begin::Toolbar end-->
-<div class="d-flex align-items-center overflow-auto">
-  <!--begin::Search-->
-  <div class="position-relative my-1">
-    <lib-keenicon name="magnifier" class="fs-3 text-gray500 position-absolute top-50 translate-middle ps-10"></lib-keenicon>
-    <input type="text" class="form-control form-control-sm form-control-solid w-150px ps-10" name="Search Team" value=""
-      placeholder="Search Team" />
-  </div>
-  <!--end::Search-->
-
-  <!--begin::Separartor-->
-  <div class="bullet bg-secondary h-35px w-1px mx-6"></div>
-  <!--end::Separartor-->
-
-  <!--begin::Label-->
-  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Sort By:</span>
-  <!--end::Label-->
-
-  <!--begin::Select-->
-  <select class="form-select form-select-sm w-125px form-select-solid me-6" data-control="select2"
-    data-placeholder="Latest" data-hide-search="true">
-    <option value=""></option>
-    <option value="1" selected>Latest</option>
-    <option value="2">In Progress</option>
-    <option value="3">Done</option>
-  </select>
-  <!--end::Select-->
-
-  <!--begin::Actions-->
-  <div class="d-flex align-items-center">
-    <button type="button" class="btn btn-sm btn-icon btn-light-primary me-3" data-bs-toggle="tooltip"
-      data-bs-placement="top" title="Enable grid view">
-      <lib-keenicon name="element-11" class="fs-3 text-primary"></lib-keenicon>
-    </button>
-
-    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top"
-      title="Enable row view">
-      <lib-keenicon name="row-horizontal" class="fs-3 text-gray400"></lib-keenicon>
-    </button>
-  </div>
-  <!--end::Actions-->

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ExtendedComponent } from './extended.component';
-
-describe('ExtendedComponent', () => {
-  let component: ExtendedComponent;
-  let fixture: ComponentFixture<ExtendedComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ExtendedComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ExtendedComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'lib-extended',
-  templateUrl: './extended.component.html',
-  styleUrls: ['./extended.component.scss'],
-})
-export class ExtendedComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}

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

@@ -1,311 +0,0 @@
-<div class="me-3">
-    <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>
-      <label class="badge badge-light-default mx-2">{{selectedZonesLabel()}} 
-        <!-- <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>
-</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>
-
-<!-- Zone Dropdown -->
-<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
-    <div class="dropdown-header" (click)="toggleDropdown('zone')">
-        <input 
-            type="text" 
-            class="form-control dropdown-input cursor-pointer"
-            [value]="selectedZonesLabel()"
-            readonly
-            placeholder="Select zones"
-        />
-    </div>
-    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'zone'">
-        <input 
-            type="text" 
-            class="form-control mb-2 dropdown-search " 
-            placeholder="Search zones" 
-            [(ngModel)]="searchZoneText" 
-            (ngModelChange)="filterZones()" 
-        />
-        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
-            <input 
-                class="form-check-input cursor-pointer" 
-                type="checkbox" 
-                id="selectAllZones" 
-                [checked]="isAllZonesSelected()" 
-                (change)="toggleSelectAllZones($event)" 
-            />
-            <label class="form-check-label" for="selectAllZones">
-                Select All
-            </label>
-       </div>
-        <div 
-            class="dropdown-item form-check custom-dropdown-item" 
-            *ngFor="let zone of filteredZones"
-        >
-            <input 
-                class="form-check-input" 
-                type="checkbox" 
-                [id]="zone._id"
-                [(ngModel)]="zone.checked"
-              (change)="updateSelectedZones(zone._id)"
-            />
-            <label class="form-check-label" [for]="zone._id">
-                {{ zone.tagName }}
-            </label>
-        </div>
-    </div>
-</div>
-
-
-
-
-
-    </div>
-</div>