tango-app-ui-manage-tickets 3.3.0-beta.8 → 3.3.0-beta.9

package/fesm2022/tango-app-ui-manage-tickets.mjs

@@ -650,11 +650,19 @@ class TicketsComponent {
     selectedTabs(type) {
         if (this.type === 'dataMismatch') {
             this.selectedTab = type.name.replace(/\s+/g, '').toLocaleLowerCase();
+            this.currentPage = 1;
+            this.offset = 1;
+            this.limit = 10;
+            this.pageSize = 10;
             this.getTable();
             this.transformName(type);
         }
         else {
             this.selectedTab = type.name;
+            this.currentPage = 1;
+            this.offset = 1;
+            this.limit = 10;
+            this.pageSize = 10;
             this.getTable();
         }
     }
@@ -664,6 +672,7 @@ class TicketsComponent {
     onPageChange(pageOffset) {
         this.currentPage = Number(pageOffset);
         this.offset = Number(pageOffset);
+        this.limit = 10;
         this.getTable();
     }
     onPageSizeChange(pageSize) {
@@ -1025,11 +1034,11 @@ class TicketsComponent {
         this.router.navigate(['/manage/users']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2$1.Router }, { token: i2$1.ActivatedRoute }, { token: i2.GlobalStateService }, { token: i1$1.NgbModal }, { token: TicketService }, { token: ExcelService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketsComponent, selector: "lib-tickets", ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span *ngIf=\"type !=='dataMismatch' && type !== 'mat'\" class=\"card-label mb-2\">{{type | titlecase}}</span>\r\n            <span *ngIf=\"type ==='dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n            <span *ngIf=\"type ==='mat'\" class=\"card-label mb-2\">Employee Mat</span>\r\n\r\n            <!-- <span class=\"text-sub mb-2\">Last updated 1 hour ago</span> -->\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div *ngIf=\"!assignTicket\" class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n                        (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n                    <lib-filters *ngIf=\"users.userType === 'tango' && userList?.length || users.userType === 'client' && storeList?.length\" [dataObject]=\"dataObject\"\r\n                        (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n                    <button type=\"button\" *ngIf=\"!noData&&!loading\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                        <span class=\"ms-2\">Export</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"assignTicket\" class=\"d-flex\">\r\n                <button type=\"button\" (click)=\"addAssignTicket()\"\r\n                    class=\"btn mx-2 btn-primary  rounded-3 text-nowrap border-val\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.1665V15.8332M4.1665 9.99984H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <span class=\"ms-2 text-white\">Assign Ticket</span>\r\n                </button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body\">\r\n\r\n\r\n        <ul *ngIf=\"!loading && listArray?.length && type !== 'mat' && type !== 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"{'active': selectedTab === obj.name}\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === obj.name ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"!loading && listArray?.length && type === 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"selectedTab === transformName(obj.name) ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === transformName(obj.name) ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <div *ngIf=\"loading\" 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        </div>\r\n        <div *ngIf=\"noData\" 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\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"table-responsive mt-5\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th  class=\"cursor-pointer\" >\r\n                            \r\n                            <input *ngIf=\"this.users.userType ==='tango'\"\r\n                                class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n                                (click)=\"selectAllStore($event)\">  <span  class=\"cursor-pointer\" (click)=\"onSort('ticketId')\"> Ticket ID <svg\r\n                                    [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></span>         \r\n                        </th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"type !=='dataMismatch'\" (click)=\"onSort('issueDate')\"> Created Date\r\n                            <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"type =='infra'\" (click)=\"onSort('createdAt')\"> Created Time\r\n                                <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></th>\r\n                                <th class=\"cursor-pointer\" *ngIf=\"type =='infra'\" (click)=\"onSort('issueClosedDate')\"> Closed Time\r\n                                    <svg [ngClass]=\"sortedColumn === 'issueClosedDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortedColumn === 'issueClosedDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('createdAt')\"> Created Date\r\n                        <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" ><span (click)=\"onSort('issueDate')\">Issue Date\r\n                    <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                            [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg></span>\r\n                </th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientName')\">Brand Name<svg\r\n                                [ngClass]=\"sortedColumn === 'clientName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientId')\">Brand ID<svg\r\n                                [ngClass]=\"sortedColumn === 'clientId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name<svg\r\n                                [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID<svg\r\n                                [ngClass]=\"sortedColumn === 'storeId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && (type ==='infra'||type ==='dataMismatch'||type ==='mat')\" (click)=\"onSort('userName')\">Resloved By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && type ==='installation'\" (click)=\"onSort('userName')\">Installed By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('issueType')\">Issue Type\r\n                            <svg [ngClass]=\"sortedColumn === 'issueType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueType' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('type')\">Query Type\r\n                            <svg [ngClass]=\"sortedColumn === 'type' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'type' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('reportedFootfall')\">Reported Footfall\r\n                            <svg [ngClass]=\"sortedColumn === 'reportedFootfall' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'reportedFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('mappedCount')\">Unique Images\r\n                            <svg [ngClass]=\"sortedColumn === 'mappedCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'mappedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('successPercentage')\">Success Percentage\r\n                            <svg [ngClass]=\"sortedColumn === 'successPercentage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'successPercentage' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th  class=\"cursor-pointer\"  *ngIf=\"type ==='installation'\" (click)=\"onSort('status')\">Deployed Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type ==='dataMismatch' ||type ==='mat'|| type ==='infra'\" class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('primaryIssue')\">Primary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'primaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'primaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('secondaryIssue')\">Secondary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'secondaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'secondaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type!=='installation'\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let obj of tableListArray\">\r\n                        <td>\r\n                            <input *ngIf=\"this.users.userType ==='tango'\" class=\"form-check-input cursor-pointer me-4 mt-3\" type=\"checkbox\" [(ngModel)]=\"obj.checked\"\r\n                                (change)=\"updateCheck($event,obj?.ticketId)\">\r\n                            <span *ngIf=\"type === 'dataMismatch' || type === 'mat' || type === 'infra'\"\r\n                                class=\"txt-light-primary cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                            <span *ngIf=\"type === 'installation'\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.issueDate |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type !== 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}\r\n                        </td>\r\n                        <td *ngIf=\"type == 'infra'\">\r\n                            {{obj?.createdAt |\r\n                             date: 'hh:mm a' | uppercase}}\r\n                        </td>\r\n                        <td *ngIf=\"type == 'infra'\">\r\n                            {{obj?.issueClosedDate?(obj?.issueClosedDate |\r\n                             date: 'hh:mm a' | uppercase):\"--\"}}\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"clientTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.clientName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">{{obj.clientId}}\r\n                        </td>\r\n                        <td>\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"storeTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.storeName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td>{{obj.storeId}}\r\n                        </td>\r\n                    \r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" >\r\n                                <span >\r\n                                    {{obj.userName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='lowcount'\" >Low Count</td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='highcount'\">High Count</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.type ? obj?.type:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.reportedFootfall ? obj?.reportedFootfall:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.mappedCount ? obj?.mappedCount:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.successPercentage ? obj?.successPercentage:'--'}}</td>\r\n                        <td *ngIf=\"type==='installation'\">\r\n                            <span *ngIf=\"obj.installationStatus ==='paired' || obj.installationStatus ==='onboarded'\"\r\n                                class=\"badge badge-light-primary mx-4\">{{obj.installationStatus | titlecase}}</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='live'\" class=\"badge badge-light-success mx-4\">Live</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='installationfailed'\"\r\n                                class=\"badge badge-light-warning mx-4\">Installationfailed</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='deployed'\"\r\n                                class=\"badge badge-light-success mx-4 text-capitalize\">deployed</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type==='mat' || type==='dataMismatch'\">\r\n                            <span *ngIf=\"obj.status ==='open'\" class=\"badge badge-light-danger\">Open</span>\r\n                            <span *ngIf=\"obj.status ==='closed'\" class=\"badge badge-light-success\">Closed</span>\r\n                            <span *ngIf=\"obj.status ==='inprogress'\" class=\"badge badge-light-primary\">In\r\n                                Progress</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <div>\r\n                                <span *ngIf=\"obj.primaryIssue !=='-'\">{{obj.primaryIssue ? obj.primaryIssue :'Issue not identified'}}</span>\r\n                                <span *ngIf=\"obj.primaryIssue ==='-'\">Issue not identified</span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <span *ngIf=\"obj.secondaryIssue\">{{obj.secondaryIssue}}</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type ==='dataMismatch'\">\r\n                            <span class=\"mx-2 cursor-pointer\" *ngIf=\"this.users.userType ==='tango'\" (click)=\"commentModal(obj)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M17.6431 12.5C17.6431 12.942 17.4675 13.366 17.1549 13.6785C16.8423 13.9911 16.4184 14.1667 15.9764 14.1667H5.9764L2.64307 17.5V4.16667C2.64307 3.72464 2.81866 3.30072 3.13122 2.98816C3.44378 2.67559 3.86771 2.5 4.30973 2.5H15.9764C16.4184 2.5 16.8423 2.67559 17.1549 2.98816C17.4675 3.30072 17.6431 3.72464 17.6431 4.16667V12.5Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg></span>\r\n                                <span class=\"mx-2 cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                        <path\r\n                                            d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'mat'\">\r\n                            <span class=\"mx-2 cursor-pointer\" (click)=\"routeToMat(obj.storeId,obj.clientId,obj.clientName)\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                    <path\r\n                                        d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    <path\r\n                                        d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>                  \r\n                    \r\n                        </td>\r\n                    \r\n                    \r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n            <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.text-border{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-border-priamry{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle;line-height:35px!important}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.txt-light-primary{color:#009bf3!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.img-src{width:25%;height:20%}.rotate{rotate:180deg;transition:1s}.viewbutton{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;padding:10px 16px;justify-content:center;align-items:center;gap:10px;color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600}.horizontal-scroll{overflow-x:auto;overflow-y:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketsComponent, selector: "lib-tickets", ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span *ngIf=\"type !=='dataMismatch' && type !== 'mat'\" class=\"card-label mb-2\">{{type | titlecase}}</span>\r\n            <span *ngIf=\"type ==='dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n            <span *ngIf=\"type ==='mat'\" class=\"card-label mb-2\">Employee Mat</span>\r\n\r\n            <!-- <span class=\"text-sub mb-2\">Last updated 1 hour ago</span> -->\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div *ngIf=\"!assignTicket\" class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n                        (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n                    <lib-filters *ngIf=\"users.userType === 'tango' && userList?.length || users.userType === 'client' && storeList?.length\" [dataObject]=\"dataObject\"\r\n                        (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n                    <button type=\"button\" *ngIf=\"!noData&&!loading\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                        <span class=\"ms-2\">Export</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"assignTicket\" class=\"d-flex\">\r\n                <button type=\"button\" (click)=\"addAssignTicket()\"\r\n                    class=\"btn mx-2 btn-primary  rounded-3 text-nowrap border-val\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.1665V15.8332M4.1665 9.99984H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <span class=\"ms-2 text-white\">Assign Ticket</span>\r\n                </button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body\">\r\n\r\n\r\n        <ul *ngIf=\"!loading && listArray?.length && type !== 'mat' && type !== 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"{'active': selectedTab === obj.name}\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === obj.name ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"!loading && listArray?.length && type === 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"selectedTab === transformName(obj.name) ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === transformName(obj.name) ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <div *ngIf=\"loading\" 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        </div>\r\n        <div *ngIf=\"noData\" 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\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"table-responsive mt-5\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th  class=\"cursor-pointer\" >\r\n                            \r\n                            <input *ngIf=\"this.users.userType ==='tango'\"\r\n                                class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n                                (click)=\"selectAllStore($event)\">  <span  class=\"cursor-pointer\" (click)=\"onSort('ticketId')\"> Ticket ID <svg\r\n                                    [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></span>         \r\n                        </th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"type !=='dataMismatch'\" (click)=\"onSort('issueDate')\"> Created Date\r\n                            <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"type ==='infra'\" (click)=\"onSort('createdAt')\"> Created Time\r\n                                <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></th>\r\n                                <th class=\"cursor-pointer\" *ngIf=\"type ==='infra'\" (click)=\"onSort('issueClosedDate')\"> Closed Time\r\n                                    <svg [ngClass]=\"sortedColumn === 'issueClosedDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortedColumn === 'issueClosedDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('createdAt')\"> Created Date\r\n                        <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" ><span (click)=\"onSort('issueDate')\">Issue Date\r\n                    <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                            [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg></span>\r\n                </th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientName')\">Brand Name<svg\r\n                                [ngClass]=\"sortedColumn === 'clientName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientId')\">Brand ID<svg\r\n                                [ngClass]=\"sortedColumn === 'clientId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name<svg\r\n                                [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID<svg\r\n                                [ngClass]=\"sortedColumn === 'storeId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && (type ==='infra'||type ==='dataMismatch'||type ==='mat')\" (click)=\"onSort('userName')\">Resolved By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && type ==='installation'\" (click)=\"onSort('userName')\">Installed By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('issueType')\">Issue Type\r\n                            <svg [ngClass]=\"sortedColumn === 'issueType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueType' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('type')\">Query Type\r\n                            <svg [ngClass]=\"sortedColumn === 'type' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'type' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('reportedFootfall')\">Reported Footfall\r\n                            <svg [ngClass]=\"sortedColumn === 'reportedFootfall' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'reportedFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('mappedCount')\">Unique Images\r\n                            <svg [ngClass]=\"sortedColumn === 'mappedCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'mappedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('successPercentage')\">Success Percentage\r\n                            <svg [ngClass]=\"sortedColumn === 'successPercentage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'successPercentage' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th  class=\"cursor-pointer\"  *ngIf=\"type ==='installation'\" (click)=\"onSort('status')\">Deployed Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type ==='dataMismatch' ||type ==='mat'|| type ==='infra'\" class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('primaryIssue')\">Primary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'primaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'primaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('secondaryIssue')\">Secondary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'secondaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'secondaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type!=='installation'\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let obj of tableListArray\">\r\n                        <td>\r\n                            <input *ngIf=\"this.users.userType ==='tango'\" class=\"form-check-input cursor-pointer me-4 mt-3\" type=\"checkbox\" [(ngModel)]=\"obj.checked\"\r\n                                (change)=\"updateCheck($event,obj?.ticketId)\">\r\n                            <span *ngIf=\"type === 'dataMismatch' || type === 'mat' || type === 'infra'\"\r\n                                class=\"txt-light-primary cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                            <span *ngIf=\"type === 'installation'\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.issueDate |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type !== 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}\r\n                        </td>\r\n                        <td *ngIf=\"type === 'infra'\">\r\n                            {{obj?.createdAt |\r\n                             date: 'hh:mm a' | uppercase}}\r\n                        </td>\r\n                        <td *ngIf=\"type === 'infra'\">\r\n                            {{obj?.issueClosedDate?(obj?.issueClosedDate |\r\n                             date: 'hh:mm a' | uppercase):\"--\"}}\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"clientTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.clientName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">{{obj.clientId}}\r\n                        </td>\r\n                        <td>\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"storeTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.storeName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td>{{obj.storeId}}\r\n                        </td>\r\n                    \r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" >\r\n                                <span >\r\n                                    {{obj.userName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='lowcount'\" >Low Count</td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='highcount'\">High Count</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.type ? obj?.type:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.reportedFootfall ? obj?.reportedFootfall:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.mappedCount ? obj?.mappedCount:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.successPercentage ? obj?.successPercentage:'--'}}</td>\r\n                        <td *ngIf=\"type==='installation'\">\r\n                            <span *ngIf=\"obj.installationStatus ==='paired' || obj.installationStatus ==='onboarded'\"\r\n                                class=\"badge badge-light-primary mx-4\">{{obj.installationStatus | titlecase}}</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='live'\" class=\"badge badge-light-success mx-4\">Live</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='installationfailed'\"\r\n                                class=\"badge badge-light-warning mx-4\">Installationfailed</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='deployed'\"\r\n                                class=\"badge badge-light-success mx-4 text-capitalize\">deployed</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type==='mat' || type==='dataMismatch'\">\r\n                            <span *ngIf=\"obj.status ==='open'\" class=\"badge badge-light-danger\">Open</span>\r\n                            <span *ngIf=\"obj.status ==='closed'\" class=\"badge badge-light-success\">Closed</span>\r\n                            <span *ngIf=\"obj.status ==='inprogress'\" class=\"badge badge-light-primary\">In\r\n                                Progress</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <div>\r\n                                <span *ngIf=\"obj.primaryIssue !=='-'\">{{obj.primaryIssue ? obj.primaryIssue :'Issue not identified'}}</span>\r\n                                <span *ngIf=\"obj.primaryIssue ==='-'\">Issue not identified</span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <span *ngIf=\"obj.secondaryIssue\">{{obj.secondaryIssue}}</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type ==='dataMismatch'\">\r\n                            <span class=\"mx-2 cursor-pointer\" *ngIf=\"this.users.userType ==='tango'\" (click)=\"commentModal(obj)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M17.6431 12.5C17.6431 12.942 17.4675 13.366 17.1549 13.6785C16.8423 13.9911 16.4184 14.1667 15.9764 14.1667H5.9764L2.64307 17.5V4.16667C2.64307 3.72464 2.81866 3.30072 3.13122 2.98816C3.44378 2.67559 3.86771 2.5 4.30973 2.5H15.9764C16.4184 2.5 16.8423 2.67559 17.1549 2.98816C17.4675 3.30072 17.6431 3.72464 17.6431 4.16667V12.5Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg></span>\r\n                                <span class=\"mx-2 cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                        <path\r\n                                            d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'mat'\">\r\n                            <span class=\"mx-2 cursor-pointer\" (click)=\"routeToMat(obj.storeId,obj.clientId,obj.clientName)\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                    <path\r\n                                        d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    <path\r\n                                        d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>                  \r\n                    \r\n                        </td>\r\n                    \r\n                    \r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n            <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.text-border{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-border-priamry{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle;line-height:35px!important}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.txt-light-primary{color:#009bf3!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.img-src{width:25%;height:20%}.rotate{rotate:180deg;transition:1s}.viewbutton{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;padding:10px 16px;justify-content:center;align-items:center;gap:10px;color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600}.horizontal-scroll{overflow-x:auto;overflow-y:hidden;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.FiltersComponent, selector: "lib-filters", inputs: ["dataObject"], outputs: ["appliedFilters"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-tickets", template: "<div class=\"card\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span *ngIf=\"type !=='dataMismatch' && type !== 'mat'\" class=\"card-label mb-2\">{{type | titlecase}}</span>\r\n            <span *ngIf=\"type ==='dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n            <span *ngIf=\"type ==='mat'\" class=\"card-label mb-2\">Employee Mat</span>\r\n\r\n            <!-- <span class=\"text-sub mb-2\">Last updated 1 hour ago</span> -->\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div *ngIf=\"!assignTicket\" class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n                        (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n                    <lib-filters *ngIf=\"users.userType === 'tango' && userList?.length || users.userType === 'client' && storeList?.length\" [dataObject]=\"dataObject\"\r\n                        (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n                    <button type=\"button\" *ngIf=\"!noData&&!loading\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                        <span class=\"ms-2\">Export</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"assignTicket\" class=\"d-flex\">\r\n                <button type=\"button\" (click)=\"addAssignTicket()\"\r\n                    class=\"btn mx-2 btn-primary  rounded-3 text-nowrap border-val\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.1665V15.8332M4.1665 9.99984H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <span class=\"ms-2 text-white\">Assign Ticket</span>\r\n                </button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body\">\r\n\r\n\r\n        <ul *ngIf=\"!loading && listArray?.length && type !== 'mat' && type !== 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"{'active': selectedTab === obj.name}\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === obj.name ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"!loading && listArray?.length && type === 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"selectedTab === transformName(obj.name) ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === transformName(obj.name) ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <div *ngIf=\"loading\" 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        </div>\r\n        <div *ngIf=\"noData\" 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\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"table-responsive mt-5\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th  class=\"cursor-pointer\" >\r\n                            \r\n                            <input *ngIf=\"this.users.userType ==='tango'\"\r\n                                class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n                                (click)=\"selectAllStore($event)\">  <span  class=\"cursor-pointer\" (click)=\"onSort('ticketId')\"> Ticket ID <svg\r\n                                    [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></span>         \r\n                        </th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"type !=='dataMismatch'\" (click)=\"onSort('issueDate')\"> Created Date\r\n                            <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"type =='infra'\" (click)=\"onSort('createdAt')\"> Created Time\r\n                                <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></th>\r\n                                <th class=\"cursor-pointer\" *ngIf=\"type =='infra'\" (click)=\"onSort('issueClosedDate')\"> Closed Time\r\n                                    <svg [ngClass]=\"sortedColumn === 'issueClosedDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortedColumn === 'issueClosedDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('createdAt')\"> Created Date\r\n                        <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" ><span (click)=\"onSort('issueDate')\">Issue Date\r\n                    <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                            [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg></span>\r\n                </th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientName')\">Brand Name<svg\r\n                                [ngClass]=\"sortedColumn === 'clientName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientId')\">Brand ID<svg\r\n                                [ngClass]=\"sortedColumn === 'clientId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name<svg\r\n                                [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID<svg\r\n                                [ngClass]=\"sortedColumn === 'storeId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && (type ==='infra'||type ==='dataMismatch'||type ==='mat')\" (click)=\"onSort('userName')\">Resloved By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && type ==='installation'\" (click)=\"onSort('userName')\">Installed By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('issueType')\">Issue Type\r\n                            <svg [ngClass]=\"sortedColumn === 'issueType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueType' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('type')\">Query Type\r\n                            <svg [ngClass]=\"sortedColumn === 'type' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'type' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('reportedFootfall')\">Reported Footfall\r\n                            <svg [ngClass]=\"sortedColumn === 'reportedFootfall' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'reportedFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('mappedCount')\">Unique Images\r\n                            <svg [ngClass]=\"sortedColumn === 'mappedCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'mappedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('successPercentage')\">Success Percentage\r\n                            <svg [ngClass]=\"sortedColumn === 'successPercentage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'successPercentage' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th  class=\"cursor-pointer\"  *ngIf=\"type ==='installation'\" (click)=\"onSort('status')\">Deployed Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type ==='dataMismatch' ||type ==='mat'|| type ==='infra'\" class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('primaryIssue')\">Primary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'primaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'primaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('secondaryIssue')\">Secondary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'secondaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'secondaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type!=='installation'\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let obj of tableListArray\">\r\n                        <td>\r\n                            <input *ngIf=\"this.users.userType ==='tango'\" class=\"form-check-input cursor-pointer me-4 mt-3\" type=\"checkbox\" [(ngModel)]=\"obj.checked\"\r\n                                (change)=\"updateCheck($event,obj?.ticketId)\">\r\n                            <span *ngIf=\"type === 'dataMismatch' || type === 'mat' || type === 'infra'\"\r\n                                class=\"txt-light-primary cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                            <span *ngIf=\"type === 'installation'\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.issueDate |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type !== 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}\r\n                        </td>\r\n                        <td *ngIf=\"type == 'infra'\">\r\n                            {{obj?.createdAt |\r\n                             date: 'hh:mm a' | uppercase}}\r\n                        </td>\r\n                        <td *ngIf=\"type == 'infra'\">\r\n                            {{obj?.issueClosedDate?(obj?.issueClosedDate |\r\n                             date: 'hh:mm a' | uppercase):\"--\"}}\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"clientTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.clientName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">{{obj.clientId}}\r\n                        </td>\r\n                        <td>\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"storeTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.storeName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td>{{obj.storeId}}\r\n                        </td>\r\n                    \r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" >\r\n                                <span >\r\n                                    {{obj.userName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='lowcount'\" >Low Count</td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='highcount'\">High Count</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.type ? obj?.type:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.reportedFootfall ? obj?.reportedFootfall:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.mappedCount ? obj?.mappedCount:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.successPercentage ? obj?.successPercentage:'--'}}</td>\r\n                        <td *ngIf=\"type==='installation'\">\r\n                            <span *ngIf=\"obj.installationStatus ==='paired' || obj.installationStatus ==='onboarded'\"\r\n                                class=\"badge badge-light-primary mx-4\">{{obj.installationStatus | titlecase}}</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='live'\" class=\"badge badge-light-success mx-4\">Live</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='installationfailed'\"\r\n                                class=\"badge badge-light-warning mx-4\">Installationfailed</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='deployed'\"\r\n                                class=\"badge badge-light-success mx-4 text-capitalize\">deployed</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type==='mat' || type==='dataMismatch'\">\r\n                            <span *ngIf=\"obj.status ==='open'\" class=\"badge badge-light-danger\">Open</span>\r\n                            <span *ngIf=\"obj.status ==='closed'\" class=\"badge badge-light-success\">Closed</span>\r\n                            <span *ngIf=\"obj.status ==='inprogress'\" class=\"badge badge-light-primary\">In\r\n                                Progress</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <div>\r\n                                <span *ngIf=\"obj.primaryIssue !=='-'\">{{obj.primaryIssue ? obj.primaryIssue :'Issue not identified'}}</span>\r\n                                <span *ngIf=\"obj.primaryIssue ==='-'\">Issue not identified</span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <span *ngIf=\"obj.secondaryIssue\">{{obj.secondaryIssue}}</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type ==='dataMismatch'\">\r\n                            <span class=\"mx-2 cursor-pointer\" *ngIf=\"this.users.userType ==='tango'\" (click)=\"commentModal(obj)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M17.6431 12.5C17.6431 12.942 17.4675 13.366 17.1549 13.6785C16.8423 13.9911 16.4184 14.1667 15.9764 14.1667H5.9764L2.64307 17.5V4.16667C2.64307 3.72464 2.81866 3.30072 3.13122 2.98816C3.44378 2.67559 3.86771 2.5 4.30973 2.5H15.9764C16.4184 2.5 16.8423 2.67559 17.1549 2.98816C17.4675 3.30072 17.6431 3.72464 17.6431 4.16667V12.5Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg></span>\r\n                                <span class=\"mx-2 cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                        <path\r\n                                            d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'mat'\">\r\n                            <span class=\"mx-2 cursor-pointer\" (click)=\"routeToMat(obj.storeId,obj.clientId,obj.clientName)\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                    <path\r\n                                        d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    <path\r\n                                        d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>                  \r\n                    \r\n                        </td>\r\n                    \r\n                    \r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n            <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.text-border{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-border-priamry{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle;line-height:35px!important}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.txt-light-primary{color:#009bf3!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.img-src{width:25%;height:20%}.rotate{rotate:180deg;transition:1s}.viewbutton{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;padding:10px 16px;justify-content:center;align-items:center;gap:10px;color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600}.horizontal-scroll{overflow-x:auto;overflow-y:hidden;white-space:nowrap}\n"] }]
+            args: [{ selector: "lib-tickets", template: "<div class=\"card\">\r\n    <div class=\"card-header border-0 pt-3\">\r\n        <h3 class=\"card-title align-items-start flex-column\">\r\n            <span *ngIf=\"type !=='dataMismatch' && type !== 'mat'\" class=\"card-label mb-2\">{{type | titlecase}}</span>\r\n            <span *ngIf=\"type ==='dataMismatch'\" class=\"card-label mb-2\">Data Mismatch</span>\r\n            <span *ngIf=\"type ==='mat'\" class=\"card-label mb-2\">Employee Mat</span>\r\n\r\n            <!-- <span class=\"text-sub mb-2\">Last updated 1 hour ago</span> -->\r\n        </h3>\r\n        <div class=\"card-toolbar\">\r\n            <div *ngIf=\"!assignTicket\" class=\"d-flex\">\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=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                            <path\r\n                                d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                fill=\"currentColor\"></path>\r\n                        </svg>\r\n                    </span>\r\n                    <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search\" autocomplete=\"off\"\r\n                        (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n                    <lib-filters *ngIf=\"users.userType === 'tango' && userList?.length || users.userType === 'client' && storeList?.length\" [dataObject]=\"dataObject\"\r\n                        (appliedFilters)=\"applyFilters($event)\"></lib-filters>\r\n\r\n                    <button type=\"button\" *ngIf=\"!noData&&!loading\" (click)=\"exportXLSX()\"\r\n                        class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\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=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                        <span class=\"ms-2\">Export</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"assignTicket\" class=\"d-flex\">\r\n                <button type=\"button\" (click)=\"addAssignTicket()\"\r\n                    class=\"btn mx-2 btn-primary  rounded-3 text-nowrap border-val\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                        <path d=\"M9.99984 4.1665V15.8332M4.1665 9.99984H15.8332\" stroke=\"white\" stroke-width=\"1.67\"\r\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                    <span class=\"ms-2 text-white\">Assign Ticket</span>\r\n                </button>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-body\">\r\n\r\n\r\n        <ul *ngIf=\"!loading && listArray?.length && type !== 'mat' && type !== 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"{'active': selectedTab === obj.name}\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === obj.name ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"!loading && listArray?.length && type === 'dataMismatch'\" class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll\">\r\n            <li  class=\"nav-item\" *ngFor=\"let obj of listArray.slice().reverse()\" (click)=\"selectedTabs(obj)\">\r\n                <a  [ngClass]=\"selectedTab === transformName(obj.name) ? 'active' : ''\" class=\"nav-link cursor-pointer no-border me-2\">\r\n                    {{obj.name | titlecase}} <span class=\"mx-2\"\r\n                        [ngClass]=\"selectedTab === transformName(obj.name) ? 'text-border-priamry' : 'text-border'\">{{obj.count}}</span>\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <div *ngIf=\"loading\" 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        </div>\r\n        <div *ngIf=\"noData\" 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\" src=\"./assets/tango/Icons/Nodata.svg\" alt=\"\">\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"table-responsive mt-5\">\r\n            <table class=\"table bottom-border text-nowrap \">\r\n                <thead>\r\n                    <tr>\r\n                        <th  class=\"cursor-pointer\" >\r\n                            \r\n                            <input *ngIf=\"this.users.userType ==='tango'\"\r\n                                class=\"form-check-input cursor-pointer me-4\" type=\"checkbox\" [(ngModel)]=\"selectAll\"\r\n                                (click)=\"selectAllStore($event)\">  <span  class=\"cursor-pointer\" (click)=\"onSort('ticketId')\"> Ticket ID <svg\r\n                                    [ngClass]=\"sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></span>         \r\n                        </th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"type !=='dataMismatch'\" (click)=\"onSort('issueDate')\"> Created Date\r\n                            <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"type ==='infra'\" (click)=\"onSort('createdAt')\"> Created Time\r\n                                <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                    width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                        [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\" />\r\n                                </svg></th>\r\n                                <th class=\"cursor-pointer\" *ngIf=\"type ==='infra'\" (click)=\"onSort('issueClosedDate')\"> Closed Time\r\n                                    <svg [ngClass]=\"sortedColumn === 'issueClosedDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                        <path\r\n                                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                            [attr.stroke]=\"sortedColumn === 'issueClosedDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('createdAt')\"> Created Date\r\n                        <svg [ngClass]=\"sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                    <th class=\"cursor-pointer\" *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" ><span (click)=\"onSort('issueDate')\">Issue Date\r\n                    <svg [ngClass]=\"sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''\"\r\n                        width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                        <path\r\n                            d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                            [attr.stroke]=\"sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\" />\r\n                    </svg></span>\r\n                </th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientName')\">Brand Name<svg\r\n                                [ngClass]=\"sortedColumn === 'clientName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"cursor-pointer\" (click)=\"onSort('clientId')\">Brand ID<svg\r\n                                [ngClass]=\"sortedColumn === 'clientId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'clientId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store Name<svg\r\n                                [ngClass]=\"sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" (click)=\"onSort('storeId')\">Store ID<svg\r\n                                [ngClass]=\"sortedColumn === 'storeId' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'storeId' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && (type ==='infra'||type ==='dataMismatch'||type ==='mat')\" (click)=\"onSort('userName')\">Resolved By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th class=\"cursor-pointer\" *ngIf=\"this.users.userType ==='tango' && type ==='installation'\" (click)=\"onSort('userName')\">Installed By<svg [ngClass]=\"sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'userName' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('issueType')\">Issue Type\r\n                            <svg [ngClass]=\"sortedColumn === 'issueType' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'issueType' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('type')\">Query Type\r\n                            <svg [ngClass]=\"sortedColumn === 'type' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'type' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('reportedFootfall')\">Reported Footfall\r\n                            <svg [ngClass]=\"sortedColumn === 'reportedFootfall' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'reportedFootfall' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('mappedCount')\">Unique Images\r\n                            <svg [ngClass]=\"sortedColumn === 'mappedCount' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'mappedCount' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th *ngIf=\"type ==='dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('successPercentage')\">Success Percentage\r\n                            <svg [ngClass]=\"sortedColumn === 'successPercentage' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'successPercentage' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </th>\r\n                        <th  class=\"cursor-pointer\"  *ngIf=\"type ==='installation'\" (click)=\"onSort('status')\">Deployed Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type ==='dataMismatch' ||type ==='mat'|| type ==='infra'\" class=\"cursor-pointer\" (click)=\"onSort('status')\">Status<svg\r\n                            [ngClass]=\"sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''\"\r\n                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                            <path\r\n                                d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                [attr.stroke]=\"sortedColumn === 'status' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                stroke-linejoin=\"round\" />\r\n                        </svg></th>\r\n                        <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('primaryIssue')\">Primary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'primaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'primaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                            <th  *ngIf=\"type !== 'mat' && type !== 'dataMismatch'\" class=\"cursor-pointer\" (click)=\"onSort('secondaryIssue')\">Secondary Issues<svg\r\n                                [ngClass]=\"sortedColumn === 'secondaryIssue' && sortDirection === 1 ? 'rotate' : ''\"\r\n                                width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n                                    [attr.stroke]=\"sortedColumn === 'secondaryIssue' ? '#00A3FF' : '#667085'\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></th>\r\n                        <th *ngIf=\"type!=='installation'\">Actions</th>\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    <tr *ngFor=\"let obj of tableListArray\">\r\n                        <td>\r\n                            <input *ngIf=\"this.users.userType ==='tango'\" class=\"form-check-input cursor-pointer me-4 mt-3\" type=\"checkbox\" [(ngModel)]=\"obj.checked\"\r\n                                (change)=\"updateCheck($event,obj?.ticketId)\">\r\n                            <span *ngIf=\"type === 'dataMismatch' || type === 'mat' || type === 'infra'\"\r\n                                class=\"txt-light-primary cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                            <span *ngIf=\"type === 'installation'\">\r\n                                {{obj.ticketId}}\r\n                            </span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type === 'dataMismatch'\">\r\n                            {{obj?.issueDate |\r\n                            date: 'dd MMM, yyyy'}}</td>\r\n                        <td *ngIf=\"type !== 'dataMismatch'\">\r\n                            {{obj?.createdAt |\r\n                            date: 'dd MMM, yyyy'}}\r\n                        </td>\r\n                        <td *ngIf=\"type === 'infra'\">\r\n                            {{obj?.createdAt |\r\n                             date: 'hh:mm a' | uppercase}}\r\n                        </td>\r\n                        <td *ngIf=\"type === 'infra'\">\r\n                            {{obj?.issueClosedDate?(obj?.issueClosedDate |\r\n                             date: 'hh:mm a' | uppercase):\"--\"}}\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"clientTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.clientName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"this.users.userType ==='tango'\">{{obj.clientId}}\r\n                        </td>\r\n                        <td>\r\n                            <div class=\"table-title cursor-pointer\" (click)=\"storeTickets(obj.clientId,obj.storeId,obj.clientName)\">\r\n                                <span class=\"txt-light-primary\">\r\n                                    {{obj.storeName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td>{{obj.storeId}}\r\n                        </td>\r\n                    \r\n                        <td *ngIf=\"this.users.userType ==='tango'\">\r\n                            <div class=\"table-title cursor-pointer\" >\r\n                                <span >\r\n                                    {{obj.userName}}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='lowcount'\" >Low Count</td>\r\n                        <td *ngIf=\"type ==='dataMismatch' && obj.issueType ==='highcount'\">High Count</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.type ? obj?.type:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.reportedFootfall ? obj?.reportedFootfall:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.mappedCount ? obj?.mappedCount:'--'}}</td>\r\n                        <td class=\"text-capitalize\" *ngIf=\"type ==='dataMismatch'\">{{obj?.successPercentage ? obj?.successPercentage:'--'}}</td>\r\n                        <td *ngIf=\"type==='installation'\">\r\n                            <span *ngIf=\"obj.installationStatus ==='paired' || obj.installationStatus ==='onboarded'\"\r\n                                class=\"badge badge-light-primary mx-4\">{{obj.installationStatus | titlecase}}</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='live'\" class=\"badge badge-light-success mx-4\">Live</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='installationfailed'\"\r\n                                class=\"badge badge-light-warning mx-4\">Installationfailed</span>\r\n                            <span *ngIf=\"obj.installationStatus ==='deployed'\"\r\n                                class=\"badge badge-light-success mx-4 text-capitalize\">deployed</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type==='mat' || type==='dataMismatch'\">\r\n                            <span *ngIf=\"obj.status ==='open'\" class=\"badge badge-light-danger\">Open</span>\r\n                            <span *ngIf=\"obj.status ==='closed'\" class=\"badge badge-light-success\">Closed</span>\r\n                            <span *ngIf=\"obj.status ==='inprogress'\" class=\"badge badge-light-primary\">In\r\n                                Progress</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <div>\r\n                                <span *ngIf=\"obj.primaryIssue !=='-'\">{{obj.primaryIssue ? obj.primaryIssue :'Issue not identified'}}</span>\r\n                                <span *ngIf=\"obj.primaryIssue ==='-'\">Issue not identified</span>\r\n                            </div>\r\n                        </td>\r\n                        <td *ngIf=\"type==='installation' || type==='infra'\">\r\n                            <span *ngIf=\"obj.secondaryIssue\">{{obj.secondaryIssue}}</span>\r\n                        </td>\r\n                        <td *ngIf=\"type==='infra' || type ==='dataMismatch'\">\r\n                            <span class=\"mx-2 cursor-pointer\" *ngIf=\"this.users.userType ==='tango'\" (click)=\"commentModal(obj)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <path\r\n                                        d=\"M17.6431 12.5C17.6431 12.942 17.4675 13.366 17.1549 13.6785C16.8423 13.9911 16.4184 14.1667 15.9764 14.1667H5.9764L2.64307 17.5V4.16667C2.64307 3.72464 2.81866 3.30072 3.13122 2.98816C3.44378 2.67559 3.86771 2.5 4.30973 2.5H15.9764C16.4184 2.5 16.8423 2.67559 17.1549 2.98816C17.4675 3.30072 17.6431 3.72464 17.6431 4.16667V12.5Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg></span>\r\n                                <span class=\"mx-2 cursor-pointer\" (click)=\"tickets(type,obj.clientId,obj.storeId,obj.clientName)\"><svg\r\n                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                    <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                        <path\r\n                                            d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                            <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>\r\n                        </td>\r\n                        <td *ngIf=\"type === 'mat'\">\r\n                            <span class=\"mx-2 cursor-pointer\" (click)=\"routeToMat(obj.storeId,obj.clientId,obj.clientName)\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"20\" viewBox=\"0 0 21 20\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_10640_18061)\">\r\n                                    <path\r\n                                        d=\"M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z\"\r\n                                        stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    <path\r\n                                        d=\"M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z\"\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_10640_18061\">\r\n                                        <rect width=\"20\" height=\"20\" fill=\"white\" transform=\"translate(0.143066)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>                  \r\n                    \r\n                        </td>\r\n                    \r\n                    \r\n                    </tr>\r\n                </tbody>\r\n            </table>\r\n        </div>\r\n        <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n            <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\" (pageChange)=\"onPageChange($event)\"\r\n                (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.nav-item .nav-link:hover{border:none}.text-border{border-radius:16px!important;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-border-priamry{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.border-val{color:var(--Gray-700, #344054)!important;font-family:Inter;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}td{vertical-align:middle;line-height:35px!important}.table-title-primary{color:var(--Primary-700, #009BF3)!important;font-weight:500!important}.table-sub{line-height:30px!important;color:var(--Gray-500, #667085)!important}.txt-light-primary{color:#009bf3!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.img-src{width:25%;height:20%}.rotate{rotate:180deg;transition:1s}.viewbutton{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);box-shadow:0 1px 2px #1018280d;padding:10px 16px;justify-content:center;align-items:center;gap:10px;color:var(--Gray-700, #344054);font-family:Inter;font-size:12px;font-weight:600}.horizontal-scroll{overflow-x:auto;overflow-y:hidden;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2$1.Router }, { type: i2$1.ActivatedRoute }, { type: i2.GlobalStateService }, { type: i1$1.NgbModal }, { type: TicketService }, { type: ExcelService }] });
 
 class ReTriggerComponent {