tango-app-ui-shared 3.7.3-dev6-demo5 → 3.7.3-dev6-demo6

package/fesm2022/tango-app-ui-shared.mjs

@@ -8392,6 +8392,1084 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'lib-single-clientstore-date', template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"wrapper mx-2\" >\r\n<lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n        (selected)=\"onStoreSelect($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>  \r\n        </div> \r\n<div class=\"d-flex align-items-center  w-150px position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                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\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n     <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [showCustomRangeLabel]=\"false\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\" [singleDatePicker]=\"true\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1}\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\"  [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:120px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.w-150px{width:160px!important}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
 
+class ZoneHeaderComponent {
+    auth;
+    router;
+    gs;
+    cd;
+    dayjs = dayjs;
+    isCustomDate = (m) => {
+        if (m.isSame(this.dayjs(), "day")) {
+            return "invalid-date"; // disable today
+        }
+        return false;
+    };
+    selectedDateRange = { startDate: dayjs().subtract(30, 'days'),
+        endDate: dayjs().subtract(1, "days"), };
+    selectedFilters = {
+        client: null,
+        clientName: null,
+        clients: [],
+        store: null,
+        stores: [],
+        date: null,
+        group: [],
+        location: [],
+        country: [],
+    };
+    Opendropdown = false;
+    dropdownOpen = null; // 'location' or 'group'
+    searchLocationText = "";
+    searchGroupText = "";
+    locations = [];
+    filteredLocations = [];
+    groupsData = [];
+    filteredGroups = [];
+    filteredStores = [];
+    stores = [];
+    searchStoreText = '';
+    clientList = [];
+    selectedClient;
+    locationLabel = [];
+    groupLabel = [];
+    users;
+    url;
+    filteredCountries = [];
+    countryLabel = [];
+    searchCountryText = "";
+    countries = [];
+    constructor(auth, router, gs, cd) {
+        this.auth = auth;
+        this.router = router;
+        this.gs = gs;
+        this.cd = cd;
+    }
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown2')) {
+            this.Opendropdown = false;
+        }
+    }
+    closeDropdown1() {
+        this.Opendropdown = false;
+    }
+    zoneData = [
+        {
+            "storeId": "11-1578",
+            "storeName": "LKST1757"
+        },
+        {
+            "storeId": "11-1919",
+            "storeName": "LKST2329"
+        },
+        {
+            "storeId": "11-2222",
+            "storeName": "LKST2554"
+        },
+        {
+            "storeId": "11-2391",
+            "storeName": "LKST2598"
+        },
+        {
+            "storeId": "11-376",
+            "storeName": "LKST646"
+        },
+        {
+            "storeId": "11-82",
+            "storeName": "LKST84"
+        }
+    ];
+    ngOnInit() {
+        // 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'));
+        this.users = user;
+        this.gs?.manageRefreshTrigger?.subscribe((e) => {
+            if (e) {
+                if (user.userType === 'tango') {
+                    this.getClient();
+                }
+                else {
+                    const storedFilters = localStorage.getItem("header-filters1");
+                    if (storedFilters) {
+                        const headerFilters = JSON.parse(storedFilters);
+                        this.filteredStores = headerFilters?.stores.map((store) => ({
+                            ...store,
+                            checked: store.checked
+                        }));
+                    }
+                }
+            }
+        });
+        // Fetch client data if the user is of type 'tango'
+        if (user.userType === 'tango') {
+            this.getClient();
+        }
+        else {
+            this.getCountry();
+            this.getLocations();
+            this.getGroups();
+            this.getStore();
+            const clientFilters = localStorage.getItem("client-details");
+            if (clientFilters) {
+                const headerclientFilters = JSON.parse(clientFilters);
+                this.selectedClient = {
+                    trafficDateRange: headerclientFilters.trafficDateRange
+                };
+            }
+        }
+        // Load filters from localStorage if they exist
+        const storedFilters = localStorage.getItem("header-filters1");
+        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 || [],
+                country: headerFilters.country || []
+            };
+            // Sync filtered data with stored selections
+            this.filteredCountries = this.syncWithLocalStorage(headerFilters.country);
+            this.filteredLocations = this.syncWithLocalStorage(headerFilters.location);
+            this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
+            this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
+            // Format date range if it exists
+            if (headerFilters.date) {
+                this.selectedDateRange = {
+                    startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                    endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                };
+            }
+            else {
+                this.selectedDateRange = {
+                    startDate: this.dayjs(this.selectedDateRange.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                    endDate: this.dayjs(this.selectedDateRange.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                };
+            }
+            // console.log("3")
+            // Emit data via service and update localStorage
+            this.emitAndStoreFilters();
+        }
+        else {
+            // Initialize empty states if no header filters are present in localStorage
+            this.resetFilters();
+            // console.log("2")
+        }
+    }
+    syncWithLocalStorage(items) {
+        return items
+            ? items.map((item) => ({
+                ...item,
+                checked: item.checked === true
+            }))
+            : [];
+    }
+    emitAndStoreFilters() {
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem("header-filters1", JSON.stringify(this.selectedFilters));
+        // console.log("1")
+    }
+    /**
+     * Reset selectedFilters and all related arrays to empty states
+     */
+    resetFilters() {
+        this.selectedFilters = {
+            client: null,
+            clientName: '',
+            clients: [],
+            store: null,
+            date: {},
+            stores: [],
+            group: [],
+            location: [],
+            country: []
+        };
+        this.filteredLocations = [];
+        this.filteredGroups = [];
+        this.filteredStores = [];
+        this.filteredCountries = [];
+    }
+    getClient() {
+        this.auth.getClients().subscribe({
+            next: (e) => {
+                if (e) {
+                    this.clientList = e.data.result;
+                    const headerFilters = JSON.parse(localStorage.getItem("header-filters1") || "{}");
+                    if (headerFilters.client) {
+                        this.clientList.find((obj) => {
+                            if (obj.clientId === headerFilters.client) {
+                                this.selectedClient = obj;
+                            }
+                        });
+                        // const startDate = this.dayjs(headerFilters.date.startDate);
+                        // const endDate = this.dayjs(headerFilters.date.endDate);
+                        // const differenceInDays = endDate.diff(startDate, 'days');
+                        // if (differenceInDays >= 90 && this.selectedClient?.trafficDateRange === 90) {
+                        //   this.selectedDateRange = {
+                        //     startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").subtract(-90, 'days').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"),
+                        //   };
+                        // }
+                        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.selectedFilters.country = headerFilters.country;
+                        this.gs.dataRangeValue.next(this.selectedFilters);
+                        // console.log("2")
+                        // Ensure locations and groups are loaded before fetching stores
+                        this.getCountry();
+                        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;
+                        this.selectedFilters.country = headerFilters.country;
+                        localStorage.setItem("header-filters1", 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.getCountry();
+                        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.getCountry();
+                    this.getLocations();
+                    this.getGroups();
+                    // Fetch stores only after locations and groups are set
+                    this.getStore();
+                    localStorage.setItem("header-filters1", JSON.stringify(this.selectedFilters));
+                    this.gs.dataRangeValue.next(this.selectedFilters);
+                    // console.log("4")
+                    this.cd.detectChanges();
+                }
+                this.getUserInfo(this.selectedFilters.client);
+            },
+        });
+    }
+    getUserInfo(client) {
+        let obj = {
+            clientId: client ? client : ''
+        };
+        if (client) {
+            this.auth.getHeaderUsers(obj).subscribe({
+                next: (e) => {
+                    localStorage.setItem("usersEmail-info", JSON.stringify(e?.data?.userEmailData || []));
+                }
+            });
+        }
+    }
+    onClientSelect(event) {
+        // 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 = [];
+        this.selectedFilters.country = [];
+        // Fetch header filters from localStorage
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters1") || "{}");
+        // 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;
+        delete headerFilters.country;
+        // Fetch new data based on the new client
+        this.getCountry();
+        this.getLocations();
+        this.getStore();
+        this.getGroups();
+        // Update localStorage with the new client selection and empty filter data
+        localStorage.setItem('header-filters1', JSON.stringify(this.selectedFilters));
+        window.location.reload();
+        // Emit data to the global service
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection to reflect UI changes
+        this.cd.detectChanges();
+    }
+    ranges = {
+        // Today: [dayjs(), dayjs()],
+        Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+        'Last Week': [
+            dayjs().subtract(14, 'days').startOf('day'),
+            dayjs().subtract(8, 'days').endOf('day'),
+        ],
+        'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
+        'Last Month': [
+            dayjs().subtract(1, 'month').startOf('month'),
+            dayjs().subtract(1, 'month').endOf('month'),
+        ],
+    };
+    onStartDateChange(event) {
+        if (this.dayjs(event.startDate).isValid()) {
+            if (this.selectedClient?.traxDateRange === 90) {
+                this.isCustomDate = (m) => {
+                    const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+                    return isValidDate ? "invalid-date" : false;
+                };
+            }
+            else {
+                this.isCustomDate = (m) => {
+                    const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(180, "days"));
+                    return isValidDate ? "invalid-date" : false;
+                };
+            }
+        }
+    }
+    datechange(event) {
+        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-filters1", JSON.stringify(this.selectedFilters));
+                window.location.reload();
+                // this.gs.dataRangeValue.next(this.selectedFilters);
+            }
+        }
+    }
+    opendropdown(e) {
+        e.stopPropagation();
+        this.Opendropdown = !this.Opendropdown;
+    }
+    getLocations() {
+        const country = this.countries
+            .filter(country => country.checked)
+            .map(country => country.country);
+        // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters1") || "{}");
+        let obj = {
+            clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+            country,
+            city: [],
+            group: [],
+        };
+        this.auth.getLocation(obj).subscribe({
+            next: (res) => {
+                let cityList = this.selectedFilters?.location?.filter((location) => location.checked).map((loc) => loc.city);
+                // Map the fetched locations with default unchecked state
+                this.locations = res?.data?.locationData.map((city) => ({
+                    city: city.city,
+                    // checked: cityList?.length ? cityList.includes(city.city) : true,
+                    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) => 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) => 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.getGroups();
+                        this.getStore(); // Fetch stores based on selected groups
+                    }, 1000);
+                }
+                if (!selectedLocations.length && country.length) {
+                    this.getGroups();
+                }
+            },
+            error: (err) => {
+                console.error("Failed to fetch locations", err);
+            },
+        });
+    }
+    isAllLocationsSelected() {
+        return this.filteredLocations.every(location => location.checked);
+    }
+    selectedLocationsLabel() {
+        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} Regions`;
+    }
+    removeLocation() {
+        this.Reset();
+    }
+    getGroups() {
+        const country = this.countries
+            .filter(country => country.checked)
+            .map(country => country.country);
+        let city;
+        city = this.locations
+            .filter(location => location.checked)
+            .map(location => location.city);
+        if (!city.length && country.length) {
+            city = this.locations.map((loc) => loc.city);
+        }
+        const obj = { country, city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
+        this.auth.getGroups(obj).subscribe({
+            next: (res) => {
+                let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
+                const combinedGroups = res?.data?.groupData?.map((groupName) => ({
+                    groupName: groupName.groupName,
+                    checked: checkedGroup?.includes(groupName.groupName) ? true : false,
+                    // checked: checkedGroup?.length ? checkedGroup.includes(groupName.groupName) : true,
+                }));
+                this.groupsData = combinedGroups;
+                if (this.searchGroupText.length) {
+                    this.filteredGroups = combinedGroups.filter((item) => 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) {
+        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 === 'country') {
+                // Fetch countries only if not already fetched and no search text exists
+                if ((!this.filteredCountries || this.filteredCountries.length === 0) && !this.searchCountryText.trim()) {
+                    this.getCountry();
+                }
+            }
+            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() {
+        if (this.dropdownOpen === 'group') {
+            this.resetSelectedGroups();
+        }
+        this.toggleDropdown('group');
+    }
+    resetSelectedGroups() {
+        this.filteredGroups.forEach((group) => (group.checked = false));
+        this.searchGroupText = "";
+    }
+    selectedGroupsLabel() {
+        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() {
+        this.Reset();
+    }
+    isAllGroupsSelected() {
+        return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
+    }
+    getStore() {
+        const country = this.countries
+            .filter(country => country.checked)
+            .map(country => country.country);
+        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 = {
+            country,
+            city,
+            clusters: group,
+            clientId: this.users.clientId || this.selectedFilters.client
+        };
+        this.auth.getHeaderStores(data).subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    // Initialize stores from API response
+                    this.stores = this.zoneData;
+                    // Check if there are previously selected stores
+                    const checkedStoreIds = this.selectedFilters?.stores
+                        ? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
+                        : [];
+                    // Sync the `checked` state
+                    this.stores.forEach(store => {
+                        store.checked = checkedStoreIds.length
+                            ? checkedStoreIds.includes(store.storeId) // Use previous selection
+                            : true; // Default to true if no previous selection
+                    });
+                    // Apply search filter if search text is present
+                    if (this.searchStoreText.length) {
+                        this.filteredStores = this.stores.filter(store => store.storeName.toLowerCase().includes(this.searchStoreText.toLowerCase()));
+                    }
+                    else {
+                        this.filteredStores = [...this.stores];
+                    }
+                    // Update `selectedFilters.stores` to reflect the current state
+                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        storeId: store.storeId,
+                        storeName: store.storeName,
+                        checked: store.checked
+                    }));
+                    // this.selectedFilters.country = country;
+                    // Save updated filters to localStorage
+                    localStorage.setItem('header-filters1', JSON.stringify(this.selectedFilters));
+                    // Trigger UI change detection
+                    this.cd.detectChanges();
+                }
+                else {
+                    // Handle empty or error response
+                    this.clearStoresState();
+                }
+            },
+            error: (err) => {
+                console.error("Failed to fetch stores", err);
+                this.clearStoresState();
+            }
+        });
+    }
+    // Clear stores state and reset filters
+    clearStoresState() {
+        this.stores = [];
+        this.filteredStores = [];
+        this.selectedFilters.stores = [];
+        localStorage.setItem('header-filters1', JSON.stringify(this.selectedFilters));
+    }
+    resetSelectedStores() {
+        this.filteredStores.forEach((store) => (store.checked = false));
+        this.searchStoreText = "";
+    }
+    selectedStoresLabel() {
+        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() {
+        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+    }
+    // Method to handle dropdown item selection
+    updateSelectedStores() {
+        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-filters1', 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) {
+        const isChecked = event.target.checked;
+        this.filteredLocations.forEach((location) => (location.checked = isChecked));
+        this.updateSelectedLocations();
+    }
+    toggleSelectAllStores(event) {
+        const checked = event.target.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() {
+        // When locations are selected, fetch the related groups
+        const selectedCities = this.filteredLocations
+            .filter((location) => location.checked)
+            .map((location) => location.city);
+        this.filteredLocations.forEach((location) => {
+            let findLocationIndex = this.locations.findIndex((loc) => 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) {
+        const isChecked = event.target.checked;
+        this.filteredGroups.forEach((group) => (group.checked = isChecked));
+        this.updateSelectedGroups();
+    }
+    updateSelectedGroups() {
+        // Fetch the relevant stores after groups are selected
+        const selectedGroups = this.filteredGroups
+            .filter((group) => group.checked)
+            .map((group) => group.groupName);
+        this.filteredGroups.forEach((group) => {
+            let findGroupIndex = this.groupsData.findIndex((item) => 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-filters1', 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() {
+        setTimeout(() => {
+            // Clear selected groups, stores, and locations
+            this.filteredCountries = [];
+            this.filteredGroups = [];
+            this.filteredStores = [];
+            this.filteredLocations = []; // Reset locations as well
+            this.locations = [];
+            this.groupsData = [];
+            this.stores = [];
+            this.countries = [];
+            // Clear search input fields
+            this.searchLocationText = "";
+            this.searchGroupText = "";
+            this.searchStoreText = "";
+            this.selectedFilters.stores = [];
+            this.selectedFilters.group = [];
+            this.selectedFilters.location = [];
+            this.selectedFilters.country = [];
+            // Fetch locations, groups, and stores again
+            this.getCountry();
+            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-filters1', 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);
+    }
+    filterLocations() {
+        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) => l.city === location.city)?.checked || false
+            }));
+        }
+    }
+    filterGroups() {
+        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) => g.groupName === group.groupName)?.checked || false
+            }));
+        }
+    }
+    filterStores() {
+        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) => 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) => s.storeId === store.storeId)?.checked || store.checked || false
+            }));
+        }
+    }
+    closeDropdown() {
+        this.dropdownOpen = null;
+    }
+    clickOutside(event) {
+        const clickedInside = event.target.closest(".dropdown-container");
+        const clickedoutSide = event.target.closest(".dropdown2");
+        if (!clickedInside) {
+            this.closeDropdown();
+        }
+        if (!clickedoutSide) {
+            this.closeDropdown1();
+        }
+    }
+    // getCountry(): void {
+    //   // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters1") || "{}");
+    //   let obj ={
+    //    clientId: this.selectedFilters.client ? this.selectedFilters.client :this.users.clientId,
+    //   }
+    //   this.auth.getCountry(obj).subscribe({
+    //     next: (res: any) => {
+    //       let countryList = this.selectedFilters?.country?.filter((country:any) => country.checked).map((loc:any) => loc.allCountry);
+    //       // Map the fetched countries with default unchecked state
+    //       this.countires = res?.data?.countryData.map((allCountry: any) => ({
+    //         allCountry: allCountry.allCountry,
+    //         checked: countryList?.includes(allCountry.allCountry) ? true : false,
+    //       }));
+    //       // Sync the fetched countries with any stored checked values in localStorage
+    //       if (this.selectedFilters.country && Array.isArray(this.selectedFilters.country)) {
+    //         this.filteredCountries = this.countries.map(country => {
+    //           const matchedLocation = this.selectedFilters.country.find((loc: any) => loc.allCountry === country.allCountry);
+    //           return matchedLocation ? { ...country, checked: matchedLocation.checked } : country;
+    //         });
+    //       } else {
+    //         this.filteredCountries = this.countries;
+    //       }
+    //       if(this.searchLocationText) {
+    //         this.filteredCountries = this.countries.filter((country:any) => country.city.toLowerCase().includes(this.searchLocationText.toLowerCase()))
+    //       }
+    //       const selectedCountries = this.countries.filter((country) => country.checked).map((country) => country.allCountry);
+    //       if (selectedCountries.length > 0) {
+    //         setTimeout(()=>{
+    //           this.getStore(); // Fetch stores based on selected groups
+    //         },1000)
+    //       }
+    //     },
+    //     error: (err) => {
+    //       console.error("Failed to fetch countries", err);
+    //     },
+    //   });
+    // }
+    // selectedCountriesLabel(): string {
+    //   const selectedCountries = this.countryLabel = this.searchLocationText.length ? this.countries
+    //     .filter(country => country.checked).map(country => country.allCountry) :  this.filteredCountries
+    //     .filter(country => country.checked).map(country => country.allCountry);
+    //   return selectedCountries.length === 0
+    //     ? ''
+    //     : selectedCountries.length === 1
+    //     ? selectedCountries[0]
+    //     : `${selectedCountries.length} countries`;
+    // }
+    // isAllCountriesSelected(): boolean {
+    //   return this.filteredCountries.every(country => country.checked);
+    // }
+    // filterCountries(): void {    
+    //   const searchText = this.searchCountryText.toLowerCase();
+    //   if (searchText) {
+    //     // Preserve the checked state during filtering
+    //     this.filteredCountries = this.countires
+    //       .map(country => ({
+    //         ...country,
+    //         checked: this.filteredCountries.find(l => l.allCountry === country.allCountry)?.checked || false
+    //       }))
+    //       .filter(location =>
+    //         location?.allCountry?.toLowerCase().includes(searchText)
+    //       );
+    //   } else {
+    //     // Restore the original checked state when search text is cleared
+    //     this.filteredCountries = this.countires.map(country => ({
+    //       ...country,
+    //       checked: this.selectedFilters.country.find((l:any) => l.allCountry === country.allCountry)?.checked || false
+    //     }));
+    //   }
+    // }
+    getCountry() {
+        let obj = {
+            clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+        };
+        this.auth.getCountry(obj).subscribe({
+            next: (res) => {
+                // Extract selected countries from existing filters (if any)
+                let countryList = this.selectedFilters?.country?.filter((country) => country.checked).map((loc) => loc.country);
+                // Map API response to frontend model
+                this.countries = res?.data?.countryData.map((item) => ({
+                    country: item.country,
+                    // checked: countryList?.length ? countryList.includes(item.country) : true,
+                    // checked: cityList?.length ? cityList.includes(city.city) : true,
+                    checked: countryList?.includes(item.country) ? true : false,
+                }));
+                if (this.selectedFilters.country && Array.isArray(this.selectedFilters.country)) {
+                    this.filteredCountries = this.countries.map(location => {
+                        const matchedLocation = this.selectedFilters.country.find((loc) => loc.country === location.country);
+                        return matchedLocation ? { ...location, checked: matchedLocation.checked } : location;
+                    });
+                }
+                else {
+                    this.filteredCountries = this.countries;
+                }
+                // Initially, all countries are visible
+                this.filteredCountries = [...this.countries];
+                // If a search text already exists, filter immediately
+                if (this.searchCountryText) {
+                    this.filterCountries();
+                }
+                // Fetch stores if at least one country is selected
+                let selectedCountries = this.countries.filter((country) => country.checked);
+                if (selectedCountries.length > 0) {
+                    setTimeout(() => {
+                        this.getLocations();
+                        this.getStore(); // fetch stores
+                    }, 1000);
+                }
+            },
+            error: (err) => {
+                console.error("Failed to fetch countries", err);
+            },
+        });
+    }
+    selectedCountriesLabel() {
+        const selectedCountries = this.searchCountryText.length
+            ? this.filteredCountries.filter(country => country.checked).map(country => country.country)
+            : this.countries.filter(country => country.checked).map(country => country.country);
+        return selectedCountries.length === 0
+            ? ''
+            : selectedCountries.length === 1
+                ? selectedCountries[0]
+                : `${selectedCountries.length} countries`;
+    }
+    filterCountries() {
+        const searchText = this.searchCountryText.toLowerCase();
+        if (searchText) {
+            // Filter and preserve checked state
+            this.filteredCountries = this.countries
+                .map(country => ({
+                ...country,
+                checked: this.filteredCountries.find(c => c.country === country.country)?.checked || false
+            }))
+                .filter(country => country.country.toLowerCase().includes(searchText));
+        }
+        else {
+            // Reset to full list
+            this.filteredCountries = this.countries.map((country) => ({
+                ...country,
+                checked: this.selectedFilters.country?.find((c) => c.country === country.country)?.checked || false
+            }));
+        }
+    }
+    isAllCountriesSelected() {
+        return this.filteredCountries.length > 0 && this.filteredCountries.every(country => country.checked);
+    }
+    toggleSelectAllCountries(event) {
+        const isChecked = event.target.checked;
+        this.filteredCountries.forEach((country) => (country.checked = isChecked));
+        this.updateSelectedCountries();
+    }
+    updateSelectedCountries() {
+        // When locations are selected, fetch the related groups
+        const selectedCountries = this.filteredCountries
+            .filter((country) => country.checked)
+            .map((country) => country.country);
+        this.filteredCountries.forEach((country) => {
+            let findCountryIndex = this.countries.findIndex((loc) => loc.country == country.country);
+            if (findCountryIndex != -1) {
+                this.countries[findCountryIndex].checked = country.checked;
+            }
+        });
+        if (selectedCountries.length > 0 || !selectedCountries.length) {
+            this.selectedFilters.stores = [];
+            this.groupsData = [];
+            this.locations = [];
+            this.getLocations();
+            this.getGroups(); // Fetch groups based on selected cities
+            // If there are selected groups, fetch the stores based on selected groups
+            this.getStore();
+            this.selectedFilters.country = this.filteredCountries;
+        }
+        else {
+            this.filteredGroups = []; // Clear groups if no locations are selected
+            this.selectedFilters.country = [];
+        }
+        this.selectedFilters.group = [];
+        this.filteredStores = []; // Reset stores as well
+        this.searchGroupText = '';
+        this.searchStoreText = '';
+        // this.Opendropdown = false;
+    }
+    removeCountry() {
+        this.Reset();
+    }
+    Apply() {
+        // Close the dropdown
+        this.Opendropdown = false;
+        // Fetch existing filters from localStorage
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters1") || "{}");
+        this.selectedFilters.store = null;
+        // Ensure current selections are reflected
+        this.selectedFilters.country = this.filteredCountries;
+        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-filters1", JSON.stringify(this.selectedFilters));
+        // this.gs.dataRangeValue.next(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();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ZoneHeaderComponent, selector: "lib-zone-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2\">{{selectedCountriesLabel()}} \r\n        <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\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <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\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <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\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<!-- <div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                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\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div> -->\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n             <!-- Country Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('country')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedCountriesLabel()\"\r\n            readonly\r\n            placeholder=\"Select country\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'country'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search country\" \r\n            [(ngModel)]=\"searchCountryText\" \r\n            (ngModelChange)=\"filterCountries()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllCountries\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllCountries\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let country of filteredCountries\"\r\n        >\r\n        <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"country.country\" \r\n        [(ngModel)]=\"country.checked\"\r\n        (change)=\"updateSelectedCountries()\" \r\n      />\r\n      <label class=\"form-check-label\" [for]=\"country.country\">\r\n        {{ country.country }}\r\n      </label>\r\n      \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('location')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            readonly\r\n            placeholder=\"Select Region\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search Region\" \r\n            [(ngModel)]=\"searchLocationText\" \r\n            (ngModelChange)=\"filterLocations()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocations\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let location of filteredLocations\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"location.city\" \r\n                [(ngModel)]=\"location.checked\"\r\n                (change)=\"updateSelectedLocations()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"location.city\">\r\n                {{ location.city }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedGroupsLabel()\" readonly\r\n            placeholder=\"Select clusters\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search clusters\" \r\n            [(ngModel)]=\"searchGroupText\" \r\n            (ngModelChange)=\"filterGroups()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroups\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let group of filteredGroups\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"group.groupName\"\r\n                [(ngModel)]=\"group.checked\"\r\n                (change)=\"updateSelectedGroups()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n                {{ group.groupName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedStoresLabel()\"\r\n            readonly\r\n            placeholder=\"Select stores\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search stores\" \r\n            [(ngModel)]=\"searchStoreText\" \r\n            (ngModelChange)=\"filterStores()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStores\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllStores\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let store of filteredStores\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"store.storeId\"\r\n                [(ngModel)]=\"store.checked\"\r\n                (change)=\"updateSelectedStores()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n                {{ store.storeName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.today{pointer-events:none;text-decoration:line-through;color:#a9a9a9}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:70px;min-width:270px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZoneHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-zone-header', template: "<div class=\"\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2\">{{selectedCountriesLabel()}} \r\n        <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\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <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\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <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\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<!-- <div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                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\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div> -->\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n             <!-- Country Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('country')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedCountriesLabel()\"\r\n            readonly\r\n            placeholder=\"Select country\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'country'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search country\" \r\n            [(ngModel)]=\"searchCountryText\" \r\n            (ngModelChange)=\"filterCountries()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllCountries\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllCountries\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let country of filteredCountries\"\r\n        >\r\n        <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"country.country\" \r\n        [(ngModel)]=\"country.checked\"\r\n        (change)=\"updateSelectedCountries()\" \r\n      />\r\n      <label class=\"form-check-label\" [for]=\"country.country\">\r\n        {{ country.country }}\r\n      </label>\r\n      \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('location')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            readonly\r\n            placeholder=\"Select Region\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search Region\" \r\n            [(ngModel)]=\"searchLocationText\" \r\n            (ngModelChange)=\"filterLocations()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocations\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let location of filteredLocations\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"location.city\" \r\n                [(ngModel)]=\"location.checked\"\r\n                (change)=\"updateSelectedLocations()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"location.city\">\r\n                {{ location.city }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedGroupsLabel()\" readonly\r\n            placeholder=\"Select clusters\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search clusters\" \r\n            [(ngModel)]=\"searchGroupText\" \r\n            (ngModelChange)=\"filterGroups()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroups\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let group of filteredGroups\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"group.groupName\"\r\n                [(ngModel)]=\"group.checked\"\r\n                (change)=\"updateSelectedGroups()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n                {{ group.groupName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedStoresLabel()\"\r\n            readonly\r\n            placeholder=\"Select stores\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search stores\" \r\n            [(ngModel)]=\"searchStoreText\" \r\n            (ngModelChange)=\"filterStores()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStores\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllStores\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let store of filteredStores\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"store.storeId\"\r\n                [(ngModel)]=\"store.checked\"\r\n                (change)=\"updateSelectedStores()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n                {{ store.storeName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.today{pointer-events:none;text-decoration:line-through;color:#a9a9a9}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:70px;min-width:270px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], clickOutside: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
 class ToolbarComponent {
     layout;
     router;
@@ -8527,10 +9605,10 @@ class ToolbarComponent {
                 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);
+                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);
+                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` ||
@@ -8538,86 +9616,89 @@ class ToolbarComponent {
                 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);
+                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);
+                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);
+                    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);
+                    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);
+                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);
+                this.setUIProperties(false, false, false, false, false, false, false, false, false, true, false, false, false);
             }
-            else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
-                this.setUIProperties(false, false, false, false, false, true, false, false, false, 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);
+                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);
+                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);
+                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);
+                    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);
+                    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);
+                    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);
+                    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);
+                    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);
+                    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);
+                        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);
+                        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);
+                    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);
+                    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);
+                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);
+                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` ||
@@ -8625,14 +9706,14 @@ class ToolbarComponent {
                 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);
+                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);
+                    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);
+                    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" ||
@@ -8640,42 +9721,45 @@ class ToolbarComponent {
                 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);
+                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);
+                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[2] === "zones" || URL == "/manage/analyse/reports") {
-                this.setUIProperties(false, false, false, false, false, true, false, false, false, false, false, false);
+            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);
+                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);
+                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);
+                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);
+                    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);
+                    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);
+                    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);
+                    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);
+                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'))) {
@@ -8686,10 +9770,10 @@ class ToolbarComponent {
             }
             else {
                 if (url[3] == "plano") {
-                    this.setUIProperties(false, false, false, true, false, false, false, false, false, false, false, false);
+                    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);
+                    this.setUIProperties(false, false, true, false, false, false, false, false, false, false, false, false, false);
                 }
             }
         }
@@ -8697,7 +9781,8 @@ class ToolbarComponent {
         return (this.appPageTitleDisplay &&
             viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
     }
-    setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker, traxwithoutdatepicker, storesSingle, nobWithoutClient, merticsHeader, singleClientStoreDate) {
+    zoneHeader;
+    setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker, traxwithoutdatepicker, storesSingle, nobWithoutClient, merticsHeader, singleClientStoreDate, zoneHeader) {
         this.singleSelect = singleSelect;
         this.multiSelect = multiSelect;
         this.datepicker = datepicker;
@@ -8710,6 +9795,7 @@ class ToolbarComponent {
         this.nobWithoutClient = nobWithoutClient;
         this.merticsHeader = merticsHeader;
         this.singleClientStoreDate = singleClientStoreDate;
+        this.zoneHeader = zoneHeader;
     }
     getUserInfo(client) {
         let obj = {
@@ -8724,11 +9810,11 @@ class ToolbarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1.GlobalStateService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"datepicker && (users.userType ==='client' || users.userType ==='tango')\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"nobWithoutClient\">\r\n    <lib-traffic-nob class=\"d-flex align-items-center me-5\"></lib-traffic-nob>\r\n   </ng-container>\r\n    <ng-container *ngIf=\"merticsHeader\">\r\n    <lib-metrics-header class=\"d-flex align-items-center me-5\"></lib-metrics-header>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"singleClientStoreDate\">\r\n    <lib-single-clientstore-date class=\"d-flex align-items-center me-5\"></lib-single-clientstore-date>\r\n   </ng-container>\r\n\r\n\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store", inputs: ["urlString"] }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "component", type: SingleStoredateComponent, selector: "lib-single-storedate" }, { kind: "component", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate" }, { kind: "component", type: TrafficNobComponent, selector: "lib-traffic-nob" }, { kind: "component", type: MetricsHeaderComponent, selector: "lib-metrics-header" }, { kind: "component", type: SingleClientstoreDateComponent, selector: "lib-single-clientstore-date" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"datepicker && (users.userType ==='client' || users.userType ==='tango')\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"nobWithoutClient\">\r\n    <lib-traffic-nob class=\"d-flex align-items-center me-5\"></lib-traffic-nob>\r\n   </ng-container>\r\n    <ng-container *ngIf=\"merticsHeader\">\r\n    <lib-metrics-header class=\"d-flex align-items-center me-5\"></lib-metrics-header>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"singleClientStoreDate\">\r\n    <lib-single-clientstore-date class=\"d-flex align-items-center me-5\"></lib-single-clientstore-date>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"zoneHeader\">\r\n    <lib-zone-header class=\"d-flex align-items-center me-5\"></lib-zone-header>\r\n   </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store", inputs: ["urlString"] }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "component", type: SingleStoredateComponent, selector: "lib-single-storedate" }, { kind: "component", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate" }, { kind: "component", type: TrafficNobComponent, selector: "lib-traffic-nob" }, { kind: "component", type: MetricsHeaderComponent, selector: "lib-metrics-header" }, { kind: "component", type: SingleClientstoreDateComponent, selector: "lib-single-clientstore-date" }, { kind: "component", type: ZoneHeaderComponent, selector: "lib-zone-header" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"datepicker && (users.userType ==='client' || users.userType ==='tango')\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"nobWithoutClient\">\r\n    <lib-traffic-nob class=\"d-flex align-items-center me-5\"></lib-traffic-nob>\r\n   </ng-container>\r\n    <ng-container *ngIf=\"merticsHeader\">\r\n    <lib-metrics-header class=\"d-flex align-items-center me-5\"></lib-metrics-header>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"singleClientStoreDate\">\r\n    <lib-single-clientstore-date class=\"d-flex align-items-center me-5\"></lib-single-clientstore-date>\r\n   </ng-container>\r\n\r\n\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
+            args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"datepicker && (users.userType ==='client' || users.userType ==='tango')\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\" [urlString]=\"urlString\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"nobWithoutClient\">\r\n    <lib-traffic-nob class=\"d-flex align-items-center me-5\"></lib-traffic-nob>\r\n   </ng-container>\r\n    <ng-container *ngIf=\"merticsHeader\">\r\n    <lib-metrics-header class=\"d-flex align-items-center me-5\"></lib-metrics-header>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"singleClientStoreDate\">\r\n    <lib-single-clientstore-date class=\"d-flex align-items-center me-5\"></lib-single-clientstore-date>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"zoneHeader\">\r\n    <lib-zone-header class=\"d-flex align-items-center me-5\"></lib-zone-header>\r\n   </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
         }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1.GlobalStateService }, { type: AuthService }], propDecorators: { currentLayoutType: [{
                 type: Input
             }], appToolbarLayout: [{
@@ -10967,7 +12053,8 @@ class LayoutModule {
             TraxWithoutdateComponent,
             TrafficNobComponent,
             MetricsHeaderComponent,
-            SingleClientstoreDateComponent], imports: [CommonModule, i2.RouterModule, TranslationModule,
+            SingleClientstoreDateComponent,
+            ZoneHeaderComponent], imports: [CommonModule, i2.RouterModule, TranslationModule,
             InlineSVGModule,
             NgbDropdownModule,
             NgbProgressbarModule,
@@ -11037,7 +12124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TraxWithoutdateComponent,
                         TrafficNobComponent,
                         MetricsHeaderComponent,
-                        SingleClientstoreDateComponent
+                        SingleClientstoreDateComponent,
+                        ZoneHeaderComponent
                     ],
                     imports: [
                         CommonModule,