tango-app-ui-shared 3.0.14-dev → 3.0.16-dev

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, Injectable, HostListener, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, NgModule } from '@angular/core';
+import { Component, Input, HostBinding, Injectable, HostListener, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, NgModule, Pipe } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, NavigationCancel, ResolveEnd, RouterModule } from '@angular/router';
 import * as i1 from 'tango-app-ui-metronics';
 import { MenuComponent, ToggleComponent, ScrollTopComponent, DrawerComponent, StickyComponent, ScrollComponent } from 'tango-app-ui-metronics';
 import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { filter } from 'rxjs/operators';
 import * as i3 from '@angular/platform-browser';
 import { BehaviorSubject, throwError, map, catchError } from 'rxjs';
@@ -1629,8 +1629,8 @@ class AuthService {
         return this.http.get(`${this.clientApiUrl}/get-clients`, {})
             .pipe(map((response) => response), catchError(this.handleError));
     }
-    getStores() {
-        return this.http.get(`https://devtangoretail-api.tangoeye.ai/v3/store/get-stores?clientId=11`, {})
+    getStores(id) {
+        return this.http.get(`https://devtangoretail-api.tangoeye.ai/v3/store/get-stores?clientId=${id}`, {})
             .pipe(map((response) => response), catchError(this.handleError));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, deps: [{ token: i1$1.Router }, { token: GlobalStateService }, { token: i3$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1719,8 +1719,8 @@ class ClassicComponent {
                     this.toggleCheckbox("Select All", 0);
                     this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
                     this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
-                    this.selectedDateRange.startDate = this.dayjs().format("MM-DD-YYYY");
-                    this.selectedDateRange.endDate = this.dayjs().format("MM-DD-YYYY");
+                    this.selectedDateRange.startDate = this.dayjs().format("YYYY-MM-DD");
+                    this.selectedDateRange.endDate = this.dayjs().format("YYYY-MM-DD");
                     const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
                     this.selectedFilters.clients = currentIssues;
                     this.selectedFilters.date = this.selectedDateRange;
@@ -1856,7 +1856,6 @@ class ClassicComponent {
             }
         }
         this.globalService.dataRangeValue.next(this.selectedFilters);
-        this.cd.detectChanges();
         this.Opendropdown = false;
         this.selectedValuesArray.forEach((item, index) => {
             item = item.map((ele) => ele.clientId);
@@ -1871,7 +1870,6 @@ class ClassicComponent {
         this.selectedFilters.clients = this.responseArray[0].Issues;
         this.selectedFilters.date = this.selectedDateRange;
         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
-        this.cd.detectChanges();
     }
     ranges = {
         "Today": [this.dayjs(), this.dayjs()],
@@ -1901,10 +1899,10 @@ class ClassicComponent {
                 // Dates are valid, proceed with formatting
                 this.selectedDateRange.startDate = this.dayjs(event.startDate)
                     .utc()
-                    .format("DD-MM-YYYY");
+                    .format("YYYY-MM-DD");
                 this.selectedDateRange.endDate = this.dayjs(event.endDate)
                     .utc()
-                    .format("DD-MM-YYYY");
+                    .format("YYYY-MM-DD");
                 console.log(this.selectedDateRange);
             }
             else {
@@ -1915,9 +1913,17 @@ class ClassicComponent {
         else {
             const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
             this.selectedFilters.date = headerFilters.date;
+            if (headerFilters.date?.startDate && headerFilters.date?.endDate) {
+                this.selectedDateRange = headerFilters.date;
+            }
+            else {
+                this.selectedDateRange = {
+                    startDate: dayjs().format("YYYY-MM-DD"),
+                    endDate: dayjs().format("YYYY-MM-DD")
+                };
+            }
         }
         this.selectedFilters.date = this.selectedDateRange;
-        this.cd.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }, { token: GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ClassicComponent, selector: "lib-classic", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"py-3 dropdown1 cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n    <div class=\"dropdown form-select\" (click)=\"Dropdown('Clients',i,$event)\">\r\n        <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n            selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span>\r\n    </div>\r\n    <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n        <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n                [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n                (change)=\"toggleCheckbox('Select All', i)\">\r\n            <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n\r\n        <div class=\"border border-gray mt-3\"></div>\r\n        <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n            <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n                    <path\r\n                        d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\"\r\n                        stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </span>\r\n            <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n                class=\"form-control searchinput ps-14 py-2  mt-2\" placeholder=\"Search\" autocomplete=\"off\" />\r\n        </div>\r\n        <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.clientName\" id=\"option{{issue.clientId}}\"\r\n                [checked]=\"selectedValuesArray[i]?.includes(issue.clientId)\" (change)=\"toggleCheckbox(issue.clientId,i)\">\r\n            <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.clientId}}\">\r\n                {{ issue.clientName }}\r\n            </label>\r\n        </div>\r\n        <div class=\"mt-5 d-flex justify-content-center\">\r\n            <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n</div>\r\n\r\n\r\n<!-- <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd \r\n    [singleDatePicker]=\"true\"\r\n    [drops]=\"'down'\"\r\n    [opens]=\"'right'\"\r\n    [alwaysShowCalendars]=\"false\"\r\n    [keepCalendarOpeningWithRange]=\"true\"\r\n    [showCancel]=\"true\"\r\n    autocomplete=\"off\"\r\n    [(ngModel)]=\"selectedDate\"\r\n    [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n    (selected)=\"onDateSelect($event)\"\r\n    name=\"daterange\" /> -->\r\n\r\n<div class=\"btn btn-primary\" (click)=\"Apply()\">Apply</div>", styles: [".dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:250px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
@@ -2218,7 +2224,6 @@ class DatepickerComponent {
         this.gs.dataRangeValue.next(this.selectedFilters);
         this.selectedFilters.date = this.selectedDateRange;
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
-        this.cd.detectChanges();
         // this.globalService.sendData(this.selectedDateRange);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.LayoutService }, { token: GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -2300,7 +2305,6 @@ class DateSingleSelectComponent {
     onClientSelect(event) {
         this.selectedClient = event;
         this.gs.selectedClient.next(this.selectedClient);
-        this.cd.detectChanges();
     }
     ranges = {
         'Today': [this.dayjs(), this.dayjs()],
@@ -2344,7 +2348,6 @@ class DateSingleSelectComponent {
             this.selectedFilters.date = headerFilters.date;
         }
         this.selectedFilters.date = this.selectedDateRange;
-        this.cd.detectChanges();
         // this.globalService.sendData(JSON.stringify(this.selectedFilters.date));
         // localStorage.setItem('dateRangeFilters', JSON.stringify(this.selectedDateRange));
         // this.globalService.sendData(this.selectedDateRange);
@@ -2385,55 +2388,43 @@ class SingleStoreComponent {
         this.auth = auth;
         this.gs = gs;
         this.cd = cd;
-        this.auth.getStores().subscribe({
-            next: (e) => {
-                if (e) {
-                    this.storeList = e.data.result;
-                    const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-                    this.cd.detectChanges();
-                    if (headerFilters.store) {
-                        this.storeList.find((obj) => {
-                            if (obj.storeId === headerFilters.store) {
-                                this.selectedClient = obj;
-                                this.gs.dataRangeValue.next(this.selectedFilters);
-                                this.cd.detectChanges();
-                            }
-                        });
-                    }
-                    else {
-                        this.selectedClient = this.storeList[0];
-                        this.selectedFilters.store = this.selectedClient.storeId;
-                        // console.log(this.selectedFilters)
-                        this.gs.dataRangeValue.next(this.selectedFilters);
-                        this.cd.detectChanges();
-                    }
-                }
-            },
-        });
     }
     ngOnInit() {
-        if ("header-filters" in localStorage) {
-            const headerFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
-            this.cd.detectChanges();
-            if (headerFilters.store) {
-                this.storeList.find((obj) => {
-                    if (obj.storeId === headerFilters.store) {
-                        this.selectedClient = obj;
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        if (headerFilters?.client) {
+            this.auth.getStores(headerFilters?.client).subscribe({
+                next: (e) => {
+                    if (e) {
+                        this.storeList = e.data.result;
+                        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+                        if (headerFilters.store) {
+                            this.storeList.find((obj) => {
+                                if (obj.storeId === headerFilters.store) {
+                                    this.selectedClient = obj;
+                                    this.gs.dataRangeValue.next(this.selectedFilters);
+                                }
+                                this.gs.dataRangeValue.next(this.selectedFilters);
+                                this.selectedFilters.store = headerFilters.store;
+                                this.selectedFilters.client = headerFilters.client;
+                                this.selectedFilters.clients = [headerFilters.clients];
+                                this.selectedFilters.date = headerFilters.date;
+                                this.selectedDateRange.startDate = headerFilters.date.startDate;
+                                this.selectedDateRange.endDate = headerFilters.date.endDate;
+                                this.cd.detectChanges();
+                            });
+                        }
+                        else {
+                            this.selectedClient = this.storeList[0];
+                            this.selectedFilters.store = this.selectedClient.storeId;
+                            this.selectedDateRange.startDate = this.dayjs().format('YYYY-MM-DD');
+                            this.selectedDateRange.endDate = this.dayjs().format('YYYY-MM-DD');
+                            this.selectedFilters.date = this.selectedDateRange;
+                            this.gs.dataRangeValue.next(this.selectedFilters);
+                            this.cd.detectChanges();
+                        }
                     }
-                });
-            }
-            this.gs.dataRangeValue.next(this.selectedFilters);
-            this.selectedFilters.store = headerFilters.store;
-            this.selectedFilters.client = headerFilters.client;
-            this.selectedFilters.clients = [headerFilters.clients];
-            this.selectedFilters.date = headerFilters.date;
-            this.selectedDateRange.startDate = headerFilters.date.startDate;
-            this.selectedDateRange.endDate = headerFilters.date.endDate;
-            this.cd.detectChanges();
-        }
-        else {
-            this.selectedDateRange.startDate = this.dayjs().format('MM-DD-YYYY');
-            this.selectedDateRange.endDate = this.dayjs().format('MM-DD-YYYY');
+                },
+            });
         }
     }
     onClientSelect(event) {
@@ -2463,18 +2454,11 @@ class SingleStoreComponent {
         if (event && event.startDate && event.endDate) {
             if (this.dayjs(event.startDate).isValid() && this.dayjs(event.endDate).isValid()) {
                 // Dates are valid, proceed with formatting
-                this.selectedDateRange.startDate = this.dayjs(event.startDate).utc().format('DD-MM-YYYY');
-                this.selectedDateRange.endDate = this.dayjs(event.endDate).utc().format('DD-MM-YYYY');
+                this.selectedDateRange.startDate = this.dayjs(event.startDate).utc().format('YYYY-MM-DD');
+                this.selectedDateRange.endDate = this.dayjs(event.endDate).utc().format('YYYY-MM-DD');
             }
             else {
-                // Dates are not valid, handle the scenario accordingly
                 console.error('Invalid dates provided:', event.startDate, event.endDate);
-                // If you want to fallback to stored filters when the dates are invalid, you can keep the existing logic
-                // const storedFilters = JSON.parse(localStorage.getItem('dateRangeFilters') || '{}');
-                // if (storedFilters.startDate && storedFilters.endDate) {
-                //   this.selectedDateRange.startDate = dayjs(storedFilters.startDate).format('DD-MM-YYYY');
-                //   this.selectedDateRange.endDate = dayjs(storedFilters.endDate).format('DD-MM-YYYY');
-                // }
             }
         }
         else {
@@ -2493,7 +2477,6 @@ class SingleStoreComponent {
         this.selectedFilters.date = this.selectedDateRange;
         this.gs.dataRangeValue.next(this.selectedFilters);
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
-        this.cd.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SingleStoreComponent, deps: [{ token: AuthService }, { token: GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SingleStoreComponent, selector: "lib-single-store", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n        [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n        [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
@@ -4340,11 +4323,30 @@ 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.0.8", ngImport: i0, type: CustomDateFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: CustomDateFormatPipe, name: "customDateFormat" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomDateFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'customDateFormat'
+                }]
+        }] });
+
 class CommonSharedModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent, CustomDateFormatPipe], imports: [CommonModule,
             FormsModule,
-            NgxPaginationModule], exports: [PaginationComponent, FiltersComponent, CustomSelectComponent] });
+            NgxPaginationModule], exports: [PaginationComponent, FiltersComponent, CustomSelectComponent, CustomDateFormatPipe] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, imports: [CommonModule,
             FormsModule,
             NgxPaginationModule] });
@@ -4352,13 +4354,13 @@ class CommonSharedModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CommonSharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent],
+                    declarations: [PaginationComponent, FiltersComponent, CustomSelectComponent, CustomDateFormatPipe],
                     imports: [
                         CommonModule,
                         FormsModule,
                         NgxPaginationModule
                     ],
-                    exports: [PaginationComponent, FiltersComponent, CustomSelectComponent]
+                    exports: [PaginationComponent, FiltersComponent, CustomSelectComponent, CustomDateFormatPipe]
                 }]
         }] });
 
@@ -4657,5 +4659,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccountingComponent, AuthGuard, AuthService, ClassicComponent, ClientSettingsComponent, CommonSharedModule, ContentComponent, CustomSelectComponent, Error404Component, Error500Component, ErrorsComponent, ErrorsModule, ExtendedComponent, FiltersComponent, FooterComponent, GlobalStateService, HeaderComponent, HeaderMenuComponent, HttpAuthInterceptor, LayoutComponent, LayoutModule, LayoutScrollTopComponent, NavbarComponent, PageTitleComponent, PaginationComponent, ReportsComponent, SaasComponent, ScriptsInitComponent, SidebarComponent, SidebarFooterComponent, SidebarLogoComponent, SidebarMenuComponent, ToastService, ToolbarComponent, TranslationModule, TranslationService, ch as chLang, de as deLang, en as enLang, es as esLang, fr as frLang, jp as jpLang };
+export { AccountingComponent, AuthGuard, AuthService, ClassicComponent, ClientSettingsComponent, CommonSharedModule, ContentComponent, CustomDateFormatPipe, CustomSelectComponent, Error404Component, Error500Component, ErrorsComponent, ErrorsModule, ExtendedComponent, FiltersComponent, FooterComponent, GlobalStateService, HeaderComponent, HeaderMenuComponent, HttpAuthInterceptor, LayoutComponent, LayoutModule, LayoutScrollTopComponent, NavbarComponent, PageTitleComponent, PaginationComponent, ReportsComponent, SaasComponent, ScriptsInitComponent, SidebarComponent, SidebarFooterComponent, SidebarLogoComponent, SidebarMenuComponent, ToastService, ToolbarComponent, TranslationModule, TranslationService, ch as chLang, de as deLang, en as enLang, es as esLang, fr as frLang, jp as jpLang };
 //# sourceMappingURL=tango-app-ui-shared.mjs.map