tango-app-ui-shared 3.0.59-dev → 3.0.61-dev

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

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, HostBinding, HostListener, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, NgModule, inject, Pipe } from '@angular/core';
+import { Injectable, Component, Input, Pipe, HostBinding, HostListener, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, NgModule, inject } from '@angular/core';
 import * as i1 from '@angular/router';
 import { NavigationEnd, NavigationCancel, ResolveEnd, NavigationStart, Router, RouterModule } from '@angular/router';
 import * as i1$1 from 'tango-app-ui-global';
 import { MenuComponent, ToggleComponent, ScrollTopComponent, DrawerComponent, StickyComponent, ScrollComponent, GlobalStateService } from 'tango-app-ui-global';
-import { BehaviorSubject, throwError, map, catchError, takeUntil, Subject, take, switchMap } from 'rxjs';
+import { BehaviorSubject, throwError, map, catchError, Subject, takeUntil, take, switchMap } from 'rxjs';
 import * as i3 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
 import Swal from 'sweetalert2';
 import * as i2 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { DatePipe, CommonModule } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import * as i3$1 from '@angular/platform-browser';
 import dayjs from 'dayjs';
@@ -211,22 +211,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                 type: Input
             }] } });
 
+class NotificationService {
+    http;
+    gs;
+    paymentSubscriptionApiUrl;
+    clientApiUrl;
+    clientId = new BehaviorSubject('');
+    clientData = new BehaviorSubject(null);
+    notificationReceivedSubject = new BehaviorSubject(false);
+    notificationReceived$ = this.notificationReceivedSubject.asObservable();
+    constructor(http, gs) {
+        this.http = http;
+        this.gs = gs;
+        this.gs.environment.subscribe((env) => {
+            if (env) {
+                this.paymentSubscriptionApiUrl = env.paymentSubscriptionApiUrl;
+            }
+            this.gs.dataRangeValue.subscribe((e) => {
+                if (e) {
+                    this.clientId.next(e.client);
+                }
+            });
+        });
+    }
+    notificationList(data) {
+        return this.http.get(`${this.paymentSubscriptionApiUrl}/notificationList?limit=${data.limit}&offset=${data.offset}`);
+    }
+    notificationUpdate(_id) {
+        return this.http.put(`${this.paymentSubscriptionApiUrl}/notification/update/${_id}`, '');
+    }
+    notificationPushUpdate(data, _id) {
+        return this.http.put(`${this.paymentSubscriptionApiUrl}/pushNotification/update/${_id}`, data);
+    }
+    updateNotificationReceived(value) {
+        this.notificationReceivedSubject.next(value);
+    }
+    updateRemind(_id) {
+        return this.http.post(`${this.paymentSubscriptionApiUrl}/updateRemind/${_id}`, '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NotificationService, deps: [{ token: i3.HttpClient }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NotificationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$1.GlobalStateService }] });
+
+class CustomDateFormatPipe {
+    transform(value, ...args) {
+        if (value) {
+            const datePipe = new DatePipe('en-US');
+            const formattedDate = datePipe.transform(value, 'dd MMM, yyyy');
+            return formattedDate;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CustomDateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: CustomDateFormatPipe, name: "customDateFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CustomDateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'customDateFormat'
+                }]
+        }] });
+
 class NavbarComponent {
+    service;
+    router;
+    toast;
+    cd;
     appHeaderDefaulMenuDisplay;
     isRtl;
+    destroy$ = new Subject();
     itemClass = 'ms-1 ms-lg-3';
     btnClass = 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px';
+    btnClass1;
     userAvatarClass = 'symbol-35px symbol-md-40px';
     btnIconClass = 'fs-2 fs-md-1';
-    constructor() { }
-    ngOnInit() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: NavbarComponent, selector: "lib-navbar", inputs: { appHeaderDefaulMenuDisplay: "appHeaderDefaulMenuDisplay", isRtl: "isRtl" }, ngImport: i0, template: "\r\n\r\n<!--begin::Activities-->\r\n\r\n<!--begin::Notifications-->\r\n<div class=\"app-navbar-item\" [ngClass]=\"itemClass\">\r\n  <!--begin::Menu- wrapper-->\r\n  <div [ngClass]=\"btnClass\" data-kt-menu-trigger=\"{default: 'click'}\" data-kt-menu-attach=\"parent\"\r\n    data-kt-menu-placement=\"bottom-end\">\r\n    <img src=\"./assets/tango/layout/bell.svg\" alt=\"\">\r\n  </div>\r\n  <!-- <lib-notifications-inner></lib-notifications-inner> -->\r\n  <!--end::Menu wrapper-->\r\n</div>\r\n<!--end::Notifications-->\r\n<!-- <div class=\"app-navbar-item\" [ngClass]=\"itemClass\"> -->\r\n  <!--begin::Drawer toggle-->\r\n  <!-- <div [ngClass]=\"btnClass\" id=\"kt_activities_toggle\"> -->\r\n    <!-- <img src=\"./assets/tango/layout/bell.svg\" alt=\"\"> -->\r\n  <!-- </div> -->\r\n  <!--end::Drawer toggle-->\r\n<!-- </div> -->\r\n<!--end::Activities-->\r\n\r\n\r\n\r\n\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    notificationReceived = false;
+    notification = [];
+    pushNotificationList = [];
+    activeTabId = 'alerts';
+    loading = true;
+    noData = false;
+    url;
+    showNotification = true;
+    showDropdown = false;
+    // notificationReceived = false;
+    subscription;
+    notificationDropDownClass = true;
+    constructor(service, router, toast, cd) {
+        this.service = service;
+        this.router = router;
+        this.toast = toast;
+        this.cd = cd;
+    }
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    ngOnInit() {
+        this.router.events.subscribe(() => {
+            let url = this.router.url.split('/');
+            if (url.includes('notifications')) {
+                this.showNotification = false;
+            }
+            else {
+                this.showNotification = true;
+            }
+        });
+        this.notificationList();
+    }
+    toggleUserDropDown() {
+        this.notificationDropDownClass = !this.notificationDropDownClass;
+    }
+    setActiveTabId(tabId) {
+        this.activeTabId = tabId;
+    }
+    notificationList() {
+        this.pushNotificationList = [];
+        this.loading = true;
+        let data = {
+            limit: 10,
+            offset: 1
+        };
+        this.service.notificationList(data)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    this.loading = false;
+                    this.noData = false;
+                    this.notification = res.data.result.slice(0, 5);
+                    this.pushNotificationList = res.data.result.filter((item) => item._source.showPushNotification);
+                }
+                else {
+                    this.notification = [];
+                    this.loading = false;
+                    this.noData = true;
+                }
+            },
+            error: (err) => {
+                this.notification = [];
+                this.loading = false;
+                this.noData = true;
+            }
+        });
+    }
+    handleNotification() {
+        this.service.updateNotificationReceived(true);
+    }
+    viewAll(type) {
+        // this.dataKtMenu = 'false';
+        this.router.navigateByUrl('/notifications/alerts');
+    }
+    updateNotification(data, url) {
+        this.service.notificationUpdate(data._id).pipe(takeUntil(this.destroy$)).subscribe((res) => {
+            if (res && res.code == 200) {
+                this.toast.getPrimaryToast(res.message);
+                setTimeout(() => {
+                    this.notificationList();
+                }, 1000);
+                this.cd.detectChanges();
+                if (url != '') {
+                    this.router.navigateByUrl(url);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NavbarComponent, deps: [{ token: NotificationService }, { token: i1.Router }, { token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: NavbarComponent, selector: "lib-navbar", inputs: { appHeaderDefaulMenuDisplay: "appHeaderDefaulMenuDisplay", isRtl: "isRtl" }, ngImport: i0, template: "\r\n\r\n<!--begin::Activities-->\r\n\r\n<!--begin::Notifications-->\r\n<div class=\"app-navbar-item\"  [ngClass]=\"itemClass\" *ngIf=\"showNotification\">\r\n  <!--begin::Menu- wrapper-->\r\n    <div [ngClass]=\"btnClass\" (click)=\"showDropdown = !showDropdown\">\r\n      <span *ngIf=\"!notification.length\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n          <path\r\n            d=\"M10.6779 2.4V3.00688L11.2715 3.1335C14.1674 3.75125 16.3919 6.45842 16.3919 9.75V10.6313C16.3919 13.0131 17.2249 15.3087 18.7338 17.0963L18.7352 17.0979L19.0636 17.4846C19.0639 17.485 19.0642 17.4853 19.0645 17.4857C19.2557 17.7136 19.3048 18.0393 19.185 18.3174C19.0641 18.5983 18.8153 18.75 18.5704 18.75H1.42848C1.1825 18.75 0.933931 18.5974 0.815017 18.3193C0.695108 18.0388 0.744592 17.7123 0.933996 17.4853C0.934445 17.4848 0.934894 17.4843 0.935344 17.4837L1.26312 17.0985L1.26473 17.0966C2.77599 15.3086 3.60697 13.0127 3.60697 10.6313V9.75C3.60697 6.45434 5.79488 3.75145 8.72559 3.13388L9.32094 3.00843V2.4V1.5C9.32094 1.05052 9.65806 0.75 9.99944 0.75C10.3408 0.75 10.6779 1.05052 10.6779 1.5V2.4ZM9.99944 23.25C9.44983 23.25 8.91726 23.023 8.52034 22.6062C8.29649 22.3712 8.12457 22.0708 8.01769 21.75H11.9812C11.8743 22.0708 11.7024 22.3712 11.4785 22.6062C11.0856 23.0188 10.5146 23.25 9.99944 23.25Z\"\r\n            stroke=\"#00A3FF\" stroke-width=\"1.5\" />\r\n        </svg>\r\n      </span>\r\n      <span *ngIf=\"notification.length\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n          <path\r\n            d=\"M11.4279 2.4V1.5C11.4279 0.671719 10.7896 0 9.99944 0C9.2093 0 8.57094 0.671719 8.57094 1.5V2.4C5.27202 3.09516 2.85697 6.12188 2.85697 9.75V10.6313C2.85697 12.8391 2.08648 14.9625 0.691915 16.6125L0.360862 17.0016C-0.0128805 17.4469 -0.10505 18.075 0.125384 18.6141C0.355818 19.1531 0.866013 19.5 1.42848 19.5H18.5704C19.1329 19.5 19.6418 19.1531 19.8739 18.6141C20.106 18.075 20.0123 17.4469 19.6373 17.0016L19.307 16.6125C17.9142 14.9625 17.1419 12.8391 17.1419 10.6313V9.75C17.1419 9.39947 17.119 9.05455 17.0746 8.71681C16.5845 8.8999 16.054 9 15.5 9C13.0147 9 11 6.98528 11 4.5C11 3.74877 11.1841 3.04054 11.5096 2.41795C11.4824 2.4118 11.4552 2.40582 11.4279 2.4Z\"\r\n            fill=\"#00A3FF\" />\r\n          <path\r\n            d=\"M7.97723 23.1234C8.51291 23.6859 9.24055 24 9.99944 24C10.7181 24 11.486 23.6859 12.0216 23.1234C12.5573 22.5609 12.8564 21.7547 12.8564 21H7.14245C7.14245 21.7547 7.44154 22.5609 7.97723 23.1234Z\"\r\n            fill=\"#00A3FF\" />\r\n          <circle cx=\"16\" cy=\"4\" r=\"4\" fill=\"#F04438\" />\r\n        </svg>\r\n      </span>\r\n      <div class=\"menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px notificationMenu\" *ngIf=\"showDropdown\">\r\n        <div class=\"card topbar\">\r\n          <div class=\"card-header\">\r\n            <h3 class=\"title-notify mt-10 mb-6\">\r\n              Notifications\r\n            </h3>\r\n          </div>\r\n          <ng-container *ngIf=\"loading\">\r\n            <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n              <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n                </div>\r\n              </div>\r\n              <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n                </div>\r\n              </div>\r\n        \r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"noData && !loading\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 mb-3\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n                  <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n                  <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        \r\n          <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n            <div *ngFor=\"let item of notification\" class=\"mh-200px ng-star-inserted\" style=\"overflow: auto;\">\r\n              <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                        class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                        class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                          xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                          version=\"1.1\" class=\"ng-star-inserted\">\r\n                          <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                            <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                            <path\r\n                              d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                              fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                            <path\r\n                              d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                              fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                          </g>\r\n                        </svg></span></span></div>\r\n                  <div class=\"mb-0 me-2\" style=\"text-align: left;\">\r\n                    <div class=\"alert-title\">{{ item._source.title }}</div>\r\n                    <div class=\"alt-desc\">{{ item._source.description }}</div>\r\n                  </div>\r\n                </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n        \r\n        \r\n              </div>\r\n        \r\n            </div>\r\n            <div class=\"text-center border-top\">\r\n              <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary my-2\">\r\n                View All\r\n              </a>\r\n            </div>\r\n        \r\n          </div>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"w-450px position-absolute end-0 top-0 d-none\">\r\n  <div class=\"card pushnotification rounded-2 mt-4\" *ngFor=\"let item of pushNotificationList\">\r\n    <div class=\"row\">\r\n      <div class=\"col-1 align-items-start mt-1\">\r\n        <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_12254_112653)\">\r\n              <path\r\n                d=\"M9.99935 13.3334V10M9.99935 6.66669H10.0077M18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10Z\"\r\n                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_12254_112653\">\r\n                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n      <div class=\"col-10 align-items-start\">\r\n        <span class=\"alert-title\">\r\n            Notification\r\n        </span>\r\n        <div>\r\n          {{item._source.description}}\r\n        </div>\r\n      </div>\r\n      <div class=\"col-1 align-items-start\">\r\n        <!-- <span class=\"btn btn-sm btn-icon btn-active-color-primary\"> -->\r\n          <span><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n            </svg>\r\n          <!-- </span> -->\r\n        </span>\r\n      </div>\r\n    </div>\r\n    \r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n    \r\n\r\n    <!-- <span class=\"mt-5\" *ngFor=\"let button of item._source?.alertCta\">\r\n          <button *ngIf=\"button.redirectionUrl !== 'cancel'\" (click)=\"updateNotification(item,button.redirectionUrl)\"\r\n            class=\"btn btn-md btn-primary\">{{ button.buttonName }}</button>\r\n          <span *ngIf=\"button.redirectionUrl === 'cancel'\" (click)=\"updateNotification(item,'')\"\r\n            class=\"text-primary mx-6 remindlatertext cursor-pointer\">{{ button.buttonName }}</span>\r\n        </span> -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!--end::Notifications-->\r\n<!-- <div class=\"app-navbar-item\" [ngClass]=\"itemClass\"> -->\r\n  <!--begin::Drawer toggle-->\r\n  <!-- <div [ngClass]=\"btnClass\" id=\"kt_activities_toggle\"> -->\r\n    <!-- <img src=\"./assets/tango/layout/bell.svg\" alt=\"\"> -->\r\n  <!-- </div> -->\r\n  <!--end::Drawer toggle-->\r\n<!-- </div> -->\r\n<!--end::Activities-->\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow-y:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.border-value{padding:16px!important;border-radius:12px!important;border:1.095px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.submenu{background:var(--gray-50, white)!important;color:var(--gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;outline:none!important}.text-primary{color:var(--primary-700, #009BF3)!important;font-size:16px;font-weight:500}.alertdot{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.remindlatertext{color:var(--Primary-700, #009BF3);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline;text-transform:capitalize}.alerticon{margin-bottom:35%!important}.alertbg{background:var(--Primary-500, #33B5FF);width:7px!important;height:192px;gap:0px;opacity:0px;border-top-left-radius:15px;border-bottom-left-radius:15px}.pushnotification{padding:16px}.notificationMenu{display:block!important;z-index:105;position:fixed;inset:0 0 auto auto;margin:0;transform:translate3d(-30.2222px,72.8889px,0)}\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: "pipe", type: CustomDateFormatPipe, name: "customDateFormat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-navbar', template: "\r\n\r\n<!--begin::Activities-->\r\n\r\n<!--begin::Notifications-->\r\n<div class=\"app-navbar-item\" [ngClass]=\"itemClass\">\r\n  <!--begin::Menu- wrapper-->\r\n  <div [ngClass]=\"btnClass\" data-kt-menu-trigger=\"{default: 'click'}\" data-kt-menu-attach=\"parent\"\r\n    data-kt-menu-placement=\"bottom-end\">\r\n    <img src=\"./assets/tango/layout/bell.svg\" alt=\"\">\r\n  </div>\r\n  <!-- <lib-notifications-inner></lib-notifications-inner> -->\r\n  <!--end::Menu wrapper-->\r\n</div>\r\n<!--end::Notifications-->\r\n<!-- <div class=\"app-navbar-item\" [ngClass]=\"itemClass\"> -->\r\n  <!--begin::Drawer toggle-->\r\n  <!-- <div [ngClass]=\"btnClass\" id=\"kt_activities_toggle\"> -->\r\n    <!-- <img src=\"./assets/tango/layout/bell.svg\" alt=\"\"> -->\r\n  <!-- </div> -->\r\n  <!--end::Drawer toggle-->\r\n<!-- </div> -->\r\n<!--end::Activities-->\r\n\r\n\r\n\r\n\r\n\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { appHeaderDefaulMenuDisplay: [{
+            args: [{ selector: 'lib-navbar', template: "\r\n\r\n<!--begin::Activities-->\r\n\r\n<!--begin::Notifications-->\r\n<div class=\"app-navbar-item\"  [ngClass]=\"itemClass\" *ngIf=\"showNotification\">\r\n  <!--begin::Menu- wrapper-->\r\n    <div [ngClass]=\"btnClass\" (click)=\"showDropdown = !showDropdown\">\r\n      <span *ngIf=\"!notification.length\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n          <path\r\n            d=\"M10.6779 2.4V3.00688L11.2715 3.1335C14.1674 3.75125 16.3919 6.45842 16.3919 9.75V10.6313C16.3919 13.0131 17.2249 15.3087 18.7338 17.0963L18.7352 17.0979L19.0636 17.4846C19.0639 17.485 19.0642 17.4853 19.0645 17.4857C19.2557 17.7136 19.3048 18.0393 19.185 18.3174C19.0641 18.5983 18.8153 18.75 18.5704 18.75H1.42848C1.1825 18.75 0.933931 18.5974 0.815017 18.3193C0.695108 18.0388 0.744592 17.7123 0.933996 17.4853C0.934445 17.4848 0.934894 17.4843 0.935344 17.4837L1.26312 17.0985L1.26473 17.0966C2.77599 15.3086 3.60697 13.0127 3.60697 10.6313V9.75C3.60697 6.45434 5.79488 3.75145 8.72559 3.13388L9.32094 3.00843V2.4V1.5C9.32094 1.05052 9.65806 0.75 9.99944 0.75C10.3408 0.75 10.6779 1.05052 10.6779 1.5V2.4ZM9.99944 23.25C9.44983 23.25 8.91726 23.023 8.52034 22.6062C8.29649 22.3712 8.12457 22.0708 8.01769 21.75H11.9812C11.8743 22.0708 11.7024 22.3712 11.4785 22.6062C11.0856 23.0188 10.5146 23.25 9.99944 23.25Z\"\r\n            stroke=\"#00A3FF\" stroke-width=\"1.5\" />\r\n        </svg>\r\n      </span>\r\n      <span *ngIf=\"notification.length\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n          <path\r\n            d=\"M11.4279 2.4V1.5C11.4279 0.671719 10.7896 0 9.99944 0C9.2093 0 8.57094 0.671719 8.57094 1.5V2.4C5.27202 3.09516 2.85697 6.12188 2.85697 9.75V10.6313C2.85697 12.8391 2.08648 14.9625 0.691915 16.6125L0.360862 17.0016C-0.0128805 17.4469 -0.10505 18.075 0.125384 18.6141C0.355818 19.1531 0.866013 19.5 1.42848 19.5H18.5704C19.1329 19.5 19.6418 19.1531 19.8739 18.6141C20.106 18.075 20.0123 17.4469 19.6373 17.0016L19.307 16.6125C17.9142 14.9625 17.1419 12.8391 17.1419 10.6313V9.75C17.1419 9.39947 17.119 9.05455 17.0746 8.71681C16.5845 8.8999 16.054 9 15.5 9C13.0147 9 11 6.98528 11 4.5C11 3.74877 11.1841 3.04054 11.5096 2.41795C11.4824 2.4118 11.4552 2.40582 11.4279 2.4Z\"\r\n            fill=\"#00A3FF\" />\r\n          <path\r\n            d=\"M7.97723 23.1234C8.51291 23.6859 9.24055 24 9.99944 24C10.7181 24 11.486 23.6859 12.0216 23.1234C12.5573 22.5609 12.8564 21.7547 12.8564 21H7.14245C7.14245 21.7547 7.44154 22.5609 7.97723 23.1234Z\"\r\n            fill=\"#00A3FF\" />\r\n          <circle cx=\"16\" cy=\"4\" r=\"4\" fill=\"#F04438\" />\r\n        </svg>\r\n      </span>\r\n      <div class=\"menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px notificationMenu\" *ngIf=\"showDropdown\">\r\n        <div class=\"card topbar\">\r\n          <div class=\"card-header\">\r\n            <h3 class=\"title-notify mt-10 mb-6\">\r\n              Notifications\r\n            </h3>\r\n          </div>\r\n          <ng-container *ngIf=\"loading\">\r\n            <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n              <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n                </div>\r\n              </div>\r\n              <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                  <div class=\"stroke animate title\"></div>\r\n                  <div class=\"stroke animate link\"></div>\r\n                  <div class=\"stroke animate description\"></div>\r\n                </div>\r\n              </div>\r\n        \r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"noData && !loading\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-12 mb-3\">\r\n                <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                  <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n                  <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n                  <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        \r\n          <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n            <div *ngFor=\"let item of notification\" class=\"mh-200px ng-star-inserted\" style=\"overflow: auto;\">\r\n              <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n                <div class=\"d-flex align-items-center\">\r\n                  <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                        class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                        class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                          xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                          version=\"1.1\" class=\"ng-star-inserted\">\r\n                          <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                            <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                            <path\r\n                              d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                              fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                            <path\r\n                              d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                              fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                          </g>\r\n                        </svg></span></span></div>\r\n                  <div class=\"mb-0 me-2\" style=\"text-align: left;\">\r\n                    <div class=\"alert-title\">{{ item._source.title }}</div>\r\n                    <div class=\"alt-desc\">{{ item._source.description }}</div>\r\n                  </div>\r\n                </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n        \r\n        \r\n              </div>\r\n        \r\n            </div>\r\n            <div class=\"text-center border-top\">\r\n              <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary my-2\">\r\n                View All\r\n              </a>\r\n            </div>\r\n        \r\n          </div>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"w-450px position-absolute end-0 top-0 d-none\">\r\n  <div class=\"card pushnotification rounded-2 mt-4\" *ngFor=\"let item of pushNotificationList\">\r\n    <div class=\"row\">\r\n      <div class=\"col-1 align-items-start mt-1\">\r\n        <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <g clip-path=\"url(#clip0_12254_112653)\">\r\n              <path\r\n                d=\"M9.99935 13.3334V10M9.99935 6.66669H10.0077M18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10Z\"\r\n                stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n            </g>\r\n            <defs>\r\n              <clipPath id=\"clip0_12254_112653\">\r\n                <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n              </clipPath>\r\n            </defs>\r\n          </svg>\r\n        </span>\r\n      </div>\r\n      <div class=\"col-10 align-items-start\">\r\n        <span class=\"alert-title\">\r\n            Notification\r\n        </span>\r\n        <div>\r\n          {{item._source.description}}\r\n        </div>\r\n      </div>\r\n      <div class=\"col-1 align-items-start\">\r\n        <!-- <span class=\"btn btn-sm btn-icon btn-active-color-primary\"> -->\r\n          <span><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n            </svg>\r\n          <!-- </span> -->\r\n        </span>\r\n      </div>\r\n    </div>\r\n    \r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n    \r\n\r\n    <!-- <span class=\"mt-5\" *ngFor=\"let button of item._source?.alertCta\">\r\n          <button *ngIf=\"button.redirectionUrl !== 'cancel'\" (click)=\"updateNotification(item,button.redirectionUrl)\"\r\n            class=\"btn btn-md btn-primary\">{{ button.buttonName }}</button>\r\n          <span *ngIf=\"button.redirectionUrl === 'cancel'\" (click)=\"updateNotification(item,'')\"\r\n            class=\"text-primary mx-6 remindlatertext cursor-pointer\">{{ button.buttonName }}</span>\r\n        </span> -->\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!--end::Notifications-->\r\n<!-- <div class=\"app-navbar-item\" [ngClass]=\"itemClass\"> -->\r\n  <!--begin::Drawer toggle-->\r\n  <!-- <div [ngClass]=\"btnClass\" id=\"kt_activities_toggle\"> -->\r\n    <!-- <img src=\"./assets/tango/layout/bell.svg\" alt=\"\"> -->\r\n  <!-- </div> -->\r\n  <!--end::Drawer toggle-->\r\n<!-- </div> -->\r\n<!--end::Activities-->\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow-y:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.border-value{padding:16px!important;border-radius:12px!important;border:1.095px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.submenu{background:var(--gray-50, white)!important;color:var(--gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;outline:none!important}.text-primary{color:var(--primary-700, #009BF3)!important;font-size:16px;font-weight:500}.alertdot{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.remindlatertext{color:var(--Primary-700, #009BF3);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline;text-transform:capitalize}.alerticon{margin-bottom:35%!important}.alertbg{background:var(--Primary-500, #33B5FF);width:7px!important;height:192px;gap:0px;opacity:0px;border-top-left-radius:15px;border-bottom-left-radius:15px}.pushnotification{padding:16px}.notificationMenu{display:block!important;z-index:105;position:fixed;inset:0 0 auto auto;margin:0;transform:translate3d(-30.2222px,72.8889px,0)}\n"] }]
+        }], ctorParameters: () => [{ type: NotificationService }, { type: i1.Router }, { type: ToastService }, { type: i0.ChangeDetectorRef }], propDecorators: { appHeaderDefaulMenuDisplay: [{
                 type: Input
             }], isRtl: [{
                 type: Input
@@ -2410,6 +2572,8 @@ class DateSingleSelectComponent {
         stores: [],
         date: null,
     };
+    dummyArray;
+    respnsearray = [];
     constructor(auth, gs, cd) {
         this.auth = auth;
         this.gs = gs;
@@ -2418,6 +2582,14 @@ class DateSingleSelectComponent {
             next: (e) => {
                 if (e) {
                     this.clientList = e.data.result;
+                    const allOption = {
+                        _id: 'all',
+                        clientName: 'All Clients',
+                        clientId: ''
+                    };
+                    this.clientList.unshift(allOption); // Adds the "ALL" option at the beginning of the array
+                    this.dummyArray = JSON.parse(JSON.stringify(this.clientList));
+                    this.respnsearray = this.dummyArray.map((item) => item.clientId);
                     const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
                     if (headerFilters.client) {
                         this.clientList.find((obj) => {
@@ -2426,7 +2598,12 @@ class DateSingleSelectComponent {
                             }
                         });
                         this.selectedFilters.client = headerFilters.client;
-                        this.selectedFilters.clients = headerFilters.clients;
+                        if (headerFilters.client === '') {
+                            this.selectedFilters.clients = this.respnsearray;
+                        }
+                        else {
+                            this.selectedFilters.clients = [headerFilters.client];
+                        }
                         this.selectedFilters.store = headerFilters.store;
                         this.selectedFilters.date = headerFilters.date;
                         this.selectedFilters.date = headerFilters.date;
@@ -2439,7 +2616,10 @@ class DateSingleSelectComponent {
                         this.cd.detectChanges();
                     }
                     else {
+                        this.dummyArray = JSON.parse(JSON.stringify(this.clientList));
+                        this.respnsearray = this.dummyArray.map((item) => item.clientId);
                         this.selectedClient = this.clientList[0];
+                        this.selectedFilters.clients = this.respnsearray;
                         this.selectedFilters.client = this.selectedClient.clientId;
                         this.selectedDateRange = {
                             startDate: this.dayjs().format("DD-MM-YYYY"),
@@ -2482,12 +2662,8 @@ class DateSingleSelectComponent {
     onStartDateChange(event) {
         if (this.dayjs(event.startDate).isValid()) {
             this.isCustomDate = (m) => {
-                const isFutureDate = m.isAfter(this.dayjs());
-                const isMoreThan90DaysAfter = m.isAfter(this.dayjs(event.startDate).add(90, "days"));
-                // Check if the date is today
-                const isToday = m.isSame(this.dayjs(), 'day');
-                const isValidDate = !isFutureDate && !isMoreThan90DaysAfter && !isToday;
-                return isValidDate ? "invalid-date" : false;
+                const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, 'days'));
+                return isValidDate ? 'invalid-date' : false;
             };
         }
     }
@@ -2507,17 +2683,24 @@ class DateSingleSelectComponent {
         }
         else {
             const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-            this.selectedDateRange.startDate = this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY");
-            this.selectedDateRange.endDate = this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY");
+            this.selectedDateRange.startDate = this.dayjs(headerFilters?.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY");
+            this.selectedDateRange.endDate = this.dayjs(headerFilters?.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY");
             this.gs.dataRangeValue.next(headerFilters);
         }
     }
     Apply() {
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
         this.selectedFilters = headerFilters;
-        this.selectedFilters.client = this.selectedClient.clientId;
+        this.selectedFilters.client = this.selectedClient?.clientId;
+        if (this.selectedClient.clientId === '') {
+            this.selectedFilters.clients = this.respnsearray;
+        }
+        else {
+            this.selectedFilters.clients = [this.selectedClient.clientId];
+        }
         this.gs.dataRangeValue.next(this.selectedFilters);
         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+        this.gs.manageRefreshTrigger.next(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: DateSingleSelectComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: DateSingleSelectComponent, selector: "lib-date-single-select", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" 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\" (startDateChanged)=\"onStartDateChange($event)\"  [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
@@ -2781,11 +2964,11 @@ class ToolbarComponent {
                 URL == `/manage/stores/mat?storeId=${this.storeId}`) {
                 this.setUIProperties(false, false, false, true, false);
             }
-            else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining") {
+            else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining" || URL == "/notifications/alerts") {
                 this.setUIProperties(false, false, false, false, false);
             }
             else {
-                this.setUIProperties(false, true, false, false, false);
+                this.setUIProperties(false, false, false, false, true);
             }
         }
         else {
@@ -2803,7 +2986,7 @@ class ToolbarComponent {
             else if (URL == "/profile" || URL == "/manage/users" || URL == "/manage/users?type=tango" || URL == "/manage/users?type=client" ||
                 URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=groups" || url[2] == "settings" ||
                 URL == "/manage/stores/addition-method" ||
-                URL == "/manage/stores/add-single-store" || url[2] === "data-mismatch" || url[2] === "employeetraining") {
+                URL == "/manage/stores/add-single-store" || url[2] === "data-mismatch" || url[2] === "employeetraining" || URL == "/notifications/alerts") {
                 this.setUIProperties(false, false, false, false, false);
             }
             else {
@@ -4718,7 +4901,7 @@ const Routing = [
     },
     {
         path: 'notifications',
-        loadChildren: () => import('./tango-app-ui-shared-notification.module-BXu6NtBj.mjs').then((m) => m.NotificationModule),
+        loadChildren: () => import('./tango-app-ui-shared-notification.module-CXZQpAXl.mjs').then((m) => m.NotificationModule),
     },
     {
         path: '',
@@ -4731,25 +4914,6 @@ const Routing = [
     },
 ];
 
-class CustomDateFormatPipe {
-    transform(value, ...args) {
-        if (value) {
-            const datePipe = new DatePipe('en-US');
-            const formattedDate = datePipe.transform(value, 'dd MMM, yyyy');
-            return formattedDate;
-        }
-        return null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CustomDateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: CustomDateFormatPipe, name: "customDateFormat" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CustomDateFormatPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'customDateFormat'
-                }]
-        }] });
-
 class CommonSharedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: CommonSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: CommonSharedModule, declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent, CustomDateFormatPipe], imports: [CommonModule,
@@ -4774,28 +4938,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
 
 class NotificationsInnerComponent {
     router;
+    service;
+    cd;
     class = 'menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px';
     dataKtMenu = 'true';
     activeTabId = 'alerts';
-    constructor(router) {
+    destroy$ = new Subject();
+    notification = [];
+    loading = true;
+    noData = false;
+    constructor(router, service, cd) {
         this.router = router;
+        this.service = service;
+        this.cd = cd;
+    }
+    ngOnInit() {
+        this.notificationList();
     }
-    ngOnInit() { }
     setActiveTabId(tabId) {
         this.activeTabId = tabId;
     }
+    notificationList() {
+        this.notification = [];
+        this.loading = true;
+        let data = {
+            limit: 5,
+            offset: 1
+        };
+        this.service.notificationList(data)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    this.loading = false;
+                    this.noData = false;
+                    this.notification = res.data.result || [];
+                }
+                else {
+                    this.notification = [];
+                    this.loading = false;
+                    this.noData = true;
+                }
+            },
+            error: (err) => {
+                this.notification = [];
+                this.loading = false;
+                this.noData = true;
+            }
+        });
+    }
+    handleNotification() {
+        this.service.updateNotificationReceived(true);
+    }
     viewAll(type) {
-        console.log(type);
         this.dataKtMenu = 'false';
-        this.router.navigate(['/notifications/reports']);
+        this.router.navigate(['/notifications/alerts']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NotificationsInnerComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: NotificationsInnerComponent, selector: "lib-notifications-inner", host: { properties: { "class": "this.class", "attr.data-kt-menu": "this.dataKtMenu" } }, ngImport: i0, template: "<div\n  class=\"d-flex flex-column bgi-no-repeat rounded-top\"\n\n>\n  <h3 class=\"title-notify px-9 mt-10 mb-6\">\n    Notifications \n  </h3>\n\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9\">\n    <li class =\"nav-item w-50 text-center\">\n      <a\n        class=\"nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center\"\n        data-bs-toggle=\"tab\"\n        [ngClass]=\"activeTabId === 'alerts' ? 'active' : ''\"\n        (click)=\"setActiveTabId('alerts')\"\n      >\n        Alerts\n      </a>\n    </li>\n\n\n    <li class=\"nav-item w-50 text-center\">\n      <a\n        class=\"\n          nav-link d-block text-center\n          text-white w-100\n          opacity-75 opacity-state-100\n          pb-4\n          cursor-pointer\n        \"\n        data-bs-toggle=\"tab\"\n        [ngClass]=\"activeTabId === 'download' ? 'active' : ''\"\n        (click)=\"setActiveTabId('download')\"\n      >\n      Download\n      </a>\n    </li>\n  </ul>\n</div>\n\n<div class=\"tab-content\">\n  <div\n    class=\"tab-pane fade\"\n    id=\"alerts\"\n    role=\"tabpanel\"\n    [ngClass]=\"activeTabId === 'alerts' ? 'show active' : ''\"\n  >\n    <div class=\"scroll-y mh-400px my-5 px-5\">\n      <div  class=\"d-flex flex-stack py-4\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"me-3\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\n            <g clip-path=\"url(#clip0_9019_100928)\">\n            <path d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\" stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n            <clipPath id=\"clip0_9019_100928\">\n            <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\n            </clipPath>\n            </defs>\n            </svg>\n          </span>\n          <div class=\"mb-0 me-2\">\n           \n            <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\n          </div>\n        </div>\n\n        <span class=\" fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n          <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\"/>\n          </svg></span>\n      </div>\n    </div>\n\n    <div class=\"py-3 text-center border-top\">\n      <a\n        (click)=\"viewAll('alerts')\"\n        class=\"btn btn-color-gray-600 btn-active-color-primary\"\n      >\n        View All\n       \n      </a>\n    </div>\n  </div>\n\n\n  <div\n    class=\"tab-pane fade\"\n    id=\"download\"\n    role=\"tabpanel\"\n    [ngClass]=\"activeTabId === 'download' ? 'show active' : ''\"\n  >\n  <div class=\"scroll-y mh-400px my-5 px-5\">\n    <!-- *ngFor=\"let alert of alerts\" -->\n    <div  class=\"d-flex flex-stack py-4\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"me-3\">\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\n          <g clip-path=\"url(#clip0_9019_100928)\">\n          <path d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\" stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </g>\n          <defs>\n          <clipPath id=\"clip0_9019_100928\">\n          <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\n          </clipPath>\n          </defs>\n          </svg>\n        </span>\n        <div class=\"mb-0 me-2\">\n         \n          <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\n        </div>\n      </div>\n\n      <span class=\"fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n        <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\"/>\n        </svg></span>\n    </div>\n  </div>\n    <div class=\"py-3 text-center border-top\">\n      <a\n      (click)=\"viewAll('download')\"\n        class=\"btn btn-color-gray-600 btn-active-color-primary\"\n      >\n        View All\n       \n      </a>\n    </div>\n  </div>\n</div>\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NotificationsInnerComponent, deps: [{ token: i1.Router }, { token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: NotificationsInnerComponent, selector: "lib-notifications-inner", host: { properties: { "class": "this.class", "attr.data-kt-menu": "this.dataKtMenu" } }, ngImport: i0, template: "<div class=\"card topbar\" >\r\n  <div class=\"card-header\">\r\n  <h3 class=\"title-notify mt-10 mb-6\">\r\n    Notifications\r\n  </h3>\r\n  </div>\r\n  <ng-container *ngIf=\"loading\">\r\n    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n  \r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"noData && !loading\">\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-12 mb-3\">\r\n        <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n          <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n          <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n          <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n    <div *ngFor=\"let item of notification\" class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n      <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                  xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                  version=\"1.1\" class=\"ng-star-inserted\">\r\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                    <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                    <path\r\n                      d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                      fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                    <path\r\n                      d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                      fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                  </g>\r\n                </svg></span></span></div>\r\n          <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">{{ item._source.logType }}</div>\r\n            <div class=\"alt-desc\">{{ item._source.logSubType }}</div>\r\n          </div>\r\n        </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n\r\n        \r\n      </div>\r\n    \r\n    </div>\r\n    <div class=\"text-center border-top\">\r\n      <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary mt-4\">\r\n        View All\r\n      </a>\r\n    </div>\r\n    \r\n  </div>\r\n</div>\r\n\r\n<!-- <div class=\"d-flex flex-column bgi-no-repeat rounded-top\">\r\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9\">\r\n    <li class=\"nav-item w-50 text-center\">\r\n      <a class=\"nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center\"\r\n        data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'alerts' ? 'active' : ''\" (click)=\"setActiveTabId('alerts')\">\r\n        Alerts\r\n      </a>\r\n    </li>\r\n\r\n\r\n    <li class=\"nav-item w-50 text-center\">\r\n      <a class=\"\r\n          nav-link d-block text-center\r\n          text-white w-100\r\n          opacity-75 opacity-state-100\r\n          pb-4\r\n          cursor-pointer\r\n        \" data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'download' ? 'active' : ''\"\r\n        (click)=\"setActiveTabId('download')\">\r\n        Download\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div> -->\r\n\r\n\r\n<!-- <div class=\"tab-content\">\r\n  <div class=\"tab-pane fade\" id=\"alerts\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'alerts' ? 'show active' : ''\">\r\n    <div>\r\n      <div class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n        <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                    version=\"1.1\" class=\"ng-star-inserted\">\r\n                    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                      <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                      <path\r\n                        d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                      <path\r\n                        d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                    </g>\r\n                  </svg></span></span></div>\r\n            <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n              <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n            </div>\r\n          </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n        </div>\r\n        <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                    version=\"1.1\" class=\"ng-star-inserted\">\r\n                    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                      <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                      <path\r\n                        d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                      <path\r\n                        d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                    </g>\r\n                  </svg></span></span></div>\r\n            <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n              <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n            </div>\r\n          </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n        </div>\r\n       \r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"py-3 text-center border-top\">\r\n      <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n        View All\r\n\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tab-pane fade\" id=\"download\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'download' ? 'show active' : ''\">\r\n    <div class=\"scroll-y mh-400px my-5 px-5\">\r\n      <div class=\"d-flex flex-stack py-4\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"me-3\">\r\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n              <g clip-path=\"url(#clip0_9019_100928)\">\r\n                <path\r\n                  d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </g>\r\n              <defs>\r\n                <clipPath id=\"clip0_9019_100928\">\r\n                  <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\" />\r\n                </clipPath>\r\n              </defs>\r\n            </svg>\r\n          </span>\r\n          <div class=\"mb-0 me-2\">\r\n\r\n            <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\r\n          </div>\r\n        </div>\r\n\r\n        <span class=\"fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n            fill=\"none\">\r\n            <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\" />\r\n          </svg></span>\r\n      </div>\r\n    </div>\r\n    <div class=\"py-3 text-center border-top\">\r\n      <a (click)=\"viewAll('download')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n        View All\r\n\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CustomDateFormatPipe, name: "customDateFormat" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: NotificationsInnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-notifications-inner', template: "<div\n  class=\"d-flex flex-column bgi-no-repeat rounded-top\"\n\n>\n  <h3 class=\"title-notify px-9 mt-10 mb-6\">\n    Notifications \n  </h3>\n\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9\">\n    <li class =\"nav-item w-50 text-center\">\n      <a\n        class=\"nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center\"\n        data-bs-toggle=\"tab\"\n        [ngClass]=\"activeTabId === 'alerts' ? 'active' : ''\"\n        (click)=\"setActiveTabId('alerts')\"\n      >\n        Alerts\n      </a>\n    </li>\n\n\n    <li class=\"nav-item w-50 text-center\">\n      <a\n        class=\"\n          nav-link d-block text-center\n          text-white w-100\n          opacity-75 opacity-state-100\n          pb-4\n          cursor-pointer\n        \"\n        data-bs-toggle=\"tab\"\n        [ngClass]=\"activeTabId === 'download' ? 'active' : ''\"\n        (click)=\"setActiveTabId('download')\"\n      >\n      Download\n      </a>\n    </li>\n  </ul>\n</div>\n\n<div class=\"tab-content\">\n  <div\n    class=\"tab-pane fade\"\n    id=\"alerts\"\n    role=\"tabpanel\"\n    [ngClass]=\"activeTabId === 'alerts' ? 'show active' : ''\"\n  >\n    <div class=\"scroll-y mh-400px my-5 px-5\">\n      <div  class=\"d-flex flex-stack py-4\">\n        <div class=\"d-flex align-items-center\">\n          <span class=\"me-3\">\n          <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\n            <g clip-path=\"url(#clip0_9019_100928)\">\n            <path d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\" stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n            <clipPath id=\"clip0_9019_100928\">\n            <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\n            </clipPath>\n            </defs>\n            </svg>\n          </span>\n          <div class=\"mb-0 me-2\">\n           \n            <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\n          </div>\n        </div>\n\n        <span class=\" fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n          <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\"/>\n          </svg></span>\n      </div>\n    </div>\n\n    <div class=\"py-3 text-center border-top\">\n      <a\n        (click)=\"viewAll('alerts')\"\n        class=\"btn btn-color-gray-600 btn-active-color-primary\"\n      >\n        View All\n       \n      </a>\n    </div>\n  </div>\n\n\n  <div\n    class=\"tab-pane fade\"\n    id=\"download\"\n    role=\"tabpanel\"\n    [ngClass]=\"activeTabId === 'download' ? 'show active' : ''\"\n  >\n  <div class=\"scroll-y mh-400px my-5 px-5\">\n    <!-- *ngFor=\"let alert of alerts\" -->\n    <div  class=\"d-flex flex-stack py-4\">\n      <div class=\"d-flex align-items-center\">\n        <span class=\"me-3\">\n        <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\"/>\n          <g clip-path=\"url(#clip0_9019_100928)\">\n          <path d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\" stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </g>\n          <defs>\n          <clipPath id=\"clip0_9019_100928\">\n          <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\"/>\n          </clipPath>\n          </defs>\n          </svg>\n        </span>\n        <div class=\"mb-0 me-2\">\n         \n          <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\n        </div>\n      </div>\n\n      <span class=\"fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n        <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\"/>\n        </svg></span>\n    </div>\n  </div>\n    <div class=\"py-3 text-center border-top\">\n      <a\n      (click)=\"viewAll('download')\"\n        class=\"btn btn-color-gray-600 btn-active-color-primary\"\n      >\n        View All\n       \n      </a>\n    </div>\n  </div>\n</div>\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { class: [{
+            args: [{ selector: 'lib-notifications-inner', template: "<div class=\"card topbar\" >\r\n  <div class=\"card-header\">\r\n  <h3 class=\"title-notify mt-10 mb-6\">\r\n    Notifications\r\n  </h3>\r\n  </div>\r\n  <ng-container *ngIf=\"loading\">\r\n    <div class=\"row loader  d-flex justify-content-center align-items-center\">\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"shimmer\">\r\n        <div class=\"wrapper\">\r\n          <div class=\"stroke animate title\"></div>\r\n          <div class=\"stroke animate link\"></div>\r\n          <div class=\"stroke animate description\"></div>\r\n        </div>\r\n      </div>\r\n  \r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"noData && !loading\">\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-12 mb-3\">\r\n        <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n          <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n          <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n          <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n    <div *ngFor=\"let item of notification\" class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n      <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                  xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                  version=\"1.1\" class=\"ng-star-inserted\">\r\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                    <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                    <path\r\n                      d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                      fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                    <path\r\n                      d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                      fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                  </g>\r\n                </svg></span></span></div>\r\n          <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">{{ item._source.logType }}</div>\r\n            <div class=\"alt-desc\">{{ item._source.logSubType }}</div>\r\n          </div>\r\n        </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n\r\n        \r\n      </div>\r\n    \r\n    </div>\r\n    <div class=\"text-center border-top\">\r\n      <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary mt-4\">\r\n        View All\r\n      </a>\r\n    </div>\r\n    \r\n  </div>\r\n</div>\r\n\r\n<!-- <div class=\"d-flex flex-column bgi-no-repeat rounded-top\">\r\n  <ul class=\"nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9\">\r\n    <li class=\"nav-item w-50 text-center\">\r\n      <a class=\"nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center\"\r\n        data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'alerts' ? 'active' : ''\" (click)=\"setActiveTabId('alerts')\">\r\n        Alerts\r\n      </a>\r\n    </li>\r\n\r\n\r\n    <li class=\"nav-item w-50 text-center\">\r\n      <a class=\"\r\n          nav-link d-block text-center\r\n          text-white w-100\r\n          opacity-75 opacity-state-100\r\n          pb-4\r\n          cursor-pointer\r\n        \" data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'download' ? 'active' : ''\"\r\n        (click)=\"setActiveTabId('download')\">\r\n        Download\r\n      </a>\r\n    </li>\r\n  </ul>\r\n</div> -->\r\n\r\n\r\n<!-- <div class=\"tab-content\">\r\n  <div class=\"tab-pane fade\" id=\"alerts\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'alerts' ? 'show active' : ''\">\r\n    <div>\r\n      <div class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n        <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                    version=\"1.1\" class=\"ng-star-inserted\">\r\n                    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                      <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                      <path\r\n                        d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                      <path\r\n                        d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                    </g>\r\n                  </svg></span></span></div>\r\n            <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n              <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n            </div>\r\n          </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n        </div>\r\n        <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n          <div class=\"d-flex align-items-center\">\r\n            <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n                  class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                    xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n                    version=\"1.1\" class=\"ng-star-inserted\">\r\n                    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n                      <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n                      <path\r\n                        d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n                      <path\r\n                        d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n                        fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n                    </g>\r\n                  </svg></span></span></div>\r\n            <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n              <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n            </div>\r\n          </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n        </div>\r\n       \r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"py-3 text-center border-top\">\r\n      <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n        View All\r\n\r\n      </a>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"tab-pane fade\" id=\"download\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'download' ? 'show active' : ''\">\r\n    <div class=\"scroll-y mh-400px my-5 px-5\">\r\n      <div class=\"d-flex flex-stack py-4\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"me-3\">\r\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n              <g clip-path=\"url(#clip0_9019_100928)\">\r\n                <path\r\n                  d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\"\r\n                  stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </g>\r\n              <defs>\r\n                <clipPath id=\"clip0_9019_100928\">\r\n                  <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\" />\r\n                </clipPath>\r\n              </defs>\r\n            </svg>\r\n          </span>\r\n          <div class=\"mb-0 me-2\">\r\n\r\n            <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\r\n          </div>\r\n        </div>\r\n\r\n        <span class=\"fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n            fill=\"none\">\r\n            <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\" />\r\n          </svg></span>\r\n      </div>\r\n    </div>\r\n    <div class=\"py-3 text-center border-top\">\r\n      <a (click)=\"viewAll('download')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n        View All\r\n\r\n      </a>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: NotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
             }], dataKtMenu: [{
@@ -4898,7 +5103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
                         DatepickerComponent,
                         DateSingleSelectComponent,
                         SingleStoreComponent,
-                        NotificationsInnerComponent
+                        NotificationsInnerComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -5134,5 +5339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccountingComponent, AuthGuard, AuthService, ClassicComponent, ClientSettingsComponent, CommonSharedModule, ContentComponent, CustomDateFormatPipe, CustomSelectComponent, Error404Component, Error500Component, ErrorsComponent, ErrorsModule, ExtendedComponent, FiltersComponent, FooterComponent, 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 };
+export { AccountingComponent, AuthGuard, AuthService, ClassicComponent, ClientSettingsComponent, CommonSharedModule, ContentComponent, CustomDateFormatPipe, CustomSelectComponent, Error404Component, Error500Component, ErrorsComponent, ErrorsModule, ExtendedComponent, FiltersComponent, FooterComponent, HeaderComponent, HeaderMenuComponent, HttpAuthInterceptor, LayoutComponent, LayoutModule, LayoutScrollTopComponent, NavbarComponent, NotificationService, 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