tango-app-ui-shared 3.0.3 → 3.0.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, ViewChild, NgModule, Injectable } from '@angular/core';
+import { Component, Input, HostBinding, HostListener, ViewChild, Injectable, EventEmitter, ChangeDetectionStrategy, Output, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, NavigationCancel, ResolveEnd, RouterModule } from '@angular/router';
 import * as i1 from 'tango-app-ui-metronics';
@@ -8,11 +8,25 @@ import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
+import * as dayjs from 'dayjs';
+import 'dayjs/locale/en';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import * as i2$1 from 'projects/tango-app-shared/src/lib/services/global-state.service';
+import * as i3$1 from 'projects/tango-app-shared/src/lib/services/auth.service';
+import * as i2$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i6 from 'ngx-daterangepicker-material';
+import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
+import { BehaviorSubject, throwError, map, catchError } from 'rxjs';
+import * as i3$2 from '@angular/common/http';
+import * as i3$3 from 'ngx-pagination';
+import { NgxPaginationModule } from 'ngx-pagination';
 import * as i1$2 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';
-import { BehaviorSubject } from 'rxjs';
+import Swal from 'sweetalert2';
 
 class HeaderMenuComponent {
     pageInfo;
@@ -40,11 +54,11 @@ class HeaderMenuComponent {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i1.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: HeaderMenuComponent, selector: "lib-header-menu", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          {{description}}\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: HeaderMenuComponent, selector: "lib-header-menu", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          {{description}}\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header-menu', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          {{description}}\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"] }]
+            args: [{ selector: 'lib-header-menu', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          {{description}}\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.PageInfoService }, { type: i0.ChangeDetectorRef }], propDecorators: { appPageTitleDirection: [{
                 type: Input
             }], appPageTitleDescription: [{
@@ -1559,11 +1573,11 @@ class PageTitleComponent {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PageTitleComponent, selector: "lib-page-title", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleBreadcrumb: "appPageTitleBreadcrumb", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n\r\n  <ng-container *ngIf=\"appPageTitleBreadcrumb\">\r\n    <ng-container *ngIf=\"bc$ | async as _bc\">\r\n      <ng-container *ngIf=\"_bc.length > 0\">\r\n        <!-- <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n          <span class=\"h-20px border-gray-300 border-start mx-4\"></span>\r\n        </ng-container> -->\r\n        <!--begin::Breadcrumb-->\r\n\r\n        <ul class=\"breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0\"\r\n          [ngClass]=\"{'pt-1': appPageTitleDirection === 'column'}\">\r\n          <li *ngFor=\"let bc of _bc\" class=\"breadcrumb-item\"\r\n            [ngClass]=\"!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''\"\r\n            [ngClass]=\"!bc.isSeparator && !bc.isActive ? 'text-muted' : ''\">\r\n            <ng-container *ngIf=\"!bc.isSeparator\">\r\n              <a class=\"inactive-bc text-hover-primary\" [routerLink]=\"bc.path\">\r\n                {{ bc.title }}\r\n              </a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"bc.isSeparator\">\r\n              <img src=\"/assets/tango/layout/bc-seperator.svg\" alt=\"\">\r\n            </ng-container>\r\n          </li>\r\n          <li class=\"breadcrumb-item active-bc\">{{ title }}</li>\r\n        </ul>\r\n        <!--end::Breadcrumb-->\r\n\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".active-bc{color:#00a3ff}.inactive-bc{color:#98a2b3}\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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PageTitleComponent, selector: "lib-page-title", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleBreadcrumb: "appPageTitleBreadcrumb", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n\r\n  <ng-container *ngIf=\"appPageTitleBreadcrumb\">\r\n    <ng-container *ngIf=\"bc$ | async as _bc\">\r\n      <ng-container *ngIf=\"_bc.length > 0\">\r\n        <!-- <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n          <span class=\"h-20px border-gray-300 border-start mx-4\"></span>\r\n        </ng-container> -->\r\n        <!--begin::Breadcrumb-->\r\n\r\n        <ul class=\"breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0\"\r\n          [ngClass]=\"{'pt-1': appPageTitleDirection === 'column'}\">\r\n          <li *ngFor=\"let bc of _bc\" class=\"breadcrumb-item\"\r\n            [ngClass]=\"!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''\"\r\n            [ngClass]=\"!bc.isSeparator && !bc.isActive ? 'text-muted' : ''\">\r\n            <ng-container *ngIf=\"!bc.isSeparator\">\r\n              <a class=\"inactive-bc text-hover-primary\" [routerLink]=\"bc.path\">\r\n                {{ bc.title }}\r\n              </a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"bc.isSeparator\">\r\n              <img src=\"/assets/tango/layout/bc-seperator.svg\" alt=\"\">\r\n            </ng-container>\r\n          </li>\r\n          <li class=\"breadcrumb-item active-bc\">{{ title }}</li>\r\n        </ul>\r\n        <!--end::Breadcrumb-->\r\n\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".active-bc{color:var(--Primary-600, #00A3FF);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.inactive-bc{color:#98a2b3}\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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-page-title', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n\r\n  <ng-container *ngIf=\"appPageTitleBreadcrumb\">\r\n    <ng-container *ngIf=\"bc$ | async as _bc\">\r\n      <ng-container *ngIf=\"_bc.length > 0\">\r\n        <!-- <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n          <span class=\"h-20px border-gray-300 border-start mx-4\"></span>\r\n        </ng-container> -->\r\n        <!--begin::Breadcrumb-->\r\n\r\n        <ul class=\"breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0\"\r\n          [ngClass]=\"{'pt-1': appPageTitleDirection === 'column'}\">\r\n          <li *ngFor=\"let bc of _bc\" class=\"breadcrumb-item\"\r\n            [ngClass]=\"!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''\"\r\n            [ngClass]=\"!bc.isSeparator && !bc.isActive ? 'text-muted' : ''\">\r\n            <ng-container *ngIf=\"!bc.isSeparator\">\r\n              <a class=\"inactive-bc text-hover-primary\" [routerLink]=\"bc.path\">\r\n                {{ bc.title }}\r\n              </a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"bc.isSeparator\">\r\n              <img src=\"/assets/tango/layout/bc-seperator.svg\" alt=\"\">\r\n            </ng-container>\r\n          </li>\r\n          <li class=\"breadcrumb-item active-bc\">{{ title }}</li>\r\n        </ul>\r\n        <!--end::Breadcrumb-->\r\n\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".active-bc{color:#00a3ff}.inactive-bc{color:#98a2b3}\n"] }]
+            args: [{ selector: 'lib-page-title', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n\r\n  <ng-container *ngIf=\"appPageTitleBreadcrumb\">\r\n    <ng-container *ngIf=\"bc$ | async as _bc\">\r\n      <ng-container *ngIf=\"_bc.length > 0\">\r\n        <!-- <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n          <span class=\"h-20px border-gray-300 border-start mx-4\"></span>\r\n        </ng-container> -->\r\n        <!--begin::Breadcrumb-->\r\n\r\n        <ul class=\"breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0\"\r\n          [ngClass]=\"{'pt-1': appPageTitleDirection === 'column'}\">\r\n          <li *ngFor=\"let bc of _bc\" class=\"breadcrumb-item\"\r\n            [ngClass]=\"!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''\"\r\n            [ngClass]=\"!bc.isSeparator && !bc.isActive ? 'text-muted' : ''\">\r\n            <ng-container *ngIf=\"!bc.isSeparator\">\r\n              <a class=\"inactive-bc text-hover-primary\" [routerLink]=\"bc.path\">\r\n                {{ bc.title }}\r\n              </a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"bc.isSeparator\">\r\n              <img src=\"/assets/tango/layout/bc-seperator.svg\" alt=\"\">\r\n            </ng-container>\r\n          </li>\r\n          <li class=\"breadcrumb-item active-bc\">{{ title }}</li>\r\n        </ul>\r\n        <!--end::Breadcrumb-->\r\n\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".active-bc{color:var(--Primary-600, #00A3FF);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.inactive-bc{color:#98a2b3}\n"] }]
         }], ctorParameters: () => [{ type: i1.PageInfoService }, { type: i0.ChangeDetectorRef }], propDecorators: { appPageTitleDirection: [{
                 type: Input
             }], appPageTitleBreadcrumb: [{
@@ -1572,117 +1586,263 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 type: Input
             }] } });
 
-class AccountingComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AccountingComponent, selector: "lib-accounting", ngImport: i0, template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-accounting', template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n" }]
-        }], ctorParameters: () => [] });
-
+dayjs.extend(utc);
+dayjs.extend(timezone);
 class ClassicComponent {
     layout;
+    globalService;
+    service;
     unsubscribe = [];
-    appToolbarPrimaryButton;
-    appToolbarPrimaryButtonLabel = '';
-    appToolbarPrimaryButtonUrl = '';
-    appToolbarPrimaryButtonModal = '';
-    appToolbarSecondaryButton;
-    appToolbarFixedDesktop;
-    appToolbarSecondaryButtonLabel = '';
-    appToolbarSecondaryButtonUrl = '';
-    appToolbarSecondaryButtonModal = '';
-    appToolbarFilterButton;
-    appToolbarDaterangepickerButton;
-    secondaryButtonClass = '';
-    filterButtonClass = '';
-    daterangepickerButtonClass = '';
-    constructor(layout) {
+    dataObject = [
+        { Description: 'Clients', Issues: [] }
+    ];
+    isCustomDate;
+    dummyArray = [];
+    noFilter = false;
+    searchValue;
+    responseArray = [];
+    getClientList;
+    constructor(layout, globalService, service) {
         this.layout = layout;
+        this.globalService = globalService;
+        this.service = service;
+    }
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
+    // @Input() dataObject: any[] = [];
+    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 = [];
+    selectedValuesArray = [];
+    selectedDateRange = {};
+    selectedFilters = {
+        store: null,
+        stores: [],
+        date: null,
+    };
     ngOnInit() {
-        this.updateProps();
+        this.service.getClients().subscribe({
+            next: (res) => {
+                this.getClientList = res?.data?.result;
+                this.dataObject[0].Issues = this.getClientList;
+            }
+        });
+        console.log(this.dataObject);
+        this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+        this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+        // this.updateProps();
         const subscr = this.layout.layoutConfigSubject
             .asObservable()
             .subscribe(() => {
-            this.updateProps();
+            // this.updateProps();
         });
         this.unsubscribe.push(subscr);
+        try {
+            // Parse dates from localStorage and format them
+            const headerFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
+            if (headerFilters.stores) {
+                this.selectedValuesArray = [headerFilters.stores];
+            }
+            if (headerFilters.date) {
+                this.globalService.dataRangeValue.next(this.selectedFilters);
+                this.selectedDateRange.startDate = headerFilters.date.startDate;
+                this.selectedDateRange.endDate = headerFilters.date.endDate;
+            }
+        }
+        catch (error) {
+            console.error('Error parsing dates from localStorage:', error);
+            // Handle parsing error, e.g., set default dates
+            // Example:
+            this.selectedDateRange.startDate = dayjs().format('MM-DD-YYYY');
+            this.selectedDateRange.endDate = dayjs().format('MM-DD-YYYY');
+        }
+    }
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown1')) {
+            this.Opendropdown = false;
+        }
+        if (!target.closest('.dropdown-content')) {
+            this.dataObject.forEach((item, i) => {
+                item.isOpen = false;
+            });
+        }
     }
-    updateProps() {
-        this.appToolbarPrimaryButton = this.layout.getProp('app.toolbar.primaryButton');
-        this.appToolbarPrimaryButtonLabel = this.layout.getProp('app.toolbar.primaryButtonLabel');
-        this.appToolbarPrimaryButtonUrl = this.layout.getProp('app.toolbar.primaryButtonUrl');
-        this.appToolbarPrimaryButtonModal = this.layout.getProp('app.toolbar.primaryButtonModal');
-        this.appToolbarSecondaryButton = this.layout.getProp('app.toolbar.secondaryButton');
-        this.secondaryButtonClass = this.appToolbarFixedDesktop
-            ? 'btn-light'
-            : 'bg-body btn-color-gray-700 btn-active-color-primary';
-        this.appToolbarFixedDesktop = this.layout.getProp('appToolbarFixedDesktop');
-        this.appToolbarSecondaryButtonLabel = this.layout.getProp('appToolbarSecondaryButtonLabel');
-        this.appToolbarSecondaryButtonUrl = this.layout.getProp('appToolbarSecondaryButtonUrl');
-        this.appToolbarSecondaryButtonModal = this.layout.getProp('appToolbarSecondaryButtonModal');
-        this.appToolbarFilterButton = this.layout.getProp('appToolbarFilterButton');
-        this.appToolbarDaterangepickerButton = this.layout.getProp('appToolbarDaterangepickerButton');
-        this.filterButtonClass = this.appToolbarFixedDesktop
-            ? 'btn-light'
-            : 'bg-body btn-color-gray-600 btn-active-color-primary';
-        this.daterangepickerButtonClass = this.appToolbarFixedDesktop
-            ? 'btn-light'
-            : 'bg-body btn-color-gray-700 btn-active-color-primary';
+    // ngOnInit() {
+    //   console.log(this.dataObject,'obj');
+    // }
+    opendropdown(e) {
+        console.log(687);
+        e.stopPropagation();
+        this.Opendropdown = !this.Opendropdown;
     }
-    ngOnDestroy() {
-        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    Dropdown(value, index, event) {
+        event.stopPropagation();
+        this.dataObject.forEach((item, i) => {
+            if (i !== index) {
+                item.isOpen = false; // Close other dropdowns
+            }
+        });
+        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));
+    //   }
+    // }
+    searchData(event, i) {
+        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, 'i').test(item.clientId));
+        this.dataObject[i].Issues = filteredIssues;
+        if (filteredIssues.length) {
+            this.noFilter = false;
+        }
+        else {
+            this.noFilter = true;
+        }
+    }
+    toggleCheckbox(issue, index) {
+        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
+        if (issue === 'Select All') {
+            const currentIssues = this.dataObject[index].Issues.map((item) => item.clientId);
+            if (selectedValues.length === currentIssues.length) {
+                // If all items are already selected, deselect all
+                this.selectedValuesArray[index] = [];
+            }
+            else {
+                // Otherwise, select all items
+                this.selectedValuesArray[index] = [...currentIssues];
+            }
+        }
+        else {
+            if (selectedValues.includes(issue)) {
+                this.selectedValuesArray[index] = selectedValues.filter((item) => item !== issue); // Deselect the individual item if already selected
+            }
+            else {
+                this.selectedValuesArray[index].push(issue); // Select the individual item if not already selected
+            }
+        }
+        // Update "Select All" checkbox status based on selected values
+        const selectAllId = `selectall${index}`;
+        const selectAllElement = document.getElementById(selectAllId);
+        if (selectAllElement) {
+            selectAllElement.checked = selectedValues.length === currentIssues.length;
+        }
+        // Update checkboxes based on selected values
+        currentIssues.forEach((item) => {
+            const isChecked = this.selectedValuesArray[index].includes(item);
+            const checkboxId = `option${item}`;
+            const checkboxElement = document.getElementById(checkboxId);
+            if (checkboxElement) {
+                checkboxElement.checked = isChecked;
+            }
+        });
+    }
+    Reset() {
+        this.selectedValuesArray = [];
+        this.Opendropdown = false;
+    }
+    Apply() {
+        var selectedValue = [];
+        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.clientId === selectedId);
+                    selectedValue.push(issue);
+                    return issue ? issue : ''; // Get the text corresponding to the id
+                });
+            }
+        }
+        this.globalService.dataRangeValue.next(this.selectedFilters);
+        console.log(this.selectedFilters);
+        this.Opendropdown = false;
+        this.selectedValuesArray.forEach((item, index) => {
+            item = item.map((ele) => ele.clientId);
+            this.selectedValuesArray[index] = item;
+        });
+        this.responseArray.forEach((item, index) => {
+            item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] : [];
+        });
+        //  this.selectedFilters.stores=this.responseArray
+        this.selectedFilters.stores = this.responseArray[0].Issues;
+        this.selectedFilters.date = this.selectedDateRange;
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+    }
+    ranges = {
+        'Today': [dayjs(), dayjs()],
+        'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        'This Week': [dayjs().subtract(6, 'days'), dayjs()],
+        'Last Week': [dayjs().subtract(14, 'days').startOf('days'), dayjs().subtract(8, 'days').endOf('days')],
+        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
+        'Last Month': [
+            dayjs().subtract(1, 'month').startOf('month'),
+            dayjs().subtract(1, 'month').endOf('month')
+        ]
+    };
+    onStartDateChange(event) {
+        if (dayjs(event.startDate).isValid()) {
+            this.isCustomDate = (m) => {
+                const isValidDate = m > dayjs() || m > dayjs(event.startDate.add(90, 'days'));
+                return isValidDate ? 'invalid-date' : false;
+            };
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ClassicComponent, selector: "lib-classic", ngImport: i0, template: "<ng-container *ngIf=\"appToolbarFilterButton\">\r\n  <!--begin::Filter menu-->\r\n  <div class=\"m-0\">\r\n    <!--begin::Menu toggle-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-flex fw-bold\" [ngClass]=\"daterangepickerButtonClass\" data-kt-menu-trigger=\"click\"\r\n      data-kt-menu-placement=\"bottom-end\">\r\n      <lib-keenicon name=\"filter\" class=\"fs-6 text-muted me-1\"></lib-keenicon>\r\n      Filter\r\n    </a>\r\n    <!--end::Menu toggle-->\r\n\r\n    <!-- <lib-dropdown-menu1></lib-dropdown-menu1> -->\r\n  </div>\r\n  <!--end::Filter menu-->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"appToolbarDaterangepickerButton\">\r\n  <div data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\"\r\n    class=\"btn btn-sm fw-bold  d-flex align-items-center px-4\" [ngClass]=\"daterangepickerButtonClass\">\r\n    <!--begin::Display range-->\r\n    <div class=\"text-gray-600 fw-bold\">\r\n      Loading date range...\r\n    </div>\r\n    <!--end::Display range-->\r\n    <lib-keenicon name=\"calendar-8\" class=\"fs-1 ms-2 me-0\"></lib-keenicon>\r\n  </div>\r\n</ng-container>\r\n\r\n<!--begin::Secondary button-->\r\n<a href=\"javascript:;\" class=\"btn btn-sm btn-flex btn-light fw-bold\">\r\n  Filter\r\n</a>\r\n<!--end::Secondary button-->\r\n\r\n<!--begin::Primary button--> \r\n<a href=\"javascript:;\" class=\"btn btn-sm fw-bold btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#kt_modal_create_app\">Create</a>\r\n<!--end::Primary button-->\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: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+    datechange(event) {
+        if (event && event.startDate && event.endDate) {
+            if (dayjs(event.startDate).isValid() && dayjs(event.endDate).isValid()) {
+                // Dates are valid, proceed with formatting
+                this.selectedDateRange.startDate = dayjs(event.startDate).utc().format('DD-MM-YYYY');
+                this.selectedDateRange.endDate = dayjs(event.endDate).utc().format('DD-MM-YYYY');
+            }
+            else {
+                // Dates are not valid, handle the scenario accordingly
+                console.error('Invalid dates provided:', event.startDate, event.endDate);
+                // If you want to fallback to stored filters when the dates are invalid, you can keep the existing logic
+                const storedFilters = JSON.parse(localStorage.getItem('dateRangeFilters') || '{}');
+                if (storedFilters.startDate && storedFilters.endDate) {
+                    this.selectedDateRange.startDate = dayjs(storedFilters.startDate).format('DD-MM-YYYY');
+                    this.selectedDateRange.endDate = dayjs(storedFilters.endDate).format('DD-MM-YYYY');
+                }
+            }
+        }
+        else {
+            // Event object or its properties are null, handle the scenario accordingly
+            console.error('Invalid event object:', event);
+            // Fallback to stored filters or any other handling logic as needed
+        }
+        this.selectedFilters.date = this.selectedDateRange;
+        // this.globalService.sendData(JSON.stringify(this.selectedFilters.date));
+        localStorage.setItem('dateRangeFilters', JSON.stringify(this.selectedDateRange));
+        // this.globalService.sendData(this.selectedDateRange);
+    }
+    onDateSelect(event) {
+        console.log('Selected date:', event);
+        // Handle the selected date here
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }, { token: i2$1.GlobalStateService }, { token: i3$1.AuthService }], 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}\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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.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: "<ng-container *ngIf=\"appToolbarFilterButton\">\r\n  <!--begin::Filter menu-->\r\n  <div class=\"m-0\">\r\n    <!--begin::Menu toggle-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-flex fw-bold\" [ngClass]=\"daterangepickerButtonClass\" data-kt-menu-trigger=\"click\"\r\n      data-kt-menu-placement=\"bottom-end\">\r\n      <lib-keenicon name=\"filter\" class=\"fs-6 text-muted me-1\"></lib-keenicon>\r\n      Filter\r\n    </a>\r\n    <!--end::Menu toggle-->\r\n\r\n    <!-- <lib-dropdown-menu1></lib-dropdown-menu1> -->\r\n  </div>\r\n  <!--end::Filter menu-->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"appToolbarDaterangepickerButton\">\r\n  <div data-kt-daterangepicker=\"true\" data-kt-daterangepicker-opens=\"left\"\r\n    class=\"btn btn-sm fw-bold  d-flex align-items-center px-4\" [ngClass]=\"daterangepickerButtonClass\">\r\n    <!--begin::Display range-->\r\n    <div class=\"text-gray-600 fw-bold\">\r\n      Loading date range...\r\n    </div>\r\n    <!--end::Display range-->\r\n    <lib-keenicon name=\"calendar-8\" class=\"fs-1 ms-2 me-0\"></lib-keenicon>\r\n  </div>\r\n</ng-container>\r\n\r\n<!--begin::Secondary button-->\r\n<a href=\"javascript:;\" class=\"btn btn-sm btn-flex btn-light fw-bold\">\r\n  Filter\r\n</a>\r\n<!--end::Secondary button-->\r\n\r\n<!--begin::Primary button--> \r\n<a href=\"javascript:;\" class=\"btn btn-sm fw-bold btn-primary\" data-bs-toggle=\"modal\" data-bs-target=\"#kt_modal_create_app\">Create</a>\r\n<!--end::Primary button-->\r\n" }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }] });
-
-class ExtendedComponent {
-    constructor() { }
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ExtendedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ExtendedComponent, selector: "lib-extended", ngImport: i0, template: "<!--begin::Label-->\r\n<span class=\"fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block\">Team:</span>\r\n<!--end::Label-->\r\n\r\n<!--begin::Users-->\r\n<div class=\"symbol-group symbol-hover flex-shrink-0 me-2\">\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-warning text-inverse-warning\">A</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-1.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-2.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-primary text-inverse-primary\">S</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-5.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-danger text-inverse-danger\">P</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-20.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n</div>\r\n<!--end::Users-->\r\n\r\n<!--begin::Button-->\r\n<div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite a team member\">\r\n  <a href=\"#\" class=\"btn btn-sm btn-icon\">\r\n    <lib-keenicon name=\"plus-square\" class=\"fs-2hx text-success\"></lib-keenicon>\r\n  </a>\r\n</div>\r\n<!--end::Button-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center overflow-auto\">\r\n  <!--begin::Search-->\r\n  <div class=\"position-relative my-1\">\r\n    <lib-keenicon name=\"magnifier\" class=\"fs-3 text-gray500 position-absolute top-50 translate-middle ps-10\"></lib-keenicon>\r\n    <input type=\"text\" class=\"form-control form-control-sm form-control-solid w-150px ps-10\" name=\"Search Team\" value=\"\"\r\n      placeholder=\"Search Team\" />\r\n  </div>\r\n  <!--end::Search-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-6\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-125px form-select-solid me-6\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-3 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"row-horizontal\" class=\"fs-3 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n", styles: [""], dependencies: [{ kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ExtendedComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-extended', template: "<!--begin::Label-->\r\n<span class=\"fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block\">Team:</span>\r\n<!--end::Label-->\r\n\r\n<!--begin::Users-->\r\n<div class=\"symbol-group symbol-hover flex-shrink-0 me-2\">\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-warning text-inverse-warning\">A</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-1.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-2.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-primary text-inverse-primary\">S</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-5.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-danger text-inverse-danger\">P</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-20.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n</div>\r\n<!--end::Users-->\r\n\r\n<!--begin::Button-->\r\n<div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite a team member\">\r\n  <a href=\"#\" class=\"btn btn-sm btn-icon\">\r\n    <lib-keenicon name=\"plus-square\" class=\"fs-2hx text-success\"></lib-keenicon>\r\n  </a>\r\n</div>\r\n<!--end::Button-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center overflow-auto\">\r\n  <!--begin::Search-->\r\n  <div class=\"position-relative my-1\">\r\n    <lib-keenicon name=\"magnifier\" class=\"fs-3 text-gray500 position-absolute top-50 translate-middle ps-10\"></lib-keenicon>\r\n    <input type=\"text\" class=\"form-control form-control-sm form-control-solid w-150px ps-10\" name=\"Search Team\" value=\"\"\r\n      placeholder=\"Search Team\" />\r\n  </div>\r\n  <!--end::Search-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-6\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-125px form-select-solid me-6\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-3 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"row-horizontal\" class=\"fs-3 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n" }]
-        }], ctorParameters: () => [] });
-
-class ReportsComponent {
-    appPageTitleDisplay;
-    constructor() { }
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ReportsComponent, selector: "lib-reports", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Filter By:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"flex-shrink-0 \">\r\n    <ul class=\"nav\">\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Today</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"\">Week</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Day</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n<!--end::Wrapper-->\r\n\r\n<!--begin::Separartor-->\r\n<div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n<!--end::Separartor-->\r\n\r\n<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-md-125px form-select-solid\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center ms-3\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-2 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"abstract-14\" class=\"fs-2 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Wrapper-->\r\n", styles: [""], dependencies: [{ kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-reports', template: "<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Filter By:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"flex-shrink-0 \">\r\n    <ul class=\"nav\">\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Today</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"\">Week</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Day</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n<!--end::Wrapper-->\r\n\r\n<!--begin::Separartor-->\r\n<div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n<!--end::Separartor-->\r\n\r\n<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-md-125px form-select-solid\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center ms-3\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-2 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"abstract-14\" class=\"fs-2 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Wrapper-->\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { appPageTitleDisplay: [{
-                type: Input
-            }] } });
-
-class SaasComponent {
-    appPageTitleDisplay;
-    constructor() { }
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SaasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SaasComponent, selector: "lib-saas", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm form-select-solid w-100px w-xxl-125px\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold\">Impact Level:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::NoUiSlider-->\r\n  <div class=\"d-flex align-items-center ps-4\">\r\n    <div id=\"kt_app_toolbar_slider\" class=\"noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm\"></div>\r\n\r\n    <span id=\"kt_app_toolbar_slider_value\"\r\n      class=\"d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success\"\r\n      data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Set impact level\">\r\n    </span>\r\n  </div>\r\n  <!--end::NoUiSlider-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Quick Tools:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex\">\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new page\">\r\n      <lib-keenicon name=\"files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new category\">\r\n      <lib-keenicon name=\"add-files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new section\">\r\n      <lib-keenicon name=\"search-list\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n", styles: [""], dependencies: [{ kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SaasComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-saas', template: "<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm form-select-solid w-100px w-xxl-125px\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold\">Impact Level:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::NoUiSlider-->\r\n  <div class=\"d-flex align-items-center ps-4\">\r\n    <div id=\"kt_app_toolbar_slider\" class=\"noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm\"></div>\r\n\r\n    <span id=\"kt_app_toolbar_slider_value\"\r\n      class=\"d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success\"\r\n      data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Set impact level\">\r\n    </span>\r\n  </div>\r\n  <!--end::NoUiSlider-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Quick Tools:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex\">\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new page\">\r\n      <lib-keenicon name=\"files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new category\">\r\n      <lib-keenicon name=\"add-files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new section\">\r\n      <lib-keenicon name=\"search-list\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { appPageTitleDisplay: [{
-                type: Input
+            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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2$1.GlobalStateService }, { type: i3$1.AuthService }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class ToolbarComponent {
@@ -1753,11 +1913,11 @@ class ToolbarComponent {
             viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }], 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=\"appToolbarLayout === 'classic'\">\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=\"appToolbarLayout === 'accounting'\">\r\n    <lib-accounting class=\"d-flex align-items-center me-5\"></lib-accounting>\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: AccountingComponent, selector: "lib-accounting" }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ExtendedComponent, selector: "lib-extended" }, { kind: "component", type: ReportsComponent, selector: "lib-reports", inputs: ["appPageTitleDisplay"] }, { kind: "component", type: SaasComponent, selector: "lib-saas", inputs: ["appPageTitleDisplay"] }] });
+    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=\"appToolbarLayout === 'classic'\">\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=\"appToolbarLayout === 'accounting'\">\r\n    <lib-accounting class=\"d-flex align-items-center me-5\"></lib-accounting>\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" }] });
 }
 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=\"appToolbarLayout === 'classic'\">\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=\"appToolbarLayout === 'accounting'\">\r\n    <lib-accounting class=\"d-flex align-items-center me-5\"></lib-accounting>\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" }]
+            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=\"appToolbarLayout === 'classic'\">\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=\"appToolbarLayout === 'accounting'\">\r\n    <lib-accounting class=\"d-flex align-items-center me-5\"></lib-accounting>\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 }], propDecorators: { currentLayoutType: [{
                 type: Input
             }], appToolbarLayout: [{
@@ -1936,11 +2096,11 @@ class SidebarComponent {
         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 px-6\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer> -->\r\n<!--end::Footer-->\r\n", styles: [""], dependencies: [{ kind: "component", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: ["toggleButtonClass", "toggleEnabled", "toggleType", "toggleState"] }, { kind: "component", type: SidebarMenuComponent, selector: "lib-sidebar-menu" }] });
+    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" }] });
 }
 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 px-6\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer> -->\r\n<!--end::Footer-->\r\n" }]
+            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 }] });
 
 class LayoutScrollTopComponent {
@@ -2265,11 +2425,11 @@ class LayoutComponent {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutComponent, deps: [{ token: i1.LayoutInitService }, { token: i1.LayoutService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LayoutComponent, selector: "lib-layout", viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <div class=\"d-flex flex-column flex-column-fluid\">\r\n          <ng-container *ngIf=\"appToolbarDisplay\">\r\n            <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n              [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n          </ng-container>\r\n          <lib-content id=\" kt_app_content\" class=\"app-content\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"], 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: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LayoutComponent, selector: "lib-layout", viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"], 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: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <div class=\"d-flex flex-column flex-column-fluid\">\r\n          <ng-container *ngIf=\"appToolbarDisplay\">\r\n            <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n              [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n          </ng-container>\r\n          <lib-content id=\" kt_app_content\" class=\"app-content\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"] }]
+            args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"] }]
         }], ctorParameters: () => [{ type: i1.LayoutInitService }, { type: i1.LayoutService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { ktSidebar: [{
                 type: ViewChild,
                 args: ['ktSidebar', { static: true }]
@@ -2299,16 +2459,287 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             }] } });
 
 class SidebarFooterComponent {
+    isSubMenuActive = false;
     constructor() { }
-    ngOnInit() { }
+    ngOnInit() {
+    }
+    toggleMenu() {
+        this.isSubMenuActive = !this.isSubMenuActive;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [], 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: "<a target=\"_blank\" \r\n  class=\"btn btn-flex flex-center btn-custom btn-primary overflow-hidden text-nowrap px-0 h-40px w-100\"\r\n  data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss-=\"click\" title=\"Metronic Docs & Components\">\r\n\r\n  <span class=\"btn-label\">\r\n    Docs & Components\r\n  </span>\r\n  <lib-keenicon name=\"document\" class=\"fs-2 m-0\"></lib-keenicon>\r\n</a>\r\n", styles: [""], dependencies: [{ kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+    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\"\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\" 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar-footer', template: "<a target=\"_blank\" \r\n  class=\"btn btn-flex flex-center btn-custom btn-primary overflow-hidden text-nowrap px-0 h-40px w-100\"\r\n  data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss-=\"click\" title=\"Metronic Docs & Components\">\r\n\r\n  <span class=\"btn-label\">\r\n    Docs & Components\r\n  </span>\r\n  <lib-keenicon name=\"document\" class=\"fs-2 m-0\"></lib-keenicon>\r\n</a>\r\n" }]
+            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\"\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\" 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: () => [] });
+
+class AccountingComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AccountingComponent, selector: "lib-accounting", ngImport: i0, template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-accounting', template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
+
+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 AuthService {
+    router;
+    gs;
+    http;
+    clientApiUrl;
+    constructor(router, gs, http) {
+        this.router = router;
+        this.gs = gs;
+        this.http = http;
+        this.gs.environment.subscribe((env) => {
+            if (env) {
+                this.clientApiUrl = env.clientApiUrl;
+            }
+        });
+    }
+    handleError(res) {
+        return throwError(res.error);
+    }
+    logout() {
+        this.router.navigate(['/auth/login'], {
+            queryParams: {},
+        });
+    }
+    getClients() {
+        return this.http.get(`${this.clientApiUrl}/get-clients`, {})
+            .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$2.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: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: GlobalStateService }, { type: i3$2.HttpClient }] });
+
+class CustomSelectComponent {
+    cd;
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown')) {
+            this.showDropdown = false;
+        }
+    }
+    items;
+    searchField;
+    multi;
+    idField;
+    selectedValues = [];
+    disabled;
+    label;
+    selected = new EventEmitter();
+    filteredValues = [];
+    showDropdown;
+    searchValue;
+    constructor(cd) {
+        this.cd = cd;
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] && this.items?.length) {
+            this.initializeItems();
+        }
+        if (changes['selectedValues'] && this.selectedValues?.length) {
+            this.updateSelectedValues();
+        }
+    }
+    initializeItems() {
+        this.filteredValues = this.items.map((item) => ({ ...item }));
+        this.updateSelectedValues();
+    }
+    updateSelectedValues() {
+        this.selectedValues?.forEach((selectedItem) => {
+            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
+            if (item) {
+                item.isSelected = true;
+            }
+        });
+    }
+    openDropdown(event) {
+        event.stopPropagation();
+        this.showDropdown = !this.showDropdown;
+    }
+    onInput(event) {
+        if (!event.target.value) {
+            this.filteredValues = [...this.items];
+        }
+        else {
+            const searchTerm = event.target.value.toLowerCase();
+            this.filteredValues = this.items.filter((item) => item[this.searchField].toLowerCase().includes(searchTerm));
+        }
+        this.cd.detectChanges();
+    }
+    onSelect(event, item) {
+        if (this.multi) {
+            if (event.currentTarget.checked) {
+                this.selectedValues.push({ ...item });
+            }
+            else {
+                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
+            }
+        }
+        else {
+            this.selectedValues = [{ ...item }];
+            this.showDropdown = false;
+        }
+        const valuesToEmit = this.selectedValues.map((value) => {
+            const { isSelected, ...selectedItem } = value;
+            return selectedItem;
+        });
+        this.cd.detectChanges();
+        this.emitSelectedValues(valuesToEmit);
+    }
+    onSelectAll(event) {
+        const selectAll = event.currentTarget.checked;
+        this.filteredValues.forEach((item) => item.isSelected = selectAll);
+        if (selectAll) {
+            this.selectedValues = [...this.filteredValues];
+        }
+        else {
+            this.selectedValues = [];
+        }
+        const valuesToEmit = this.selectedValues.map((value) => {
+            const { isSelected, ...selectedItem } = value;
+            return selectedItem;
+        });
+        this.cd.detectChanges();
+        this.emitSelectedValues(valuesToEmit);
+    }
+    emitSelectedValues(values) {
+        if (this.multi) {
+            this.selected.emit(values);
+        }
+        else {
+            this.selected.emit(values[0]);
+        }
+    }
+    checkIfAllSelected() {
+        return this.filteredValues.every((item) => item.isSelected);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CustomSelectComponent, selector: "lib-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" 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        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi\">\r\n                <div   class=\"form-check\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <label class=\"form-check-label\" for=\"selectAll\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; let i = index\" >\r\n                <div [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"i\">\r\n                    <label class=\"form-check-label\" [for]=\"i\">\r\n                        {{item[searchField]}}\r\n                    </label>\r\n                </div>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n    \r\n</div>\r\n    ", styles: [":host{width:100%;height:100%}.outer-container{z-index:1;position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:200px;overflow-y:scroll;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul li{list-style:none;padding:10px 16px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" 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        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi\">\r\n                <div   class=\"form-check\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <label class=\"form-check-label\" for=\"selectAll\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; let i = index\" >\r\n                <div [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"i\">\r\n                    <label class=\"form-check-label\" [for]=\"i\">\r\n                        {{item[searchField]}}\r\n                    </label>\r\n                </div>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n    \r\n</div>\r\n    ", styles: [":host{width:100%;height:100%}.outer-container{z-index:1;position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:200px;overflow-y:scroll;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul li{list-style:none;padding:10px 16px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], items: [{
+                type: Input
+            }], searchField: [{
+                type: Input
+            }], multi: [{
+                type: Input
+            }], idField: [{
+                type: Input
+            }], selectedValues: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], selected: [{
+                type: Output
+            }] } });
+
+class ClientSettingsComponent {
+    auth;
+    gs;
+    cd;
+    clientList = [];
+    selectedClient;
+    constructor(auth, gs, cd) {
+        this.auth = auth;
+        this.gs = gs;
+        this.cd = cd;
+        this.auth.getClients().subscribe({
+            next: (e) => {
+                if (e) {
+                    this.clientList = e.data.result;
+                    this.selectedClient = this.clientList[0];
+                    this.gs.selectedClient.next(this.selectedClient);
+                    this.cd.detectChanges();
+                }
+            }
+        });
+    }
+    onClientSelect(event) {
+        this.selectedClient = event;
+        this.gs.selectedClient.next(this.selectedClient);
+    }
+    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 ɵ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]=\"'brandName'\" [disabled]=\"false\" [idField]=\"'_id'\"\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]=\"'brandName'\" [disabled]=\"false\" [idField]=\"'_id'\"\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 }] });
+
+class ExtendedComponent {
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ExtendedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ExtendedComponent, selector: "lib-extended", ngImport: i0, template: "<!--begin::Label-->\r\n<span class=\"fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block\">Team:</span>\r\n<!--end::Label-->\r\n\r\n<!--begin::Users-->\r\n<div class=\"symbol-group symbol-hover flex-shrink-0 me-2\">\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-warning text-inverse-warning\">A</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-1.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-2.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-primary text-inverse-primary\">S</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-5.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-danger text-inverse-danger\">P</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-20.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n</div>\r\n<!--end::Users-->\r\n\r\n<!--begin::Button-->\r\n<div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite a team member\">\r\n  <a href=\"#\" class=\"btn btn-sm btn-icon\">\r\n    <lib-keenicon name=\"plus-square\" class=\"fs-2hx text-success\"></lib-keenicon>\r\n  </a>\r\n</div>\r\n<!--end::Button-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center overflow-auto\">\r\n  <!--begin::Search-->\r\n  <div class=\"position-relative my-1\">\r\n    <lib-keenicon name=\"magnifier\" class=\"fs-3 text-gray500 position-absolute top-50 translate-middle ps-10\"></lib-keenicon>\r\n    <input type=\"text\" class=\"form-control form-control-sm form-control-solid w-150px ps-10\" name=\"Search Team\" value=\"\"\r\n      placeholder=\"Search Team\" />\r\n  </div>\r\n  <!--end::Search-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-6\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-125px form-select-solid me-6\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-3 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"row-horizontal\" class=\"fs-3 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ExtendedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-extended', template: "<!--begin::Label-->\r\n<span class=\"fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block\">Team:</span>\r\n<!--end::Label-->\r\n\r\n<!--begin::Users-->\r\n<div class=\"symbol-group symbol-hover flex-shrink-0 me-2\">\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-warning text-inverse-warning\">A</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-1.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-2.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-primary text-inverse-primary\">S</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-5.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-danger text-inverse-danger\">P</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-20.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n</div>\r\n<!--end::Users-->\r\n\r\n<!--begin::Button-->\r\n<div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite a team member\">\r\n  <a href=\"#\" class=\"btn btn-sm btn-icon\">\r\n    <lib-keenicon name=\"plus-square\" class=\"fs-2hx text-success\"></lib-keenicon>\r\n  </a>\r\n</div>\r\n<!--end::Button-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center overflow-auto\">\r\n  <!--begin::Search-->\r\n  <div class=\"position-relative my-1\">\r\n    <lib-keenicon name=\"magnifier\" class=\"fs-3 text-gray500 position-absolute top-50 translate-middle ps-10\"></lib-keenicon>\r\n    <input type=\"text\" class=\"form-control form-control-sm form-control-solid w-150px ps-10\" name=\"Search Team\" value=\"\"\r\n      placeholder=\"Search Team\" />\r\n  </div>\r\n  <!--end::Search-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-6\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-125px form-select-solid me-6\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-3 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"row-horizontal\" class=\"fs-3 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n" }]
         }], ctorParameters: () => [] });
 
+class ReportsComponent {
+    appPageTitleDisplay;
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ReportsComponent, selector: "lib-reports", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Filter By:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"flex-shrink-0 \">\r\n    <ul class=\"nav\">\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Today</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"\">Week</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Day</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n<!--end::Wrapper-->\r\n\r\n<!--begin::Separartor-->\r\n<div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n<!--end::Separartor-->\r\n\r\n<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-md-125px form-select-solid\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center ms-3\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-2 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"abstract-14\" class=\"fs-2 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Wrapper-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-reports', template: "<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Filter By:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"flex-shrink-0 \">\r\n    <ul class=\"nav\">\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Today</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"\">Week</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Day</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n<!--end::Wrapper-->\r\n\r\n<!--begin::Separartor-->\r\n<div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n<!--end::Separartor-->\r\n\r\n<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-md-125px form-select-solid\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center ms-3\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-2 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"abstract-14\" class=\"fs-2 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Wrapper-->\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { appPageTitleDisplay: [{
+                type: Input
+            }] } });
+
+class SaasComponent {
+    appPageTitleDisplay;
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SaasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SaasComponent, selector: "lib-saas", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm form-select-solid w-100px w-xxl-125px\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold\">Impact Level:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::NoUiSlider-->\r\n  <div class=\"d-flex align-items-center ps-4\">\r\n    <div id=\"kt_app_toolbar_slider\" class=\"noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm\"></div>\r\n\r\n    <span id=\"kt_app_toolbar_slider_value\"\r\n      class=\"d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success\"\r\n      data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Set impact level\">\r\n    </span>\r\n  </div>\r\n  <!--end::NoUiSlider-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Quick Tools:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex\">\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new page\">\r\n      <lib-keenicon name=\"files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new category\">\r\n      <lib-keenicon name=\"add-files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new section\">\r\n      <lib-keenicon name=\"search-list\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SaasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-saas', template: "<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm form-select-solid w-100px w-xxl-125px\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold\">Impact Level:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::NoUiSlider-->\r\n  <div class=\"d-flex align-items-center ps-4\">\r\n    <div id=\"kt_app_toolbar_slider\" class=\"noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm\"></div>\r\n\r\n    <span id=\"kt_app_toolbar_slider_value\"\r\n      class=\"d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success\"\r\n      data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Set impact level\">\r\n    </span>\r\n  </div>\r\n  <!--end::NoUiSlider-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Quick Tools:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex\">\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new page\">\r\n      <lib-keenicon name=\"files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new category\">\r\n      <lib-keenicon name=\"add-files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new section\">\r\n      <lib-keenicon name=\"search-list\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { appPageTitleDisplay: [{
+                type: Input
+            }] } });
+
 const BODY_CLASSES = ['bgi-size-cover', 'bgi-position-center', 'bgi-no-repeat'];
 class ErrorsComponent {
     router;
@@ -2424,6 +2855,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{ selector: 'lib-error500', template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2qx text-gray-900 mb-4\">\r\n  System Error\r\n</h1>\r\n<!--end::Title-->\r\n\r\n<!--begin::Text-->\r\n<div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n  Something went wrong! Please try again later.\r\n</div>\r\n<!--end::Text-->\r\n\r\n<!--begin::Illustration-->\r\n<div class=\"mb-11\">\r\n  <img src=\"./assets/media/auth/500-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n  <img src=\"./assets/media/auth/500-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n</div>\r\n<!--end::Illustration-->\r\n\r\n<!--begin::Link-->\r\n<div class=\"mb-0\">\r\n  <a (click)=\"routeToDashboard()\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n</div>\r\n<!--end::Link-->\r\n" }]
         }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1.ThemeModeService }] });
 
+class PaginationComponent {
+    collection = [];
+    itemsPerPage;
+    currentPage;
+    totalItems;
+    directionLinks = false;
+    pageSize;
+    paginationSizes;
+    pageChange = new EventEmitter();
+    pageSizeChange = new EventEmitter();
+    onPageChange(page) {
+        this.pageChange.emit(page);
+    }
+    onPageSizeChange() {
+        this.itemsPerPage = this.pageSize;
+        this.pageSizeChange.emit(this.pageSize);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaginationComponent, selector: "lib-pagination", inputs: { collection: "collection", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", directionLinks: "directionLinks", pageSize: "pageSize", paginationSizes: "paginationSizes" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "\r\n<div class=\"row\">\r\n    <div class=\"col-md-3\"></div>\r\n    <div class=\"col-md-3 mt-4 text-end pe-0\"><span class=\"sub-title\">\r\n        <span class=\"me-3\">Displaying</span>\r\n        <select class=\"border-val \" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange()\">\r\n            <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\">\r\n                {{ size }}\r\n            </option>>\r\n        </select>\r\n        <span class=\"ms-3\">out of {{totalItems}} items</span>\r\n    </span></div>\r\n    <div class=\"col-md-4 text-start ps-0\">\r\n    <ul>\r\n        <li\r\n            *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n        </li>\r\n    </ul>\r\n    <pagination-controls \r\n        (pageChange)=\"onPageChange($event);currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n    </pagination-controls>\r\n    </div>\r\n    <div class=\"col-md-2\"></div>\r\n</div>\r\n", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:40px;height:40px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$3.PaginatePipe, name: "paginate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-pagination', template: "\r\n<div class=\"row\">\r\n    <div class=\"col-md-3\"></div>\r\n    <div class=\"col-md-3 mt-4 text-end pe-0\"><span class=\"sub-title\">\r\n        <span class=\"me-3\">Displaying</span>\r\n        <select class=\"border-val \" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange()\">\r\n            <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\">\r\n                {{ size }}\r\n            </option>>\r\n        </select>\r\n        <span class=\"ms-3\">out of {{totalItems}} items</span>\r\n    </span></div>\r\n    <div class=\"col-md-4 text-start ps-0\">\r\n    <ul>\r\n        <li\r\n            *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n        </li>\r\n    </ul>\r\n    <pagination-controls \r\n        (pageChange)=\"onPageChange($event);currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n    </pagination-controls>\r\n    </div>\r\n    <div class=\"col-md-2\"></div>\r\n</div>\r\n", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:40px;height:40px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"] }]
+        }], propDecorators: { collection: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], currentPage: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], directionLinks: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], paginationSizes: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }], pageSizeChange: [{
+                type: Output
+            }] } });
+
+class FiltersComponent {
+    elementRef;
+    renderer;
+    router;
+    dataObject = [];
+    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 = [];
+    selectedValuesArray = [];
+    searchValue;
+    dummyArray = [];
+    noFilter = false;
+    responseArray = [];
+    constructor(elementRef, renderer, router) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.router = router;
+    }
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown1')) {
+            this.Opendropdown = false;
+        }
+        if (!target.closest('.dropdown-content')) {
+            this.dataObject.forEach((item, i) => {
+                item.isOpen = false;
+            });
+        }
+    }
+    ngOnInit() {
+        this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+        this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+    }
+    opendropdown(e) {
+        console.log(687);
+        e.stopPropagation();
+        this.Opendropdown = !this.Opendropdown;
+    }
+    Dropdown(value, index, event) {
+        event.stopPropagation();
+        this.dataObject.forEach((item, i) => {
+            if (i !== index) {
+                item.isOpen = false; // Close other dropdowns
+            }
+        });
+        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) {
+        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
+        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] = [];
+            }
+            else {
+                // Otherwise, select all items
+                this.selectedValuesArray[index] = [...currentIssues];
+            }
+        }
+        else {
+            if (selectedValues.includes(issue)) {
+                this.selectedValuesArray[index] = selectedValues.filter((item) => item !== issue); // Deselect the individual item if already selected
+            }
+            else {
+                this.selectedValuesArray[index].push(issue); // Select the individual item if not already selected
+            }
+        }
+        // Update "Select All" checkbox status based on selected values
+        const selectAllId = `selectall${index}`;
+        const selectAllElement = document.getElementById(selectAllId);
+        if (selectAllElement) {
+            selectAllElement.checked = selectedValues.length === currentIssues.length;
+        }
+        // Update checkboxes based on selected values
+        currentIssues.forEach((item) => {
+            const isChecked = this.selectedValuesArray[index].includes(item);
+            const checkboxId = `option${item}`;
+            const checkboxElement = document.getElementById(checkboxId);
+            if (checkboxElement) {
+                checkboxElement.checked = isChecked;
+            }
+        });
+    }
+    Reset() {
+        this.selectedValuesArray = [];
+        this.Opendropdown = false;
+    }
+    searchData(event, i) {
+        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, 'i').test(item.text));
+        this.dataObject[i].Issues = filteredIssues;
+        if (filteredIssues.length) {
+            this.noFilter = false;
+        }
+        else {
+            this.noFilter = true;
+        }
+    }
+    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.text);
+            this.selectedValuesArray[index] = item;
+        });
+        this.responseArray.forEach((item, index) => {
+            item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] : [];
+        });
+    }
+    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" }, 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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.Router }], propDecorators: { dataObject: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 class TranslationModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: TranslationModule, imports: [CommonModule, TranslateModule], exports: [TranslateModule] });
@@ -3166,6 +3789,10 @@ const Routing = [
         path: 'profile',
         loadChildren: () => import('./tango-app-ui-shared-profile-wrapper.module-CTJBnU9I.mjs').then((m) => m.ProfileWrapperModule),
     },
+    {
+        path: 'tickets',
+        loadChildren: () => import('./tango-app-ui-shared-ticket-wrapper.module-BLrWsK0B.mjs').then((m) => m.TicketWrapperModule),
+    },
     {
         path: '',
         redirectTo: '/manage',
@@ -3177,6 +3804,28 @@ const Routing = [
     },
 ];
 
+class CommonSharedModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent], imports: [CommonModule,
+            FormsModule,
+            NgxPaginationModule], exports: [PaginationComponent, FiltersComponent, CustomSelectComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, imports: [CommonModule,
+            FormsModule,
+            NgxPaginationModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        NgxPaginationModule
+                    ],
+                    exports: [PaginationComponent, FiltersComponent, CustomSelectComponent]
+                }]
+        }] });
+
 const routes$1 = [
     {
         path: '',
@@ -3206,7 +3855,8 @@ class LayoutModule {
             ReportsComponent,
             SaasComponent,
             KeeniconComponent,
-            LayoutScrollTopComponent], imports: [CommonModule, i1$1.RouterModule, TranslationModule,
+            LayoutScrollTopComponent,
+            ClientSettingsComponent], imports: [CommonModule, i1$1.RouterModule, TranslationModule,
             InlineSVGModule,
             NgbDropdownModule,
             NgbProgressbarModule,
@@ -3216,7 +3866,10 @@ class LayoutModule {
             // EngagesModule,
             // DropdownMenusModule,
             NgbTooltipModule,
-            TranslateModule], exports: [RouterModule] });
+            TranslateModule,
+            // ThemeModeModule,
+            CommonSharedModule,
+            FormsModule, i6.NgxDaterangepickerMd], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutModule, imports: [CommonModule,
             RouterModule.forChild(routes$1),
             TranslationModule,
@@ -3229,7 +3882,11 @@ class LayoutModule {
             // EngagesModule,
             // DropdownMenusModule,
             NgbTooltipModule,
-            TranslateModule, RouterModule] });
+            TranslateModule,
+            // ThemeModeModule,
+            CommonSharedModule,
+            FormsModule,
+            NgxDaterangepickerMd.forRoot(), RouterModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutModule, decorators: [{
             type: NgModule,
@@ -3255,7 +3912,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                         ReportsComponent,
                         SaasComponent,
                         KeeniconComponent,
-                        LayoutScrollTopComponent
+                        LayoutScrollTopComponent,
+                        ClientSettingsComponent
                     ],
                     imports: [
                         CommonModule,
@@ -3272,6 +3930,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                         NgbTooltipModule,
                         TranslateModule,
                         // ThemeModeModule,
+                        CommonSharedModule,
+                        FormsModule,
+                        NgxDaterangepickerMd.forRoot()
                     ],
                     exports: [RouterModule],
                 }]
@@ -3332,26 +3993,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
 
-class AuthService {
-    router;
-    constructor(router) {
-        this.router = router;
-    }
-    logout() {
-        this.router.navigate(['/auth/login'], {
-            queryParams: {},
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, deps: [{ token: i1$1.Router }], 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: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$1.Router }] });
-
 class AuthGuard {
     authService;
     constructor(authService) {
@@ -3375,18 +4016,68 @@ 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);
-    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' });
+class ToastService {
+    constructor() { }
+    getSuccessToast(message) {
+        Swal.fire({
+            iconHtml: `<img  src="../../../../assets/tango/toast-icons/success-icon.svg">`,
+            html: `<div class="col-md-12 pt-3 pb-0"><div class="toasttitile">${message}</div></div>`,
+            toast: true,
+            position: "bottom",
+            showConfirmButton: false,
+            showCloseButton: true,
+            timer: 6000,
+            timerProgressBar: true,
+            customClass: "toast-light-success",
+            didOpen: (toast) => {
+                toast.addEventListener("mouseenter", Swal.stopTimer);
+                toast.addEventListener("mouseleave", Swal.resumeTimer);
+            },
+        });
+    }
+    getPrimaryToast(message) {
+        Swal.fire({
+            iconHtml: `<img  src="../../../../assets/tango/toast-icons/Envelope-Open-icon.svg">`,
+            html: `<div class="col-md-12 pt-3 pb-0"><div class="toasttitile">${message}</div></div>`,
+            toast: true,
+            position: 'bottom',
+            showConfirmButton: false,
+            showCloseButton: true,
+            timer: 6000,
+            timerProgressBar: true,
+            customClass: 'toast-light-primary',
+            didOpen: (toast) => {
+                toast.addEventListener('mouseenter', Swal.stopTimer);
+                toast.addEventListener('mouseleave', Swal.resumeTimer);
+            }
+        });
+    }
+    getErrorToast(message) {
+        Swal.fire({
+            iconHtml: `<img  src="../../../../assets/tango/toast-icons/error-icon.svg">`,
+            html: `<div class="col-md-12 pt-3 pb-0"><div class="toasttitile">${message}</div></div>`,
+            toast: true,
+            position: 'bottom',
+            showConfirmButton: false,
+            showCloseButton: true,
+            timer: 6000,
+            timerProgressBar: true,
+            customClass: 'toast-light-error',
+            didOpen: (toast) => {
+                toast.addEventListener('mouseenter', Swal.stopTimer);
+                toast.addEventListener('mouseleave', Swal.resumeTimer);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToastService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class HttpAuthInterceptor {
     constructor() { }
@@ -3414,5 +4105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccountingComponent, AuthGuard, AuthService, ClassicComponent, ContentComponent, Error404Component, Error500Component, ErrorsComponent, ErrorsModule, ExtendedComponent, FooterComponent, GlobalStateService, HeaderComponent, HeaderMenuComponent, HttpAuthInterceptor, LayoutComponent, LayoutModule, LayoutScrollTopComponent, NavbarComponent, PageTitleComponent, ReportsComponent, SaasComponent, ScriptsInitComponent, SidebarComponent, SidebarFooterComponent, SidebarLogoComponent, SidebarMenuComponent, ToolbarComponent, TranslationModule, TranslationService, ch as chLang, de as deLang, en as enLang, es as esLang, fr as frLang, jp as jpLang };
+export { AccountingComponent, AuthGuard, AuthService, ClassicComponent, ClientSettingsComponent, CommonSharedModule, ContentComponent, CustomSelectComponent, Error404Component, Error500Component, ErrorsComponent, ErrorsModule, ExtendedComponent, FiltersComponent, FooterComponent, GlobalStateService, HeaderComponent, HeaderMenuComponent, HttpAuthInterceptor, LayoutComponent, LayoutModule, LayoutScrollTopComponent, NavbarComponent, PageTitleComponent, PaginationComponent, ReportsComponent, SaasComponent, ScriptsInitComponent, SidebarComponent, SidebarFooterComponent, SidebarLogoComponent, SidebarMenuComponent, ToastService, ToolbarComponent, TranslationModule, TranslationService, ch as chLang, de as deLang, en as enLang, es as esLang, fr as frLang, jp as jpLang };
 //# sourceMappingURL=tango-app-ui-shared.mjs.map