tango-app-ui-shared 3.3.0-beta.9 → 3.3.1-beta.1

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

@@ -131,6 +131,9 @@ class AuthService {
     getHeaderStores(data) {
         return this.http.post(`${this.trafficApiUrl}/headerStores_v1`, data);
     }
+    getBrandDetails(id) {
+        return this.http.get(`${this.clientApiUrl}/client-details/${id}`);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, deps: [{ token: i1.Router }, { token: i1$1.GlobalStateService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
@@ -2788,7 +2791,10 @@ class DatepickerComponent {
             this.dayjs().subtract(14, "days").startOf("days"),
             this.dayjs().subtract(8, "days").endOf("days"),
         ],
-        "This Month": [this.dayjs().startOf("month"), this.dayjs().endOf("month")],
+        "This Month": [
+            this.dayjs().subtract(30, "days"),
+            this.dayjs().subtract(1, "days") // End date is Yesterday
+        ],
         "Last Month": [
             this.dayjs().subtract(1, "month").startOf("month"),
             this.dayjs().subtract(1, "month").endOf("month"),
@@ -2940,7 +2946,10 @@ class DateSingleSelectComponent {
             this.dayjs().subtract(14, "days").startOf("days"),
             this.dayjs().subtract(8, "days").endOf("days"),
         ],
-        "This Month": [this.dayjs().startOf("month"), this.dayjs().endOf("month")],
+        "This Month": [
+            this.dayjs().subtract(30, "days"),
+            this.dayjs().subtract(1, "days") // End date is Yesterday
+        ],
         "Last Month": [
             this.dayjs().subtract(1, "month").startOf("month"),
             this.dayjs().subtract(1, "month").endOf("month"),
@@ -3083,7 +3092,10 @@ class SingleStoreComponent {
         'Yesterday': [this.dayjs().subtract(1, 'days'), this.dayjs().subtract(1, 'days')],
         'This Week': [this.dayjs().subtract(6, 'days'), this.dayjs()],
         'Last Week': [this.dayjs().subtract(14, 'days').startOf('days'), this.dayjs().subtract(8, 'days').endOf('days')],
-        'This Month': [this.dayjs().startOf('month'), this.dayjs().endOf('month')],
+        "This Month": [
+            this.dayjs().subtract(30, "days"),
+            this.dayjs().subtract(1, "days") // End date is Yesterday
+        ],
         'Last Month': [
             this.dayjs().subtract(1, 'month').startOf('month'),
             this.dayjs().subtract(1, 'month').endOf('month')
@@ -3142,7 +3154,8 @@ class TrafficHeaderComponent {
         const isValidDate = m > this.dayjs();
         return isValidDate ? "invalid-date" : false;
     };
-    selectedDateRange = {};
+    selectedDateRange = { startDate: dayjs().subtract(30, 'days'),
+        endDate: dayjs().subtract(1, "days"), };
     selectedFilters = {
         client: null,
         clientName: null,
@@ -3166,6 +3179,9 @@ class TrafficHeaderComponent {
     searchStoreText = '';
     clientList = [];
     selectedClient;
+    locationLabel = [];
+    groupLabel = [];
+    users;
     constructor(auth, gs, cd) {
         this.auth = auth;
         this.gs = gs;
@@ -3181,46 +3197,88 @@ class TrafficHeaderComponent {
         this.Opendropdown = false;
     }
     ngOnInit() {
+        // this.Reset();
         const user = JSON.parse(localStorage.getItem('user-info'));
-        if (user.userType === 'tango')
+        this.users = user;
+        // Fetch client data if the user is of type 'tango'
+        if (user.userType === 'tango') {
             this.getClient();
-        // Load filters from localStorage if they exist
-        if ("header-filters" in localStorage) {
-            const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-            // Load and set selected filters from localStorage
-            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;
+        }
+        else {
             this.getLocations();
+            this.getGroups();
             this.getStore();
-            // Sync selected locations, groups, and stores with filtered data
-            this.filteredLocations = headerFilters.location
-                ? headerFilters.location.map((item) => ({ ...item, checked: item.checked === true }))
-                : [];
-            this.filteredGroups = headerFilters.group
-                ? headerFilters.group.map((item) => ({ ...item, checked: item.checked === true }))
-                : [];
-            this.filteredStores = headerFilters.stores
-                ? headerFilters.stores.map((item) => ({ ...item, checked: item.checked === true }))
-                : [];
-            // Format date range
+        }
+        // Load filters from localStorage if they exist
+        const storedFilters = localStorage.getItem("header-filters");
+        if (storedFilters) {
+            const headerFilters = JSON.parse(storedFilters);
+            // Initialize selectedFilters with defaults or existing values
+            this.selectedFilters = {
+                client: headerFilters.client || null,
+                clientName: headerFilters.clientName || '',
+                clients: headerFilters.clients || [],
+                store: headerFilters.store || null,
+                date: headerFilters.date || {},
+                stores: headerFilters.stores || [],
+                group: headerFilters.group || [],
+                location: headerFilters.location || []
+            };
+            // Sync filtered data with stored selections
+            this.filteredLocations = this.syncWithLocalStorage(headerFilters.location);
+            this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
+            this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
+            // Format date range if it exists
             if (headerFilters.date) {
                 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"),
                 };
             }
-            // Update localStorage with current selectedFilters
-            localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
-            // Emit data via service
-            this.gs.dataRangeValue.next(this.selectedFilters);
+            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"),
+                };
+            }
+            // Emit data via service and update localStorage
+            this.emitAndStoreFilters();
+        }
+        else {
+            // Initialize empty states if no header filters are present in localStorage
+            this.resetFilters();
         }
     }
+    syncWithLocalStorage(items) {
+        return items
+            ? items.map((item) => ({
+                ...item,
+                checked: item.checked === true
+            }))
+            : [];
+    }
+    emitAndStoreFilters() {
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+    }
+    /**
+     * Reset selectedFilters and all related arrays to empty states
+     */
+    resetFilters() {
+        this.selectedFilters = {
+            client: null,
+            clientName: '',
+            clients: [],
+            store: null,
+            date: {},
+            stores: [],
+            group: [],
+            location: []
+        };
+        this.filteredLocations = [];
+        this.filteredGroups = [];
+        this.filteredStores = [];
+    }
     getClient() {
         this.auth.getClients().subscribe({
             next: (e) => {
@@ -3257,11 +3315,21 @@ class TrafficHeaderComponent {
                         this.gs.dataRangeValue.next(this.selectedFilters);
                         this.cd.detectChanges();
                     }
+                    // Ensure locations and groups are loaded before fetching stores
+                    this.getLocations();
+                    this.getGroups();
+                    // Fetch stores only after locations and groups are set
+                    this.getStore();
                 }
                 else {
                     this.selectedClient = this.clientList[0];
                     this.selectedFilters.client = this.selectedClient.clientId;
                     this.selectedFilters.clientName = this.selectedClient.clientName;
+                    // Ensure locations and groups are loaded before fetching stores
+                    this.getLocations();
+                    this.getGroups();
+                    // Fetch stores only after locations and groups are set
+                    this.getStore();
                     localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                     this.gs.dataRangeValue.next(this.selectedFilters);
                     this.cd.detectChanges();
@@ -3270,13 +3338,33 @@ class TrafficHeaderComponent {
         });
     }
     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.locations = [];
+        // Fetch header filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-        this.selectedFilters = headerFilters;
+        // Update the selected filters with the new client
         this.selectedFilters.client = this.selectedClient.clientId;
         this.selectedFilters.clientName = this.selectedClient.clientName;
-        this.gs.dataRangeValue.next(this.selectedFilters);
+        // Remove old store, group, and location data from the header filters
+        delete headerFilters.stores;
+        delete headerFilters.groups;
+        delete headerFilters.locations;
+        // Fetch new data based on the new client
+        this.getLocations();
+        this.getStore();
+        this.getGroups();
+        // Update localStorage with the new client selection and empty filter data
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        // Emit data to the global service
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection to reflect UI changes
         this.cd.detectChanges();
     }
     ranges = {
@@ -3290,7 +3378,10 @@ class TrafficHeaderComponent {
             this.dayjs().subtract(14, "days").startOf("days"),
             this.dayjs().subtract(8, "days").endOf("days"),
         ],
-        "This Month": [this.dayjs().startOf("month"), this.dayjs().endOf("month")],
+        "This Month": [
+            this.dayjs().subtract(30, "days"),
+            this.dayjs().subtract(1, "days") // End date is Yesterday
+        ],
         "Last Month": [
             this.dayjs().subtract(1, "month").startOf("month"),
             this.dayjs().subtract(1, "month").endOf("month"),
@@ -3358,17 +3449,32 @@ class TrafficHeaderComponent {
         return this.filteredLocations.every(location => location.checked);
     }
     selectedLocationsLabel() {
-        const selectedLocations = this.filteredLocations
+        const selectedLocations = this.locationLabel = this.filteredLocations
             .filter(location => location.checked)
             .map(location => location.city);
         return selectedLocations.length === 0
             ? ''
             : selectedLocations.length === 1
                 ? selectedLocations[0]
-                : `${selectedLocations.length} locations selected`;
-    }
-    getGroups(cities) {
-        const obj = { city: cities, clientId: this.selectedFilters.client, group: [] };
+                : `${selectedLocations.length} locations`;
+    }
+    // removeLocation(): void {
+    //   // Update checked state for locations to false
+    //   this.filteredLocations = this.filteredLocations.map(location => ({
+    //     ...location,
+    //     checked: false
+    //   }));
+    //   // Optionally update locationLabel if it needs to reflect the current filtered state
+    //   this.locationLabel = this.filteredLocations.filter(location => location.checked);
+    //   // Optionally update selectedFilters if needed
+    //   this.selectedFilters.location = this.filteredLocations;
+    //   this.filteredStores = [];
+    //   this.getStore()
+    //   // Update localStorage with the latest selectedFilters
+    //   localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+    // }
+    getGroups() {
+        const obj = { city: [], clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
         this.auth.getGroups(obj).subscribe({
             next: (res) => {
                 let checkedGroup = this.filteredGroups.filter((group) => group.checked).map((group) => group.groupName);
@@ -3391,28 +3497,24 @@ class TrafficHeaderComponent {
     }
     toggleDropdown(type) {
         if (this.dropdownOpen === type) {
+            // If the dropdown is open, close it and avoid resetting the selected values unnecessarily
             this.dropdownOpen = null;
-            if (type === 'group') {
-                this.resetSelectedGroups();
-            }
-            if (type === 'store') {
-                this.resetSelectedStores();
-            }
         }
         else {
+            // Open the specific dropdown and handle data fetching only if necessary
             this.dropdownOpen = type;
             if (type === 'group') {
+                // Fetch groups only if there are selected cities and no active search text
                 const selectedCities = this.filteredLocations
                     .filter((location) => location.checked)
                     .map((location) => location.city);
-                if (selectedCities.length > 0) {
-                    if (!this.searchGroupText.trim().length) {
-                        this.getGroups(selectedCities);
-                    }
+                if (selectedCities.length > 0 && !this.searchGroupText.trim()) {
+                    this.getGroups();
                 }
             }
-            if (type == 'store') {
-                if (!this.searchStoreText.trim().length) {
+            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();
                 }
             }
@@ -3429,52 +3531,72 @@ class TrafficHeaderComponent {
         this.searchGroupText = "";
     }
     selectedGroupsLabel() {
-        const selectedGroups = this.filteredGroups.filter((group) => group.checked);
+        const selectedGroups = this.groupLabel = this.filteredGroups.filter((group) => group.checked);
         return selectedGroups.length === 0
-            ? "No groups selected"
+            ? ""
             : selectedGroups.length === 1
                 ? selectedGroups[0].groupName
-                : `${selectedGroups.length} groups selected`;
-    }
+                : `${selectedGroups.length} groups`;
+    }
+    // removeGroup(): void {
+    //   // Set all groups to unchecked
+    //   this.filteredGroups = this.filteredGroups.map(group => ({
+    //     ...group,
+    //     checked: false
+    //   }));
+    //   // Optionally, update the groupLabel if needed
+    //   this.groupLabel = this.filteredGroups.filter(group => group.checked);
+    //   // Optionally, if you need to reflect these changes in selectedFilters
+    //   this.selectedFilters.group = this.filteredGroups;
+    //   this.filteredStores = [];
+    //   this.getStore()
+    //   // Update localStorage with the latest selectedFilters
+    //   localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+    // }
     isAllGroupsSelected() {
         return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
     }
     getStore() {
-        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
         const city = this.filteredLocations
             .filter(location => location.checked)
             .map(location => location.city);
         const group = this.filteredGroups
             .filter(group => group.checked)
             .map(group => group.groupName);
-        const data = { city, group, clientId: headerFilters.client };
+        const data = { city, group, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId };
         this.auth.getHeaderStores(data).subscribe({
             next: (res) => {
-                const checkedStoreIds = this.filteredStores
-                    .filter(store => store.checked)
-                    .map(store => store.storeId);
-                this.stores = res.data.storesData;
-                this.filteredStores = this.stores.map((item) => ({
-                    ...item,
-                    checked: checkedStoreIds.length ? checkedStoreIds.includes(item.storeId) : false
+                this.stores = res.data.storesData; // Get stores from response
+                // Retrieve checked store IDs from selectedFilters
+                const checkedStoreIds = this.selectedFilters.stores
+                    ? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
+                    : [];
+                // Map the stores and retain the 'checked' status
+                this.filteredStores = this.stores.map((store) => ({
+                    ...store,
+                    checked: checkedStoreIds.includes(store.storeId)
                 }));
-                // if(!city.length && !group.length){
-                //   this.selectedFilters.stores = this.filteredStores.map((item) => ({
-                //     ...item,
-                //     checked: true}));
-                //   localStorage.setItem(
-                //     "header-filters",
-                //     JSON.stringify(this.selectedFilters)
-                //   );
-                //   this.gs.dataRangeValue.next(this.selectedFilters);
-                // }
-                // Ensure selected stores are reflected
-                this.stores.forEach(store => {
-                    const storedStore = this.selectedFilters.stores.find((s) => s.storeId === store.storeId);
-                    if (storedStore) {
-                        store.checked = storedStore.checked;
-                    }
-                });
+                // Ensure selectedFilters is in sync with filteredStores
+                if (!this.selectedFilters.stores || !this.selectedFilters.stores.length) {
+                    // No previously selected stores, mark all as checked
+                    this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        ...store,
+                        checked: true
+                    }));
+                }
+                else {
+                    // Update selectedFilters to reflect current state of stores
+                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        ...store,
+                        checked: store.checked
+                    }));
+                }
+                // Update localStorage with the latest selectedFilters
+                localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+                // Emit data via service
+                this.gs.dataRangeValue.next(this.selectedFilters);
+                // Trigger change detection to reflect changes in the UI
+                this.cd.detectChanges();
             },
             error: (err) => {
                 console.error("Failed to fetch stores", err);
@@ -3488,20 +3610,24 @@ class TrafficHeaderComponent {
     selectedStoresLabel() {
         const selectedStores = this.filteredStores.filter((store) => store.checked);
         return selectedStores.length === 0
-            ? "No Stores selected"
+            ? "0 Stores"
             : selectedStores.length === 1
                 ? selectedStores[0].storeName
-                : `${selectedStores.length} Stores selected`;
+                : `${selectedStores.length} Stores`;
     }
     isAllStoresSelected() {
         return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
     }
     // Method to handle dropdown item selection
     updateSelectedStores() {
-        // Update logic for store selection
-        // Ensure this logic does not reset the store values unintentionally
+        // Update selectedFilters based on the current store selection
         this.selectedFilters.stores = this.filteredStores.filter(store => store.checked);
+        // Update localStorage with the latest selection
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        // Emit updated filters via service
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection if necessary
+        this.cd.detectChanges();
     }
     toggleSelectAllLocations(event) {
         const isChecked = event.target.checked;
@@ -3519,7 +3645,7 @@ class TrafficHeaderComponent {
             .filter((location) => location.checked)
             .map((location) => location.city);
         if (selectedCities.length > 0) {
-            this.getGroups(selectedCities); // Fetch groups based on selected cities
+            this.getGroups(); // Fetch groups based on selected cities
         }
         else {
             this.filteredGroups = []; // Clear groups if no locations are selected
@@ -3527,6 +3653,7 @@ class TrafficHeaderComponent {
         this.filteredStores = []; // Reset stores as well
         this.searchGroupText = '';
         this.searchStoreText = '';
+        // this.Opendropdown = false;
     }
     toggleSelectAllGroups(event) {
         const isChecked = event.target.checked;
@@ -3539,47 +3666,62 @@ class TrafficHeaderComponent {
             .filter((group) => group.checked)
             .map((group) => group.groupName);
         if (selectedGroups.length > 0) {
-            this.getStore(); // Fetch stores based on selected groups
+            // If there are selected groups, fetch the stores based on selected groups
+            this.getStore();
+            this.selectedFilters.group = this.filteredGroups;
         }
         else {
-            this.filteredStores = []; // Clear stores if no groups are selected
+            // If no groups are selected, clear the stores list
+            this.filteredStores = [];
+            // Also, update localStorage to reflect the cleared store selection
+            this.selectedFilters.stores = [];
+            localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+            // Emit data via service
+            this.gs.dataRangeValue.next(this.selectedFilters);
         }
+        // Clear the search store text when groups are updated
         this.searchStoreText = '';
     }
     Reset() {
-        // Clear groups and stores
+        // Clear selected groups, stores, and locations
         this.filteredGroups = [];
         this.filteredStores = [];
-        // Reset locations and checkboxes
-        this.filteredLocations.forEach(location => location.checked = false);
+        this.filteredLocations = []; // Reset locations as well
+        // Clear search input fields
         this.searchLocationText = "";
         this.searchGroupText = "";
         this.searchStoreText = "";
-        this.groupsData.forEach(group => group.checked = false);
-        // Update stores based on conditions
-        if (this.filteredLocations.every(location => !location.checked) &&
-            this.filteredGroups.every(group => !group.checked)) {
-            this.filteredStores = this.stores.map(store => ({
-                ...store,
-                checked: true
-            }));
-        }
-        else {
-            this.filteredStores = this.stores.map(store => ({
-                ...store,
-                checked: false
-            }));
-        }
-        // Update localStorage and emit data
-        const resetFilters = {
+        // Fetch locations, groups, and stores again
+        this.getLocations();
+        this.getStore();
+        this.getGroups();
+        // Reset the filters in selectedFilters
+        this.selectedFilters = {
             ...this.selectedFilters,
-            stores: this.filteredStores,
+            stores: [],
             group: [],
-            location: []
+            location: [] // Clear locations selection
         };
-        localStorage.setItem("header-filters", JSON.stringify(resetFilters));
-        this.gs.dataRangeValue.next(resetFilters);
-        this.Opendropdown = false; // Close dropdown if needed
+        // // Once stores are fetched, mark all as checked
+        // setTimeout(() => {
+        //   this.filteredStores = this.stores.map(store => ({
+        //     ...store,
+        //     checked: true  // Mark all stores as checked
+        //   }));
+        //   // Sync selectedFilters with the updated store state
+        //   this.selectedFilters.stores = this.filteredStores.map(store => ({
+        //     ...store,
+        //     checked: true
+        //   }));
+        // Update localStorage with the latest selectedFilters
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        // 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;
     }
     Apply() {
         // Close the dropdown
@@ -3601,32 +3743,58 @@ class TrafficHeaderComponent {
     filterLocations() {
         const searchText = this.searchLocationText.toLowerCase();
         if (searchText) {
-            // Filter based on search text
-            this.filteredLocations = this.locations.filter((location) => location.city.toLowerCase().includes(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 {
-            // Reset to full array if search text is empty
-            this.filteredLocations = [...this.locations];
+            // 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() {
-        if (this.searchGroupText) {
-            this.filteredGroups = this.groupsData.filter((group) => group.groupName
-                .toLowerCase()
-                .includes(this.searchGroupText.toLowerCase()));
+        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 {
-            this.filteredGroups = this.groupsData;
+            // 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() {
-        if (this.searchStoreText) {
-            this.filteredStores = this.stores.filter((store) => store.storeName
-                .toLowerCase()
-                .includes(this.searchStoreText.toLowerCase()));
+        const searchText = this.searchStoreText.toLowerCase();
+        if (searchText) {
+            // Preserve the checked state during filtering
+            this.filteredStores = this.stores
+                .map(store => ({
+                ...store,
+                checked: this.filteredStores.find(s => s.storeId === store.storeId)?.checked || false
+            }))
+                .filter(store => store.storeName.toLowerCase().includes(searchText));
         }
         else {
-            this.filteredStores = this.stores;
+            // Restore the original checked state when search text is cleared
+            this.filteredStores = this.stores.map(store => ({
+                ...store,
+                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || false
+            }));
         }
     }
     closeDropdown() {
@@ -3643,11 +3811,11 @@ class TrafficHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"wrapper mx-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 dropdown1 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     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            (focus)=\"toggleDropdown('location')\" \r\n            readonly\r\n            placeholder=\"Select locations...\"\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 locations...\" \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\" \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 Locations\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\" \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\" \r\n            [value]=\"selectedGroupsLabel()\" readonly\r\n            placeholder=\"Select groups...\"\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 groups...\" \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\" \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\" \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\" \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\" \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 .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}.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:200px;overflow-y:auto;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.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}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i3$2.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: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\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 dropdown1 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     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            (focus)=\"toggleDropdown('location')\" \r\n            readonly\r\n            placeholder=\"Select locations...\"\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 locations...\" \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 Locations\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 groups...\"\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 groups...\" \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 .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}.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}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.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: i3$2.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: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-traffic-header", template: "<div class=\"wrapper mx-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 dropdown1 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     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            (focus)=\"toggleDropdown('location')\" \r\n            readonly\r\n            placeholder=\"Select locations...\"\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 locations...\" \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\" \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 Locations\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\" \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\" \r\n            [value]=\"selectedGroupsLabel()\" readonly\r\n            placeholder=\"Select groups...\"\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 groups...\" \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\" \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\" \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\" \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\" \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 .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}.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:200px;overflow-y:auto;display:block;box-sizing:border-box}.dropdown-item{padding:8px 12px}.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}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
+            args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\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 dropdown1 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     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            (focus)=\"toggleDropdown('location')\" \r\n            readonly\r\n            placeholder=\"Select locations...\"\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 locations...\" \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 Locations\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 groups...\"\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 groups...\" \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 .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}.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}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.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: i1$1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3782,10 +3950,10 @@ class ToolbarComponent {
                 this.setUIProperties(false, false, false, true, false, false);
             }
             else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining" || URL == "/notifications/alerts"
-                || URL == "/manage/brands" || URL == "/manage/users/tango" || URL === "/tickets/users?type=audit") {
+                || URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] === "tickets" && url[2] === "audit")) {
                 this.setUIProperties(false, false, false, false, false, false);
             }
-            else if (URL == "/manage/traffic" || url[2] === "traffic") {
+            else if (URL == "/manage/traffic" || url[2] === "traffic" || URL == "/manage/zones" || URL == "/manage/analyse/reports") {
                 this.setUIProperties(false, false, false, false, false, true);
             }
             else {
@@ -3811,7 +3979,7 @@ class ToolbarComponent {
                 || URL == "/notifications/alerts" || URL == "/manage/users/tango") {
                 this.setUIProperties(false, false, false, false, false, false);
             }
-            else if (URL == "/manage/traffic") {
+            else if (URL == "/manage/traffic" || url[2] === "traffic") {
                 this.setUIProperties(false, false, false, false, false, true);
             }
             else {
@@ -3889,6 +4057,7 @@ class SidebarMenuComponent {
     usersList;
     authlocalStorageToken;
     oldDashboardRoutingUrl;
+    clientData;
     constructor(authService, gs, router) {
         this.authService = authService;
         this.gs = gs;
@@ -3906,6 +4075,9 @@ class SidebarMenuComponent {
             const userData = JSON.parse(localStorage.getItem("user-info") || "{}");
             this.usersList = userData;
         }
+        const headerfliters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        const headerFilters = headerfliters;
+        this.getClientData(headerFilters.client);
     }
     oldDashborad() {
         let obj = { username: this.usersList?.email }; //this.usersList?.email}; // Assuming this is required for authentication/authorization
@@ -3935,12 +4107,23 @@ class SidebarMenuComponent {
             }
         });
     }
+    getClientData(clientID) {
+        this.authService.getBrandDetails(clientID).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.clientData = res?.data;
+                }
+            },
+            error: (error) => {
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarMenuComponent, selector: "lib-sidebar-menu", ngImport: i0, template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n  data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n  data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n  <!--begin::Menu-->\r\n  <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n    data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n    <!-- Birds Eye -->\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_birdsEye_isView && (gs.userAccess | async)?.userType !== 'tango'\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Analytics</span>\r\n      </a>\r\n    </div>\r\n\r\n        <!-- Manage -->\r\n        <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/manage\">Manage\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Brands\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Summary\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Reports\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Audit\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\"  >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Settings\r\n                </span>\r\n            </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tango Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Billing\r\n                </span>\r\n              </a>\r\n            </div> \r\n          </div>\r\n        </div>\r\n\r\n         <!-- Manage -->\r\n         <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Workspace\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div  class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <!-- <div  *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div> -->\r\n           \r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n           \r\n          </div>\r\n        </div>\r\n  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Tango Traffic -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Traffic</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Zone -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Zone</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Revop -->\r\n    <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Home\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Tagging\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Pending Action\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Customer Profile\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Control Center -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Live & Playback\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Screen Manager\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Store Explore\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Tango SOP -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Dashboard\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Create & Manage\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Flag\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Reports\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Incidents\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarMenuComponent, selector: "lib-sidebar-menu", ngImport: i0, template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n  data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n  data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n  <!--begin::Menu-->\r\n  <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n    data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n    <!-- Birds Eye -->\r\n    <div *ngIf=\"((gs.userAccess | async)?.analytics_birdsEye_isView || !clientData?.featureConfigs?.isNewDashboard) && (gs.userAccess | async)?.userType !== 'tango' \" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Analytics</span>\r\n      </a>\r\n    </div>\r\n <!-- Analyse -->\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n  <span  class=\"menu-link\">\r\n    <span style=\"width: 0px;\" class=\"menu-icon\">\r\n      <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n    </span>\r\n    <span class=\"menu-title\" data-link=\"/manage/traffic\">Analytics\r\n    </span>\r\n    <span class=\"menu-arrow\"></span>\r\n  </span>\r\n  <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n        <span class=\"menu-bullet\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Traffic\r\n        </span>\r\n      </a>\r\n    </div>\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones\">\r\n        <span class=\"menu-bullet\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Zones\r\n        </span>\r\n      </a>\r\n    </div>\r\n    <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\" >\r\n        <span class=\"menu-bullet\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Reports\r\n        </span>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n        <!-- Manage -->\r\n        <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/manage\">Manage\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Brands\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Summary\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Reports\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Audit\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\"  >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Settings\r\n                </span>\r\n            </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tango Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Billing\r\n                </span>\r\n              </a>\r\n            </div> \r\n          </div>\r\n        </div>\r\n\r\n         <!-- Manage -->\r\n         <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Workspace\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div  class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <!-- <div  *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div> -->\r\n           \r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n           \r\n          </div>\r\n        </div>\r\n  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Tango Traffic -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Traffic</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Zone -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Zone</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Revop -->\r\n    <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Home\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Tagging\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Pending Action\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Customer Profile\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Control Center -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Live & Playback\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Screen Manager\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Store Explore\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Tango SOP -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Dashboard\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Create & Manage\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Flag\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Reports\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Incidents\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-sidebar-menu", template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n  data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n  data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n  <!--begin::Menu-->\r\n  <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n    data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n    <!-- Birds Eye -->\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_birdsEye_isView && (gs.userAccess | async)?.userType !== 'tango'\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Analytics</span>\r\n      </a>\r\n    </div>\r\n\r\n        <!-- Manage -->\r\n        <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/manage\">Manage\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Brands\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Summary\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Reports\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Audit\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\"  >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Settings\r\n                </span>\r\n            </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tango Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Billing\r\n                </span>\r\n              </a>\r\n            </div> \r\n          </div>\r\n        </div>\r\n\r\n         <!-- Manage -->\r\n         <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Workspace\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div  class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <!-- <div  *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div> -->\r\n           \r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n           \r\n          </div>\r\n        </div>\r\n  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Tango Traffic -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Traffic</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Zone -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Zone</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Revop -->\r\n    <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Home\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Tagging\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Pending Action\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Customer Profile\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Control Center -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Live & Playback\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Screen Manager\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Store Explore\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Tango SOP -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Dashboard\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Create & Manage\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Flag\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Reports\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Incidents\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->" }]
+            args: [{ selector: "lib-sidebar-menu", template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n  data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n  data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n  <!--begin::Menu-->\r\n  <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n    data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n    <!-- Birds Eye -->\r\n    <div *ngIf=\"((gs.userAccess | async)?.analytics_birdsEye_isView || !clientData?.featureConfigs?.isNewDashboard) && (gs.userAccess | async)?.userType !== 'tango' \" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Analytics</span>\r\n      </a>\r\n    </div>\r\n <!-- Analyse -->\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n  <span  class=\"menu-link\">\r\n    <span style=\"width: 0px;\" class=\"menu-icon\">\r\n      <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n    </span>\r\n    <span class=\"menu-title\" data-link=\"/manage/traffic\">Analytics\r\n    </span>\r\n    <span class=\"menu-arrow\"></span>\r\n  </span>\r\n  <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n        <span class=\"menu-bullet\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Traffic\r\n        </span>\r\n      </a>\r\n    </div>\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones\">\r\n        <span class=\"menu-bullet\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Zones\r\n        </span>\r\n      </a>\r\n    </div>\r\n    <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\" >\r\n        <span class=\"menu-bullet\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Reports\r\n        </span>\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div>\r\n        <!-- Manage -->\r\n        <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/manage\">Manage\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Brands\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Summary\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Reports\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Audit\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\"  >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Settings\r\n                </span>\r\n            </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tango Users\r\n                </span>\r\n              </a>\r\n            </div>\r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Billing\r\n                </span>\r\n              </a>\r\n            </div> \r\n          </div>\r\n        </div>\r\n\r\n         <!-- Manage -->\r\n         <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Workspace\r\n            </span>\r\n            <span class=\"menu-arrow\"></span>\r\n          </span>\r\n          <div  class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n            <!-- <div  *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Stores\r\n                </span>\r\n              </a>\r\n            </div> -->\r\n           \r\n            <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n                <span class=\"menu-bullet\">\r\n                  <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n                </span>\r\n                <span class=\"menu-title\">Tickets\r\n                </span>\r\n              </a>\r\n            </div>\r\n           \r\n          </div>\r\n        </div>\r\n  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <!-- Tango Traffic -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Traffic</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Zone -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Tango Zone</span>\r\n      </a>\r\n    </div> -->\r\n\r\n    <!-- Tango Revop -->\r\n    <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Home\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Tagging\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Pending Action\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Customer Profile\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Control Center -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Live & Playback\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Screen Manager\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Store Explore\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->\r\n\r\n    <!-- Tango SOP -->\r\n    <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n        </span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Dashboard\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Create & Manage\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Flag\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Reports\r\n            </span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n            <span class=\"menu-bullet\">\r\n              <span class=\"bullet bullet-dot\"></span>\r\n            </span>\r\n            <span class=\"menu-title\">Incidents\r\n            </span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div> -->" }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.GlobalStateService }, { type: i1.Router }] });
 
 class SidebarFooterComponent {