tango-app-ui-shared 3.0.20-dev → 3.0.22-dev

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

@@ -8,11 +8,13 @@ import * as i2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
-import { BehaviorSubject, throwError, map, catchError } from 'rxjs';
+import * as i1$2 from 'tango-app-ui-global';
+import { ToggleComponent as ToggleComponent$1, ScrollTopComponent as ScrollTopComponent$1, DrawerComponent as DrawerComponent$1, StickyComponent as StickyComponent$1, MenuComponent as MenuComponent$1, ScrollComponent as ScrollComponent$1 } from 'tango-app-ui-global';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
+import { throwError, map, catchError, BehaviorSubject } from 'rxjs';
 import * as i3$1 from '@angular/common/http';
 import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -20,7 +22,7 @@ import * as i5 from 'ngx-daterangepicker-material';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import * as i3$2 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
-import * as i1$2 from '@ngx-translate/core';
+import * as i1$3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { InlineSVGModule } from 'ng-inline-svg-2';
 import { NgbDropdownModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
@@ -1539,21 +1541,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{ selector: 'lib-scripts-init', template: "" }]
         }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i1.PageInfoService }, { type: i1$1.Router }, { type: i3.Title }] });
 
-class GlobalStateService {
-    userData = new BehaviorSubject(null);
-    environment = new BehaviorSubject(null);
-    dataRangeValue = new BehaviorSubject(null);
-    selectedClient = new BehaviorSubject(null);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class PageTitleComponent {
     pageInfo;
     cd;
@@ -1599,12 +1586,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 type: Input
             }] } });
 
+// import { GlobalStateService } from './global-state.service';
 class AuthService {
     router;
     gs;
     http;
     clientApiUrl;
     authlocalStorageToken;
+    userApiUrl;
+    storeApiUrl;
     constructor(router, gs, http) {
         this.router = router;
         this.gs = gs;
@@ -1612,6 +1602,8 @@ class AuthService {
         this.gs.environment.subscribe((env) => {
             if (env) {
                 this.clientApiUrl = env.clientApiUrl;
+                this.userApiUrl = env.userApiUrl;
+                this.storeApiUrl = env.storeApiUrl;
                 this.authlocalStorageToken = `${env.appVersion}-${env.USERDATA_KEY}`;
             }
         });
@@ -1619,10 +1611,15 @@ class AuthService {
     handleError(res) {
         return throwError(res.error);
     }
+    getHeaders() {
+        const headers = {
+            'Authorization': 'Bearer ' + this.authlocalStorageToken
+        };
+        return headers;
+    }
     logout() {
-        localStorage.removeItem(this.authlocalStorageToken);
-        this.router.navigate(['/auth/login'], {
-            queryParams: {},
+        return this.http.get(`${this.userApiUrl}/logout`, {
+            headers: this.getHeaders()
         });
     }
     getClients() {
@@ -1630,10 +1627,10 @@ class AuthService {
             .pipe(map((response) => response), catchError(this.handleError));
     }
     getStores(id) {
-        return this.http.get(`https://devtangoretail-api.tangoeye.ai/v3/store/get-stores?clientId=${id}`, {})
+        return this.http.get(`${this.storeApiUrl}/get-stores?clientId=${id}`, {})
             .pipe(map((response) => response), catchError(this.handleError));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, deps: [{ token: i1$1.Router }, { token: GlobalStateService }, { token: i3$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, deps: [{ token: i1$1.Router }, { token: i1$2.GlobalStateService }, { token: i3$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, decorators: [{
@@ -1641,7 +1638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: GlobalStateService }, { type: i3$1.HttpClient }] });
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$2.GlobalStateService }, { type: i3$1.HttpClient }] });
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -1928,13 +1925,13 @@ class ClassicComponent {
         }
         this.selectedFilters.date = this.selectedDateRange;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }, { token: GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1$2.LayoutService }, { token: i1$2.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ClassicComponent, selector: "lib-classic", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"py-3 dropdown1 cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n    <div class=\"dropdown form-select\" (click)=\"Dropdown('Clients',i,$event)\">\r\n        <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n            selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span>\r\n    </div>\r\n    <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n        <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n                [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                (change)=\"toggleCheckbox('Select All', i)\">\r\n            <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n\r\n        <div class=\"border border-gray mt-3\"></div>\r\n        <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n            <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                    <path\r\n                        d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n                class=\"form-control searchinput ps-14 py-2  mt-2\" placeholder=\"Search\" autocomplete=\"off\" />\r\n        </div>\r\n        <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.clientName\" id=\"option{{issue.clientId}}\"\r\n                [checked]=\"selectedValuesArray[i]?.includes(issue.clientId)\" (change)=\"toggleCheckbox(issue.clientId,i)\">\r\n            <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.clientId}}\">\r\n                {{ issue.clientName }}\r\n            </label>\r\n        </div>\r\n        <div class=\"mt-5 d-flex justify-content-center\">\r\n            <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n        </div>\r\n    </div>\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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\r\n</div>\r\n\r\n\r\n<!-- <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd \r\n    [singleDatePicker]=\"true\"\r\n    [drops]=\"'down'\"\r\n    [opens]=\"'right'\"\r\n    [alwaysShowCalendars]=\"false\"\r\n    [keepCalendarOpeningWithRange]=\"true\"\r\n    [showCancel]=\"true\"\r\n    autocomplete=\"off\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n    (selected)=\"onDateSelect($event)\"\r\n    name=\"daterange\" /> -->\r\n\r\n<div class=\"btn btn-primary\" (click)=\"Apply()\">Apply</div>", styles: [".dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;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}.dropdown1 .dropdown-content{z-index:1;padding:0;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:250px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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}.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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}.btn-primary{line-height:18px!important}\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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-classic", template: "<div class=\"py-3 dropdown1 cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n    <div class=\"dropdown form-select\" (click)=\"Dropdown('Clients',i,$event)\">\r\n        <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n            selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span>\r\n    </div>\r\n    <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n        <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n                [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                (change)=\"toggleCheckbox('Select All', i)\">\r\n            <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n\r\n        <div class=\"border border-gray mt-3\"></div>\r\n        <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n            <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                    <path\r\n                        d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n                class=\"form-control searchinput ps-14 py-2  mt-2\" placeholder=\"Search\" autocomplete=\"off\" />\r\n        </div>\r\n        <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.clientName\" id=\"option{{issue.clientId}}\"\r\n                [checked]=\"selectedValuesArray[i]?.includes(issue.clientId)\" (change)=\"toggleCheckbox(issue.clientId,i)\">\r\n            <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.clientId}}\">\r\n                {{ issue.clientName }}\r\n            </label>\r\n        </div>\r\n        <div class=\"mt-5 d-flex justify-content-center\">\r\n            <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n        </div>\r\n    </div>\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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\r\n</div>\r\n\r\n\r\n<!-- <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd \r\n    [singleDatePicker]=\"true\"\r\n    [drops]=\"'down'\"\r\n    [opens]=\"'right'\"\r\n    [alwaysShowCalendars]=\"false\"\r\n    [keepCalendarOpeningWithRange]=\"true\"\r\n    [showCancel]=\"true\"\r\n    autocomplete=\"off\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n    (selected)=\"onDateSelect($event)\"\r\n    name=\"daterange\" /> -->\r\n\r\n<div class=\"btn btn-primary\" (click)=\"Apply()\">Apply</div>", styles: [".dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;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}.dropdown1 .dropdown-content{z-index:1;padding:0;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:250px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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}.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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}.btn-primary{line-height:18px!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
+        }], ctorParameters: () => [{ type: i1$2.LayoutService }, { type: i1$2.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ["document:click", ["$event"]]
             }] } });
@@ -2091,24 +2088,39 @@ class ClientSettingsComponent {
             next: (e) => {
                 if (e) {
                     this.clientList = e.data.result;
-                    // if ("header-filters" in localStorage) {
-                    const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-                    this.cd.detectChanges();
-                    if (headerFilters.client) {
-                        this.clientList.find((obj) => {
-                            if (obj.clientId === headerFilters.client) {
-                                this.selectedClient = obj;
-                            }
-                        });
+                    if ("header-filters" in localStorage) {
+                        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+                        this.cd.detectChanges();
+                        if (headerFilters.client) {
+                            this.clientList.find((obj) => {
+                                if (obj.clientId === headerFilters.client) {
+                                    this.selectedClient = obj;
+                                }
+                            });
+                        }
+                        else {
+                            this.selectedClient = this.clientList[0];
+                            this.selectedFilters.client = headerFilters.client;
+                            localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                            this.gs.dataRangeValue.next(this.selectedFilters);
+                            this.cd.detectChanges();
+                        }
                     }
                     else {
                         this.selectedClient = this.clientList[0];
-                        this.selectedFilters.client = headerFilters.client;
+                        this.selectedFilters.client = this.selectedClient.clientId;
                         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                         this.gs.dataRangeValue.next(this.selectedFilters);
                         this.cd.detectChanges();
                     }
                 }
+                else {
+                    this.selectedClient = this.clientList[0];
+                    this.selectedFilters.client = this.selectedClient.clientId;
+                    localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                    this.gs.dataRangeValue.next(this.selectedFilters);
+                    this.cd.detectChanges();
+                }
             },
         });
     }
@@ -2121,13 +2133,13 @@ class ClientSettingsComponent {
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
         this.cd.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, deps: [{ token: AuthService }, { token: GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, deps: [{ token: AuthService }, { token: i1$2.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ClientSettingsComponent, selector: "lib-client-settings", ngImport: i0, template: "    <div class=\"wrapper\" >\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", styles: [".wrapper{min-width:200px}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-client-settings', template: "    <div class=\"wrapper\" >\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", styles: [".wrapper{min-width:200px}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: AuthService }, { type: i1$2.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
 
 class DatepickerComponent {
     layout;
@@ -2210,13 +2222,13 @@ class DatepickerComponent {
         this.gs.dataRangeValue.next(this.selectedFilters);
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.LayoutService }, { token: GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.LayoutService }, { token: i1$2.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DatepickerComponent, selector: "lib-datepicker", ngImport: i0, template: "<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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}\n"], dependencies: [{ kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-datepicker', template: "<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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}\n"] }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i1$2.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
 
 class DateSingleSelectComponent {
     auth;
@@ -2265,6 +2277,7 @@ class DateSingleSelectComponent {
                             this.dayjs().format("YYYY-MM-DD");
                         this.selectedDateRange.endDate = this.dayjs().format("YYYY-MM-DD");
                         this.selectedFilters.client = this.selectedClient.clientId;
+                        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                         this.gs.dataRangeValue.next(this.selectedFilters);
                         this.cd.detectChanges();
                     }
@@ -2334,13 +2347,13 @@ class DateSingleSelectComponent {
         this.gs.dataRangeValue.next(this.selectedFilters);
         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DateSingleSelectComponent, deps: [{ token: AuthService }, { token: GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DateSingleSelectComponent, deps: [{ token: AuthService }, { token: i1$2.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DateSingleSelectComponent, selector: "lib-date-single-select", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", 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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DateSingleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-date-single-select", template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", 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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: AuthService }, { type: i1$2.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
 
 class SingleStoreComponent {
     auth;
@@ -2392,6 +2405,7 @@ class SingleStoreComponent {
                             this.selectedDateRange.startDate = this.dayjs().format('YYYY-MM-DD');
                             this.selectedDateRange.endDate = this.dayjs().format('YYYY-MM-DD');
                             this.selectedFilters.date = this.selectedDateRange;
+                            localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                             this.gs.dataRangeValue.next(this.selectedFilters);
                             this.cd.detectChanges();
                         }
@@ -2445,19 +2459,18 @@ class SingleStoreComponent {
         this.gs.dataRangeValue.next(this.selectedFilters);
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SingleStoreComponent, deps: [{ token: AuthService }, { token: GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SingleStoreComponent, deps: [{ token: AuthService }, { token: i1$2.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SingleStoreComponent, selector: "lib-single-store", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", 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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SingleStoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-single-store', template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \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\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\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\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", 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:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.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}: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}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [{ type: AuthService }, { type: i1$2.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
 
 class ToolbarComponent {
     layout;
     router;
     route;
-    gs;
     pageInfo;
     unsubscribe = [];
     // Public props
@@ -2483,11 +2496,10 @@ class ToolbarComponent {
     singleStore;
     headervalue;
     storeId;
-    constructor(layout, router, route, gs, pageInfo) {
+    constructor(layout, router, route, pageInfo) {
         this.layout = layout;
         this.router = router;
         this.route = route;
-        this.gs = gs;
         this.pageInfo = pageInfo;
     }
     ngOnInit() {
@@ -2549,13 +2561,14 @@ class ToolbarComponent {
             this.router.navigateByUrl(updatedUrl);
         }
         const url = this.router.url.split("/");
+        console.log(url);
         if (url[2] == 'settings') {
             this.setUIProperties(true, false, false, false, false);
         }
         else if (this.router.url == "/manage/brands") {
             this.setUIProperties(false, false, false, false, false);
         }
-        else if (this.router.url == "/manage/users" || this.router.url == "/manage/stores" || this.router.url == "/manage/stores/addition-method") {
+        else if (this.router.url == "/manage/users" || this.router.url == "/manage/stores" || this.router.url == "/manage/stores/addition-method" || url[3] == 'edge-app') {
             this.setUIProperties(false, false, false, false, true);
         }
         else if (this.router.url == `/manage/stores/${this.storeId}/infra-ticket` || this.router.url == `/manage/stores/${this.storeId}/settings`) {
@@ -2578,13 +2591,13 @@ class ToolbarComponent {
         this.singleStore = singleStore;
         this.singleSelectdatepicker = singleSelectdatepicker;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: GlobalStateService }, { token: i1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$2.LayoutService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i1$2.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"datepicker\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n   </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"datepicker\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n   </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: GlobalStateService }, { type: i1.PageInfoService }], propDecorators: { currentLayoutType: [{
+        }], ctorParameters: () => [{ type: i1$2.LayoutService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i1$2.PageInfoService }], propDecorators: { currentLayoutType: [{
                 type: Input
             }], appToolbarLayout: [{
                 type: Input
@@ -2614,13 +2627,13 @@ class SidebarLogoComponent {
     ngOnDestroy() {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, deps: [{ token: i1$2.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState" }, ngImport: i0, template: "<!--begin::Logo image-->\r\n<a routerLink=\"/dashboard\">\r\n  <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n  </ng-container>\r\n  <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n      class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n  </ng-container>\r\n\r\n  <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n  <!--begin::Sidebar toggle-->\r\n  <div id=\"kt_app_sidebar_toggle\"\r\n    class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n    [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n    data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n    <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n  </div>\r\n  <!--end::Sidebar toggle-->\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-sidebar-logo', template: "<!--begin::Logo image-->\r\n<a routerLink=\"/dashboard\">\r\n  <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n  </ng-container>\r\n  <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n      class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n  </ng-container>\r\n\r\n  <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n  <!--begin::Sidebar toggle-->\r\n  <div id=\"kt_app_sidebar_toggle\"\r\n    class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n    [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n    data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n    <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n  </div>\r\n  <!--end::Sidebar toggle-->\r\n</ng-container>\r\n" }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }], propDecorators: { toggleButtonClass: [{
+        }], ctorParameters: () => [{ type: i1$2.LayoutService }], propDecorators: { toggleButtonClass: [{
                 type: Input
             }], toggleEnabled: [{
                 type: Input
@@ -2645,28 +2658,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 class SidebarFooterComponent {
     auth;
     router;
+    layout;
     isSubMenuActive = false;
-    constructor(auth, router) {
+    userValue;
+    hovered = false;
+    unsubscribe = [];
+    toggleButtonClass = '';
+    toggleEnabled;
+    toggleType = '';
+    toggleState = '';
+    currentLayoutType;
+    toggleAttr;
+    constructor(auth, router, layout) {
         this.auth = auth;
         this.router = router;
+        this.layout = layout;
+    }
+    ngOnInit() {
+        this.toggleAttr = `app-sidebar-${this.toggleType}`;
+        const layoutSubscr = this.layout.currentLayoutTypeSubject
+            .asObservable()
+            .subscribe((layout) => {
+            this.currentLayoutType = layout;
+        });
+        this.unsubscribe.push(layoutSubscr);
+        if ('user-info' in localStorage) {
+            const userData = JSON.parse(localStorage.getItem('user-info') || "{}");
+            this.userValue = userData;
+        }
     }
-    ngOnInit() { }
     toggleMenu() {
         this.isSubMenuActive = !this.isSubMenuActive;
     }
     logout() {
-        this.auth.logout();
-        localStorage.clear();
-        localStorage.clear();
-        this.router.navigate(["/auth/login"]);
+        this.auth.logout().subscribe((res) => {
+            this.router.navigate(["/auth/login"]);
+        });
+    }
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [{ token: AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarFooterComponent, selector: "lib-sidebar-footer", ngImport: i0, template: "<!-- <div class=\"dropdown \">\r\n  <button  class=\"btn dropdown-toggle btn-flex flex-center btn-custom  overflow-hidden text-nowrap px-0 h-40px w-100\" type=\"button\" id=\"dropdownMenu1\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss=\"click\" title=\"Metronic Docs & Components\">\r\n    <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n    <span class=\"btn-label caret\">\r\n      Olivia Rhye<br>\r\n      oliviatangoeye.com\r\n    </span>\r\n  </button>\r\n  <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu1\">\r\n    <li><a href=\"#\">Action</a></li>\r\n    <li><a href=\"#\">Another action</a></li>\r\n    <li><a href=\"#\">Something else here</a></li>\r\n    <li><a href=\"#\">Separated link</a></li>\r\n  </ul>\r\n</div> -->\r\n<div id=\"kt_app_sidebar_menu_scroll\"  class=\"\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\" (click)=\"logout()\"\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 class=\"menu-item menu-accordion w-100 px-3\" [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n        </span>\r\n        <!-- <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop</span> -->\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <!-- <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\" fill=\"#98A2B3\"/>\r\n              <path d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\" fill=\"#667085\"/>\r\n              </svg>\r\n              </span>\r\n            <span class=\"menu-title\">Profile</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path opacity=\"0.3\" d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\" fill=\"#667085\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Support</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Logout</span>\r\n          </a>\r\n        </div>\r\n        \r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [{ token: AuthService }, { token: i1$1.Router }, { token: i1$2.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarFooterComponent, selector: "lib-sidebar-footer", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState" }, ngImport: i0, template: "<div id=\"kt_app_sidebar_menu_scroll\"  class=\"\" 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  <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    <div class=\"menu-item menu-accordion w-100 px-3\" id=\"#kt_app_sidebar_menu\"\r\n     [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link without-sub\">\r\n        <span class=\"menu-icon\">\r\n          <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">{{userValue.userName | titlecase}}<br>{{userValue.email | titlecase}}</span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\r\n          <a class=\"menu-link without-sub\" routerLink=\"profile\" routerLinkActive=\"active\" >\r\n            <span class=\"menu-bullet\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\" fill=\"#98A2B3\"/>\r\n              <path d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\" fill=\"#667085\"/>\r\n              </svg>\r\n              </span>\r\n            <span class=\"menu-title\">Profile</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path opacity=\"0.3\" d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\" fill=\"#667085\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Support</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Logout</span>\r\n          </a>\r\n        </div>\r\n        \r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-sidebar-footer", template: "<!-- <div class=\"dropdown \">\r\n  <button  class=\"btn dropdown-toggle btn-flex flex-center btn-custom  overflow-hidden text-nowrap px-0 h-40px w-100\" type=\"button\" id=\"dropdownMenu1\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss=\"click\" title=\"Metronic Docs & Components\">\r\n    <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n    <span class=\"btn-label caret\">\r\n      Olivia Rhye<br>\r\n      oliviatangoeye.com\r\n    </span>\r\n  </button>\r\n  <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu1\">\r\n    <li><a href=\"#\">Action</a></li>\r\n    <li><a href=\"#\">Another action</a></li>\r\n    <li><a href=\"#\">Something else here</a></li>\r\n    <li><a href=\"#\">Separated link</a></li>\r\n  </ul>\r\n</div> -->\r\n<div id=\"kt_app_sidebar_menu_scroll\"  class=\"\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\" (click)=\"logout()\"\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 class=\"menu-item menu-accordion w-100 px-3\" [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\r\n        <span class=\"menu-icon\">\r\n          <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n        </span>\r\n        <!-- <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop</span> -->\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <!-- <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\" fill=\"#98A2B3\"/>\r\n              <path d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\" fill=\"#667085\"/>\r\n              </svg>\r\n              </span>\r\n            <span class=\"menu-title\">Profile</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path opacity=\"0.3\" d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\" fill=\"#667085\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Support</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Logout</span>\r\n          </a>\r\n        </div>\r\n        \r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.Router }] });
+            args: [{ selector: "lib-sidebar-footer", template: "<div id=\"kt_app_sidebar_menu_scroll\"  class=\"\" 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  <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    <div class=\"menu-item menu-accordion w-100 px-3\" id=\"#kt_app_sidebar_menu\"\r\n     [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link without-sub\">\r\n        <span class=\"menu-icon\">\r\n          <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n        </span>\r\n        <span class=\"menu-title\" data-link=\"/crafted/account\">{{userValue.userName | titlecase}}<br>{{userValue.email | titlecase}}</span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\r\n          <a class=\"menu-link without-sub\" routerLink=\"profile\" routerLinkActive=\"active\" >\r\n            <span class=\"menu-bullet\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\" fill=\"#98A2B3\"/>\r\n              <path d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\" fill=\"#667085\"/>\r\n              </svg>\r\n              </span>\r\n            <span class=\"menu-title\">Profile</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path opacity=\"0.3\" d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\" fill=\"#667085\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Support</span>\r\n          </a>\r\n        </div>\r\n        <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n          <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n            <span class=\"menu-bullet\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\" stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </span>\r\n            <span class=\"menu-title\">Logout</span>\r\n          </a>\r\n        </div>\r\n        \r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.Router }, { type: i1$2.LayoutService }], propDecorators: { toggleButtonClass: [{
+                type: Input
+            }], toggleEnabled: [{
+                type: Input
+            }], toggleType: [{
+                type: Input
+            }], toggleState: [{
+                type: Input
+            }] } });
 
 class SidebarComponent {
     layout;
@@ -2787,13 +2833,13 @@ class SidebarComponent {
     ngOnDestroy() {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarComponent, selector: "lib-sidebar", ngImport: i0, template: "<!--begin::Logo-->\r\n<lib-sidebar-logo class=\"app-sidebar-logo px-6\" id=\"kt_app_sidebar_logo\"\r\n  [toggleButtonClass]=\"toggleButtonClass\" [toggleEnabled]=\"toggleEnabled\" [toggleType]=\"toggleType\"\r\n  [toggleState]=\"toggleState\">\r\n</lib-sidebar-logo>\r\n<!--end::Logo-->\r\n\r\n<!--begin::sidebar menu-->\r\n<lib-sidebar-menu class=\"app-sidebar-menu overflow-hidden flex-column-fluid\">\r\n</lib-sidebar-menu>\r\n<!--end::sidebar menu-->\r\n\r\n<!--begin::Footer-->\r\n<lib-sidebar-footer class=\"app-sidebar-footer flex-column-auto pt-2 pb-6\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer>\r\n<!--end::Footer-->\r\n", styles: [".app-sidebar-footer{background:var(--Gray-700, #344054)}\n"], dependencies: [{ kind: "component", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: ["toggleButtonClass", "toggleEnabled", "toggleType", "toggleState"] }, { kind: "component", type: SidebarMenuComponent, selector: "lib-sidebar-menu" }, { kind: "component", type: SidebarFooterComponent, selector: "lib-sidebar-footer" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$2.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarComponent, selector: "lib-sidebar", ngImport: i0, template: "<!--begin::Logo-->\r\n<lib-sidebar-logo class=\"app-sidebar-logo px-6\" id=\"kt_app_sidebar_logo\"\r\n  [toggleButtonClass]=\"toggleButtonClass\" [toggleEnabled]=\"toggleEnabled\" [toggleType]=\"toggleType\"\r\n  [toggleState]=\"toggleState\">\r\n</lib-sidebar-logo>\r\n<!--end::Logo-->\r\n\r\n<!--begin::sidebar menu-->\r\n<lib-sidebar-menu class=\"app-sidebar-menu overflow-hidden flex-column-fluid\">\r\n</lib-sidebar-menu>\r\n<!--end::sidebar menu-->\r\n\r\n<!--begin::Footer-->\r\n<lib-sidebar-footer class=\"app-sidebar-footer flex-column-auto pt-2 pb-6\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer>\r\n<!--end::Footer-->\r\n", styles: [".app-sidebar-footer{background:var(--Gray-700, #344054)}\n"], dependencies: [{ kind: "component", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: ["toggleButtonClass", "toggleEnabled", "toggleType", "toggleState"] }, { kind: "component", type: SidebarMenuComponent, selector: "lib-sidebar-menu" }, { kind: "component", type: SidebarFooterComponent, selector: "lib-sidebar-footer", inputs: ["toggleButtonClass", "toggleEnabled", "toggleType", "toggleState"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-sidebar', template: "<!--begin::Logo-->\r\n<lib-sidebar-logo class=\"app-sidebar-logo px-6\" id=\"kt_app_sidebar_logo\"\r\n  [toggleButtonClass]=\"toggleButtonClass\" [toggleEnabled]=\"toggleEnabled\" [toggleType]=\"toggleType\"\r\n  [toggleState]=\"toggleState\">\r\n</lib-sidebar-logo>\r\n<!--end::Logo-->\r\n\r\n<!--begin::sidebar menu-->\r\n<lib-sidebar-menu class=\"app-sidebar-menu overflow-hidden flex-column-fluid\">\r\n</lib-sidebar-menu>\r\n<!--end::sidebar menu-->\r\n\r\n<!--begin::Footer-->\r\n<lib-sidebar-footer class=\"app-sidebar-footer flex-column-auto pt-2 pb-6\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer>\r\n<!--end::Footer-->\r\n", styles: [".app-sidebar-footer{background:var(--Gray-700, #344054)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }] });
+        }], ctorParameters: () => [{ type: i1$2.LayoutService }] });
 
 class LayoutScrollTopComponent {
     router;
@@ -3217,12 +3263,12 @@ class ErrorsComponent {
     routeToDashboard() {
         this.router.navigate(['dashboard']);
         setTimeout(() => {
-            ToggleComponent.bootstrap();
-            ScrollTopComponent.bootstrap();
-            DrawerComponent.bootstrap();
-            StickyComponent.bootstrap();
-            MenuComponent.bootstrap();
-            ScrollComponent.bootstrap();
+            ToggleComponent$1.bootstrap();
+            ScrollTopComponent$1.bootstrap();
+            DrawerComponent$1.bootstrap();
+            StickyComponent$1.bootstrap();
+            MenuComponent$1.bootstrap();
+            ScrollComponent$1.bootstrap();
         }, 200);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ErrorsComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
@@ -3366,18 +3412,19 @@ class FiltersComponent {
     dataObject = [];
     appliedFilters = new EventEmitter();
     Opendropdown = false;
-    permission = [
-        { group: 'Super Admin', description: 'Lorem ipsum dolor sit amet, consectetur ' },
-        { group: 'Admin', description: 'Lorem ipsum dolor sit amet, consectetur ' },
-        { group: 'User', description: 'Lorem ipsum dolor sit amet, consectetur ' },
-    ];
     showdropdown;
     selectedValues = [];
+    searchTerms = [];
     selectedValuesArray = [];
     searchValue;
+    selectedItem;
+    dropDown = false;
     dummyArray = [];
     noFilter = false;
     responseArray = [];
+    productModule;
+    product;
+    selectedProductCount;
     constructor(elementRef, renderer, router) {
         this.elementRef = elementRef;
         this.renderer = renderer;
@@ -3398,6 +3445,18 @@ class FiltersComponent {
         this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
         this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
     }
+    selectItem(event, index, subIndex) {
+        this.selectedValuesArray[index] = this.dataObject[index].Issues[subIndex];
+    }
+    openDropdown(event, index) {
+        event.stopPropagation();
+        this.dataObject.forEach((item, i) => {
+            if (i !== index) {
+                item.isOpen = false; // Close other dropdowns
+            }
+        });
+        this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
+    }
     opendropdown(e) {
         console.log(687);
         e.stopPropagation();
@@ -3411,42 +3470,34 @@ class FiltersComponent {
             }
         });
         this.dataObject[index].isOpen = !this.dataObject[index].isOpen;
-        // if (this.dataObject[index].isOpen) {
-        //   document.addEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
-        // } else {
-        //   document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
-        // }
     }
-    // clickOutsideDropdownContent(index: number, event: Event) {
-    //   if (!this.elementRef.nativeElement.contains(event.target as Node)) {
-    //     this.dataObject[index].isOpen = false;
-    //     document.removeEventListener('click', this.clickOutsideDropdownContent.bind(this, index));
-    //   }
-    // }
-    toggleCheckbox(issue, index) {
+    toggleCheckbox(event, issue, index, subIndex) {
         const currentIssues = this.dataObject[index].Issues;
         this.selectedValuesArray[index] = this.selectedValuesArray[index] || [];
         const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
+        console.log('selectedValues', selectedValues);
         if (issue === 'Select All') {
-            const currentIssues = this.dataObject[index].Issues.map((item) => item.text);
-            if (selectedValues.length === currentIssues.length) {
-                // If all items are already selected, deselect all
-                this.selectedValuesArray[index] = [];
+            const checkedState = event.target.checked;
+            this.dataObject[index].Issues.forEach((item) => {
+                item.checked = checkedState;
+            });
+            if (checkedState) {
+                this.selectedValuesArray[index] = currentIssues.slice(); // Copy all items
             }
             else {
-                // Otherwise, select all items
-                this.selectedValuesArray[index] = [...currentIssues];
+                this.selectedValuesArray[index] = []; // Deselect all items
             }
         }
         else {
-            if (selectedValues.includes(issue)) {
-                this.selectedValuesArray[index] = selectedValues.filter((item) => item !== issue); // Deselect the individual item if already selected
+            this.dataObject[index].Issues[subIndex].checked = event.target.checked;
+            let checkedData = this.dataObject[index].Issues[subIndex];
+            if (this.dataObject[index].Issues[subIndex].checked) {
+                this.selectedValuesArray[index].push(checkedData);
             }
             else {
-                this.selectedValuesArray[index].push(issue); // Select the individual item if not already selected
+                this.selectedValuesArray[index] = this.selectedValuesArray[index].filter((el) => el?.checked === true);
             }
         }
-        // Update "Select All" checkbox status based on selected values
         const selectAllId = `selectall${index}`;
         const selectAllElement = document.getElementById(selectAllId);
         if (selectAllElement) {
@@ -3467,7 +3518,8 @@ class FiltersComponent {
         this.Opendropdown = false;
     }
     searchData(event, i) {
-        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, 'i').test(item.text));
+        const searchTerm = event.target.value.trim(); // Trim whitespace
+        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(searchTerm, 'i').test(item.text));
         this.dataObject[i].Issues = filteredIssues;
         if (filteredIssues.length) {
             this.noFilter = false;
@@ -3477,32 +3529,18 @@ class FiltersComponent {
         }
     }
     Apply() {
-        for (let i = 0; i < this.selectedValuesArray.length; i++) {
-            const selectedValues = this.selectedValuesArray[i];
-            const issues = this.dataObject[i].Issues;
-            if (selectedValues) {
-                this.selectedValuesArray[i] = selectedValues.map((selectedId) => {
-                    const issue = issues.find((issueItem) => issueItem.text === selectedId);
-                    return issue ? issue : ''; // Get the text corresponding to the id
-                });
-            }
-        }
         this.Opendropdown = false;
-        this.selectedValuesArray.forEach((item, index) => {
-            item = item.map((ele) => ele.id);
-            this.selectedValuesArray[index] = item;
-        });
         this.responseArray.forEach((item, index) => {
             item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] : [];
         });
         this.appliedFilters.emit(this.responseArray);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters", inputs: { dataObject: "dataObject" }, outputs: { appliedFilters: "appliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n                    \r\n    <button type=\"button\" (click)=\"opendropdown($event)\" \r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      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\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    \r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                 <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                      (change)=\"toggleCheckbox('Select All', i)\">\r\n                    <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n     \r\n                <div class=\"border border-gray mt-3 \"></div>\r\n     \r\n                <div class=\"mt-3 d-flex align-items-center\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                            </span>\r\n                            <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                 placeholder=\"Search\" autocomplete=\"off\" />\r\n                </div>\r\n     \r\n                <div *ngFor=\"let issue of item.Issues\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                     (change)=\"toggleCheckbox(issue.text,i)\">\r\n                    <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                        {{ issue.text }}\r\n                    </label>\r\n                </div>\r\n                <div class=\"mt-5 d-flex justify-content-center\">\r\n                    <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n       \r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;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}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FiltersComponent, selector: "lib-filters", inputs: { dataObject: "dataObject" }, outputs: { appliedFilters: "appliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n                   \r\n    <button type=\"button\" (click)=\"opendropdown($event)\"\r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      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\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div *ngIf=\"item.type !== 'single'\">\r\n                <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                    <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                     <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n                </div>\r\n                <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n                         (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n                <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n                class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg></span>\r\n                </button>\r\n                <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n                        <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n                        <li [ngClass]=\"selectedValuesArray[i]?.text == item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n                        </ul>\r\n                </div>\r\n              </div>\r\n        </div>\r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;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}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-filters', template: "<div class=\"position-relative\">\r\n                    \r\n    <button type=\"button\" (click)=\"opendropdown($event)\" \r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      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\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    \r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                 <span class=\"\">{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n            </div>\r\n            <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                      (change)=\"toggleCheckbox('Select All', i)\">\r\n                    <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n     \r\n                <div class=\"border border-gray mt-3 \"></div>\r\n     \r\n                <div class=\"mt-3 d-flex align-items-center\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                            <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg>\r\n                            </span>\r\n                            <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                 placeholder=\"Search\" autocomplete=\"off\" />\r\n                </div>\r\n     \r\n                <div *ngFor=\"let issue of item.Issues\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                     (change)=\"toggleCheckbox(issue.text,i)\">\r\n                    <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                        {{ issue.text }}\r\n                    </label>\r\n                </div>\r\n                <div class=\"mt-5 d-flex justify-content-center\">\r\n                    <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n       \r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;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}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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"] }]
+            args: [{ selector: 'lib-filters', template: "<div class=\"position-relative\">\r\n                   \r\n    <button type=\"button\" (click)=\"opendropdown($event)\"\r\n    class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n      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\"\r\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n    </svg>\r\n    <span class=\"ms-2\">Filter</span> </button>\r\n    <div class=\"card p-5 dropdown1 position-absolute\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\r\n        <div class=\"w-100 border border-gray mt-3\"></div>\r\n        <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n            <div *ngIf=\"item.type !== 'single'\">\r\n                <div class=\"dropdown form-select position-relative d-flex justify-content-between\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n                    <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n                     <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n                </div>\r\n                <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n                    <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"  [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                          (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n                        <label class=\"form-check-label px-2\" for=\"selectall{{i}}\">\r\n                            Select All\r\n                        </label>\r\n                    </div>\r\n         \r\n                    <div class=\"border border-gray mt-3 \"></div>\r\n         \r\n                    <div class=\"mt-3 d-flex align-items-center\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                                <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg>\r\n                                </span>\r\n                                <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n                                     placeholder=\"Search\" autocomplete=\"off\" />\r\n                    </div>\r\n         \r\n                    <div *ngFor=\"let issue of item.Issues;let j=index\"  class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2\">\r\n                        <input class=\"form-check-input\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n                         (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n                        <label class=\"form-check-label px-2\" for=\"option{{issue.text}}\">\r\n                            {{ issue.text }}\r\n                        </label>\r\n                    </div>\r\n                    <div class=\"mt-5 d-flex justify-content-center\">\r\n                        <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n                <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n                class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                    <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                    </svg></span>\r\n                </button>\r\n                <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n                        <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n                        <li [ngClass]=\"selectedValuesArray[i]?.text == item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n                        </ul>\r\n                </div>\r\n              </div>\r\n        </div>\r\n        <div role=\"group\" class=\"d-flex justify-content-between\">\r\n            <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;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}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 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}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 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: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.Router }], propDecorators: { dataObject: [{
                 type: Input
             }], appliedFilters: [{
@@ -3565,7 +3603,7 @@ class TranslationService {
         return (localStorage.getItem(LOCALIZATION_LOCAL_STORAGE_KEY) ||
             this.translate.getDefaultLang());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, decorators: [{
@@ -3573,7 +3611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$3.TranslateService }] });
 
 // USA
 const locale$5 = {
@@ -4510,6 +4548,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: AuthService }] });
 
+class GlobalStateService {
+    userData = new BehaviorSubject(null);
+    environment = new BehaviorSubject(null);
+    dataRangeValue = new BehaviorSubject(null);
+    selectedClient = new BehaviorSubject(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class ToastService {
     constructor() { }
     getSuccessToast(message) {
@@ -4593,12 +4646,12 @@ class HttpAuthInterceptor {
         });
         return next.handle(request);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, deps: [{ token: GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, deps: [{ token: i1$2.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: GlobalStateService }] });
+        }], ctorParameters: () => [{ type: i1$2.GlobalStateService }] });
 
 /*
  * Public API Surface of tango-app-shared