tango-app-ui-manage-tickets 3.7.0-beta.28 → 3.7.0-beta.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/esm2022/lib/components/audit-mapping-list/audit-mapping-list.component.mjs +498 -0
  2. package/esm2022/lib/components/remove-audit/remove-audit.component.mjs +80 -0
  3. package/esm2022/lib/components/start-audit/start-audit.component.mjs +738 -0
  4. package/esm2022/lib/components/ticket-footfall-new/ticket-footfall-new.component.mjs +200 -53
  5. package/esm2022/lib/components/tickets/tickets.component.mjs +3 -3
  6. package/esm2022/lib/components/viewcategory/viewcategory.component.mjs +89 -0
  7. package/esm2022/lib/services/audit.service.mjs +85 -0
  8. package/esm2022/lib/services/ticket.service.mjs +4 -1
  9. package/esm2022/lib/services/timer.service.mjs +84 -0
  10. package/esm2022/lib/tango-manage-tickets-routing.module.mjs +11 -1
  11. package/esm2022/lib/tango-manage-tickets.module.mjs +23 -3
  12. package/fesm2022/tango-app-ui-manage-tickets.mjs +1759 -56
  13. package/fesm2022/tango-app-ui-manage-tickets.mjs.map +1 -1
  14. package/lib/components/audit-mapping-list/audit-mapping-list.component.d.ts +72 -0
  15. package/lib/components/remove-audit/remove-audit.component.d.ts +16 -0
  16. package/lib/components/start-audit/start-audit.component.d.ts +86 -0
  17. package/lib/components/ticket-footfall-new/ticket-footfall-new.component.d.ts +18 -7
  18. package/lib/components/viewcategory/viewcategory.component.d.ts +16 -0
  19. package/lib/services/audit.service.d.ts +34 -0
  20. package/lib/services/ticket.service.d.ts +1 -0
  21. package/lib/services/timer.service.d.ts +22 -0
  22. package/lib/tango-manage-tickets.module.d.ts +15 -9
  23. package/package.json +1 -1
package/fesm2022/tango-app-ui-manage-tickets.mjs CHANGED
@@ -4,13 +4,14 @@ import * as i6$1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import * as i2 from '@angular/router';
6
6
  import { RouterModule } from '@angular/router';
7
- import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
7
+ import { BehaviorSubject, Subject, takeUntil, map, catchError, throwError, interval } from 'rxjs';
8
8
  import * as i1$1 from 'tango-app-ui-global';
9
9
  import * as i1 from '@angular/common/http';
10
10
  import { HttpParams } from '@angular/common/http';
11
11
  import * as i6 from '@angular/forms';
12
12
  import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
13
13
  import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
14
+ import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
14
15
  import * as i4 from 'tango-app-ui-shared';
15
16
  import { CommonSharedModule } from 'tango-app-ui-shared';
16
17
  import * as FileSaver from 'file-saver';
@@ -21,6 +22,9 @@ import * as am4core from '@amcharts/amcharts4/core';
21
22
  import am4themes_animated from '@amcharts/amcharts4/themes/animated';
22
23
  import * as i8 from 'ngx-daterangepicker-material';
23
24
  import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
25
+ import * as LZString from 'lz-string';
26
+ import * as i7 from 'ngx-spinner';
27
+ import { NgxSpinnerModule } from 'ngx-spinner';
24
28
 
25
29
  class TicketService {
26
30
  http;
@@ -181,6 +185,9 @@ class TicketService {
181
185
  getOpenTicketListApi(data) {
182
186
  return this.http.post(`${this.footfallDirapiUrl}/open-ticket-list`, data);
183
187
  }
188
+ getCreateTicketListApi(data) {
189
+ return this.http.post(`${this.footfallDirapiUrl}/create-ticket`, data);
190
+ }
184
191
  getclusters(data) {
185
192
  return this.http.post(`${this.trafficApiUrl}/headercluster_v2`, data);
186
193
  }
@@ -1210,11 +1217,11 @@ class TicketsComponent {
1210
1217
  }
1211
1218
  }
1212
1219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1$1.GlobalStateService }, { token: i1$2.NgbModal }, { token: TicketService }, { token: ExcelService }], target: i0.ɵɵFactoryTarget.Component });
1213
- 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<!-- added config and total downtime as per the prioduct team requirement -->\r\n <th *ngIf=\"type==='infra'\">Configured Ticket Time\r\n </th> \r\n\r\n <th *ngIf=\"type==='infra'\" >Total Downtime\r\n </th>\r\n<!-- -->\r\n\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==='infra'\">\r\n{{obj.configuredDownTime?obj.configuredDownTime*60:0 || 0 }} {{obj.configuredDownTime > 1? 'mins' : 'min'}} \r\n </td>\r\n <td *ngIf=\"type==='infra'\"> \r\n{{obj.totalDownTime || 0 }} {{obj.totalDownTime > 1? 'mins' : 'min'}} \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]=\"setpageSize()\" (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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
1220
+ 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 Date\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 ==='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<!-- added config and total downtime as per the prioduct team requirement -->\r\n <th *ngIf=\"type==='infra'\">Configured Ticket Time\r\n </th> \r\n\r\n <th *ngIf=\"type==='infra'\" >Total Downtime\r\n </th>\r\n<!-- -->\r\n\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: 'dd MMM, yyyy'):\"--\"}}\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==='infra'\">\r\n{{obj.configuredDownTime?obj.configuredDownTime*60:0 || 0 }} {{obj.configuredDownTime > 1? 'mins' : 'min'}} \r\n </td>\r\n <td *ngIf=\"type==='infra'\"> \r\n{{obj.totalDownTime || 0 }} {{obj.totalDownTime > 1? 'mins' : 'min'}} \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]=\"setpageSize()\" (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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
1214
1221
  }
1215
1222
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketsComponent, decorators: [{
1216
1223
  type: Component,
1217
- 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<!-- added config and total downtime as per the prioduct team requirement -->\r\n <th *ngIf=\"type==='infra'\">Configured Ticket Time\r\n </th> \r\n\r\n <th *ngIf=\"type==='infra'\" >Total Downtime\r\n </th>\r\n<!-- -->\r\n\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==='infra'\">\r\n{{obj.configuredDownTime?obj.configuredDownTime*60:0 || 0 }} {{obj.configuredDownTime > 1? 'mins' : 'min'}} \r\n </td>\r\n <td *ngIf=\"type==='infra'\"> \r\n{{obj.totalDownTime || 0 }} {{obj.totalDownTime > 1? 'mins' : 'min'}} \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]=\"setpageSize()\" (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"] }]
1224
+ 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 Date\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 ==='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<!-- added config and total downtime as per the prioduct team requirement -->\r\n <th *ngIf=\"type==='infra'\">Configured Ticket Time\r\n </th> \r\n\r\n <th *ngIf=\"type==='infra'\" >Total Downtime\r\n </th>\r\n<!-- -->\r\n\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: 'dd MMM, yyyy'):\"--\"}}\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==='infra'\">\r\n{{obj.configuredDownTime?obj.configuredDownTime*60:0 || 0 }} {{obj.configuredDownTime > 1? 'mins' : 'min'}} \r\n </td>\r\n <td *ngIf=\"type==='infra'\"> \r\n{{obj.totalDownTime || 0 }} {{obj.totalDownTime > 1? 'mins' : 'min'}} \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]=\"setpageSize()\" (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"] }]
1218
1225
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1$1.GlobalStateService }, { type: i1$2.NgbModal }, { type: TicketService }, { type: ExcelService }] });
1219
1226
 
1220
1227
  class ReTriggerComponent {
@@ -2992,11 +2999,12 @@ class TicketFootfallNewComponent {
2992
2999
  excelService;
2993
3000
  ts;
2994
3001
  fb;
3002
+ router;
2995
3003
  searchValue = "";
2996
3004
  sortedColumn = "";
2997
3005
  sortDirection = 1;
2998
3006
  destroy$ = new Subject();
2999
- constructor(modalService, gs, service, cd, excelService, ts, fb) {
3007
+ constructor(modalService, gs, service, cd, excelService, ts, fb, router) {
3000
3008
  this.modalService = modalService;
3001
3009
  this.gs = gs;
3002
3010
  this.service = service;
@@ -3004,10 +3012,12 @@ class TicketFootfallNewComponent {
3004
3012
  this.excelService = excelService;
3005
3013
  this.ts = ts;
3006
3014
  this.fb = fb;
3015
+ this.router = router;
3007
3016
  }
3008
3017
  headerFilters;
3009
3018
  footfallList_req;
3010
3019
  ngOnInit() {
3020
+ sessionStorage.clear();
3011
3021
  this.imageUrl = this.service?.footfallCDN;
3012
3022
  this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
3013
3023
  next: (data) => {
@@ -3166,10 +3176,12 @@ class TicketFootfallNewComponent {
3166
3176
  },
3167
3177
  auditId: "",
3168
3178
  storedetails: {
3169
- storeName: this.ticketData?.storeName,
3170
- },
3179
+ storeName: this.ticketData?.storeName
3180
+ }
3171
3181
  };
3172
3182
  sessionStorage.setItem("totalfiles", JSON.stringify(data));
3183
+ this.select = 'ticketMethod';
3184
+ this.router.navigateByUrl('/manage/tickets/audit');
3173
3185
  }
3174
3186
  backToNavigation() {
3175
3187
  this.select = "ticketList";
@@ -3234,7 +3246,7 @@ class TicketFootfallNewComponent {
3234
3246
  toggleStoreSelection(store) {
3235
3247
  if (this.isSelected(store)) {
3236
3248
  // remove
3237
- this.selectedStores = this.selectedStores.filter(s => s !== store);
3249
+ this.selectedStores = this.selectedStores.filter((s) => s !== store);
3238
3250
  }
3239
3251
  else {
3240
3252
  // add (if you want single select, use: this.selectedStores = [store];)
@@ -3442,7 +3454,8 @@ class TicketFootfallNewComponent {
3442
3454
  this.selectedStores.push(storeId);
3443
3455
  }
3444
3456
  this.hasInitialStoreSynced = true;
3445
- this.allSelected = this.selectedStores.length === this.openTicketsList.length;
3457
+ this.allSelected =
3458
+ this.selectedStores.length === this.openTicketsList.length;
3446
3459
  }
3447
3460
  hasRevopsType(type) {
3448
3461
  if (!this.footfallTicketsData || !Array.isArray(this.footfallTicketsData)) {
@@ -3452,6 +3465,7 @@ class TicketFootfallNewComponent {
3452
3465
  }
3453
3466
  overallSelectedIds;
3454
3467
  overallSelect(event) {
3468
+ this.allSelected = event.target.checked;
3455
3469
  const checked = event.target.checked;
3456
3470
  const parents = this.getAllParentItems();
3457
3471
  if (checked) {
@@ -3506,11 +3520,20 @@ class TicketFootfallNewComponent {
3506
3520
  }
3507
3521
  isCheckboxEnable = false;
3508
3522
  closeBtn = false;
3523
+ closeDisabled = false;
3509
3524
  startReview() {
3510
3525
  this.isCheckboxEnable = true; // call this on your "Review" button click
3511
3526
  this.closeBtn = true;
3527
+ this.closeDisabled = true;
3512
3528
  }
3529
+ closePopup;
3513
3530
  stopReview() {
3531
+ const modalRef = this.modalService.open(this.closePopup, {
3532
+ centered: true,
3533
+ size: "md",
3534
+ backdrop: "static",
3535
+ keyboard: false,
3536
+ });
3514
3537
  this.isCheckboxEnable = false;
3515
3538
  this.closeBtn = false;
3516
3539
  }
@@ -3540,6 +3563,7 @@ class TicketFootfallNewComponent {
3540
3563
  .subscribe({
3541
3564
  next: (res) => {
3542
3565
  if (res && res.code === 200) {
3566
+ this.updateCloseButtonFromStore();
3543
3567
  if (res?.data?.result?.length === 0) {
3544
3568
  this.footfallTicketsData = [];
3545
3569
  this.footfallNoData = true;
@@ -3596,57 +3620,86 @@ class TicketFootfallNewComponent {
3596
3620
  };
3597
3621
  // ---- HELPERS ----
3598
3622
  // Get all revisedDetail items of a given type from footfallTicketsData
3623
+ // Get all revisedDetail items of a given type from footfallTicketsData
3599
3624
  getListByType(type) {
3600
3625
  if (!this.footfallTicketsData) {
3601
3626
  return [];
3602
3627
  }
3603
- const allMappings = [];
3604
3628
  const allRevised = [];
3605
- // collect mappingInfo
3629
+ // collect revisedDetail ONLY from mappingInfo with type === 'review'
3606
3630
  this.footfallTicketsData.forEach((ticket) => {
3607
3631
  const mappings = ticket?._source?.mappingInfo || [];
3608
- allMappings.push.apply(allMappings, mappings);
3609
- });
3610
- // collect revisedDetail
3611
- allMappings.forEach((mapping) => {
3612
- const details = mapping?.revisedDetail || [];
3613
- allRevised.push.apply(allRevised, details);
3632
+ mappings
3633
+ .filter((m) => m?.type === 'review') // 🔹 IMPORTANT
3634
+ .forEach((mapping) => {
3635
+ const details = mapping?.revisedDetail || [];
3636
+ allRevised.push(...details);
3637
+ });
3614
3638
  });
3615
- // filter by type
3616
- return allRevised.filter((original) => original?.revopsType === type);
3639
+ // filter by type (junk / employee / houseKeeping)
3640
+ const filtered = allRevised.filter((original) => original?.revopsType === type);
3641
+ // 🔹 DEDUPE by tempId (or id) so we don't count same image twice
3642
+ const uniqueByTempId = Array.from(new Map(filtered.map((item) => [item.tempId, item])).values());
3643
+ return uniqueByTempId;
3617
3644
  }
3618
3645
  updateOverallSelectedIds() {
3619
3646
  const ids = [];
3620
3647
  const parents = this.getAllParentItems();
3621
- // ---- 1) normal types: junk / employee / houseKeeping ----
3648
+ const selectedTypesSet = new Set();
3622
3649
  ["junk", "employee", "houseKeeping"].forEach((type) => {
3623
- const list = this.getListByType(type); // all items of that type
3624
- const selectedTemps = this.selectedByType[type] || []; // selected tempIds
3650
+ const list = this.getListByType(type);
3651
+ const selectedTemps = this.selectedByType[type] || [];
3652
+ if (selectedTemps.length > 0) {
3653
+ selectedTypesSet.add(type);
3654
+ }
3625
3655
  list.forEach((item) => {
3626
3656
  if (selectedTemps.includes(item.tempId) && item.id) {
3627
- ids.push(item.id); // e.g. "11-1716_2025-11-20_4"
3657
+ ids.push(item.id);
3628
3658
  }
3629
3659
  });
3630
3660
  });
3631
- // ---- 2) duplicates: children inside parent.data ----
3632
3661
  parents
3633
3662
  .filter((p) => p.revopsType === "duplicate")
3634
3663
  .forEach((parent) => {
3635
3664
  const parentId = parent.tempId;
3636
3665
  const selectedChildTemps = this.selectedDuplicatesByParent[parentId] || [];
3666
+ if (selectedChildTemps.length > 0) {
3667
+ selectedTypesSet.add("duplicate");
3668
+ }
3637
3669
  (parent.duplicateImage || []).forEach((child) => {
3638
3670
  if (selectedChildTemps.includes(child.tempId)) {
3639
- // if child has its own id, use that. otherwise fallback to parent.id
3640
- ids.push(child.id || parent.id);
3671
+ if (child.id) {
3672
+ ids.push(child.id);
3673
+ }
3674
+ else if (parent.id) {
3675
+ ids.push(parent.id);
3676
+ }
3641
3677
  }
3642
3678
  });
3643
3679
  });
3644
- this.overallSelectedIds = ids;
3680
+ this.overallSelectedIds = Array.from(new Set(ids)); // dedupe
3681
+ this.selectedCategories = Array.from(selectedTypesSet);
3645
3682
  console.log("overallSelectedIds:", this.overallSelectedIds);
3683
+ console.log("selectedCategories:", this.selectedCategories);
3684
+ }
3685
+ selectedCategories = []; // junk, employee, houseKeeping, duplicate
3686
+ get selectedCategoriesLabel() {
3687
+ if (!this.selectedCategories || !this.selectedCategories.length) {
3688
+ return '';
3689
+ }
3690
+ const labelMap = {
3691
+ junk: 'Junk',
3692
+ employee: 'Employee',
3693
+ houseKeeping: 'House Keeping',
3694
+ duplicate: 'Duplicate',
3695
+ };
3696
+ return this.selectedCategories
3697
+ .map((t) => labelMap[t] || t)
3698
+ .join(', ');
3646
3699
  }
3647
3700
  type;
3648
3701
  // "Select all" / "Unselect all" for a type
3649
- popupvalue = '';
3702
+ popupvalue = "";
3650
3703
  // or just: popupvalue: string = '';
3651
3704
  onSelectAll(type, event) {
3652
3705
  const checked = event?.target?.checked;
@@ -3660,19 +3713,25 @@ class TicketFootfallNewComponent {
3660
3713
  }
3661
3714
  // Single checkbox change for one image
3662
3715
  onImageCheckboxChange(type, id) {
3663
- const arr = this.selectedByType[type];
3664
- const index = arr.indexOf(id);
3665
- if (index > -1) {
3666
- arr.splice(index, 1); // remove
3716
+ // ensure array exists
3717
+ const current = this.selectedByType[type] || [];
3718
+ const selected = new Set(current);
3719
+ if (selected.has(id)) {
3720
+ selected.delete(id); // uncheck
3667
3721
  }
3668
3722
  else {
3669
- arr.push(id); // add
3723
+ selected.add(id); // check
3670
3724
  }
3671
- // Update "select all" state
3725
+ // assign new array (better for change detection)
3726
+ this.selectedByType[type] = Array.from(selected);
3727
+ // total items for this type (now using deduped list)
3672
3728
  const total = this.getListByType(type).length;
3673
- this.selectAllByType[type] = total > 0 && arr.length === total;
3729
+ // ✅ auto-check "select all" when all items of that type are selected
3730
+ this.selectAllByType[type] =
3731
+ total > 0 && this.selectedByType[type].length === total;
3732
+ console.log(`type=${type}, total=${total}, selected=${this.selectedByType[type].length}, selectAll=${this.selectAllByType[type]}`);
3674
3733
  this.updateOverallSelectedIds();
3675
- this.popupvalue = type; // 🔴 also update here
3734
+ this.popupvalue = type;
3676
3735
  }
3677
3736
  remarks;
3678
3737
  zoomPopup;
@@ -3682,9 +3741,6 @@ class TicketFootfallNewComponent {
3682
3741
  // store type
3683
3742
  this.popupType = type;
3684
3743
  this.popupIds = this.overallSelectedIds || [];
3685
- // build ids from current selection
3686
- console.log("popupType:", this.popupType);
3687
- console.log("popupIds:", this.popupIds); // ["11-1716_2025-11-12_11AM-12PM_6", ...]
3688
3744
  const modalRef = this.modalService.open(this.zoomPopup, {
3689
3745
  centered: true,
3690
3746
  size: "md",
@@ -3716,6 +3772,7 @@ class TicketFootfallNewComponent {
3716
3772
  this.ts.getSuccessToast("Status updated successfully");
3717
3773
  this.resetSelections();
3718
3774
  this.cancel();
3775
+ this.allSelected = false;
3719
3776
  this.dataStoreView(this.ticketData);
3720
3777
  this.remarks = "";
3721
3778
  }
@@ -3742,18 +3799,18 @@ class TicketFootfallNewComponent {
3742
3799
  junk: [],
3743
3800
  employee: [],
3744
3801
  houseKeeping: [],
3745
- duplicate: []
3802
+ duplicate: [],
3746
3803
  };
3747
3804
  this.selectAllByType = {
3748
3805
  junk: false,
3749
3806
  employee: false,
3750
3807
  houseKeeping: false,
3751
- duplicate: false
3808
+ duplicate: false,
3752
3809
  };
3753
3810
  this.selectedDuplicatesByParent = {};
3754
3811
  this.overallSelectedIds = [];
3755
3812
  this.popupIds = [];
3756
- console.log('RESET selections:', this.selectedByType, this.selectedDuplicatesByParent);
3813
+ console.log("RESET selections:", this.selectedByType, this.selectedDuplicatesByParent);
3757
3814
  }
3758
3815
  cancel() {
3759
3816
  this.modalService.dismissAll();
@@ -3767,7 +3824,7 @@ class TicketFootfallNewComponent {
3767
3824
  this.arrowshow = true;
3768
3825
  }
3769
3826
  getOpenTicketList(data) {
3770
- console.log('getOpenTicketList data:', data);
3827
+ console.log("getOpenTicketList data:", data);
3771
3828
  // support passing either whole store object or just ticketId
3772
3829
  const selectedTicketId = data?.ticketId ?? data;
3773
3830
  const obj = {
@@ -3775,7 +3832,8 @@ class TicketFootfallNewComponent {
3775
3832
  fromDate: this.headerFilters?.date?.startDate,
3776
3833
  toDate: this.headerFilters?.date?.endDate,
3777
3834
  };
3778
- this.service.getOpenTicketListApi(obj)
3835
+ this.service
3836
+ .getOpenTicketListApi(obj)
3779
3837
  .pipe(takeUntil(this.destroy$))
3780
3838
  .subscribe({
3781
3839
  next: (res) => {
@@ -3813,23 +3871,23 @@ class TicketFootfallNewComponent {
3813
3871
  },
3814
3872
  complete: () => {
3815
3873
  this.cd.detectChanges();
3816
- }
3874
+ },
3817
3875
  });
3818
3876
  }
3819
3877
  isApproved(original) {
3820
3878
  const actions = original?.actions || [];
3821
- return actions.some((a) => a.actionType === 'review' && a.action === 'approved');
3879
+ return actions.some((a) => a.actionType === "review" && a.action === "approved");
3822
3880
  }
3823
3881
  isRejected(original) {
3824
3882
  const actions = original?.actions || [];
3825
- return actions.some((a) => a.actionType === 'review' && a.action === 'rejected');
3883
+ return actions.some((a) => a.actionType === "review" && a.action === "rejected");
3826
3884
  }
3827
3885
  resetCheckbox(type, original) {
3828
3886
  if (!original?.actions) {
3829
3887
  return;
3830
3888
  }
3831
3889
  // 1) remove ONLY the review action (approved/rejected)
3832
- original.actions = original.actions.filter((a) => a.actionType !== 'review');
3890
+ original.actions = original.actions.filter((a) => a.actionType !== "review");
3833
3891
  // after this, example becomes:
3834
3892
  // [ { actionType: 'tagging', action: 'submitted' } ]
3835
3893
  // 2) remove from selected list if present
@@ -3842,15 +3900,71 @@ class TicketFootfallNewComponent {
3842
3900
  // 3) uncheck "select all" for that type
3843
3901
  this.selectAllByType[type] = false;
3844
3902
  }
3845
- viewMode = 'tagging';
3903
+ viewMode = "tagging";
3846
3904
  getAction(original, type) {
3847
3905
  return original?.actions?.find((a) => a.actionType === type) || null;
3848
3906
  }
3907
+ updateCloseButtonFromStore() {
3908
+ const mapping = this.getCurrentReviewMapping();
3909
+ console.log('mapping used for close calc:', mapping);
3910
+ this.closeBtn = this.isTicketFullyReviewed(mapping);
3911
+ console.log('closeBtn =>', this.closeBtn);
3912
+ }
3913
+ getCurrentReviewMapping() {
3914
+ if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
3915
+ return null;
3916
+ }
3917
+ // Adjust this according to what uniquely identifies your current mapping
3918
+ const currentId = this.ticketData?.id; // or ticketData?.mappingId or ticketData?.timeRange
3919
+ // Collect all mappingInfo objects from all tickets
3920
+ for (const ticket of this.footfallTicketsData) {
3921
+ const source = ticket?._source;
3922
+ const mappingList = source?.mappingInfo || [];
3923
+ // if you have specific ID to match with current ticket
3924
+ if (currentId) {
3925
+ const found = mappingList.find((m) => m.type === 'review' && m.id === currentId);
3926
+ if (found)
3927
+ return found;
3928
+ }
3929
+ else {
3930
+ // fallback: first review mapping
3931
+ const found = mappingList.find((m) => m.type === 'review');
3932
+ if (found)
3933
+ return found;
3934
+ }
3935
+ }
3936
+ return null;
3937
+ }
3938
+ isTicketFullyReviewed(mapping) {
3939
+ if (!mapping?.revisedDetail)
3940
+ return false;
3941
+ const details = mapping.revisedDetail;
3942
+ // 1️⃣ Non-duplicate types (employee, junk, houseKeeping)
3943
+ const nonDupTypes = ["employee", "junk", "houseKeeping"];
3944
+ const nonDupItems = details.filter(d => nonDupTypes.includes(d.revopsType));
3945
+ const nonDupReviewedCount = nonDupItems.filter(d => {
3946
+ const review = this.getAction(d, "review");
3947
+ return review && (review.action === "approved" || review.action === "rejected");
3948
+ }).length;
3949
+ // 2️⃣ Duplicate children (only from duplicateImage of parents)
3950
+ const parentItems = details.filter(d => d.isParent);
3951
+ const dupChildren = parentItems.reduce((acc, p) => {
3952
+ return acc.concat(p.duplicateImage || []);
3953
+ }, []);
3954
+ const dupReviewedCount = dupChildren.filter(d => {
3955
+ const review = this.getAction(d, "review");
3956
+ return review && (review.action === "approved" || review.action === "rejected");
3957
+ }).length;
3958
+ const totalToReview = nonDupItems.length + dupChildren.length;
3959
+ const totalReviewed = nonDupReviewedCount + dupReviewedCount;
3960
+ // Only enable when everything that should be reviewed is reviewed
3961
+ return totalToReview > 0 && totalReviewed === totalToReview;
3962
+ }
3849
3963
  getInitialsFromEmail(email) {
3850
3964
  if (!email)
3851
- return '';
3965
+ return "";
3852
3966
  // take text before @
3853
- const namePart = email.split('@')[0];
3967
+ const namePart = email.split("@")[0];
3854
3968
  // split by . or space (e.g. "sandeep.pal" -> ["sandeep", "pal"])
3855
3969
  const parts = namePart.split(/[.\s_-]+/).filter(Boolean);
3856
3970
  if (parts.length >= 2) {
@@ -3859,14 +3973,53 @@ class TicketFootfallNewComponent {
3859
3973
  // fallback: first two chars of whole namePart
3860
3974
  return namePart.substring(0, 2).toUpperCase();
3861
3975
  }
3862
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFootfallNewComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$1.GlobalStateService }, { token: TicketService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i4.ToastService }, { token: i6.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
3863
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFootfallNewComponent, selector: "lib-ticket-footfall-new", outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <!-- <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n \r\n </li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul> -->\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.averageAccuracyOverAll !== null ?\r\n getFootfallSummaryData?.averageAccuracyOverAll + '%' : '--' }}</h5>\r\n <span class=\"sub-header\">Average accuracy (Overall)</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n </div>\r\n <div class=\"col my-3 ps-20\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">In-progress</span>\r\n </div>\r\n <div class=\"col my-3 text-end\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.ticketAccuracyAbove !== null ?\r\n getFootfallSummaryData?.ticketAccuracyAbove : '--' }}</h5>\r\n <div class=\"sub-header\">Tickets with Accuracy Above 85%</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.ticketAccuracyBelow !== null ?\r\n getFootfallSummaryData?.ticketAccuracyBelow : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Tickets with Accuracy Below 85%</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <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 class=\"card-label mb-2\">Showing tickets with Accuracy Below 85% <span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013 {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div 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\"\r\n 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 by store\"\r\n autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\r\n <button type=\"button\" (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\"\r\n 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\"\r\n 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\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store (200)<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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th> -->\r\n <th class=\"cursor-pointer\" (click)=\"onSort('createdAt')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'createdAt' && 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 === 'createdAt' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Issue Date\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && 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 === 'dateString' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('type')\">Ticket 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Actual FF\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && 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 === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Store (%)\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && 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 === 'duplicateCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Reviewer (%)\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && 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 === 'employeeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('junkCount')\">Approver (%)\r\n <svg [ngClass]=\"sortedColumn === 'junkCount' && 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 === 'junkCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Tango (%)\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && 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 === 'houseKeepingCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n <th>Comments</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of footfallListData\">\r\n <td>\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(obj)\">\r\n {{ obj?.ticketId }}\r\n </div>\r\n\r\n <div class=\"pt-2\">{{ obj?.storeName }}</div>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.ticketRaised | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.issueDate | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.type ? obj?.type: '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.footfall ?? '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.storeRevisedAccuracy ? obj?.storeRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.reviewerRevisedAccuracy ? obj?.reviewerRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.approverRevisedAccuracy ? obj?.approverRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.tangoRevisedAccuracy ? obj?.tangoRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">\r\n <span *ngIf=\"obj?.status ==='Open'\" class=\"badge badge-light-primary mx-2\">Open\r\n </span>\r\n <span *ngIf=\"obj?.status ==='Closed'\" class=\"badge badge-light-default mx-2\">Closed\r\n </span>\r\n <span *ngIf=\"obj?.status !=='Closed' && obj?.status !=='Open'\"\r\n class=\"badge badge-light-warning mx-2\">\r\n {{obj?.status}}</span>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.comments ? obj?.comments:'--' }}</td>\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]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<!-- -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n <div class=\"row my-2\">\r\n <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n <g filter=\"url(#filter0_dd_778_34282)\">\r\n <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feOffset dy=\"4\" />\r\n <feGaussianBlur stdDeviation=\"3\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feOffset dy=\"12\" />\r\n <feGaussianBlur stdDeviation=\"8\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <div class=\"row my-1\">\r\n <div class=\"col-8\">\r\n\r\n <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n 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 class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n </div>\r\n <div class=\"col-4 p-0 btn\">\r\n <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Filter\r\n </button>\r\n\r\n <!-- Overlay (click outside to close) -->\r\n <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n <!-- Filter card -->\r\n <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n <!-- Status -->\r\n <div class=\"mb-3\">\r\n <label class=\"form-label mb-1\">Status</label>\r\n <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n <option value=\"\">Select</option>\r\n <option>Open</option>\r\n <option>In-Progress</option>\r\n <option>Close</option>\r\n <option>Under tange review</option>\r\n <option>Tange review done</option>\r\n <option>Expired</option>\r\n </select>\r\n </div>\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Reviewer accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- TODO: same block for Approver & Tango -->\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Approver accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Tango accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n (click)=\"resetFilter()\">Reset</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n (click)=\"applyFilter()\">Apply</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n </div>\r\n </div>\r\n\r\n<div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2\"\r\n [checked]=\"allSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select all {{ storeCount }} stores\r\n </label>\r\n </div>\r\n\r\n <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n <div class=\"d-flex align-items-center reviewer-label\">\r\n <span class=\"me-1\">Reviewer(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n<path d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n <!-- or use an <i> from font-awesome/bootstrap icon instead -->\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n<ul class=\"list-unstyled ps-0\">\r\n<li *ngFor=\"let store of openTicketsList\"\r\n class=\"mb-2\"\r\n [ngClass]=\"{ 'store-item-active': isSelected(store), 'store-item': true }\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-start\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2 my-3\"\r\n [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1\">\r\n <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n {{ store?.ticketId }}\r\n </div>\r\n <div class=\"store-name mt-1\">\r\n {{ store?.storeName }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT: pill badge -->\r\n <span\r\n class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n [ngClass]=\"{\r\n 'perc-badge-active': isSelected(store),\r\n 'perc-badge-normal': !isSelected(store)\r\n }\">\r\n {{ store?.revicedPerc }}\r\n </span>\r\n </div>\r\n</li>\r\n\r\n</ul>\r\n\r\n\r\n\r\n <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n\r\n <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n style=\"margin: 64px;border-radius: 8px;\r\n background: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No Stores Found</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 h-100\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 10px; left: 10px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </span>\r\n <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <span *ngIf=\"ticketData.status === 'raised'\">\r\n\r\n <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">Start\r\n Review</button>\r\n <button *ngIf=\"closeBtn\" disabled class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">Close\r\n Ticket</button>\r\n </span>\r\n <span *ngIf=\"ticketData.status !== 'raised'\"><button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n Audit</button></span>\r\n <span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4 \">\r\n <div class=\"row mb-6\">\r\n\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n \r\n <div class=\"col-3 my-2\"><span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-primary': ticketData.status === 'open',\r\n 'badge-secondary': ticketData.status === 'closed',\r\n 'badge-light-warning': ticketData.status === 'pending' || ticketData.status === 'Reviewer-Closed',\r\n 'badge-light-danger': ticketData.status === 'rejected',\r\n 'badge-light-info': ticketData.status === 'raised', \r\n\r\n }\"> {{ ticketData.status ? (ticketData.status | titlecase) : '-' }}\r\n </span></div>\r\n\r\n <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n </div>\r\n\r\n <!-- <div class=\"border-primary-layers my-3 h-100px\">\r\n\r\n <div class=\"label-title w-175px p-4 mb-2\">Tango response</div>\r\n <div class=\"label-desc ps-4\"><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#008EDF\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>Tango audit completed \u2014 found 3% discrepancies difference between Tango and\r\n revisions.</div>\r\n\r\n </div> -->\r\n <div class=\"card-layer\">\r\n <div class=\"d-flex justify-content-between align-items-start w-100\">\r\n\r\n <!-- LEFT SIDE -->\r\n <h3 class=\"card-title align-items-start flex-column mb-0\">\r\n <div class=\"card-label\">Ticket Status</div>\r\n <div class=\"text-sub mb-2\">Logs for each revision of the ticket.</div>\r\n </h3>\r\n\r\n <!-- RIGHT SIDE -->\r\n <div class=\"cursor-pointer\">\r\n <span *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\"\r\n height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91902)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91902\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91893)\">\r\n <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91893\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n \r\n <section *ngIf=\"!arrowshow\">\r\n\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n \r\n <!-- Actual Footfall Header -->\r\n <div class=\"ticket-header\">\r\n <div class=\"footfall-value\">{{source?.footfallCount}} <span class=\"footfall-label ms-3\">Actual Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}</div>\r\n </div>\r\n \r\n <!-- Timeline Line -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n \r\n <!-- When ticket is CLOSED, skip the tagging row -->\r\n <ng-container *ngIf=\"mapping?.status !== 'closed' || mapping?.type !== 'tagging'\">\r\n \r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"timeline\"></div>\r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"user-info ms-4\">\r\n\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\"\r\n \r\n >\r\n {{ getInitialsFromEmail(mapping?.createdByEmail || source?.createdByEmail) }}\r\n </div>\r\n\r\n <div>\r\n <div class=\"user-name\">\r\n <span *ngIf=\"mapping?.type === 'tagging'\">\r\n Ticket created by\r\n </span>\r\n <span *ngIf=\"mapping?.type === 'review'\">\r\n Reviewed by\r\n </span>\r\n\r\n \r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }} \u2022\r\n {{ (mapping?.createdAt || source?.createdAt) | date:'HH:mm:ss \u2013 dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n\r\n <!-- Show revision card only when NOT closed & type is tagging -->\r\n <div class=\"revision-card\"\r\n *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' : mapping?.revicedFootfall }}\r\n </div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n\r\n <div class=\"value-block\">\r\n <div class=\"value accuracy down\">\r\n {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n <span class=\"ms-1\">\r\n <!-- arrow svg -->\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n </div>\r\n\r\n <div class=\"timeline-new my-2\"></div>\r\n\r\n <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n <div class=\"value\">\r\n {{ item?.value ?? '--' }}\r\n </div>\r\n <div class=\"label\">\r\n {{ item?.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\n\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n \r\n <!-- <div class=\"timeline\"></div> -->\r\n <!-- Tango by row -->\r\n <!-- <div class=\"user-info ms-4 d-flex align-items-center mb-2\">\r\n <img src=\"assets/user2.png\" class=\"avatar me-2\" />\r\n <div>\r\n <div class=\"user-name\">Tango by</div>\r\n <div class=\"user-email\">\r\n orlandolenskart.com \u2022 10:53:34 AM \u2013 20 Jan 2025\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"timeline\"></div> -->\r\n \r\n <!-- MAIN CARD -->\r\n <!-- <div class=\"revision-card px-0\">\r\n \r\n <div class=\"values-row d-flex align-items-stretch px-5\">\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">89</div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value accuracy up\">\r\n 89%\r\n <span class=\"ms-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 12.6666L7.9987 3.33329M7.9987 3.33329L12.6654 7.99996M7.9987 3.33329L3.33203 7.99996\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold\">Accuracy</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">10</div>\r\n <div class=\"label\">Duplicates</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">3</div>\r\n <div class=\"label\">Employee/Staff</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">2</div>\r\n <div class=\"label\">Junk</div>\r\n </div>\r\n \r\n <div class=\"value-block\">\r\n <div class=\"value\">1</div>\r\n <div class=\"label\">House Keeping</div>\r\n </div>\r\n \r\n </div>\r\n \r\n <div class=\"card-footer py-1 bg-light-primary\">\r\n \r\n <div class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"showRevisedDetails = !showRevisedDetails\">\r\n <span class=\"text-primary \">\r\n {{ showRevisedDetails ? 'Hide details' : 'Show in details' }}\r\n </span>\r\n <span class=\"chevron ms-3\" [class.rotate-180]=\"showRevisedDetails\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n \r\n \r\n <div class=\"details-body mt-2\" *ngIf=\"showRevisedDetails\">\r\n \r\n \r\n <div class=\"small text-muted\">\r\n \r\n Detailed breakdown of revised footfall goes here\u2026\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 position-relative\">\r\n <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\"\r\n (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n All</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <select class=\"form-select\" aria-placeholder=\"show all\">\r\n <option value=\"all\">Show all</option>\r\n <option value=\"accept\">Accept</option>\r\n <option value=\"reject\">Reject</option>\r\n <option value=\"pending\">Pending</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Reject</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Accept</button>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"bg-white\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n <div *ngIf=\"hasRevopsType('duplicates')\" class=\"layers\">\r\n <!-- Header Section -->\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <h3 class=\"text-lg font-semibold mb-4\">\r\n <span class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n Duplicates\r\n </h3>\r\n </div>\r\n\r\n <!-- Body Section -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n <div class=\"my-4\">\r\n <!-- Original Image -->\r\n <div class=\"duplicate-head px-5 my-3\">Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div class=\"col-md-4 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n <div class=\"row px-5\">\r\n <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label class=\"ms-2\">Select All</label>\r\n </div>\r\n <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n <!-- Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n <input type=\"checkbox\" *ngIf=\"!isApproved(original) && !isRejected(original)\"\r\n style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n <!-- Duplicate Image -->\r\n <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n class=\"w-100 rounded border duplicate-image\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ duplicate.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(duplicate.entryTime) }}</div>\r\n\r\n <!-- Duplicate Reason -->\r\n <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Status Icons -->\r\n \r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div> -->\r\n <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\">\r\n <!-- icon here -->\r\n Employee/Staff\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n (change)=\"onSelectAll('employee', $event)\">\r\n <label>Select All</label>\r\n </div>\r\n\r\n <!-- loop over tickets -->\r\n\r\n\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\"\r\n>\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <div *ngIf=\"original?.revopsType === 'employee'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n<div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n\r\n</div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n \r\n</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> House Keeping\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n (change)=\"onSelectAll('houseKeeping',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{ original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> Junk\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n (change)=\"onSelectAll('junk',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n <!-- One card for all junk images in this mapping -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <!-- Loop through all items in revisedDetail -->\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <!-- Show only junk items as columns -->\r\n <div *ngIf=\"original?.revopsType === 'junk'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\r\n \"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n </div>\r\n \r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length || '--' }} {{ popupvalue | titlecase }}\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"w-100 mb-4\">\r\n <label>Remarks (Optional)</label>\r\n <textarea class=\"form-control\" rows=\"4\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
3976
+ confirmCloseTicket() {
3977
+ let obj = {
3978
+ ticketName: "footfall-directory",
3979
+ storeId: this.footfallTicketsData[0]?._source?.storeId,
3980
+ dateString: this.footfallTicketsData[0]?._source?.dateString,
3981
+ type: "review",
3982
+ mode: "web",
3983
+ };
3984
+ this.service
3985
+ .getCreateTicketListApi(obj)
3986
+ .pipe(takeUntil(this.destroy$))
3987
+ .subscribe({
3988
+ next: (res) => {
3989
+ if (res && res?.code === 200) {
3990
+ this.ts.getSuccessToast("Ticket closed successfully");
3991
+ this.confirmCloseCancel();
3992
+ this.dataStoreView(this.ticketData);
3993
+ }
3994
+ else {
3995
+ this.ts.getErrorToast("Error closing ticket");
3996
+ }
3997
+ this.cd.detectChanges();
3998
+ },
3999
+ error: (err) => {
4000
+ const errorMsg = err?.error?.message ||
4001
+ err?.error?.error ||
4002
+ err?.error ||
4003
+ err?.message ||
4004
+ "Error closing ticket";
4005
+ this.ts.getErrorToast(errorMsg);
4006
+ }
4007
+ });
4008
+ }
4009
+ confirmCloseCancel() {
4010
+ this.modalService.dismissAll();
4011
+ }
4012
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFootfallNewComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$1.GlobalStateService }, { token: TicketService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i4.ToastService }, { token: i6.FormBuilder }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
4013
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFootfallNewComponent, selector: "lib-ticket-footfall-new", outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <!-- <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n \r\n </li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul> -->\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.averageAccuracyOverAll !== null ?\r\n getFootfallSummaryData?.averageAccuracyOverAll + '%' : '--' }}</h5>\r\n <span class=\"sub-header\">Average accuracy (Overall)</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n </div>\r\n <div class=\"col my-3 ps-20\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">In-progress</span>\r\n </div>\r\n <div class=\"col my-3 text-end\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.ticketAccuracyAbove !== null ?\r\n getFootfallSummaryData?.ticketAccuracyAbove : '--' }}</h5>\r\n <div class=\"sub-header\">Tickets with Accuracy Above 85%</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.ticketAccuracyBelow !== null ?\r\n getFootfallSummaryData?.ticketAccuracyBelow : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Tickets with Accuracy Below 85%</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <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 class=\"card-label mb-2\">Showing tickets with Accuracy Below 85% <span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013 {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div 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\"\r\n 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 by store\"\r\n autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\r\n <button type=\"button\" (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\"\r\n 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\"\r\n 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\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store (200)<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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th> -->\r\n <th class=\"cursor-pointer\" (click)=\"onSort('createdAt')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'createdAt' && 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 === 'createdAt' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Issue Date\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && 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 === 'dateString' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('type')\">Ticket 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Actual FF\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && 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 === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Store (%)\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && 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 === 'duplicateCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Reviewer (%)\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && 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 === 'employeeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('junkCount')\">Approver (%)\r\n <svg [ngClass]=\"sortedColumn === 'junkCount' && 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 === 'junkCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Tango (%)\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && 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 === 'houseKeepingCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n <th>Comments</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of footfallListData\">\r\n <td>\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(obj)\">\r\n {{ obj?.ticketId }}\r\n </div>\r\n\r\n <div class=\"pt-2\">{{ obj?.storeName }}</div>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.ticketRaised | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.issueDate | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.type ? obj?.type: '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.footfall ?? '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.storeRevisedAccuracy ? obj?.storeRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.reviewerRevisedAccuracy ? obj?.reviewerRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.approverRevisedAccuracy ? obj?.approverRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.tangoRevisedAccuracy ? obj?.tangoRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">\r\n <span *ngIf=\"obj?.status ==='Open'\" class=\"badge badge-light-primary mx-2\">Open\r\n </span>\r\n <span *ngIf=\"obj?.status ==='Closed'\" class=\"badge badge-light-default mx-2\">Closed\r\n </span>\r\n <span *ngIf=\"obj?.status !=='Closed' && obj?.status !=='Open'\"\r\n class=\"badge badge-light-warning mx-2\">\r\n {{obj?.status}}</span>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.comments ? obj?.comments:'--' }}</td>\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]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<!-- -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n <div class=\"row my-2\">\r\n <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-header border-0 pt-3 ps-1 pe-5\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n <g filter=\"url(#filter0_dd_778_34282)\">\r\n <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feOffset dy=\"4\" />\r\n <feGaussianBlur stdDeviation=\"3\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feOffset dy=\"12\" />\r\n <feGaussianBlur stdDeviation=\"8\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <div class=\"row my-1\">\r\n <div class=\"col-8\">\r\n\r\n <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n 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 class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n </div>\r\n <div class=\"col-4 p-0 btn\">\r\n <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Filter\r\n </button>\r\n\r\n <!-- Overlay (click outside to close) -->\r\n <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n <!-- Filter card -->\r\n <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n <!-- Status -->\r\n <div class=\"mb-3\">\r\n <label class=\"form-label mb-1\">Status</label>\r\n <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n <option value=\"\">Select</option>\r\n <option>Open</option>\r\n <option>In-Progress</option>\r\n <option>Close</option>\r\n <option>Under tange review</option>\r\n <option>Tange review done</option>\r\n <option>Expired</option>\r\n </select>\r\n </div>\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Reviewer accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- TODO: same block for Approver & Tango -->\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Approver accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Tango accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n (click)=\"resetFilter()\">Reset</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n (click)=\"applyFilter()\">Apply</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n </div>\r\n </div>\r\n\r\n<div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2\"\r\n [checked]=\"allSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select all {{ storeCount }} stores\r\n </label>\r\n </div>\r\n\r\n <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n <div class=\"d-flex align-items-center reviewer-label\">\r\n <span class=\"me-1\">Reviewer(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n<path d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n <!-- or use an <i> from font-awesome/bootstrap icon instead -->\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n<ul class=\"list-unstyled ps-0\">\r\n<li *ngFor=\"let store of openTicketsList\"\r\n class=\"mb-2\"\r\n [ngClass]=\"{ 'store-item-active': isSelected(store), 'store-item': true }\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-start\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2 my-3\"\r\n [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1\">\r\n <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n {{ store?.ticketId }}\r\n </div>\r\n <div class=\"store-name mt-1\">\r\n {{ store?.storeName }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT: pill badge -->\r\n <span\r\n class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n [ngClass]=\"{\r\n 'perc-badge-active': isSelected(store),\r\n 'perc-badge-normal': !isSelected(store)\r\n }\">\r\n {{ store?.revicedPerc }}\r\n </span>\r\n </div>\r\n</li>\r\n\r\n</ul>\r\n\r\n\r\n\r\n <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n\r\n <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n style=\"margin: 64px;border-radius: 8px;\r\n background: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No Stores Found</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 h-100\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 10px; left: 10px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </span>\r\n <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <span *ngIf=\"ticketData.status === 'Raised'\">\r\n\r\n <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">Start\r\n Review</button>\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">Close\r\n Ticket</button>\r\n </span>\r\n <span *ngIf=\"ticketData.status !== 'Raised'\"><button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n Audit</button></span>\r\n <span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4 \">\r\n <div class=\"row mb-6\">\r\n\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n \r\n <div class=\"col-3 my-2\"><span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-primary': ticketData.status === 'Open',\r\n 'badge-secondary': ticketData.status === 'Closed',\r\n 'badge-light-warning': ticketData.status === 'Pending' || ticketData.status === 'Reviewer-Closed',\r\n 'badge-light-danger': ticketData.status === 'Rejected',\r\n 'badge-light-info': ticketData.status === 'Raised', \r\n\r\n }\"> {{ ticketData.status ? (ticketData.status | titlecase) : '-' }}\r\n </span></div>\r\n\r\n <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n </div>\r\n\r\n <!-- <div class=\"border-primary-layers my-3 h-100px\">\r\n\r\n <div class=\"label-title w-175px p-4 mb-2\">Tango response</div>\r\n <div class=\"label-desc ps-4\"><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#008EDF\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>Tango audit completed \u2014 found 3% discrepancies difference between Tango and\r\n revisions.</div>\r\n\r\n </div> -->\r\n <div class=\"card-layer\">\r\n <div class=\"d-flex justify-content-between align-items-start w-100\">\r\n\r\n <!-- LEFT SIDE -->\r\n <h3 class=\"card-title align-items-start flex-column mb-0\">\r\n <div class=\"card-label\">Ticket Status</div>\r\n <div class=\"text-sub mb-2\">Logs for each revision of the ticket.</div>\r\n </h3>\r\n\r\n <!-- RIGHT SIDE -->\r\n <div class=\"cursor-pointer\">\r\n <span *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\"\r\n height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91902)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91902\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91893)\">\r\n <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91893\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n \r\n <section *ngIf=\"!arrowshow\">\r\n\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n \r\n <!-- Actual Footfall Header -->\r\n <div class=\"ticket-header\">\r\n <div class=\"footfall-value\">{{source?.footfallCount}} <span class=\"footfall-label ms-3\">Actual Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}</div>\r\n </div>\r\n \r\n <!-- Timeline Line -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n \r\n <!-- When ticket is CLOSED, skip the tagging row -->\r\n <ng-container *ngIf=\"mapping?.status !== 'closed' || mapping?.type !== 'tagging'\">\r\n \r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"timeline\"></div>\r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"user-info ms-4\">\r\n\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\"\r\n \r\n >\r\n {{ getInitialsFromEmail(mapping?.createdByEmail || source?.createdByEmail) }}\r\n </div>\r\n\r\n <div>\r\n <div class=\"user-name\">\r\n <span *ngIf=\"mapping?.type === 'tagging'\">\r\n Ticket created by\r\n </span>\r\n <span *ngIf=\"mapping?.type === 'review'\">\r\n Reviewed by\r\n </span>\r\n\r\n \r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }} \u2022\r\n {{ (mapping?.createdAt || source?.createdAt) | date:'HH:mm:ss \u2013 dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n\r\n <!-- Show revision card only when NOT closed & type is tagging -->\r\n <div class=\"revision-card\"\r\n *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' : mapping?.revicedFootfall }}\r\n </div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n\r\n <div class=\"value-block\">\r\n <div class=\"value accuracy down\">\r\n {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n <span class=\"ms-1\">\r\n <!-- arrow svg -->\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n </div>\r\n\r\n <div class=\"timeline-new my-2\"></div>\r\n\r\n <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n <div class=\"value\">\r\n {{ item?.value ?? '--' }}\r\n </div>\r\n <div class=\"label\">\r\n {{ item?.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\n\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n \r\n <!-- <div class=\"timeline\"></div> -->\r\n <!-- Tango by row -->\r\n <!-- <div class=\"user-info ms-4 d-flex align-items-center mb-2\">\r\n <img src=\"assets/user2.png\" class=\"avatar me-2\" />\r\n <div>\r\n <div class=\"user-name\">Tango by</div>\r\n <div class=\"user-email\">\r\n orlandolenskart.com \u2022 10:53:34 AM \u2013 20 Jan 2025\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"timeline\"></div> -->\r\n \r\n <!-- MAIN CARD -->\r\n <!-- <div class=\"revision-card px-0\">\r\n \r\n <div class=\"values-row d-flex align-items-stretch px-5\">\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">89</div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value accuracy up\">\r\n 89%\r\n <span class=\"ms-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 12.6666L7.9987 3.33329M7.9987 3.33329L12.6654 7.99996M7.9987 3.33329L3.33203 7.99996\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold\">Accuracy</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">10</div>\r\n <div class=\"label\">Duplicates</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">3</div>\r\n <div class=\"label\">Employee/Staff</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">2</div>\r\n <div class=\"label\">Junk</div>\r\n </div>\r\n \r\n <div class=\"value-block\">\r\n <div class=\"value\">1</div>\r\n <div class=\"label\">House Keeping</div>\r\n </div>\r\n \r\n </div>\r\n \r\n <div class=\"card-footer py-1 bg-light-primary\">\r\n \r\n <div class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"showRevisedDetails = !showRevisedDetails\">\r\n <span class=\"text-primary \">\r\n {{ showRevisedDetails ? 'Hide details' : 'Show in details' }}\r\n </span>\r\n <span class=\"chevron ms-3\" [class.rotate-180]=\"showRevisedDetails\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n \r\n \r\n <div class=\"details-body mt-2\" *ngIf=\"showRevisedDetails\">\r\n \r\n \r\n <div class=\"small text-muted\">\r\n \r\n Detailed breakdown of revised footfall goes here\u2026\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 position-relative\">\r\n <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\" [(ngModel)]=\"allSelected\"\r\n (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n All</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <select class=\"form-select\" aria-placeholder=\"show all\">\r\n <option value=\"all\">Show all</option>\r\n <option value=\"accept\">Accept</option>\r\n <option value=\"reject\">Reject</option>\r\n <option value=\"pending\">Pending</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Reject</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Accept</button>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"bg-white\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers\">\r\n <!-- Header Section -->\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <h3 class=\"text-lg font-semibold mb-4\">\r\n <span class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n Duplicates\r\n </h3>\r\n </div>\r\n\r\n <!-- Body Section -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n <div class=\"my-4\">\r\n <!-- Original Image -->\r\n <div class=\"duplicate-head px-5 my-3\">Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div class=\"col-md-4 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n <div class=\"row px-5\">\r\n <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label class=\"ms-2\">Select All</label>\r\n </div>\r\n <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(duplicate),\r\n 'layer-rejected': isRejected(duplicate),\r\n 'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n <!-- Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n <input type=\"checkbox\" *ngIf=\"!isApproved(duplicate) && !isRejected(duplicate)\"\r\n style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(duplicate) || isRejected(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n <!-- Duplicate Image -->\r\n <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n class=\"w-100 rounded border duplicate-image\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ duplicate.tempId }}\r\n \r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(duplicate.entryTime) }}</div>\r\n\r\n <!-- Duplicate Reason -->\r\n <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Status Icons -->\r\n \r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div> -->\r\n <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\">\r\n <!-- icon here -->\r\n Employee/Staff\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n (change)=\"onSelectAll('employee', $event)\">\r\n <label>Select All</label>\r\n </div>\r\n\r\n <!-- loop over tickets -->\r\n\r\n\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\"\r\n>\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <div *ngIf=\"original?.revopsType === 'employee'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n<div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n\r\n</div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n \r\n</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> House Keeping\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n (change)=\"onSelectAll('houseKeeping',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{ original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> Junk\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n (change)=\"onSelectAll('junk',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n <!-- One card for all junk images in this mapping -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <!-- Loop through all items in revisedDetail -->\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <!-- Show only junk items as columns -->\r\n <div *ngIf=\"original?.revopsType === 'junk'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\r\n \"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n </div>\r\n \r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length || '--' }} {{ selectedCategoriesLabel | titlecase }}\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"w-100 mb-4\">\r\n <label class=\"mb-2\">Remarks (Optional)</label>\r\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n <h5 class=\"modal-title mb-2\">\r\n Close ticket\r\n </h5>\r\n <p class=\"mb-3 test-appvalue\">\r\n You are about to close the ticket, Are you sure want to continue?\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n Close ticket\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
3864
4014
  }
3865
4015
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFootfallNewComponent, decorators: [{
3866
4016
  type: Component,
3867
- args: [{ selector: "lib-ticket-footfall-new", template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <!-- <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n \r\n </li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul> -->\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.averageAccuracyOverAll !== null ?\r\n getFootfallSummaryData?.averageAccuracyOverAll + '%' : '--' }}</h5>\r\n <span class=\"sub-header\">Average accuracy (Overall)</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n </div>\r\n <div class=\"col my-3 ps-20\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">In-progress</span>\r\n </div>\r\n <div class=\"col my-3 text-end\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.ticketAccuracyAbove !== null ?\r\n getFootfallSummaryData?.ticketAccuracyAbove : '--' }}</h5>\r\n <div class=\"sub-header\">Tickets with Accuracy Above 85%</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.ticketAccuracyBelow !== null ?\r\n getFootfallSummaryData?.ticketAccuracyBelow : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Tickets with Accuracy Below 85%</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <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 class=\"card-label mb-2\">Showing tickets with Accuracy Below 85% <span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013 {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div 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\"\r\n 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 by store\"\r\n autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\r\n <button type=\"button\" (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\"\r\n 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\"\r\n 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\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store (200)<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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th> -->\r\n <th class=\"cursor-pointer\" (click)=\"onSort('createdAt')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'createdAt' && 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 === 'createdAt' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Issue Date\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && 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 === 'dateString' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('type')\">Ticket 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Actual FF\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && 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 === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Store (%)\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && 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 === 'duplicateCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Reviewer (%)\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && 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 === 'employeeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('junkCount')\">Approver (%)\r\n <svg [ngClass]=\"sortedColumn === 'junkCount' && 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 === 'junkCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Tango (%)\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && 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 === 'houseKeepingCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n <th>Comments</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of footfallListData\">\r\n <td>\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(obj)\">\r\n {{ obj?.ticketId }}\r\n </div>\r\n\r\n <div class=\"pt-2\">{{ obj?.storeName }}</div>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.ticketRaised | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.issueDate | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.type ? obj?.type: '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.footfall ?? '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.storeRevisedAccuracy ? obj?.storeRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.reviewerRevisedAccuracy ? obj?.reviewerRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.approverRevisedAccuracy ? obj?.approverRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.tangoRevisedAccuracy ? obj?.tangoRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">\r\n <span *ngIf=\"obj?.status ==='Open'\" class=\"badge badge-light-primary mx-2\">Open\r\n </span>\r\n <span *ngIf=\"obj?.status ==='Closed'\" class=\"badge badge-light-default mx-2\">Closed\r\n </span>\r\n <span *ngIf=\"obj?.status !=='Closed' && obj?.status !=='Open'\"\r\n class=\"badge badge-light-warning mx-2\">\r\n {{obj?.status}}</span>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.comments ? obj?.comments:'--' }}</td>\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]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<!-- -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n <div class=\"row my-2\">\r\n <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n <g filter=\"url(#filter0_dd_778_34282)\">\r\n <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feOffset dy=\"4\" />\r\n <feGaussianBlur stdDeviation=\"3\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feOffset dy=\"12\" />\r\n <feGaussianBlur stdDeviation=\"8\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <div class=\"row my-1\">\r\n <div class=\"col-8\">\r\n\r\n <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n 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 class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n </div>\r\n <div class=\"col-4 p-0 btn\">\r\n <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Filter\r\n </button>\r\n\r\n <!-- Overlay (click outside to close) -->\r\n <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n <!-- Filter card -->\r\n <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n <!-- Status -->\r\n <div class=\"mb-3\">\r\n <label class=\"form-label mb-1\">Status</label>\r\n <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n <option value=\"\">Select</option>\r\n <option>Open</option>\r\n <option>In-Progress</option>\r\n <option>Close</option>\r\n <option>Under tange review</option>\r\n <option>Tange review done</option>\r\n <option>Expired</option>\r\n </select>\r\n </div>\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Reviewer accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- TODO: same block for Approver & Tango -->\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Approver accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Tango accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n (click)=\"resetFilter()\">Reset</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n (click)=\"applyFilter()\">Apply</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n </div>\r\n </div>\r\n\r\n<div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2\"\r\n [checked]=\"allSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select all {{ storeCount }} stores\r\n </label>\r\n </div>\r\n\r\n <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n <div class=\"d-flex align-items-center reviewer-label\">\r\n <span class=\"me-1\">Reviewer(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n<path d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n <!-- or use an <i> from font-awesome/bootstrap icon instead -->\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n<ul class=\"list-unstyled ps-0\">\r\n<li *ngFor=\"let store of openTicketsList\"\r\n class=\"mb-2\"\r\n [ngClass]=\"{ 'store-item-active': isSelected(store), 'store-item': true }\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-start\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2 my-3\"\r\n [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1\">\r\n <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n {{ store?.ticketId }}\r\n </div>\r\n <div class=\"store-name mt-1\">\r\n {{ store?.storeName }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT: pill badge -->\r\n <span\r\n class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n [ngClass]=\"{\r\n 'perc-badge-active': isSelected(store),\r\n 'perc-badge-normal': !isSelected(store)\r\n }\">\r\n {{ store?.revicedPerc }}\r\n </span>\r\n </div>\r\n</li>\r\n\r\n</ul>\r\n\r\n\r\n\r\n <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n\r\n <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n style=\"margin: 64px;border-radius: 8px;\r\n background: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No Stores Found</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 h-100\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 10px; left: 10px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </span>\r\n <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <span *ngIf=\"ticketData.status === 'raised'\">\r\n\r\n <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">Start\r\n Review</button>\r\n <button *ngIf=\"closeBtn\" disabled class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">Close\r\n Ticket</button>\r\n </span>\r\n <span *ngIf=\"ticketData.status !== 'raised'\"><button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n Audit</button></span>\r\n <span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4 \">\r\n <div class=\"row mb-6\">\r\n\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n \r\n <div class=\"col-3 my-2\"><span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-primary': ticketData.status === 'open',\r\n 'badge-secondary': ticketData.status === 'closed',\r\n 'badge-light-warning': ticketData.status === 'pending' || ticketData.status === 'Reviewer-Closed',\r\n 'badge-light-danger': ticketData.status === 'rejected',\r\n 'badge-light-info': ticketData.status === 'raised', \r\n\r\n }\"> {{ ticketData.status ? (ticketData.status | titlecase) : '-' }}\r\n </span></div>\r\n\r\n <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n </div>\r\n\r\n <!-- <div class=\"border-primary-layers my-3 h-100px\">\r\n\r\n <div class=\"label-title w-175px p-4 mb-2\">Tango response</div>\r\n <div class=\"label-desc ps-4\"><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#008EDF\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>Tango audit completed \u2014 found 3% discrepancies difference between Tango and\r\n revisions.</div>\r\n\r\n </div> -->\r\n <div class=\"card-layer\">\r\n <div class=\"d-flex justify-content-between align-items-start w-100\">\r\n\r\n <!-- LEFT SIDE -->\r\n <h3 class=\"card-title align-items-start flex-column mb-0\">\r\n <div class=\"card-label\">Ticket Status</div>\r\n <div class=\"text-sub mb-2\">Logs for each revision of the ticket.</div>\r\n </h3>\r\n\r\n <!-- RIGHT SIDE -->\r\n <div class=\"cursor-pointer\">\r\n <span *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\"\r\n height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91902)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91902\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91893)\">\r\n <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91893\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n \r\n <section *ngIf=\"!arrowshow\">\r\n\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n \r\n <!-- Actual Footfall Header -->\r\n <div class=\"ticket-header\">\r\n <div class=\"footfall-value\">{{source?.footfallCount}} <span class=\"footfall-label ms-3\">Actual Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}</div>\r\n </div>\r\n \r\n <!-- Timeline Line -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n \r\n <!-- When ticket is CLOSED, skip the tagging row -->\r\n <ng-container *ngIf=\"mapping?.status !== 'closed' || mapping?.type !== 'tagging'\">\r\n \r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"timeline\"></div>\r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"user-info ms-4\">\r\n\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\"\r\n \r\n >\r\n {{ getInitialsFromEmail(mapping?.createdByEmail || source?.createdByEmail) }}\r\n </div>\r\n\r\n <div>\r\n <div class=\"user-name\">\r\n <span *ngIf=\"mapping?.type === 'tagging'\">\r\n Ticket created by\r\n </span>\r\n <span *ngIf=\"mapping?.type === 'review'\">\r\n Reviewed by\r\n </span>\r\n\r\n \r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }} \u2022\r\n {{ (mapping?.createdAt || source?.createdAt) | date:'HH:mm:ss \u2013 dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n\r\n <!-- Show revision card only when NOT closed & type is tagging -->\r\n <div class=\"revision-card\"\r\n *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' : mapping?.revicedFootfall }}\r\n </div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n\r\n <div class=\"value-block\">\r\n <div class=\"value accuracy down\">\r\n {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n <span class=\"ms-1\">\r\n <!-- arrow svg -->\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n </div>\r\n\r\n <div class=\"timeline-new my-2\"></div>\r\n\r\n <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n <div class=\"value\">\r\n {{ item?.value ?? '--' }}\r\n </div>\r\n <div class=\"label\">\r\n {{ item?.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\n\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n \r\n <!-- <div class=\"timeline\"></div> -->\r\n <!-- Tango by row -->\r\n <!-- <div class=\"user-info ms-4 d-flex align-items-center mb-2\">\r\n <img src=\"assets/user2.png\" class=\"avatar me-2\" />\r\n <div>\r\n <div class=\"user-name\">Tango by</div>\r\n <div class=\"user-email\">\r\n orlandolenskart.com \u2022 10:53:34 AM \u2013 20 Jan 2025\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"timeline\"></div> -->\r\n \r\n <!-- MAIN CARD -->\r\n <!-- <div class=\"revision-card px-0\">\r\n \r\n <div class=\"values-row d-flex align-items-stretch px-5\">\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">89</div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value accuracy up\">\r\n 89%\r\n <span class=\"ms-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 12.6666L7.9987 3.33329M7.9987 3.33329L12.6654 7.99996M7.9987 3.33329L3.33203 7.99996\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold\">Accuracy</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">10</div>\r\n <div class=\"label\">Duplicates</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">3</div>\r\n <div class=\"label\">Employee/Staff</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">2</div>\r\n <div class=\"label\">Junk</div>\r\n </div>\r\n \r\n <div class=\"value-block\">\r\n <div class=\"value\">1</div>\r\n <div class=\"label\">House Keeping</div>\r\n </div>\r\n \r\n </div>\r\n \r\n <div class=\"card-footer py-1 bg-light-primary\">\r\n \r\n <div class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"showRevisedDetails = !showRevisedDetails\">\r\n <span class=\"text-primary \">\r\n {{ showRevisedDetails ? 'Hide details' : 'Show in details' }}\r\n </span>\r\n <span class=\"chevron ms-3\" [class.rotate-180]=\"showRevisedDetails\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n \r\n \r\n <div class=\"details-body mt-2\" *ngIf=\"showRevisedDetails\">\r\n \r\n \r\n <div class=\"small text-muted\">\r\n \r\n Detailed breakdown of revised footfall goes here\u2026\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 position-relative\">\r\n <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\"\r\n (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n All</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <select class=\"form-select\" aria-placeholder=\"show all\">\r\n <option value=\"all\">Show all</option>\r\n <option value=\"accept\">Accept</option>\r\n <option value=\"reject\">Reject</option>\r\n <option value=\"pending\">Pending</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Reject</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Accept</button>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"bg-white\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n <div *ngIf=\"hasRevopsType('duplicates')\" class=\"layers\">\r\n <!-- Header Section -->\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <h3 class=\"text-lg font-semibold mb-4\">\r\n <span class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n Duplicates\r\n </h3>\r\n </div>\r\n\r\n <!-- Body Section -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n <div class=\"my-4\">\r\n <!-- Original Image -->\r\n <div class=\"duplicate-head px-5 my-3\">Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div class=\"col-md-4 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n <div class=\"row px-5\">\r\n <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label class=\"ms-2\">Select All</label>\r\n </div>\r\n <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n <!-- Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n <input type=\"checkbox\" *ngIf=\"!isApproved(original) && !isRejected(original)\"\r\n style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n <!-- Duplicate Image -->\r\n <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n class=\"w-100 rounded border duplicate-image\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ duplicate.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(duplicate.entryTime) }}</div>\r\n\r\n <!-- Duplicate Reason -->\r\n <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Status Icons -->\r\n \r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div> -->\r\n <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\">\r\n <!-- icon here -->\r\n Employee/Staff\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n (change)=\"onSelectAll('employee', $event)\">\r\n <label>Select All</label>\r\n </div>\r\n\r\n <!-- loop over tickets -->\r\n\r\n\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\"\r\n>\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <div *ngIf=\"original?.revopsType === 'employee'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n<div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n\r\n</div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n \r\n</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> House Keeping\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n (change)=\"onSelectAll('houseKeeping',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{ original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> Junk\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n (change)=\"onSelectAll('junk',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n <!-- One card for all junk images in this mapping -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <!-- Loop through all items in revisedDetail -->\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <!-- Show only junk items as columns -->\r\n <div *ngIf=\"original?.revopsType === 'junk'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\r\n \"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n </div>\r\n \r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length || '--' }} {{ popupvalue | titlecase }}\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"w-100 mb-4\">\r\n <label>Remarks (Optional)</label>\r\n <textarea class=\"form-control\" rows=\"4\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}\n"] }]
3868
- }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$1.GlobalStateService }, { type: TicketService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i4.ToastService }, { type: i6.FormBuilder }], propDecorators: { filterChange: [{
4017
+ args: [{ selector: "lib-ticket-footfall-new", template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <!-- <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n \r\n </li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul> -->\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-9 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n <span class=\"sub-header\">Total tickets</span>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.averageAccuracyOverAll !== null ?\r\n getFootfallSummaryData?.averageAccuracyOverAll + '%' : '--' }}</h5>\r\n <span class=\"sub-header\">Average accuracy (Overall)</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open</span>\r\n </div>\r\n <div class=\"col my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n </div>\r\n <div class=\"col my-3 ps-20\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">In-progress</span>\r\n </div>\r\n <div class=\"col my-3 text-end\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.closedTickets !== null ?\r\n getFootfallSummaryData?.closedTickets : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Closed</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-3 mb-3\">\r\n <div class=\"card\">\r\n <div class=\"card-header ellipse1 py-1 px-5\">\r\n <div class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.ticketAccuracyAbove !== null ?\r\n getFootfallSummaryData?.ticketAccuracyAbove : '--' }}</h5>\r\n <div class=\"sub-header\">Tickets with Accuracy Above 85%</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body py-2 px-5\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.ticketAccuracyBelow !== null ?\r\n getFootfallSummaryData?.ticketAccuracyBelow : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Tickets with Accuracy Below 85%</span>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <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 class=\"card-label mb-2\">Showing tickets with Accuracy Below 85% <span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013 {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div 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\"\r\n 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 by store\"\r\n autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\r\n <button type=\"button\" (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\"\r\n 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\"\r\n 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\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"table-responsive\">\r\n <table class=\"table bottom-border text-nowrap \">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('storeName')\">Store (200)<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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th> -->\r\n <th class=\"cursor-pointer\" (click)=\"onSort('createdAt')\">Ticket raised on\r\n <svg [ngClass]=\"sortedColumn === 'createdAt' && 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 === 'createdAt' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('dateString')\">Issue Date\r\n <svg [ngClass]=\"sortedColumn === 'dateString' && 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 === 'dateString' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('type')\">Ticket 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('footfallCount')\">Actual FF\r\n <svg [ngClass]=\"sortedColumn === 'footfallCount' && 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 === 'footfallCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('duplicateCount')\">Store (%)\r\n <svg [ngClass]=\"sortedColumn === 'duplicateCount' && 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 === 'duplicateCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('employeeCount')\">Reviewer (%)\r\n <svg [ngClass]=\"sortedColumn === 'employeeCount' && 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 === 'employeeCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('junkCount')\">Approver (%)\r\n <svg [ngClass]=\"sortedColumn === 'junkCount' && 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 === 'junkCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"onSort('houseKeepingCount')\">Tango (%)\r\n <svg [ngClass]=\"sortedColumn === 'houseKeepingCount' && 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 === 'houseKeepingCount' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n <th 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'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <!-- <th >Actions</th> -->\r\n <th>Comments</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let obj of footfallListData\">\r\n <td>\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(obj)\">\r\n {{ obj?.ticketId }}\r\n </div>\r\n\r\n <div class=\"pt-2\">{{ obj?.storeName }}</div>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.ticketRaised | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.issueDate | date:'dd MMM, yyyy'}}</td>\r\n <td class=\"pt-7\">{{obj?.type ? obj?.type: '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.footfall ?? '-'}}</td>\r\n <td class=\"pt-7\">{{obj?.storeRevisedAccuracy ? obj?.storeRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.reviewerRevisedAccuracy ? obj?.reviewerRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.approverRevisedAccuracy ? obj?.approverRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">{{obj?.tangoRevisedAccuracy ? obj?.tangoRevisedAccuracy:'-'}}</td>\r\n <td class=\"pt-7\">\r\n <span *ngIf=\"obj?.status ==='Open'\" class=\"badge badge-light-primary mx-2\">Open\r\n </span>\r\n <span *ngIf=\"obj?.status ==='Closed'\" class=\"badge badge-light-default mx-2\">Closed\r\n </span>\r\n <span *ngIf=\"obj?.status !=='Closed' && obj?.status !=='Open'\"\r\n class=\"badge badge-light-warning mx-2\">\r\n {{obj?.status}}</span>\r\n </td>\r\n <td class=\"pt-7\">{{obj?.comments ? obj?.comments:'--' }}</td>\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]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<!-- -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n <div class=\"row my-2\">\r\n <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-header border-0 pt-3 ps-1 pe-5\">\r\n <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_887_4505)\">\r\n <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_887_4505\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 15px; right: -25px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n <g filter=\"url(#filter0_dd_778_34282)\">\r\n <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feOffset dy=\"4\" />\r\n <feGaussianBlur stdDeviation=\"3\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_778_34282\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feOffset dy=\"12\" />\r\n <feGaussianBlur stdDeviation=\"8\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n result=\"effect2_dropShadow_778_34282\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"p-4 w-100 overflow-auto\">\r\n <div class=\"row my-1\">\r\n <div class=\"col-8\">\r\n\r\n <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n 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 class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n </div>\r\n <div class=\"col-4 p-0 btn\">\r\n <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n Filter\r\n </button>\r\n\r\n <!-- Overlay (click outside to close) -->\r\n <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n <form [formGroup]=\"filterForm\">\r\n <!-- Filter card -->\r\n <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n (click)=\"$event.stopPropagation()\">\r\n <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n <!-- Status -->\r\n <div class=\"mb-3\">\r\n <label class=\"form-label mb-1\">Status</label>\r\n <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n <option value=\"\">Select</option>\r\n <option>Open</option>\r\n <option>In-Progress</option>\r\n <option>Close</option>\r\n <option>Under tange review</option>\r\n <option>Tange review done</option>\r\n <option>Expired</option>\r\n </select>\r\n </div>\r\n\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Reviewer accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- TODO: same block for Approver & Tango -->\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Approver accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n <!-- Reviewer accuracy -->\r\n <div class=\"row mb-3\">\r\n <div class=\"col-9\">\r\n <!-- label in same row -->\r\n <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n Tango accuracy (%) by condition\r\n </label>\r\n\r\n <!-- condition dropdown -->\r\n <select class=\"form-select form-select-sm reviewer-select\"\r\n formControlName=\"reviewerCondition\">\r\n <option value=\"\">Select</option>\r\n <option>>= Greater than or equal to</option>\r\n <option>\r\n < Less than</option>\r\n <option>> Greater than</option>\r\n <option>\r\n <= Lesser than or equal to</option>\r\n <option>Between</option>\r\n </select>\r\n </div>\r\n <!-- single value -->\r\n <div class=\"col-3\">\r\n <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n <label class=\"small ms-1\">% </label>\r\n <input type=\"number\"\r\n class=\"form-control form-control-sm reviewer-input text-end\"\r\n formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n <!-- </ng-container> -->\r\n\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n (click)=\"resetFilter()\">Reset</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n (click)=\"applyFilter()\">Apply</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n </div>\r\n </div>\r\n\r\n<div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-center\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2\"\r\n [checked]=\"allSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select all {{ storeCount }} stores\r\n </label>\r\n </div>\r\n\r\n <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n <div class=\"d-flex align-items-center reviewer-label\">\r\n <span class=\"me-1\">Reviewer(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n<path d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\" stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg></span>\r\n <!-- or use an <i> from font-awesome/bootstrap icon instead -->\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n\r\n<ul class=\"list-unstyled ps-0\">\r\n<li *ngFor=\"let store of openTicketsList\"\r\n class=\"mb-2\"\r\n [ngClass]=\"{ 'store-item-active': isSelected(store), 'store-item': true }\">\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <!-- LEFT: checkbox + text -->\r\n <div class=\"d-flex align-items-start\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"me-2 my-3\"\r\n [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1\">\r\n <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n {{ store?.ticketId }}\r\n </div>\r\n <div class=\"store-name mt-1\">\r\n {{ store?.storeName }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- RIGHT: pill badge -->\r\n <span\r\n class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n [ngClass]=\"{\r\n 'perc-badge-active': isSelected(store),\r\n 'perc-badge-normal': !isSelected(store)\r\n }\">\r\n {{ store?.revicedPerc }}\r\n </span>\r\n </div>\r\n</li>\r\n\r\n</ul>\r\n\r\n\r\n\r\n <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n\r\n <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n style=\"margin: 64px;border-radius: 8px;\r\n background: var(--Gray-50, #F9FAFB);\">\r\n <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n viewBox=\"0 0 94 94\" fill=\"none\">\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n stroke-width=\"13.3333\" />\r\n <g clip-path=\"url(#clip0_730_75095)\">\r\n <path\r\n d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_75095\">\r\n <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <div class=\"nodata-title my-3\">No Stores Found</div>\r\n <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 h-100\">\r\n <div class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n style=\"position: absolute; top: 10px; left: 10px;\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> </span>\r\n <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar\">\r\n <span *ngIf=\"ticketData.status === 'Raised'\">\r\n\r\n <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">Start\r\n Review</button>\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">Close\r\n Ticket</button>\r\n </span>\r\n <span *ngIf=\"ticketData.status !== 'Raised'\"><button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n Audit</button></span>\r\n <span>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\n d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-4 \">\r\n <div class=\"row mb-6\">\r\n\r\n <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n <div class=\"col-2 card-title-label my-2\">Status</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n \r\n <div class=\"col-3 my-2\"><span class=\"badge\" [ngClass]=\"{\r\n 'badge-light-primary': ticketData.status === 'Open',\r\n 'badge-secondary': ticketData.status === 'Closed',\r\n 'badge-light-warning': ticketData.status === 'Pending' || ticketData.status === 'Reviewer-Closed',\r\n 'badge-light-danger': ticketData.status === 'Rejected',\r\n 'badge-light-info': ticketData.status === 'Raised', \r\n\r\n }\"> {{ ticketData.status ? (ticketData.status | titlecase) : '-' }}\r\n </span></div>\r\n\r\n <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div class=\"col-1 font-bold my-2\">:</div>\r\n <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n </div>\r\n\r\n <!-- <div class=\"border-primary-layers my-3 h-100px\">\r\n\r\n <div class=\"label-title w-175px p-4 mb-2\">Tango response</div>\r\n <div class=\"label-desc ps-4\"><span class=\"me-3\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\"\r\n stroke=\"#008EDF\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>Tango audit completed \u2014 found 3% discrepancies difference between Tango and\r\n revisions.</div>\r\n\r\n </div> -->\r\n <div class=\"card-layer\">\r\n <div class=\"d-flex justify-content-between align-items-start w-100\">\r\n\r\n <!-- LEFT SIDE -->\r\n <h3 class=\"card-title align-items-start flex-column mb-0\">\r\n <div class=\"card-label\">Ticket Status</div>\r\n <div class=\"text-sub mb-2\">Logs for each revision of the ticket.</div>\r\n </h3>\r\n\r\n <!-- RIGHT SIDE -->\r\n <div class=\"cursor-pointer\">\r\n <span *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\"\r\n height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91902)\">\r\n <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91902\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg></span>\r\n <span *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n fill=\"none\">\r\n <g filter=\"url(#filter0_d_486_91893)\">\r\n <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_486_91893\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n </div>\r\n\r\n \r\n <section *ngIf=\"!arrowshow\">\r\n\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n \r\n <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n \r\n <!-- Actual Footfall Header -->\r\n <div class=\"ticket-header\">\r\n <div class=\"footfall-value\">{{source?.footfallCount}} <span class=\"footfall-label ms-3\">Actual Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}</div>\r\n </div>\r\n \r\n <!-- Timeline Line -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n \r\n <!-- When ticket is CLOSED, skip the tagging row -->\r\n <ng-container *ngIf=\"mapping?.status !== 'closed' || mapping?.type !== 'tagging'\">\r\n \r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"timeline\"></div>\r\n <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\" class=\"user-info ms-4\">\r\n\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\"\r\n \r\n >\r\n {{ getInitialsFromEmail(mapping?.createdByEmail || source?.createdByEmail) }}\r\n </div>\r\n\r\n <div>\r\n <div class=\"user-name\">\r\n <span *ngIf=\"mapping?.type === 'tagging'\">\r\n Ticket created by\r\n </span>\r\n <span *ngIf=\"mapping?.type === 'review'\">\r\n Reviewed by\r\n </span>\r\n\r\n \r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }} \u2022\r\n {{ (mapping?.createdAt || source?.createdAt) | date:'HH:mm:ss \u2013 dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n\r\n <!-- Show revision card only when NOT closed & type is tagging -->\r\n <div class=\"revision-card\"\r\n *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' : mapping?.revicedFootfall }}\r\n </div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n\r\n <div class=\"value-block\">\r\n <div class=\"value accuracy down\">\r\n {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n <span class=\"ms-1\">\r\n <!-- arrow svg -->\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n </div>\r\n\r\n <div class=\"timeline-new my-2\"></div>\r\n\r\n <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n <div class=\"value\">\r\n {{ item?.value ?? '--' }}\r\n </div>\r\n <div class=\"label\">\r\n {{ item?.name }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n</ng-container>\r\n\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n \r\n <!-- <div class=\"timeline\"></div> -->\r\n <!-- Tango by row -->\r\n <!-- <div class=\"user-info ms-4 d-flex align-items-center mb-2\">\r\n <img src=\"assets/user2.png\" class=\"avatar me-2\" />\r\n <div>\r\n <div class=\"user-name\">Tango by</div>\r\n <div class=\"user-email\">\r\n orlandolenskart.com \u2022 10:53:34 AM \u2013 20 Jan 2025\r\n </div>\r\n </div>\r\n </div>\r\n \r\n <div class=\"timeline\"></div> -->\r\n \r\n <!-- MAIN CARD -->\r\n <!-- <div class=\"revision-card px-0\">\r\n \r\n <div class=\"values-row d-flex align-items-stretch px-5\">\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">89</div>\r\n <div class=\"label fw-bold\">Revised Footfall</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value accuracy up\">\r\n 89%\r\n <span class=\"ms-1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M7.9987 12.6666L7.9987 3.33329M7.9987 3.33329L12.6654 7.99996M7.9987 3.33329L3.33203 7.99996\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"label fw-bold\">Accuracy</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">10</div>\r\n <div class=\"label\">Duplicates</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">3</div>\r\n <div class=\"label\">Employee/Staff</div>\r\n </div>\r\n \r\n <div class=\"value-block me-4\">\r\n <div class=\"value\">2</div>\r\n <div class=\"label\">Junk</div>\r\n </div>\r\n \r\n <div class=\"value-block\">\r\n <div class=\"value\">1</div>\r\n <div class=\"label\">House Keeping</div>\r\n </div>\r\n \r\n </div>\r\n \r\n <div class=\"card-footer py-1 bg-light-primary\">\r\n \r\n <div class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"showRevisedDetails = !showRevisedDetails\">\r\n <span class=\"text-primary \">\r\n {{ showRevisedDetails ? 'Hide details' : 'Show in details' }}\r\n </span>\r\n <span class=\"chevron ms-3\" [class.rotate-180]=\"showRevisedDetails\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span>\r\n </div>\r\n \r\n \r\n <div class=\"details-body mt-2\" *ngIf=\"showRevisedDetails\">\r\n \r\n \r\n <div class=\"small text-muted\">\r\n \r\n Detailed breakdown of revised footfall goes here\u2026\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 position-relative\">\r\n <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\" [(ngModel)]=\"allSelected\"\r\n (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n All</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <select class=\"form-select\" aria-placeholder=\"show all\">\r\n <option value=\"all\">Show all</option>\r\n <option value=\"accept\">Accept</option>\r\n <option value=\"reject\">Reject</option>\r\n <option value=\"pending\">Pending</option>\r\n </select>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Reject</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Accept</button>\r\n </div>\r\n <!-- <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n (click)=\"popupOpen('approved')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"bg-white\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers\">\r\n <!-- Header Section -->\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <h3 class=\"text-lg font-semibold mb-4\">\r\n <span class=\"me-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_730_76157)\">\r\n <path\r\n d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_730_76157\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n Duplicates\r\n </h3>\r\n </div>\r\n\r\n <!-- Body Section -->\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n <div class=\"my-4\">\r\n <!-- Original Image -->\r\n <div class=\"duplicate-head px-5 my-3\">Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div class=\"col-md-4 relative\">\r\n <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n <div class=\"row px-5\">\r\n <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label class=\"ms-2\">Select All</label>\r\n </div>\r\n <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(duplicate),\r\n 'layer-rejected': isRejected(duplicate),\r\n 'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n <!-- Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n <input type=\"checkbox\" *ngIf=\"!isApproved(duplicate) && !isRejected(duplicate)\"\r\n style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(duplicate) || isRejected(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n <!-- Duplicate Image -->\r\n <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n class=\"w-100 rounded border duplicate-image\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ duplicate.tempId }}\r\n \r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(duplicate.entryTime) }}</div>\r\n\r\n <!-- Duplicate Reason -->\r\n <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- Status Icons -->\r\n \r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Body -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \r\n <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n </div> -->\r\n <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\">\r\n <!-- icon here -->\r\n Employee/Staff\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n (change)=\"onSelectAll('employee', $event)\">\r\n <label>Select All</label>\r\n </div>\r\n\r\n <!-- loop over tickets -->\r\n\r\n\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\"\r\n>\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <div *ngIf=\"original?.revopsType === 'employee'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n<div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n\r\n</div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n \r\n</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> House Keeping\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n (change)=\"onSelectAll('houseKeeping',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID: {{ original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime) }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n fill=\"#475467\" />\r\n </svg></span> Junk\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n (change)=\"onSelectAll('junk',$event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n <!-- One card for all junk images in this mapping -->\r\n <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <!-- Loop through all items in revisedDetail -->\r\n <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n <!-- Show only junk items as columns -->\r\n <div *ngIf=\"original?.revopsType === 'junk'\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n\r\n <div\r\n class=\"pb-3 h-100 rounded-3 position-relative\"\r\n [ngClass]=\"{\r\n 'layer-approved': isApproved(original),\r\n 'layer-rejected': isRejected(original),\r\n 'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n \r\n\r\n <!-- Top-right Checkbox -->\r\n <div *ngIf=\"isCheckboxEnable\">\r\n\r\n <input *ngIf=\"!isApproved(original) && !isRejected(original)\" type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n <span \r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isApproved(original) || isRejected(original)\"\r\n (click)=\"resetCheckbox('employee', original)\" >\r\n\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n<g filter=\"url(#filter0_d_2023_13718)\">\r\n<rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\" fill=\"white\"/>\r\n<rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\"/>\r\n<path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\" stroke-width=\"0.927778\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</g>\r\n<defs>\r\n<filter id=\"filter0_d_2023_13718\" x=\"0.00021708\" y=\"0.00010854\" width=\"18.2222\" height=\"18.2222\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\r\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\r\n<feOffset dy=\"0.555556\"/>\r\n<feGaussianBlur stdDeviation=\"0.555556\"/>\r\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\"/>\r\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_2023_13718\"/>\r\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_2023_13718\" result=\"shape\"/>\r\n</filter>\r\n</defs>\r\n</svg>\r\n</span>\r\n </div>\r\n\r\n <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ original.tempId }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n fill=\"#12B76A\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'rejected'\r\n \"\r\n class=\"ms-2\"><svg style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_1428_59484)\">\r\n <path\r\n d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n fill=\"#FEE4E2\" />\r\n <path\r\n d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1428_59484\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"\r\n transform=\"translate(0.599609 0.5)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n\r\n <div class=\"desc-value ms-2\">\r\n Entry Time: {{ getFormattedEntryTime(original?.entryTime) }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <div class=\"card-footer py-5\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Accordion Content -->\r\n <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n <!-- avatar -->\r\n <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">{{ c.email }}</div>\r\n <div class=\"text-muted small\">\r\n {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- optional main line -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n {{ c.mainText }}\r\n </p>\r\n\r\n <!-- Marked as \u201C\u2026\u201D line -->\r\n <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n Marked as\r\n <span [ngClass]=\"'text-' + c.statusType\">\r\n \u201C{{ c.statusLabel }}\u201D\r\n </span>\r\n </p>\r\n\r\n <!-- note -->\r\n <p class=\"mb-2\" *ngIf=\"c.note\">\r\n {{ c.note }}\r\n </p>\r\n\r\n <!-- image cards -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n <div class=\"tango-meta\">\r\n <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n <span *ngIf=\"img.status === 'approve'\"\r\n class=\"status-dot status-approve\"></span>\r\n <span *ngIf=\"img.status === 'reject'\"\r\n class=\"status-dot status-reject\"></span>\r\n </div>\r\n <div class=\"small text-muted\">Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- +N more card -->\r\n <div *ngIf=\"c.moreCount > 0\"\r\n class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n +{{ c.moreCount }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n role=\"group\">\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n </div>\r\n \r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n <!-- Heading -->\r\n <h5 class=\"modal-title mb-2\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length || '--' }} {{ selectedCategoriesLabel | titlecase }}\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"w-100 mb-4\">\r\n <label class=\"mb-2\">Remarks (Optional)</label>\r\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n <h5 class=\"modal-title mb-2\">\r\n Close ticket\r\n </h5>\r\n <p class=\"mb-3 test-appvalue\">\r\n You are about to close the ticket, Are you sure want to continue?\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n Close ticket\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;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:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}\n"] }]
4018
+ }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$1.GlobalStateService }, { type: TicketService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i4.ToastService }, { type: i6.FormBuilder }, { type: i2.Router }], propDecorators: { filterChange: [{
3869
4019
  type: Output
4020
+ }], closePopup: [{
4021
+ type: ViewChild,
4022
+ args: ["closePopup"]
3870
4023
  }], zoomPopup: [{
3871
4024
  type: ViewChild,
3872
4025
  args: ["zoomPopup"]
@@ -4990,6 +5143,1534 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
4990
5143
  args: ["zoomPopup"]
4991
5144
  }] } });
4992
5145
 
5146
+ class RemoveAuditComponent {
5147
+ modalService;
5148
+ activeModal;
5149
+ imagelist = [];
5150
+ maindata;
5151
+ data;
5152
+ constructor(modalService, activeModal) {
5153
+ this.modalService = modalService;
5154
+ this.activeModal = activeModal;
5155
+ }
5156
+ ngOnInit() {
5157
+ if (this.data) {
5158
+ this.maindata = this.data;
5159
+ this.imagelist = this.data.mappedid;
5160
+ }
5161
+ }
5162
+ removeimage(data) {
5163
+ this.imagelist.splice(this.imagelist.findIndex(({ img_name }) => img_name == data.img_name), 1);
5164
+ this.maindata.mappedid = this.imagelist;
5165
+ this.maindata.count = this.maindata.count - 1;
5166
+ var framedobj = {};
5167
+ framedobj.img_name = data.img_name;
5168
+ framedobj.img_id = data.img_id;
5169
+ framedobj.img_path = data.img_path;
5170
+ framedobj.mappedid = [{
5171
+ img_name: data.img_name,
5172
+ img_id: data.img_id,
5173
+ img_path: data.img_path
5174
+ }];
5175
+ framedobj.count = 1;
5176
+ framedobj.selected = false;
5177
+ framedobj.demographic = "";
5178
+ framedobj.dropped = false;
5179
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5180
+ const decompressedData = LZString.decompress(stringifydata);
5181
+ var customer = JSON.parse(decompressedData || '{}');
5182
+ var foundIndex = customer.findIndex((x) => x.img_id == this.maindata.img_id);
5183
+ if (foundIndex == -1) {
5184
+ var retag = JSON.parse(sessionStorage.getItem('retag') || '{}');
5185
+ var newindex = retag.findIndex((x) => x.img_id == this.maindata.img_id);
5186
+ retag[newindex] = this.maindata;
5187
+ retag.push(framedobj);
5188
+ sessionStorage.setItem('retag', JSON.stringify(retag));
5189
+ }
5190
+ else {
5191
+ customer[foundIndex] = this.maindata;
5192
+ customer.push(framedobj);
5193
+ const jsonString = JSON.stringify(customer);
5194
+ const compressedData = LZString.compress(jsonString);
5195
+ sessionStorage.setItem('audit', compressedData);
5196
+ }
5197
+ console.log(this.maindata);
5198
+ if ('duplicate' in sessionStorage) {
5199
+ let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
5200
+ let filterData = filedata.filter((x) => x.img_id == this.maindata.img_id);
5201
+ console.log(filterData);
5202
+ sessionStorage.setItem('duplicate', JSON.stringify(filterData));
5203
+ }
5204
+ if (this.imagelist.length == 1) {
5205
+ this.activeModal.close({ reload: true });
5206
+ }
5207
+ }
5208
+ closepopup() {
5209
+ this.activeModal.close({ reload: true });
5210
+ }
5211
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RemoveAuditComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
5212
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RemoveAuditComponent, selector: "lib-remove-audit", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"modal-body mt-5\">\r\n <div class=\" d-flex\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"fs-2 text-dark fw-bolder my-3 mx-7\"> <span class=\"card-label fw-bold text-dark\">\r\n {{maindata?.detectionType ? maindata?.detectionType : 'Customer' }} Files -\r\n <span>{{maindata?.count}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary me-5\" (click)=\"closepopup()\" data-bs-dismiss=\"modal\">\r\n <span class=\"svg-icon svg-icon-1\">\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=\"6\" y=\"17.3137\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(-45 6 17.3137)\"\r\n fill=\"black\"></rect>\r\n <rect x=\"7.41422\" y=\"6\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(45 7.41422 6)\" fill=\"black\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row mx-3\">\r\n <div class=\"col-md-12 item scroll-y\">\r\n <div class=\"item\" *ngFor=\"let item of imagelist;let i=index\" style=\"padding: 10px;\">\r\n\r\n <img class=\"mx-3 mb-3 img\" [src]=\"item.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n <span *ngIf=\"i\" class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i>\r\n </span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".img{width:95px;height:200px}.item{position:relative;padding-top:20px;display:inline-block;max-height:595px}.scroll-y{overflow-y:auto!important;position:relative!important}.notify-badge1{position:absolute;right:14px;top:5px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 8px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
5213
+ }
5214
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RemoveAuditComponent, decorators: [{
5215
+ type: Component,
5216
+ args: [{ selector: 'lib-remove-audit', template: "<div class=\"modal-body mt-5\">\r\n <div class=\" d-flex\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"fs-2 text-dark fw-bolder my-3 mx-7\"> <span class=\"card-label fw-bold text-dark\">\r\n {{maindata?.detectionType ? maindata?.detectionType : 'Customer' }} Files -\r\n <span>{{maindata?.count}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary me-5\" (click)=\"closepopup()\" data-bs-dismiss=\"modal\">\r\n <span class=\"svg-icon svg-icon-1\">\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=\"6\" y=\"17.3137\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(-45 6 17.3137)\"\r\n fill=\"black\"></rect>\r\n <rect x=\"7.41422\" y=\"6\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(45 7.41422 6)\" fill=\"black\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row mx-3\">\r\n <div class=\"col-md-12 item scroll-y\">\r\n <div class=\"item\" *ngFor=\"let item of imagelist;let i=index\" style=\"padding: 10px;\">\r\n\r\n <img class=\"mx-3 mb-3 img\" [src]=\"item.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n <span *ngIf=\"i\" class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i>\r\n </span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".img{width:95px;height:200px}.item{position:relative;padding-top:20px;display:inline-block;max-height:595px}.scroll-y{overflow-y:auto!important;position:relative!important}.notify-badge1{position:absolute;right:14px;top:5px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 8px;font-size:20px}\n"] }]
5217
+ }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }], propDecorators: { data: [{
5218
+ type: Input
5219
+ }] } });
5220
+
5221
+ class ViewcategoryComponent {
5222
+ modalService;
5223
+ activeModel;
5224
+ maindata = {};
5225
+ imagelist = [];
5226
+ counter = 0;
5227
+ data;
5228
+ constructor(modalService, activeModel) {
5229
+ this.modalService = modalService;
5230
+ this.activeModel = activeModel;
5231
+ }
5232
+ ngOnInit() {
5233
+ if (this.data) {
5234
+ this.maindata = this.data;
5235
+ }
5236
+ var saveData = JSON.parse(sessionStorage.getItem(this.maindata?.type) || '{}');
5237
+ if (saveData.length > 0) {
5238
+ this.imagelist = saveData;
5239
+ }
5240
+ }
5241
+ removeimage(data) {
5242
+ this.counter = 0;
5243
+ let oldData = JSON.parse(sessionStorage.getItem(this.maindata?.type) || '{}');
5244
+ let auditData = sessionStorage.getItem('audit') || '{}';
5245
+ const decompressedData = LZString.decompress(auditData);
5246
+ var customer = JSON.parse(decompressedData || '{}');
5247
+ customer.map((cus) => {
5248
+ if (cus.count > 0) {
5249
+ cus.mappedid = cus.mappedid.filter((x) => x.img_name != data.img_name);
5250
+ cus.count = cus.mappedid.length;
5251
+ }
5252
+ });
5253
+ console.log(customer);
5254
+ const jsonString = JSON.stringify(customer);
5255
+ const compressedData = LZString.compress(jsonString);
5256
+ sessionStorage.setItem('audit', compressedData);
5257
+ if (this.counter < oldData?.length) {
5258
+ this.counter = this.counter + 1;
5259
+ var wrongData = oldData.splice(oldData.findIndex(({ img_name }) => img_name == data?.img_name), 1);
5260
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5261
+ const decompressedData = LZString.decompress(stringifydata);
5262
+ var customer = JSON.parse(decompressedData || '{}');
5263
+ console.log(wrongData);
5264
+ if (wrongData.length > 0) {
5265
+ wrongData[0].selected = false;
5266
+ }
5267
+ customer.push(wrongData[0]);
5268
+ const jsonString = JSON.stringify(customer);
5269
+ const compressedData = LZString.compress(jsonString);
5270
+ sessionStorage.setItem('audit', compressedData);
5271
+ sessionStorage.setItem(this.maindata?.type, JSON.stringify(oldData));
5272
+ var newdata = JSON.parse(sessionStorage.getItem(this.maindata?.type) || '{}');
5273
+ if (newdata.length > 0) {
5274
+ this.imagelist = newdata;
5275
+ }
5276
+ else if (newdata.length == 0) {
5277
+ this.activeModel.close({ reload: true });
5278
+ }
5279
+ else {
5280
+ this.imagelist = [];
5281
+ }
5282
+ }
5283
+ else {
5284
+ }
5285
+ }
5286
+ closepopup() {
5287
+ console.log(this.counter);
5288
+ if (this.counter > 0) {
5289
+ this.activeModel.close({ reload: true });
5290
+ }
5291
+ else {
5292
+ this.activeModel.close({ reload: false });
5293
+ }
5294
+ }
5295
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewcategoryComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
5296
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ViewcategoryComponent, selector: "lib-viewcategory", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"modal-body mt-5\">\r\n <div class=\" d-flex\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"fs-2 text-dark fw-bolder my-3 mx-7\"> <span class=\"card-label fw-bold text-dark\">\r\n {{maindata?.name ? maindata?.name : 'Customer' }} Files -\r\n <span>{{maindata?.count}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary me-5\" (click)=\"closepopup()\" data-bs-dismiss=\"modal\">\r\n <span class=\"svg-icon svg-icon-1\">\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=\"6\" y=\"17.3137\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(-45 6 17.3137)\"\r\n fill=\"black\"></rect>\r\n <rect x=\"7.41422\" y=\"6\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(45 7.41422 6)\" fill=\"black\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row mx-3\">\r\n <div class=\"col-md-12 item scroll-y\">\r\n <div class=\"item\" *ngFor=\"let item of imagelist;let i=index\" style=\"padding: 10px;\">\r\n\r\n <img class=\"mx-3 mb-3 img\" [src]=\"item.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i>\r\n </span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".img{width:95px;height:200px}.item{position:relative;padding-top:20px;display:inline-block;max-height:595px}.scroll-y{overflow-y:auto!important;position:relative!important}.notify-badge1{position:absolute;right:14px;top:5px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 8px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
5297
+ }
5298
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewcategoryComponent, decorators: [{
5299
+ type: Component,
5300
+ args: [{ selector: 'lib-viewcategory', template: "<div class=\"modal-body mt-5\">\r\n <div class=\" d-flex\">\r\n <div class=\"d-flex justify-content-between w-100\">\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n <div class=\"fs-2 text-dark fw-bolder my-3 mx-7\"> <span class=\"card-label fw-bold text-dark\">\r\n {{maindata?.name ? maindata?.name : 'Customer' }} Files -\r\n <span>{{maindata?.count}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn btn-sm btn-icon btn-active-color-primary me-5\" (click)=\"closepopup()\" data-bs-dismiss=\"modal\">\r\n <span class=\"svg-icon svg-icon-1\">\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=\"6\" y=\"17.3137\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(-45 6 17.3137)\"\r\n fill=\"black\"></rect>\r\n <rect x=\"7.41422\" y=\"6\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(45 7.41422 6)\" fill=\"black\">\r\n </rect>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"card-body\">\r\n <div class=\"row mx-3\">\r\n <div class=\"col-md-12 item scroll-y\">\r\n <div class=\"item\" *ngFor=\"let item of imagelist;let i=index\" style=\"padding: 10px;\">\r\n\r\n <img class=\"mx-3 mb-3 img\" [src]=\"item.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i>\r\n </span>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".img{width:95px;height:200px}.item{position:relative;padding-top:20px;display:inline-block;max-height:595px}.scroll-y{overflow-y:auto!important;position:relative!important}.notify-badge1{position:absolute;right:14px;top:5px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 8px;font-size:20px}\n"] }]
5301
+ }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }], propDecorators: { data: [{
5302
+ type: Input
5303
+ }] } });
5304
+
5305
+ class AuditService {
5306
+ http;
5307
+ gs;
5308
+ ticketApiUrl;
5309
+ storeApiUrl;
5310
+ data;
5311
+ userUrl;
5312
+ tokenStorage;
5313
+ zoneauditApiUrl;
5314
+ edgeAppApiUrl;
5315
+ clientApiUrl;
5316
+ clientId = new BehaviorSubject('');
5317
+ clientData = new BehaviorSubject(null);
5318
+ auditApiUrl;
5319
+ traxauditApiUrl;
5320
+ vmsAuditUrl;
5321
+ constructor(http, gs) {
5322
+ this.http = http;
5323
+ this.gs = gs;
5324
+ this.gs.environment.subscribe((env) => {
5325
+ if (env) {
5326
+ this.ticketApiUrl = env.ticketsApiUrl;
5327
+ this.storeApiUrl = env.storeApiUrl;
5328
+ this.userUrl = env.userUrl;
5329
+ this.edgeAppApiUrl = env.edgeAppApiUrl;
5330
+ this.auditApiUrl = env.auditApiUrl;
5331
+ this.clientApiUrl = env.clientApiUrl;
5332
+ this.vmsAuditUrl = env.vmsAuditUrl;
5333
+ }
5334
+ this.gs.dataRangeValue.subscribe((e) => {
5335
+ if (e) {
5336
+ this.clientId.next(e.client);
5337
+ }
5338
+ });
5339
+ });
5340
+ }
5341
+ // audit code
5342
+ getAuditMapping(payload) {
5343
+ return this.http.get(`${this.vmsAuditUrl}/get-file?storeId=${payload?.storeId}&nextId=${payload?.nextId}&limit=${payload?.limit}&Date=${payload?.Date}`);
5344
+ }
5345
+ getAuditconfig(clientId) {
5346
+ return this.http.get(`${this.clientApiUrl}/get-footfall-directory-config?clientId=${clientId}`);
5347
+ }
5348
+ export(data) {
5349
+ return this.http.get(`${this.clientApiUrl}/audit/processing_info?export=${data.export}&userId=${data.userId}`, { responseType: 'arraybuffer' });
5350
+ }
5351
+ getauditCard(filter, user) {
5352
+ return this.http.get(`${this.clientApiUrl}/audit/userAuditSummary?range=${filter}&userId=${user}`);
5353
+ }
5354
+ getactivitylog(data) {
5355
+ return this.http.post(`${this.clientApiUrl}/activitylog/list`, data);
5356
+ }
5357
+ saveDraft(data) {
5358
+ return this.http.post(`${this.vmsAuditUrl}/save-draft`, data);
5359
+ }
5360
+ getAuditmappinglist(payload) {
5361
+ return this.http.get(`${this.vmsAuditUrl}/get-drafted-data?fileDate=${payload?.fileDate}&storeId=${payload?.storeId}&auditId=${payload?.auditId}`);
5362
+ }
5363
+ saveaudit(data) {
5364
+ return this.http.post(`${this.clientApiUrl}/save`, data);
5365
+ }
5366
+ userDetails() {
5367
+ return this.http.get(`${this.auditApiUrl}/auth/me`, {}).pipe(map((response) => {
5368
+ localStorage.setItem('user-info', JSON.stringify(response.data));
5369
+ return response;
5370
+ }), catchError(this.handleError));
5371
+ }
5372
+ handleError(error) {
5373
+ return throwError(() => new Error("Something bad happened; please try again later"));
5374
+ }
5375
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditService, deps: [{ token: i1.HttpClient }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
5376
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditService, providedIn: 'root' });
5377
+ }
5378
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditService, decorators: [{
5379
+ type: Injectable,
5380
+ args: [{
5381
+ providedIn: 'root'
5382
+ }]
5383
+ }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i1$1.GlobalStateService }] });
5384
+
5385
+ class TimerService {
5386
+ route;
5387
+ timePassed = new BehaviorSubject(0); // Timer count
5388
+ subscription = null; // Timer subscription
5389
+ inactivityTimeout = null; // Timeout for inactivity
5390
+ INACTIVITY_LIMIT = 5000;
5391
+ constructor(route) {
5392
+ this.route = route;
5393
+ }
5394
+ startTimer() {
5395
+ if (!this.subscription) {
5396
+ let currentTime = 0;
5397
+ let timeSpent;
5398
+ if ('timeSpent' in sessionStorage) {
5399
+ timeSpent = JSON.parse(sessionStorage.getItem('timeSpent') || '{}');
5400
+ currentTime = timeSpent || 0; // Retrieve the existing timer value
5401
+ }
5402
+ const timer$ = interval(1000); // Emits every 1 second
5403
+ this.subscription = timer$.subscribe(() => {
5404
+ currentTime += 1;
5405
+ this.timePassed.next(currentTime);
5406
+ timeSpent = currentTime;
5407
+ sessionStorage.setItem('timeSpent', JSON.stringify(timeSpent)); // Store the updated object
5408
+ });
5409
+ }
5410
+ this.resetInactivityTimeout();
5411
+ }
5412
+ stopTimer() {
5413
+ if (this.subscription) {
5414
+ this.subscription.unsubscribe();
5415
+ this.subscription = null;
5416
+ }
5417
+ }
5418
+ stopTimerAfterInactivity() {
5419
+ this.inactivityTimeout = setTimeout(() => {
5420
+ this.stopTimer(); // Stop the timer after inactivity
5421
+ }, this.INACTIVITY_LIMIT);
5422
+ }
5423
+ resetInactivityTimeout() {
5424
+ if (this.inactivityTimeout) {
5425
+ clearTimeout(this.inactivityTimeout); // Clear the previous inactivity timeout
5426
+ }
5427
+ this.stopTimerAfterInactivity(); // Set a new inactivity timeout
5428
+ }
5429
+ getTimePassed() {
5430
+ return this.timePassed;
5431
+ }
5432
+ clearTimer() {
5433
+ if (this.subscription) {
5434
+ this.subscription.unsubscribe();
5435
+ this.subscription = null;
5436
+ }
5437
+ // this.timePassed.next(0); // Optionally reset the timePassed
5438
+ // sessionStorage.removeItem('totalfiles'); // Optionally clear session storage
5439
+ // sessionStorage.removeItem('timeSpent')
5440
+ }
5441
+ resetTimer() {
5442
+ this.timePassed.next(0); // Reset to 0
5443
+ // this.resetInactivityTimeout(); // Reset inactivity timeout
5444
+ }
5445
+ formatTime(seconds) {
5446
+ const hours = Math.floor(seconds / 3600);
5447
+ const minutes = Math.floor((seconds % 3600) / 60);
5448
+ const secs = seconds % 60;
5449
+ return `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(secs)}`;
5450
+ }
5451
+ // Helper method to pad single digit numbers with a leading zero
5452
+ padZero(num) {
5453
+ return num < 10 ? '0' + num : '' + num;
5454
+ }
5455
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimerService, deps: [{ token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable });
5456
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimerService, providedIn: 'root' });
5457
+ }
5458
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimerService, decorators: [{
5459
+ type: Injectable,
5460
+ args: [{
5461
+ providedIn: 'root'
5462
+ }]
5463
+ }], ctorParameters: () => [{ type: i2.ActivatedRoute }] });
5464
+
5465
+ class StartAuditComponent {
5466
+ excel;
5467
+ auditservice;
5468
+ toastr;
5469
+ router;
5470
+ cd;
5471
+ modalService;
5472
+ timerService;
5473
+ spinnerService;
5474
+ route;
5475
+ junkimage;
5476
+ employeimage;
5477
+ filedetails = {};
5478
+ datareason;
5479
+ limit = 50;
5480
+ nextId = '';
5481
+ spinnerstart = true;
5482
+ submitted = false;
5483
+ auditId;
5484
+ customercount = 0;
5485
+ junkcount = 0;
5486
+ employeecount = 0;
5487
+ demographic;
5488
+ id = '';
5489
+ queueName = '';
5490
+ auditmappingdata;
5491
+ totalfile = 0;
5492
+ auditLoading = true;
5493
+ badge = false;
5494
+ imagelist = "./assets/tango/Images/loading-img.png";
5495
+ selected = [];
5496
+ selectedType;
5497
+ auditLoading1 = true;
5498
+ Nodata = false;
5499
+ counter = 1;
5500
+ clickedImages = [];
5501
+ confirmDraft;
5502
+ confirmerror;
5503
+ Errormsg;
5504
+ storedetails;
5505
+ openmodel = false;
5506
+ destroy$ = new Subject();
5507
+ getBack = false;
5508
+ category = [];
5509
+ onScroll() {
5510
+ if ('totalfiles' in sessionStorage) {
5511
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5512
+ if (filedata?.filedetails?.nextToken) {
5513
+ if (Math.ceil(window.innerHeight + window.scrollY) >= document.body.scrollHeight) { //this condition failed when the browser inspect screen open in horizontal
5514
+ if (this.spinnerstart) {
5515
+ this.spinnerService.show();
5516
+ this.getMapping('nextId');
5517
+ }
5518
+ }
5519
+ }
5520
+ }
5521
+ else {
5522
+ var result = window.confirm("Something Went Wrong. Please clear browser cache or Use incognito window");
5523
+ if (result) {
5524
+ console.log("OK button clicked!");
5525
+ this.router.navigate(['/manage/tickets']);
5526
+ }
5527
+ else {
5528
+ console.log("Alert closed without clicking OK");
5529
+ }
5530
+ }
5531
+ }
5532
+ handleKeyPress(event) {
5533
+ if (this.openmodel)
5534
+ return;
5535
+ if (event.key === 'g' || event.code === 'KeyG') {
5536
+ var group = this.auditmappingdata.filter((data) => data.selected === true);
5537
+ if (group.length > 0) {
5538
+ if (group.length == 1) {
5539
+ this.toastr.getErrorToast('Please Select multiple file then add to Group');
5540
+ }
5541
+ else {
5542
+ let dummyarray = group.shift();
5543
+ var groupimages = [];
5544
+ group.forEach((data) => {
5545
+ this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_name }) => img_name == data.img_name), 1);
5546
+ groupimages.push(data.mappedid[0]);
5547
+ });
5548
+ this.demographic = this.auditmappingdata.filter((data) => data.demographic === 'd').length;
5549
+ dummyarray.count = dummyarray.count + groupimages.length;
5550
+ dummyarray.selected = false;
5551
+ dummyarray.demographic = '';
5552
+ dummyarray.mappedid = [...dummyarray.mappedid, ...groupimages];
5553
+ const jsonString = JSON.stringify(this.auditmappingdata);
5554
+ const compressedData = LZString.compress(jsonString);
5555
+ sessionStorage.setItem('audit', compressedData);
5556
+ }
5557
+ // this.initial_data_loading()
5558
+ }
5559
+ else {
5560
+ this.toastr.getErrorToast('Please Select file then add to Group');
5561
+ }
5562
+ }
5563
+ const pressed = (event.key || '').toLowerCase();
5564
+ const matched = this.category.find((m) => {
5565
+ if (!m.key)
5566
+ return false;
5567
+ const mapKey = m.key.toLowerCase();
5568
+ // match by event.key (preferred) OR by event.code like 'KeyJ'
5569
+ return pressed === mapKey || event.code === `Key${mapKey.toUpperCase()}`;
5570
+ });
5571
+ console.log(matched);
5572
+ if (!matched)
5573
+ return;
5574
+ if (matched) {
5575
+ var newData = this.auditmappingdata.filter((data) => data.selected === true);
5576
+ if (newData.length > 0) {
5577
+ var oldData = JSON.parse(sessionStorage.getItem(matched?.type) || '{}');
5578
+ if (Number(oldData.length) > 0) {
5579
+ newData = [...oldData, ...newData];
5580
+ }
5581
+ else {
5582
+ newData = newData;
5583
+ }
5584
+ this.category.map((data) => {
5585
+ if (data.type === matched?.type) {
5586
+ data.count = newData.length;
5587
+ }
5588
+ });
5589
+ sessionStorage.setItem(matched?.type, JSON.stringify(newData));
5590
+ this.auditmappingdata = this.auditmappingdata.filter((data) => data.selected === false);
5591
+ const jsonString = JSON.stringify(this.auditmappingdata);
5592
+ const compressedData = LZString.compress(jsonString);
5593
+ sessionStorage.setItem('audit', compressedData);
5594
+ this.toastr.getSuccessToast(`${matched?.type} Added Succesfully!`);
5595
+ }
5596
+ else {
5597
+ this.toastr.getErrorToast(`Please Select file then add to ${matched?.type} `);
5598
+ }
5599
+ }
5600
+ }
5601
+ constructor(excel, auditservice, toastr, router, cd, modalService, timerService, spinnerService, route) {
5602
+ this.excel = excel;
5603
+ this.auditservice = auditservice;
5604
+ this.toastr = toastr;
5605
+ this.router = router;
5606
+ this.cd = cd;
5607
+ this.modalService = modalService;
5608
+ this.timerService = timerService;
5609
+ this.spinnerService = spinnerService;
5610
+ this.route = route;
5611
+ this.selectedType = this.route.snapshot.paramMap.get('type');
5612
+ }
5613
+ destroy = new Subject();
5614
+ showDialog = false;
5615
+ timePassed = 0;
5616
+ subscription = null;
5617
+ formattedTime = '00:00:00';
5618
+ notice = 'session expired';
5619
+ showNotice = false;
5620
+ rxjsTimer = [];
5621
+ ngOnInit() {
5622
+ this.getAuditConfig();
5623
+ if ('user-info' in localStorage) {
5624
+ var user = JSON.parse(localStorage.getItem('user-info') || '{}');
5625
+ this.id = user._id;
5626
+ }
5627
+ if ('audit' in sessionStorage) {
5628
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5629
+ const decompressedData = LZString.decompress(stringifydata);
5630
+ var auditdata = JSON.parse(decompressedData || '{}');
5631
+ if (auditdata.length > 0) {
5632
+ this.auditmappingdata = auditdata;
5633
+ this.customercount = this.auditmappingdata.length;
5634
+ }
5635
+ this.auditLoading = false;
5636
+ this.setTimer();
5637
+ }
5638
+ else {
5639
+ var filedata;
5640
+ if ('totalfiles' in sessionStorage) {
5641
+ filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5642
+ this.getMapping();
5643
+ }
5644
+ }
5645
+ }
5646
+ setTimer() {
5647
+ this.subscription = this.timerService.getTimePassed().subscribe(time => {
5648
+ this.timePassed = time;
5649
+ this.formattedTime = this.timerService.formatTime(time);
5650
+ this.cd.detectChanges();
5651
+ });
5652
+ this.timerService.startTimer();
5653
+ document.addEventListener('mousemove', this.handleGlobalMouseEvent);
5654
+ document.addEventListener('click', this.handleGlobalMouseEvent);
5655
+ document.addEventListener('mouseenter', this.handleGlobalMouseEvent);
5656
+ document.addEventListener('scroll', this.handleGlobalMouseEvent);
5657
+ }
5658
+ handleGlobalMouseEvent = () => {
5659
+ this.timerService.startTimer();
5660
+ };
5661
+ ngOnDestroy() {
5662
+ this.destroy$.next(true);
5663
+ this.destroy$.complete();
5664
+ document.removeEventListener('mousemove', this.handleGlobalMouseEvent);
5665
+ document.removeEventListener('click', this.handleGlobalMouseEvent);
5666
+ document.removeEventListener('mouseenter', this.handleGlobalMouseEvent);
5667
+ document.removeEventListener('scroll', this.handleGlobalMouseEvent);
5668
+ this.timerService.clearTimer();
5669
+ }
5670
+ initial_data_loading() {
5671
+ if ('audit' in sessionStorage) {
5672
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5673
+ const decompressedData = LZString.decompress(stringifydata);
5674
+ var auditdata = JSON.parse(decompressedData || '{}');
5675
+ if (auditdata.length > 0) {
5676
+ this.auditmappingdata = auditdata;
5677
+ this.demographic = this.auditmappingdata.filter((data) => data.demographic === 'd').length;
5678
+ this.customercount = this.auditmappingdata.length;
5679
+ this.auditLoading = false;
5680
+ }
5681
+ else {
5682
+ this.auditmappingdata = [];
5683
+ this.customercount = 0;
5684
+ }
5685
+ }
5686
+ this.category.map((data) => {
5687
+ var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
5688
+ data.count = count?.length;
5689
+ });
5690
+ if ('retag' in sessionStorage) {
5691
+ var retagiamge = JSON.parse(sessionStorage.getItem('retag') || '[]');
5692
+ if (retagiamge.length > 0) {
5693
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5694
+ const decompressedData = LZString.decompress(stringifydata);
5695
+ var customer = JSON.parse(decompressedData || '{}');
5696
+ customer = [...customer, ...retagiamge];
5697
+ const jsonString = JSON.stringify(this.auditmappingdata);
5698
+ const compressedData = LZString.compress(jsonString);
5699
+ sessionStorage.setItem('audit', compressedData);
5700
+ sessionStorage.removeItem('retag');
5701
+ }
5702
+ }
5703
+ if ('totalfiles' in sessionStorage) {
5704
+ var files = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5705
+ this.totalfile = files?.totalfiles;
5706
+ this.filedetails = files?.filedetails;
5707
+ this.storedetails = files?.storedetails;
5708
+ }
5709
+ }
5710
+ toggleImage(img_name) {
5711
+ this.selected.push(img_name);
5712
+ this.auditmappingdata.map((data) => {
5713
+ if (data.img_name == img_name) {
5714
+ if (data.mappedid.length == 1) {
5715
+ data.selected = !data.selected;
5716
+ }
5717
+ else {
5718
+ data.dropped = !data.dropped;
5719
+ }
5720
+ }
5721
+ });
5722
+ }
5723
+ getAuditConfig() {
5724
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5725
+ this.auditservice.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
5726
+ next: (res) => {
5727
+ if (res && res?.code == 200) {
5728
+ console.log(res.data.footfallDirectoryConfigs.taggingLimitation);
5729
+ this.category = res.data.footfallDirectoryConfigs.taggingLimitation;
5730
+ this.initial_data_loading();
5731
+ }
5732
+ }
5733
+ });
5734
+ }
5735
+ getMapping(nextId) {
5736
+ this.auditLoading = true;
5737
+ this.spinnerstart = false;
5738
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5739
+ console.log("--->", filedata);
5740
+ let payload = {
5741
+ storeId: filedata?.filedetails?.storeId,
5742
+ limit: this.limit,
5743
+ nextId: filedata?.filedetails?.nextToken ? filedata?.filedetails?.nextToken : '',
5744
+ Date: filedata?.filedetails?.Date
5745
+ };
5746
+ this.auditservice.getAuditMapping(payload).pipe(takeUntil(this.destroy$)).subscribe({
5747
+ next: (res) => {
5748
+ if (res && res?.code == 200) {
5749
+ this.storedetails = res?.data;
5750
+ setTimeout(() => {
5751
+ if (res?.data?.file?.nextToken && this.selectedType === 'track') {
5752
+ this.getMapping(res?.data?.file?.nextToken);
5753
+ }
5754
+ }, 100);
5755
+ if (res?.data?.isDraft) {
5756
+ sessionStorage.setItem('timeSpent', JSON.stringify(res?.data?.timeSpent));
5757
+ this.spinnerstart = false;
5758
+ this.category.map((data) => {
5759
+ let filterData = res?.data?.result.filter((x) => x.type === data.type);
5760
+ console.log("🚀 ~ StartAuditComponent ~ getMapping ~ filterData:", filterData);
5761
+ sessionStorage.setItem(data.type, JSON.stringify(filterData[0].value));
5762
+ });
5763
+ let customerData = res?.data?.result.filter((x) => x.type === 'customer');
5764
+ console.log("🚀 ~ StartAuditComponent ~ getMapping ~ customerData:", customerData);
5765
+ this.auditmappingdata = customerData[0].value;
5766
+ const jsonString = JSON.stringify(customerData[0].value);
5767
+ const compressedData = LZString.compress(jsonString);
5768
+ sessionStorage.setItem('audit', compressedData);
5769
+ this.totalfile = res?.data?.count;
5770
+ this.filedetails = res?.data?.file;
5771
+ this.category.map((data) => {
5772
+ var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
5773
+ data.count = count?.length;
5774
+ });
5775
+ if (res?.data?.result?.retag_image?.length > 0) {
5776
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5777
+ const decompressedData = LZString.decompress(stringifydata);
5778
+ var customer = JSON.parse(decompressedData || '{}');
5779
+ customer = [...customer, ...res.data.result.retag_image];
5780
+ this.auditmappingdata = customer;
5781
+ const jsonString = JSON.stringify(customer);
5782
+ const compressedData = LZString.compress(jsonString);
5783
+ sessionStorage.setItem('audit', compressedData);
5784
+ }
5785
+ var totalfiles = {
5786
+ "storedetails": {
5787
+ "storeName": res?.data?.storeName,
5788
+ "address": res?.data?.address
5789
+ },
5790
+ "totalfiles": this.storedetails?.result?.total_count,
5791
+ "auditId": res?.data.file?.auditId,
5792
+ "filedetails": {
5793
+ "storeId": this.storedetails?.file?.storeId,
5794
+ "Date": res?.data?.file?.Date,
5795
+ "userId": res?.data?.file?.userId,
5796
+ "clientId": res?.data?.file?.clientId,
5797
+ }
5798
+ };
5799
+ sessionStorage.setItem('totalfiles', JSON.stringify(totalfiles));
5800
+ this.auditLoading = false;
5801
+ this.setTimer();
5802
+ }
5803
+ else {
5804
+ this.spinnerstart = false;
5805
+ this.spinnerService.hide();
5806
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5807
+ if (filedata?.filedetails?.nextToken) {
5808
+ this.auditLoading = false;
5809
+ this.auditId = res.data.file?.auditId;
5810
+ this.totalfile = res?.data?.count;
5811
+ this.filedetails = res?.data?.file;
5812
+ this.filedetails.zoneName = res?.data?.file?.zoneName;
5813
+ if ('audit' in sessionStorage) {
5814
+ if (this.auditmappingdata?.length > 0) {
5815
+ this.auditmappingdata = [...this.auditmappingdata, ...res?.data?.result];
5816
+ this.customercount = this.auditmappingdata?.length;
5817
+ }
5818
+ }
5819
+ }
5820
+ else {
5821
+ this.auditLoading = false;
5822
+ this.auditLoading1 = false;
5823
+ this.filedetails = res?.data?.file;
5824
+ this.auditId = res.data.file?.auditId;
5825
+ this.auditmappingdata = res?.data?.result;
5826
+ this.totalfile = res?.data?.count;
5827
+ this.filedetails.queueName = this.queueName;
5828
+ this.filedetails.zoneName = res?.data?.file?.zoneName;
5829
+ }
5830
+ const jsonString = JSON.stringify(this.auditmappingdata);
5831
+ const compressedData = LZString.compress(jsonString);
5832
+ sessionStorage.setItem('audit', compressedData);
5833
+ let obj = {
5834
+ totalfiles: this.totalfile,
5835
+ filedetails: this.filedetails,
5836
+ auditId: this.auditId,
5837
+ storedetails: {
5838
+ "storeName": res?.data?.storeName,
5839
+ "address": res?.data?.address
5840
+ },
5841
+ };
5842
+ sessionStorage.setItem('totalfiles', JSON.stringify(obj));
5843
+ this.spinnerstart = true;
5844
+ this.setTimer();
5845
+ }
5846
+ }
5847
+ else if (!res || res.code == 204) {
5848
+ if (this.counter < 6) {
5849
+ this.counter = this.counter + 1;
5850
+ this.getMapping();
5851
+ this.showDialog = true;
5852
+ }
5853
+ else {
5854
+ this.auditLoading = false;
5855
+ if (!nextId) {
5856
+ this.Nodata = true;
5857
+ }
5858
+ else { }
5859
+ this.submitted = true;
5860
+ this.destroy.next(true);
5861
+ this.destroy.complete();
5862
+ this.showNotice = true;
5863
+ }
5864
+ }
5865
+ },
5866
+ error: (err) => {
5867
+ console.log(err);
5868
+ if (err?.status == 404) {
5869
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5870
+ if (filedata.filedetails && filedata.filedetails.nextToken) {
5871
+ delete filedata.filedetails.nextToken;
5872
+ sessionStorage.setItem('totalfiles', JSON.stringify(filedata));
5873
+ this.getMapping('');
5874
+ }
5875
+ }
5876
+ else {
5877
+ this.toastr.getErrorToast(err?.error?.message);
5878
+ }
5879
+ }
5880
+ });
5881
+ }
5882
+ removeaudit(data) {
5883
+ const modalRef = this.modalService.open(RemoveAuditComponent, {
5884
+ size: 'lg',
5885
+ centered: true,
5886
+ backdrop: 'static',
5887
+ keyboard: false
5888
+ });
5889
+ modalRef.componentInstance.data = data,
5890
+ modalRef.closed.subscribe((res) => {
5891
+ if (res && res?.reload) {
5892
+ this.initial_data_loading();
5893
+ }
5894
+ });
5895
+ }
5896
+ allowDrop(event) {
5897
+ event.preventDefault();
5898
+ }
5899
+ dragImage(event) {
5900
+ event.dataTransfer.setData('text/plain', event.target.id);
5901
+ }
5902
+ dropImage(event) {
5903
+ event.preventDefault();
5904
+ const draggedImageId = event.dataTransfer.getData('text/plain');
5905
+ const draggedImage = document.getElementById(draggedImageId);
5906
+ event.target.appendChild(draggedImage);
5907
+ const dropZone = event.target;
5908
+ this.auditmappingdata.map((data, index) => {
5909
+ if (data.img_name == dropZone.id) {
5910
+ if (data.mappedid.length > 0) {
5911
+ var findone = this.auditmappingdata.filter((data) => data.img_name == draggedImageId);
5912
+ console.log(findone);
5913
+ if (findone.length > 0) {
5914
+ data.count = data.count + findone[0].count;
5915
+ data.mappedid = [...data.mappedid, ...findone[0].mappedid];
5916
+ }
5917
+ if ('duplicate' in sessionStorage) {
5918
+ let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
5919
+ filedata = [...filedata, ...findone];
5920
+ sessionStorage.setItem('duplicate', JSON.stringify(filedata));
5921
+ }
5922
+ else {
5923
+ sessionStorage.setItem('duplicate', JSON.stringify(findone));
5924
+ let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
5925
+ console.log("🚀 ~ StartAuditComponent ~ dropImage ~ filedata:", filedata);
5926
+ }
5927
+ this.category.map((data) => {
5928
+ var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
5929
+ data.count = count?.length;
5930
+ });
5931
+ }
5932
+ else {
5933
+ data.count = data.count + 1,
5934
+ data.mappedid.push(draggedImageId);
5935
+ }
5936
+ }
5937
+ });
5938
+ this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_name }) => img_name == draggedImageId), 1);
5939
+ this.auditmappingdata.map((data) => data.selected = false);
5940
+ const jsonString = JSON.stringify(this.auditmappingdata);
5941
+ const compressedData = LZString.compress(jsonString);
5942
+ sessionStorage.setItem('audit', compressedData);
5943
+ }
5944
+ dragStart(event) {
5945
+ const target = event.target;
5946
+ event.dataTransfer?.setData('text/plain', target.id);
5947
+ }
5948
+ Reviewdata() {
5949
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5950
+ if (filedata?.filedetails?.nextToken && this.selectedType !== 'track') {
5951
+ this.toastr.getErrorToast('Scroll Down to bottom load the files before Move to Next page!');
5952
+ }
5953
+ else {
5954
+ this.submitted = true;
5955
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
5956
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
5957
+ const decompressedData = LZString.decompress(stringifydata);
5958
+ var customer = JSON.parse(decompressedData || '{}');
5959
+ let storedData = [
5960
+ {
5961
+ type: "customer",
5962
+ value: customer ? customer : [],
5963
+ }
5964
+ ];
5965
+ this.category.map((data) => {
5966
+ let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
5967
+ storedData.push({
5968
+ type: data.type,
5969
+ value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
5970
+ });
5971
+ });
5972
+ console.log("🚀 ~ StartAuditComponent ~ Reviewdata ~ storedData:", storedData);
5973
+ var inserobj = {
5974
+ userCommands: this.datareason ? this.datareason : "",
5975
+ storeId: totalfile?.filedetails?.storeId,
5976
+ auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
5977
+ fileDate: totalfile?.filedetails?.Date,
5978
+ totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
5979
+ retagCount: 0,
5980
+ timeSpent: this.timePassed,
5981
+ retagImage: [],
5982
+ draftedData: storedData
5983
+ };
5984
+ console.log("🚀 ~ StartAuditComponent ~ Reviewdata ~ inserobj:", inserobj);
5985
+ this.auditservice.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe({
5986
+ next: (res) => {
5987
+ if (res && res?.code == 200) {
5988
+ this.submitted = false;
5989
+ this.router.navigate(["/manage/tickets/mapping-list"]);
5990
+ }
5991
+ if (res && res.code == 203) {
5992
+ this.Errormsg = res.message;
5993
+ const modalRef = this.modalService.open(this.confirmerror, { centered: true });
5994
+ modalRef.result.then((result) => {
5995
+ if (result.isConfirmed) {
5996
+ this.router.navigate(['manage/tickets'], { queryParams: { type: 'audit' } });
5997
+ }
5998
+ });
5999
+ }
6000
+ },
6001
+ error: (err) => {
6002
+ if (err?.code == 400 || err?.code == 204 || err?.code == 404 || err?.code == 500) {
6003
+ this.Errormsg = err.message;
6004
+ const modalRef = this.modalService.open(this.confirmerror, { centered: true });
6005
+ modalRef.result.then((result) => {
6006
+ if (result.isConfirmed) {
6007
+ this.submitted = true;
6008
+ }
6009
+ });
6010
+ }
6011
+ }
6012
+ });
6013
+ }
6014
+ }
6015
+ viewcategory(data) {
6016
+ const modalRef = this.modalService.open(ViewcategoryComponent, {
6017
+ size: 'lg',
6018
+ centered: true,
6019
+ backdrop: 'static',
6020
+ keyboard: false
6021
+ });
6022
+ modalRef.componentInstance.data = data;
6023
+ modalRef.componentInstance.imageList = data,
6024
+ modalRef.closed.subscribe((res) => {
6025
+ if (res && res?.reload) {
6026
+ this.initial_data_loading();
6027
+ }
6028
+ });
6029
+ }
6030
+ async savedraft() {
6031
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6032
+ if (filedata?.filedetails?.nextToken && this.selectedType !== 'track') {
6033
+ this.toastr.getErrorToast('Scroll Down to bottom load the files before save!');
6034
+ }
6035
+ else {
6036
+ this.openmodel = true;
6037
+ const modalRef = this.modalService.open(this.confirmDraft, {
6038
+ centered: true, size: 'md'
6039
+ });
6040
+ modalRef.result.then((result) => {
6041
+ if (result === 'isDenied') {
6042
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6043
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
6044
+ const decompressedData = LZString.decompress(stringifydata);
6045
+ var customer = JSON.parse(decompressedData || '{}');
6046
+ let storedData = [
6047
+ {
6048
+ type: "customer",
6049
+ value: customer ? customer : [],
6050
+ }
6051
+ ];
6052
+ this.category.map((data) => {
6053
+ let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
6054
+ storedData.push({
6055
+ type: data.type,
6056
+ value: sessionvalue ? sessionvalue : []
6057
+ });
6058
+ });
6059
+ var inserobj = {
6060
+ userCommands: this.datareason ? this.datareason : "",
6061
+ // userId: user?.user,
6062
+ storeId: totalfile?.filedetails?.storeId,
6063
+ fileDate: totalfile?.filedetails?.Date,
6064
+ auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
6065
+ totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
6066
+ retagCount: 0,
6067
+ timeSpent: this.timePassed,
6068
+ retagImage: [],
6069
+ draftedData: storedData
6070
+ };
6071
+ this.auditservice.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe({
6072
+ next: (res) => {
6073
+ if (res && res.code == 200) {
6074
+ this.submitted = false;
6075
+ this.toastr.getSuccessToast(res?.data?.result);
6076
+ }
6077
+ else {
6078
+ if (res && res.code == 203) {
6079
+ this.Errormsg = res.error;
6080
+ const modalRef = this.modalService.open(this.confirmerror);
6081
+ modalRef.result.then((result) => {
6082
+ if (result.isConfirmed) {
6083
+ this.router.navigate(['tickets/users'], { queryParams: { type: 'audit' } });
6084
+ }
6085
+ });
6086
+ }
6087
+ }
6088
+ },
6089
+ error: (err) => {
6090
+ if (err?.code == 400 || err?.code == 204 || err?.code == 404 || err?.code == 500) {
6091
+ this.toastr.getErrorToast('File not saved!');
6092
+ }
6093
+ }
6094
+ });
6095
+ }
6096
+ else if (result === 'isConfirmed') {
6097
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6098
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
6099
+ const decompressedData = LZString.decompress(stringifydata);
6100
+ var customer = JSON.parse(decompressedData || '{}');
6101
+ let storedData = [
6102
+ {
6103
+ type: "customer",
6104
+ value: this.auditmappingdata ? this.auditmappingdata : [],
6105
+ }
6106
+ ];
6107
+ this.category.map((data) => {
6108
+ let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
6109
+ storedData.push({
6110
+ type: data.type,
6111
+ value: sessionvalue ? sessionvalue : []
6112
+ });
6113
+ });
6114
+ var inserobj = {
6115
+ userCommands: this.datareason ? this.datareason : "",
6116
+ // userId: user.user,
6117
+ storeId: totalfile?.filedetails?.storeId,
6118
+ auditType: totalfile?.filedetails?.type,
6119
+ fileDate: totalfile?.filedetails?.Date,
6120
+ auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
6121
+ totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
6122
+ retagCount: 0,
6123
+ timeSpent: this.timePassed,
6124
+ retagImage: []
6125
+ };
6126
+ this.auditservice.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe({
6127
+ next: (res) => {
6128
+ if (res && res.code == 200) {
6129
+ this.submitted = false;
6130
+ this.router.navigate(['tickets/users'], { queryParams: { type: 'audit' } });
6131
+ }
6132
+ else {
6133
+ if (res && res.code == 203) {
6134
+ this.Errormsg = res.error;
6135
+ const modalRef = this.modalService.open(this.confirmerror);
6136
+ modalRef.result.then((result) => {
6137
+ if (result.isConfirmed) {
6138
+ this.router.navigate(['tickets/users'], { queryParams: { type: 'audit' } });
6139
+ }
6140
+ });
6141
+ }
6142
+ }
6143
+ },
6144
+ error: (err) => {
6145
+ if (err?.code == 400 || err?.code == 204 || err?.code == 404 || err?.code == 500) {
6146
+ this.toastr.getErrorToast('File not saved!');
6147
+ }
6148
+ }
6149
+ });
6150
+ }
6151
+ });
6152
+ modalRef.result.finally(() => {
6153
+ this.openmodel = false;
6154
+ });
6155
+ }
6156
+ }
6157
+ backtotickets() {
6158
+ this.savedraft();
6159
+ this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall-new' } });
6160
+ }
6161
+ cameraPreview() {
6162
+ // const ModalRef = this.modalService.open(CameraPreviewComponent,{
6163
+ // centered: true,
6164
+ // size:'lg'
6165
+ // })
6166
+ }
6167
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StartAuditComponent, deps: [{ token: ExcelService }, { token: AuditService }, { token: i4.ToastService }, { token: i2.Router }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgbModal }, { token: TimerService }, { token: i7.NgxSpinnerService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
6168
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: StartAuditComponent, selector: "lib-start-audit", host: { listeners: { "window:scroll": "onScroll()", "window:keydown": "handleKeyPress($event)" } }, viewQueries: [{ propertyName: "confirmDraft", first: true, predicate: ["confirmDraft"], descendants: true }, { propertyName: "confirmerror", first: true, predicate: ["confirmerror"], descendants: true }], ngImport: i0, template: "<div class=\"mb-5 d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"border w-40px bg-white cursor-pointer me-5 text-center\" (click)=\"backtotickets()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15.8334 10H4.16669M4.16669 10L10 15.8334M4.16669 10L10 4.16669\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <a (click)=\"cameraPreview()\"><span *ngIf=\"filedetails?.Date\">{{filedetails?.Date}}</span><span> -\r\n </span><span *ngIf=\"filedetails?.storeId\">{{filedetails?.storeId}}</span><span> - </span><span\r\n *ngIf=\"storedetails?.storeName\">{{storedetails?.storeName}}</span><span *ngIf=\"selectedType ==='zone'\">\r\n - </span><span\r\n *ngIf=\"filedetails?.zoneName && selectedType ==='zone'\">{{filedetails?.zoneName}}</span><span\r\n *ngIf=\"storedetails?.address\"> | {{storedetails?.address}} </span></a>\r\n </div>\r\n <div class=\"rounded-3 d-flex align-items-center bg-timer\">\r\n <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\"\r\n fill=\"black\" />\r\n </svg></span>\r\n </div>\r\n</div>\r\n<div class=\"card py-2\">\r\n <div class=\"card-header align-items-center border-0 overflow\">\r\n <div class=\"card-title border-0\">\r\n <!-- <div class=\"w-50px h-50px badge-light-primary text-center align-content-center rounded-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\r\n <path d=\"M21 15.1667V23.3334H4.66665V7.00004H10.5233C10.5816 6.17171 10.78 5.39004 11.0833 4.66671H4.66665C3.38331 4.66671 2.33331 5.71671 2.33331 7.00004V23.3334C2.33331 24.6167 3.38331 25.6667 4.66665 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3334V17.5L21 15.1667ZM19.25 21H6.41665L9.62498 16.8817L11.9116 19.635L15.12 15.505L19.25 21ZM22.5166 10.3717C23.03 9.55504 23.3333 8.61004 23.3333 7.58337C23.3333 4.67837 20.9883 2.33337 18.0833 2.33337C15.1783 2.33337 12.8333 4.67837 12.8333 7.58337C12.8333 10.4884 15.1783 12.8334 18.0716 12.8334C19.0983 12.8334 20.055 12.53 20.86 12.0167L24.5 15.6567L26.1566 14L22.5166 10.3717ZM18.0833 10.5C17.3098 10.5 16.5679 10.1927 16.0209 9.64577C15.4739 9.09879 15.1666 8.35692 15.1666 7.58337C15.1666 6.80983 15.4739 6.06796 16.0209 5.52098C16.5679 4.974 17.3098 4.66671 18.0833 4.66671C18.8569 4.66671 19.5987 4.974 20.1457 5.52098C20.6927 6.06796 21 6.80983 21 7.58337C21 8.35692 20.6927 9.09879 20.1457 9.64577C19.5987 10.1927 18.8569 10.5 18.0833 10.5Z\" fill=\"#00A3FF\"/>\r\n </svg> \r\n </div> -->\r\n <div class=\"d-grid\">\r\n <div class=\"card-label ms-2\"><span *ngIf=\"filedetails?.type\">{{filedetails?.type ? filedetails?.type :\r\n ''}}</span>\r\n </div>\r\n <div *ngIf=\"filedetails\" class=\"sub-text mt-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_14508_18583)\">\r\n <path\r\n d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_14508_18583\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{totalfile ? totalfile : 0}} After Count</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align align-items-center gap-2\">\r\n <div class=\"border border-1 rounded-3 w-auto h-45px px-2 d-flex justify-content-between align-items-center\"\r\n *ngFor=\"let item of category\">\r\n <div class=\"h-100 align-content-center text-nowrap fw-semibold cursor-pointer mx-2\" (click)=\"viewcategory(item)\">\r\n <span class=\"badge badge-light-primary me-2\">{{item?.count}}</span>{{item?.name}}<span class=\" ms-3 badge badge-light-primary me-5 text-capitalize\">{{item?.key}}</span></div> \r\n </div>\r\n <!-- <div class=\"border border-1 rounded-3 w-auto h-45px px-4 d-flex justify-content-between align-items-center\">\r\n <div class=\"px-5 h-100 align-content-center text fw-semibold pe-none\"><span\r\n class=\"badge badge-light-primary me-5\">{{auditmappingdata?.length ? auditmappingdata?.length : 0\r\n }}</span>Unique Customers</div>\r\n </div> -->\r\n <div *ngIf=\"!auditLoading && !Nodata\" class=\"card-toolbar text-nowrap ms-5\">\r\n <button type=\"button\" class=\"btn btn-sm btn-default btn-outline ms-3 py-2\"\r\n [disabled]=\"!employeecount && !junkcount && (auditmappingdata?.length === totalfile)\"\r\n (click)=\"savedraft()\">Save Draft</button>\r\n <button type=\"submit\" class=\"btn btn-sm btn-primary py-2 ms-3\" [disabled]=\"submitted\"\r\n (click)=\"Reviewdata()\">Review <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- scroll-top -->\r\n<div class=\"card mt-5\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div *ngIf=\"auditLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"Nodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- scroll-y h-500px -->\r\n <div *ngIf=\"!auditLoading\" class=\"col-md-12 item \">\r\n\r\n <div class=\"item\" *ngFor=\"let item of auditmappingdata;let i=index\" style=\"padding: 5px 10px;\">\r\n\r\n <img class=\"mx-3 my-3 img\" [src]=\"item?.img_path\" id=\"{{item?.img_name}}\" alt=\"Image\"\r\n (dragover)=\"allowDrop($event)\" (drop)=\"dropImage($event)\" draggable=\"true\"\r\n (dragstart)=\"dragImage($event)\" (click)=\"toggleImage(item?.img_name )\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item?.img_name}}</div>\r\n\r\n <span *ngIf=\"item?.selected\" class=\"notify-badge1\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i></span>\r\n <!-- (click)=\"removeaudit(item)\" -->\r\n <span class=\"notify-badge cursor-pointer\" (click)=\"removeaudit(item)\" *ngIf=\"item?.count>1\">{{item?.count}}</span>\r\n </div>\r\n\r\n <ngx-spinner size=\"medium\" type=\"ball-atom\"></ngx-spinner>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n <div class=\"card h-auto p-10\">\r\n <div class=\"card-header d-grid p-0 border-0\">\r\n <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span> -->\r\n <div class=\"card-label mt-5\">Save Changes</div>\r\n <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <p class=\"text-sub mt-5\">Do you want to draft the file?</p>\r\n <!-- <p *ngIf=\"getBack\" class=\"text-sub mt-5\">Do you want to get back?</p> -->\r\n <textarea class=\"form-control mt-5\" [(ngModel)]=\"datareason\"\r\n placeholder=\"Type your reason (Required) ...\"></textarea>\r\n <div class=\"w-100 d-flex mt-10\">\r\n <button class=\"btn btn-outline w-50 me-2 fw-bold\" [disabled]=\"!datareason\"\r\n (click)=\"modal.close('isConfirmed')\">Save & Exit</button>\r\n <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isDenied')\">save &\r\n Continue</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmerror let-modal>\r\n <div class=\"w-400px h-auto p-10 card\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-label\">{{Errormsg}}</div>\r\n </div>\r\n <div class=\"card-body mt-5\">\r\n <div class=\"w-100 d-flex mt-10\">\r\n <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".border{border:1px solid var(--Gray-300, #D0D5DD)!important;border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d}.border-end{border-right:1px solid var(--Gray-300, #D0D5DD)!important}.text{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}textarea:focus,textarea:active{box-shadow:none!important}a{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:600!important;line-height:20px;text-decoration-line:underline}.arrow-code{width:6.38px;height:10px;color:#3f4254}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.butn:hover{color:#009ef7!important}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.btn-check:checked+.btn.btn-light-primary,.btn-check:active+.btn.btn-light-primary,.btn.btn-light-primary:focus:not(.btn-active),.btn.btn-light-primary:hover:not(.btn-active),.btn.btn-light-primary:active:not(.btn-active),.btn.btn-light-primary.active,.btn.btn-light-primary.show,.show>.btn.btn-light-primary{background-color:#fff!important}.card .card-header{min-height:51px!important}.img{width:85px;height:200px}.card-label{font-family:Inter;font-style:normal;color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:30px}.item{position:relative;padding-top:10px;display:inline-block}.notify-badge{position:absolute;right:4px;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:var(--Primary-600, #00A3FF);border:2px solid var(--Primary-600, #00A3FF);padding:5px 10px;font-size:15px}.notify-badge1{position:absolute;right:14px;top:10px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;border:2px solid var(--Primary-600, #00A3FF);color:var(--Primary-600, #00A3FF);padding:0 7px;font-size:19px}.fixed,.nofixed{position:fixed;width:86%;z-index:1}.scroll-top{margin-top:150px!important}.loader1{width:90px;height:90px;margin-left:580px}.scroll-y{overflow-y:auto!important;position:relative!important}.text-sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.savebtn{padding:10px 18px;border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d;font-size:16px;font-weight:600;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.border-1{border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.w-40px{padding:8px!important}.h-45px{height:39px!important}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}.overflow{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }] });
6169
+ }
6170
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StartAuditComponent, decorators: [{
6171
+ type: Component,
6172
+ args: [{ selector: 'lib-start-audit', template: "<div class=\"mb-5 d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"border w-40px bg-white cursor-pointer me-5 text-center\" (click)=\"backtotickets()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15.8334 10H4.16669M4.16669 10L10 15.8334M4.16669 10L10 4.16669\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </div>\r\n <a (click)=\"cameraPreview()\"><span *ngIf=\"filedetails?.Date\">{{filedetails?.Date}}</span><span> -\r\n </span><span *ngIf=\"filedetails?.storeId\">{{filedetails?.storeId}}</span><span> - </span><span\r\n *ngIf=\"storedetails?.storeName\">{{storedetails?.storeName}}</span><span *ngIf=\"selectedType ==='zone'\">\r\n - </span><span\r\n *ngIf=\"filedetails?.zoneName && selectedType ==='zone'\">{{filedetails?.zoneName}}</span><span\r\n *ngIf=\"storedetails?.address\"> | {{storedetails?.address}} </span></a>\r\n </div>\r\n <div class=\"rounded-3 d-flex align-items-center bg-timer\">\r\n <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\n d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\"\r\n fill=\"black\" />\r\n </svg></span>\r\n </div>\r\n</div>\r\n<div class=\"card py-2\">\r\n <div class=\"card-header align-items-center border-0 overflow\">\r\n <div class=\"card-title border-0\">\r\n <!-- <div class=\"w-50px h-50px badge-light-primary text-center align-content-center rounded-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\r\n <path d=\"M21 15.1667V23.3334H4.66665V7.00004H10.5233C10.5816 6.17171 10.78 5.39004 11.0833 4.66671H4.66665C3.38331 4.66671 2.33331 5.71671 2.33331 7.00004V23.3334C2.33331 24.6167 3.38331 25.6667 4.66665 25.6667H21C22.2833 25.6667 23.3333 24.6167 23.3333 23.3334V17.5L21 15.1667ZM19.25 21H6.41665L9.62498 16.8817L11.9116 19.635L15.12 15.505L19.25 21ZM22.5166 10.3717C23.03 9.55504 23.3333 8.61004 23.3333 7.58337C23.3333 4.67837 20.9883 2.33337 18.0833 2.33337C15.1783 2.33337 12.8333 4.67837 12.8333 7.58337C12.8333 10.4884 15.1783 12.8334 18.0716 12.8334C19.0983 12.8334 20.055 12.53 20.86 12.0167L24.5 15.6567L26.1566 14L22.5166 10.3717ZM18.0833 10.5C17.3098 10.5 16.5679 10.1927 16.0209 9.64577C15.4739 9.09879 15.1666 8.35692 15.1666 7.58337C15.1666 6.80983 15.4739 6.06796 16.0209 5.52098C16.5679 4.974 17.3098 4.66671 18.0833 4.66671C18.8569 4.66671 19.5987 4.974 20.1457 5.52098C20.6927 6.06796 21 6.80983 21 7.58337C21 8.35692 20.6927 9.09879 20.1457 9.64577C19.5987 10.1927 18.8569 10.5 18.0833 10.5Z\" fill=\"#00A3FF\"/>\r\n </svg> \r\n </div> -->\r\n <div class=\"d-grid\">\r\n <div class=\"card-label ms-2\"><span *ngIf=\"filedetails?.type\">{{filedetails?.type ? filedetails?.type :\r\n ''}}</span>\r\n </div>\r\n <div *ngIf=\"filedetails\" class=\"sub-text mt-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_14508_18583)\">\r\n <path\r\n d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\"\r\n stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_14508_18583\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{totalfile ? totalfile : 0}} After Count</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align align-items-center gap-2\">\r\n <div class=\"border border-1 rounded-3 w-auto h-45px px-2 d-flex justify-content-between align-items-center\"\r\n *ngFor=\"let item of category\">\r\n <div class=\"h-100 align-content-center text-nowrap fw-semibold cursor-pointer mx-2\" (click)=\"viewcategory(item)\">\r\n <span class=\"badge badge-light-primary me-2\">{{item?.count}}</span>{{item?.name}}<span class=\" ms-3 badge badge-light-primary me-5 text-capitalize\">{{item?.key}}</span></div> \r\n </div>\r\n <!-- <div class=\"border border-1 rounded-3 w-auto h-45px px-4 d-flex justify-content-between align-items-center\">\r\n <div class=\"px-5 h-100 align-content-center text fw-semibold pe-none\"><span\r\n class=\"badge badge-light-primary me-5\">{{auditmappingdata?.length ? auditmappingdata?.length : 0\r\n }}</span>Unique Customers</div>\r\n </div> -->\r\n <div *ngIf=\"!auditLoading && !Nodata\" class=\"card-toolbar text-nowrap ms-5\">\r\n <button type=\"button\" class=\"btn btn-sm btn-default btn-outline ms-3 py-2\"\r\n [disabled]=\"!employeecount && !junkcount && (auditmappingdata?.length === totalfile)\"\r\n (click)=\"savedraft()\">Save Draft</button>\r\n <button type=\"submit\" class=\"btn btn-sm btn-primary py-2 ms-3\" [disabled]=\"submitted\"\r\n (click)=\"Reviewdata()\">Review <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\"\r\n stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- scroll-top -->\r\n<div class=\"card mt-5\">\r\n <div class=\"card-body\">\r\n <div class=\"row\">\r\n <div *ngIf=\"auditLoading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"Nodata\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- scroll-y h-500px -->\r\n <div *ngIf=\"!auditLoading\" class=\"col-md-12 item \">\r\n\r\n <div class=\"item\" *ngFor=\"let item of auditmappingdata;let i=index\" style=\"padding: 5px 10px;\">\r\n\r\n <img class=\"mx-3 my-3 img\" [src]=\"item?.img_path\" id=\"{{item?.img_name}}\" alt=\"Image\"\r\n (dragover)=\"allowDrop($event)\" (drop)=\"dropImage($event)\" draggable=\"true\"\r\n (dragstart)=\"dragImage($event)\" (click)=\"toggleImage(item?.img_name )\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item?.img_name}}</div>\r\n\r\n <span *ngIf=\"item?.selected\" class=\"notify-badge1\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i></span>\r\n <!-- (click)=\"removeaudit(item)\" -->\r\n <span class=\"notify-badge cursor-pointer\" (click)=\"removeaudit(item)\" *ngIf=\"item?.count>1\">{{item?.count}}</span>\r\n </div>\r\n\r\n <ngx-spinner size=\"medium\" type=\"ball-atom\"></ngx-spinner>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n <div class=\"card h-auto p-10\">\r\n <div class=\"card-header d-grid p-0 border-0\">\r\n <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span> -->\r\n <div class=\"card-label mt-5\">Save Changes</div>\r\n <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <p class=\"text-sub mt-5\">Do you want to draft the file?</p>\r\n <!-- <p *ngIf=\"getBack\" class=\"text-sub mt-5\">Do you want to get back?</p> -->\r\n <textarea class=\"form-control mt-5\" [(ngModel)]=\"datareason\"\r\n placeholder=\"Type your reason (Required) ...\"></textarea>\r\n <div class=\"w-100 d-flex mt-10\">\r\n <button class=\"btn btn-outline w-50 me-2 fw-bold\" [disabled]=\"!datareason\"\r\n (click)=\"modal.close('isConfirmed')\">Save & Exit</button>\r\n <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isDenied')\">save &\r\n Continue</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #confirmerror let-modal>\r\n <div class=\"w-400px h-auto p-10 card\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-label\">{{Errormsg}}</div>\r\n </div>\r\n <div class=\"card-body mt-5\">\r\n <div class=\"w-100 d-flex mt-10\">\r\n <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Confirm</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".border{border:1px solid var(--Gray-300, #D0D5DD)!important;border-radius:8px;border:1px solid #D0D5DD;background:#fff;box-shadow:0 1px 2px #1018280d}.border-end{border-right:1px solid var(--Gray-300, #D0D5DD)!important}.text{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}textarea:focus,textarea:active{box-shadow:none!important}a{color:var(--Primary-700, #009BF3)!important;font-family:Inter;font-size:14px;font-style:normal;font-weight:600!important;line-height:20px;text-decoration-line:underline}.arrow-code{width:6.38px;height:10px;color:#3f4254}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.butn:hover{color:#009ef7!important}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.btn-check:checked+.btn.btn-light-primary,.btn-check:active+.btn.btn-light-primary,.btn.btn-light-primary:focus:not(.btn-active),.btn.btn-light-primary:hover:not(.btn-active),.btn.btn-light-primary:active:not(.btn-active),.btn.btn-light-primary.active,.btn.btn-light-primary.show,.show>.btn.btn-light-primary{background-color:#fff!important}.card .card-header{min-height:51px!important}.img{width:85px;height:200px}.card-label{font-family:Inter;font-style:normal;color:var(--Gray-900, #101828)!important;font-size:18px!important;font-weight:600!important;line-height:30px}.item{position:relative;padding-top:10px;display:inline-block}.notify-badge{position:absolute;right:4px;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:var(--Primary-600, #00A3FF);border:2px solid var(--Primary-600, #00A3FF);padding:5px 10px;font-size:15px}.notify-badge1{position:absolute;right:14px;top:10px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;border:2px solid var(--Primary-600, #00A3FF);color:var(--Primary-600, #00A3FF);padding:0 7px;font-size:19px}.fixed,.nofixed{position:fixed;width:86%;z-index:1}.scroll-top{margin-top:150px!important}.loader1{width:90px;height:90px;margin-left:580px}.scroll-y{overflow-y:auto!important;position:relative!important}.text-sub{color:var(--Gray-500, #667085);font-size:14px;font-weight:400;line-height:20px}.savebtn{padding:10px 18px;border-radius:8px;border:1px solid var(--Primary-600, #00A3FF);background:var(--Primary-600, #00A3FF);box-shadow:0 1px 2px #1018280d;font-size:16px;font-weight:600;line-height:24px}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.border-1{border:1px solid var(--Gray-300, #D0D5DD)!important;box-shadow:0 1px 2px #1018280d!important}.w-40px{padding:8px!important}.h-45px{height:39px!important}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}.overflow{overflow-x:auto}\n"] }]
6173
+ }], ctorParameters: () => [{ type: ExcelService }, { type: AuditService }, { type: i4.ToastService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }, { type: i1$2.NgbModal }, { type: TimerService }, { type: i7.NgxSpinnerService }, { type: i2.ActivatedRoute }], propDecorators: { confirmDraft: [{
6174
+ type: ViewChild,
6175
+ args: ['confirmDraft']
6176
+ }], confirmerror: [{
6177
+ type: ViewChild,
6178
+ args: ['confirmerror']
6179
+ }], onScroll: [{
6180
+ type: HostListener,
6181
+ args: ["window:scroll", []]
6182
+ }], handleKeyPress: [{
6183
+ type: HostListener,
6184
+ args: ['window:keydown', ['$event']]
6185
+ }] } });
6186
+
6187
+ class AuditMappingListComponent {
6188
+ modalService;
6189
+ router;
6190
+ auditService;
6191
+ toastr;
6192
+ route;
6193
+ cd;
6194
+ timerService;
6195
+ totalfile = 0;
6196
+ customer = 0;
6197
+ junk = 0;
6198
+ employee = 0;
6199
+ currentValue = 0;
6200
+ showvalue = false;
6201
+ retggingpage = false;
6202
+ showvalue1 = false;
6203
+ junkimage = [];
6204
+ retagimage = [];
6205
+ submitvalue = true;
6206
+ auditmappingdata;
6207
+ customercount;
6208
+ auditLoading = true;
6209
+ selectedType;
6210
+ junkcount = 0;
6211
+ employeecount = 0;
6212
+ employeimage = [];
6213
+ filedetails;
6214
+ demographic;
6215
+ submitted = false;
6216
+ dummymapping;
6217
+ destroy$ = new Subject();
6218
+ timePassed = 0;
6219
+ subscription = null;
6220
+ formattedTime = '00:00:00';
6221
+ count;
6222
+ category = [];
6223
+ confirmDraft;
6224
+ constructor(modalService, router, auditService, toastr, route, cd, timerService) {
6225
+ this.modalService = modalService;
6226
+ this.router = router;
6227
+ this.auditService = auditService;
6228
+ this.toastr = toastr;
6229
+ this.route = route;
6230
+ this.cd = cd;
6231
+ this.timerService = timerService;
6232
+ this.selectedType = this.route.snapshot.paramMap.get('type');
6233
+ }
6234
+ ngOnInit() {
6235
+ this.getAuditConfig();
6236
+ // this.initial_data_loading();
6237
+ if (this.retagimage.length > 0) {
6238
+ this.showvalue = true;
6239
+ }
6240
+ this.setTimer();
6241
+ }
6242
+ getAuditConfig() {
6243
+ let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6244
+ this.auditService.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
6245
+ next: (res) => {
6246
+ if (res && res?.code == 200) {
6247
+ this.category = res.data.footfallDirectoryConfigs.taggingLimitation;
6248
+ // this.initial_data_loading()
6249
+ // this.saveDraftimg();
6250
+ this.getmappingdata();
6251
+ }
6252
+ }
6253
+ });
6254
+ }
6255
+ setTimer() {
6256
+ this.subscription = this.timerService.getTimePassed().subscribe(time => {
6257
+ this.timePassed = time;
6258
+ this.formattedTime = this.timerService.formatTime(time);
6259
+ this.cd.detectChanges();
6260
+ });
6261
+ this.timerService.startTimer();
6262
+ document.addEventListener('mousemove', this.handleGlobalMouseEvent);
6263
+ document.addEventListener('click', this.handleGlobalMouseEvent);
6264
+ document.addEventListener('mouseenter', this.handleGlobalMouseEvent);
6265
+ document.addEventListener('scroll', this.handleGlobalMouseEvent);
6266
+ }
6267
+ ngOnDestroy() {
6268
+ this.destroy$.next(true);
6269
+ this.destroy$.complete();
6270
+ document.removeEventListener('mousemove', this.handleGlobalMouseEvent);
6271
+ document.removeEventListener('click', this.handleGlobalMouseEvent);
6272
+ document.removeEventListener('mouseenter', this.handleGlobalMouseEvent);
6273
+ document.removeEventListener('scroll', this.handleGlobalMouseEvent);
6274
+ this.timerService.clearTimer();
6275
+ }
6276
+ handleGlobalMouseEvent = () => {
6277
+ this.timerService.startTimer();
6278
+ };
6279
+ initial_data_loading() {
6280
+ if ('audit' in sessionStorage) {
6281
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
6282
+ const decompressedData = LZString.decompress(stringifydata);
6283
+ var auditdata = JSON.parse(decompressedData || '{}');
6284
+ if (auditdata.length > 0) {
6285
+ this.auditmappingdata = auditdata;
6286
+ this.customercount = this.auditmappingdata.length;
6287
+ }
6288
+ else {
6289
+ this.auditmappingdata = [];
6290
+ this.customercount = 0;
6291
+ }
6292
+ this.demographic = this.auditmappingdata.filter((data) => data.demographic === 'd').length;
6293
+ }
6294
+ this.category.map((data) => {
6295
+ var count = JSON.parse(sessionStorage.getItem(data?.type) || '{}');
6296
+ data.count = count?.length;
6297
+ });
6298
+ if ('retag' in sessionStorage) {
6299
+ var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
6300
+ if (retagdata.length > 0) {
6301
+ this.retagimage = retagdata;
6302
+ }
6303
+ else {
6304
+ this.retagimage = [];
6305
+ if (this.retagimage.length == 0) {
6306
+ this.showvalue = false;
6307
+ }
6308
+ }
6309
+ }
6310
+ if ('totalfiles' in sessionStorage) {
6311
+ var files = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6312
+ this.totalfile = files?.totalfiles;
6313
+ this.filedetails = files?.filedetails;
6314
+ }
6315
+ }
6316
+ getmappingdata() {
6317
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6318
+ this.filedetails = totalfile?.filedetails;
6319
+ var payload = {
6320
+ storeId: totalfile?.filedetails?.storeId,
6321
+ fileDate: totalfile?.filedetails?.Date,
6322
+ auditId: totalfile?.auditId,
6323
+ };
6324
+ this.auditService.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
6325
+ next: (res) => {
6326
+ if (res && res?.code == 200) {
6327
+ this.auditLoading = false;
6328
+ this.category.map((data) => {
6329
+ let filterData = res?.data?.result?.draftedData?.filter((x) => x.type === data.type);
6330
+ data.value = filterData[0]?.value && filterData[0]?.value.length > 0 ? filterData[0]?.value : [];
6331
+ data.count = data?.value?.length;
6332
+ sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []));
6333
+ });
6334
+ let customerData = res?.data?.result?.draftedData?.filter((x) => x.type === 'customer');
6335
+ this.auditmappingdata = customerData[0]?.value;
6336
+ const jsonString = JSON.stringify(customerData[0]?.value);
6337
+ const compressedData = LZString.compress(jsonString);
6338
+ sessionStorage.setItem('audit', compressedData);
6339
+ var retagiamge = JSON.parse(sessionStorage.getItem('retag') || '[]');
6340
+ if (retagiamge.length > 0) {
6341
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
6342
+ const decompressedData = LZString.decompress(stringifydata);
6343
+ var customer = JSON.parse(decompressedData || '{}');
6344
+ customer = [...customer, ...retagiamge];
6345
+ const jsonString = JSON.stringify(customer);
6346
+ const compressedData = LZString.compress(jsonString);
6347
+ sessionStorage.setItem('audit', compressedData);
6348
+ }
6349
+ sessionStorage.removeItem('retag');
6350
+ this.retagimage = [];
6351
+ this.initial_data_loading();
6352
+ if (this.retagimage.length == 0) {
6353
+ this.showvalue = false;
6354
+ }
6355
+ }
6356
+ },
6357
+ error: (err) => {
6358
+ }
6359
+ });
6360
+ }
6361
+ redireact = false;
6362
+ backToTagging() {
6363
+ this.redireact = true;
6364
+ this.saveDraftimg();
6365
+ }
6366
+ changesdata() {
6367
+ var user = JSON.parse(localStorage.getItem('user-info') || '{}');
6368
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6369
+ var payload = {
6370
+ storeId: totalfile?.filedetails?.storeId,
6371
+ fileDate: totalfile?.filedetails?.Date,
6372
+ auditId: totalfile?.auditId,
6373
+ };
6374
+ this.auditService.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
6375
+ next: (res) => {
6376
+ if (res && res?.code == 200) {
6377
+ this.auditLoading = false;
6378
+ sessionStorage.removeItem('retag');
6379
+ this.retagimage = [];
6380
+ this.category.map((data) => {
6381
+ let filterData = res?.data?.result?.draftedData?.filter((x) => x.type === data.type);
6382
+ data.value = filterData[0]?.value && filterData[0]?.value.length > 0 ? filterData[0]?.value : [];
6383
+ data.count = data?.value?.length;
6384
+ sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []));
6385
+ });
6386
+ let customerData = res?.data?.result?.draftedData?.filter((x) => x.type === 'customer');
6387
+ this.auditmappingdata = customerData[0]?.value;
6388
+ const jsonString = JSON.stringify(customerData[0]?.value);
6389
+ const compressedData = LZString.compress(jsonString);
6390
+ sessionStorage.setItem('audit', compressedData);
6391
+ if (this.retagimage.length == 0) {
6392
+ this.showvalue = false;
6393
+ }
6394
+ this.router.navigate(["/manage/tickets/audit"]);
6395
+ }
6396
+ },
6397
+ error: (err) => {
6398
+ }
6399
+ });
6400
+ }
6401
+ ngOnChanges(changes) {
6402
+ if (changes['auditmappingdata']) {
6403
+ this.dummymapping = JSON.parse(JSON.stringify(changes['auditmappingdata'].currentValue));
6404
+ }
6405
+ }
6406
+ allowDrop(ev) {
6407
+ ev.preventDefault();
6408
+ }
6409
+ drag(ev) {
6410
+ ev.dataTransfer.setData("text/plain", ev.target.id);
6411
+ }
6412
+ dropforretag(ev) {
6413
+ ev.preventDefault();
6414
+ const draggedImageId = ev.dataTransfer.getData('text/plain');
6415
+ const draggedImage = document.getElementById(draggedImageId);
6416
+ this.showvalue = true;
6417
+ const htmltag = ev.dataTransfer.getData('text/html');
6418
+ var Name = getTagNameFromHTML(htmltag);
6419
+ if (Name != null && this.category.filter((data) => data?.type === Name)?.length > 0) {
6420
+ let imageData = JSON.parse(sessionStorage.getItem(Name) || '{}');
6421
+ var splicedvalue = imageData.splice(imageData.findIndex(({ img_id }) => img_id == draggedImageId), 1);
6422
+ this.category.map((data) => {
6423
+ if (data?.type == Name) {
6424
+ data.value = imageData;
6425
+ data.count = imageData.length;
6426
+ }
6427
+ });
6428
+ sessionStorage.setItem(Name, JSON.stringify(imageData));
6429
+ var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}');
6430
+ var newtag = [];
6431
+ if (Number(oldretag.length) > 0) {
6432
+ newtag = [...oldretag, ...splicedvalue];
6433
+ }
6434
+ else {
6435
+ newtag = splicedvalue;
6436
+ }
6437
+ this.retagimage = newtag;
6438
+ sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
6439
+ }
6440
+ else if (Name != null) {
6441
+ var insertIndex = this.auditmappingdata.findIndex(({ img_id }) => img_id == Name);
6442
+ var mainarray = this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_id }) => img_id == Name), 1);
6443
+ this.customercount = this.auditmappingdata?.length;
6444
+ if (mainarray?.length > 0 && mainarray[0].mappedid.length > 1) {
6445
+ var checkindex = mainarray[0].mappedid.findIndex(({ img_id }) => img_id == draggedImageId);
6446
+ var subarray = mainarray[0].mappedid.splice(mainarray[0].mappedid.findIndex(({ img_id }) => img_id == draggedImageId), 1);
6447
+ if (checkindex == 0) {
6448
+ mainarray[0].img_name = mainarray[0].mappedid[0].img_name;
6449
+ mainarray[0].img_id = mainarray[0].mappedid[0].img_id;
6450
+ mainarray[0].img_path = mainarray[0].mappedid[0].img_path;
6451
+ }
6452
+ mainarray[0].count = mainarray[0].count - 1;
6453
+ subarray[0].mappedid = [];
6454
+ let obj = {
6455
+ img_name: subarray[0].img_name,
6456
+ img_id: subarray[0].img_id,
6457
+ img_path: subarray[0].img_path
6458
+ };
6459
+ subarray[0].mappedid.push(obj);
6460
+ subarray[0].selected = false;
6461
+ subarray[0].dropped = false;
6462
+ subarray[0].demographic = '';
6463
+ subarray[0].count = 1;
6464
+ var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}');
6465
+ var newtag = [];
6466
+ if (Number(oldretag.length) > 0) {
6467
+ newtag = [...oldretag, ...subarray];
6468
+ }
6469
+ else {
6470
+ newtag = subarray;
6471
+ }
6472
+ this.retagimage = newtag;
6473
+ sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
6474
+ this.auditmappingdata.splice(insertIndex, 0, ...mainarray);
6475
+ const jsonString = JSON.stringify(this.auditmappingdata);
6476
+ const compressedData = LZString.compress(jsonString);
6477
+ sessionStorage.setItem('audit', compressedData);
6478
+ }
6479
+ else {
6480
+ var oldretag = JSON.parse(sessionStorage.getItem('retag') || '{}');
6481
+ var newtag = [];
6482
+ if (Number(oldretag.length) > 0) {
6483
+ newtag = [...oldretag, ...mainarray];
6484
+ }
6485
+ else {
6486
+ newtag = mainarray;
6487
+ }
6488
+ this.retagimage = newtag;
6489
+ sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
6490
+ const jsonString = JSON.stringify(this.auditmappingdata);
6491
+ const compressedData = LZString.compress(jsonString);
6492
+ sessionStorage.setItem('audit', compressedData);
6493
+ }
6494
+ }
6495
+ function getTagNameFromHTML(html) {
6496
+ var tempElement = document.createElement('div');
6497
+ tempElement.innerHTML = html;
6498
+ var firstChild = tempElement.firstChild;
6499
+ if (firstChild.hasAttribute('name')) {
6500
+ var namePropertyValue = firstChild.getAttribute('name');
6501
+ return namePropertyValue;
6502
+ }
6503
+ return null;
6504
+ }
6505
+ sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
6506
+ if ('retag' in sessionStorage) {
6507
+ var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
6508
+ this.retagimage = retagdata;
6509
+ }
6510
+ }
6511
+ removeimage(data) {
6512
+ var removed_img = this.retagimage.filter((ev) => ev.img_id == data.img_id);
6513
+ this.retagimage.splice(this.retagimage.findIndex(({ img_id }) => img_id == data.img_id), 1);
6514
+ this.auditmappingdata = [...this.auditmappingdata, ...removed_img];
6515
+ this.customercount = this.auditmappingdata?.length;
6516
+ if (!this.retagimage.length) {
6517
+ this.showvalue = false;
6518
+ }
6519
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
6520
+ const decompressedData = LZString.decompress(stringifydata);
6521
+ const completeDate = JSON.parse(decompressedData || '{}');
6522
+ const jsonString = JSON.stringify(this.auditmappingdata);
6523
+ const compressedData = LZString.compress(jsonString);
6524
+ sessionStorage.setItem('audit', compressedData);
6525
+ sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
6526
+ this.cd.detectChanges();
6527
+ }
6528
+ saveDraftimg() {
6529
+ this.submitted = true;
6530
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6531
+ this.timePassed = JSON.parse(sessionStorage.getItem('timeSpent') || '{}');
6532
+ if ('retag' in sessionStorage) {
6533
+ var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
6534
+ this.retagimage = retagdata;
6535
+ }
6536
+ let storedData = [
6537
+ {
6538
+ type: "customer",
6539
+ value: this.auditmappingdata ? this.auditmappingdata : [],
6540
+ }
6541
+ ];
6542
+ this.category.map((data) => {
6543
+ let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
6544
+ storedData.push({
6545
+ type: data.type,
6546
+ value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
6547
+ });
6548
+ });
6549
+ var inserobj = {
6550
+ storeId: totalfile?.filedetails?.storeId,
6551
+ fileDate: totalfile?.filedetails?.Date,
6552
+ auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails?.auditId,
6553
+ totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
6554
+ retagCount: this.retagimage.length,
6555
+ timeSpent: this.timePassed,
6556
+ retagImage: this.retagimage ? this.retagimage : []
6557
+ };
6558
+ this.auditService.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe(() => {
6559
+ if (!this.redireact) {
6560
+ this.submitted = false;
6561
+ this.getmappingdata();
6562
+ }
6563
+ else {
6564
+ this.changesdata();
6565
+ }
6566
+ });
6567
+ }
6568
+ taggingview() {
6569
+ this.submitted = true;
6570
+ var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
6571
+ this.showvalue = false;
6572
+ this.showvalue1 = true;
6573
+ this.retggingpage = true;
6574
+ let stringifydata = sessionStorage.getItem('audit') || '{}';
6575
+ const decompressedData = LZString.decompress(stringifydata);
6576
+ var customer = JSON.parse(decompressedData || '{}');
6577
+ let storedData = [
6578
+ {
6579
+ type: "customer",
6580
+ value: customer ? customer : [],
6581
+ }
6582
+ ];
6583
+ this.category.map((data) => {
6584
+ let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
6585
+ storedData.push({
6586
+ type: data.type,
6587
+ value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
6588
+ });
6589
+ });
6590
+ var inserobj = {
6591
+ storeId: totalfile?.filedetails?.store_id,
6592
+ fileDate: totalfile?.filedetails?.file_date,
6593
+ auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
6594
+ totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
6595
+ retagCount: this.retagimage.length,
6596
+ timeSpent: this.timePassed,
6597
+ retagImage: this.retagimage ? this.retagimage : []
6598
+ };
6599
+ this.auditService.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe(() => { this.submitted = false; });
6600
+ if ('retag' in sessionStorage) {
6601
+ var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
6602
+ this.retagimage = retagdata;
6603
+ }
6604
+ this.router.navigate(["/tickets/audit/retag-mapping", this.selectedType]);
6605
+ }
6606
+ // submitaudit() {
6607
+ // if(!this.demographic){
6608
+ // const modalRef = this.modalService.open(this.confirmDraft,{
6609
+ // centered:true,size:'md'
6610
+ // })
6611
+ // modalRef.result.then((result) =>{
6612
+ // if (result === 'isConfirmed') {
6613
+ // const modalRef = this.modalService.open(AuditReportPopupComponent, {
6614
+ // size: 'lg',
6615
+ // centered: true
6616
+ // })
6617
+ // modalRef.componentInstance.selectedType = this.selectedType;
6618
+ // }
6619
+ // })
6620
+ // } else{
6621
+ // const modalRef = this.modalService.open(AuditReportPopupComponent, {
6622
+ // size: 'lg',
6623
+ // centered: true
6624
+ // })
6625
+ // modalRef.componentInstance.selectedType = this.selectedType;
6626
+ // }
6627
+ // }
6628
+ setValue(i) {
6629
+ let index = 0;
6630
+ if (i > index) {
6631
+ return this.currentValue = this.currentValue + 1;
6632
+ }
6633
+ }
6634
+ currentGroupNumber = 0;
6635
+ getGroupNumber(obj) {
6636
+ if (obj.count > 1) {
6637
+ return ++this.currentGroupNumber;
6638
+ }
6639
+ return null;
6640
+ }
6641
+ resetGroupNumber() {
6642
+ this.currentGroupNumber = 0;
6643
+ }
6644
+ getFilteredData(count) {
6645
+ return this.auditmappingdata.filter((obj) => obj.count === count);
6646
+ }
6647
+ toggleImage(img_name) {
6648
+ this.auditmappingdata.map((data) => {
6649
+ if (data.img_name == img_name) {
6650
+ if (data.mappedid.length > 0) {
6651
+ data.demographic !== 'd' ? data.demographic = 'd' : data.demographic = '';
6652
+ }
6653
+ else {
6654
+ data.dropped = !data.dropped;
6655
+ }
6656
+ }
6657
+ });
6658
+ this.demographic = this.auditmappingdata.filter((data) => data.demographic === 'd').length;
6659
+ const jsonString = JSON.stringify(this.auditmappingdata);
6660
+ const compressedData = LZString.compress(jsonString);
6661
+ sessionStorage.setItem('audit', compressedData);
6662
+ }
6663
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditMappingListComponent, deps: [{ token: i1$2.NgbModal }, { token: i2.Router }, { token: AuditService }, { token: i4.ToastService }, { token: i2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: TimerService }], target: i0.ɵɵFactoryTarget.Component });
6664
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditMappingListComponent, selector: "lib-audit-mapping-list", viewQueries: [{ propertyName: "confirmDraft", first: true, predicate: ["confirmDraft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!auditLoading\" class=\"card\" >\r\n <div class=\"card-header\" >\r\n <div class=\"card-title\">\r\n <h3 class=\"flex-column\">\r\n <!-- <span class=\"card-label fw-bold\">{{filedetails?.queueName}}<span class=\"mx-3 arrow-code\"> - </span> -->\r\n <span>{{filedetails?.storeId}}</span>\r\n \r\n <span class=\"mx-3 arrow-code\"> - </span>\r\n <span >{{filedetails?.Date}}</span>\r\n <!-- <span class=\"mx-3 arrow-code\"> - </span>\r\n <span >{{filedetails?.type}}</span> -->\r\n <!-- </span> -->\r\n </h3>\r\n \r\n <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\" fill=\"black\"/>\r\n </svg></span>\r\n </div>\r\n <!-- <span *ngIf=\"demographic\" class=\"badge badge-light-success ms-3\">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->\r\n </div>\r\n\r\n <div class=\"card-toolbar \">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <a *ngIf=\"!showvalue1\" class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"changesdata()\"><span\r\n class=\"svg-icon svg-icon-primary svg-icon-2x\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span><span class=\"ms-3\">Back to Tagging</span></a>\r\n <button *ngIf=\"!showvalue\" class=\"btn btn-sm btn-primary py-2 mx-2\" >Submit\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=\"M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </button>\r\n \r\n <button *ngIf=\"showvalue\" class=\"btn btn-primary btn-sm py-2 mx-2\" [disabled]=\"submitted\" (click)=\"taggingview()\">Retag <span\r\n class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n \r\n</div>\r\n\r\n\r\n<div class=\"row\"> \r\n <div *ngIf=\"auditLoading\" class=\"card mt-5\">\r\n <div class=\"card-body\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n <!-- <h5 class=\"text-dark-600 fs-3 fw-bold text-center \">Loading Audit file......</h5> -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n <div class=\"card mt-5\">\r\n <div class=\"h-1000px\">\r\n <div ngbAccordion *ngFor=\"let item of category\">\r\n <div *ngIf=\"item?.count !==0\" class=\"mt-6\" ngbAccordionItem [collapsed]=\"!item?.count\">\r\n <div ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div>\r\n {{item?.name}} <span class=\"sub-text mt-2 ms-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_14508_18583)\">\r\n <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_14508_18583\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>{{item?.count}}</span>\r\n </span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n \r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"py-0\">\r\n <ng-template>\r\n <div class=\"h-auto\" (dragover)=\"allowDrop($event)\">\r\n <div class=\"col-md-12 item\" >\r\n <div class=\"item\" *ngFor=\"let obj of item?.value\" >\r\n <img draggable=\"true\" (dragstart)=\"drag($event)\" id=\"{{obj.img_id}}\" name=\"{{item.type}}\"\r\n class=\"my-3 mx-2 img\" [src]=\"obj.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n <div ngbAccordion>\r\n <div class=\"mt-6\" ngbAccordionItem [collapsed]=\"!(!junkcount && !employeecount)\">\r\n <div ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div>\r\n Unique Customer <span class=\"sub-text mt-2 ms-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15800_3911)\">\r\n <path d=\"M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15800_3911\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg> {{customercount}}</span>\r\n </span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n \r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"py-0\">\r\n <ng-template>\r\n <div>\r\n <div class=\"h-500\" (dragover)=\"allowDrop($event)\">\r\n <ng-container *ngIf=\"resetGroupNumber() === null\"></ng-container>\r\n <ng-container *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n <div *ngIf=\"obj?.count === 1\" class=\"item\">\r\n <div>\r\n <div *ngFor=\"let img of obj?.mappedid\">\r\n <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\" (click)=\"toggleImage(img?.img_name )\"\r\n id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"notify-badge2 w-25px h-25px cursor-pointer\" (click)=\"toggleImage(img?.img_name )\">\r\n </span>\r\n <span *ngIf=\"obj?.demographic === 'd'\" class=\"notify-badge\" (click)=\"toggleImage(img?.img_name )\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i></span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container class=\"mt-5\" *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n <div *ngIf=\"obj?.count > 1\" class=\"card-label mt-3\">Group {{ getGroupNumber(obj) }} <span class=\"sub-text mt-3 ms-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_14508_18583)\">\r\n <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_14508_18583\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>{{obj.count}}</span>\r\n </span> \r\n <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" style=\"padding:2px 10.5px !important\" (click)=\"toggleImage(obj?.img_name)\">\r\n </span>\r\n <span *ngIf=\"obj?.demographic === 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" (click)=\"toggleImage(obj?.img_name)\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i></span> Mark as demographic -->\r\n </div>\r\n <div *ngIf=\"obj.count > 1\" class=\"item\">\r\n <div>\r\n <div *ngFor=\"let img of obj?.mappedid\" class=\"item\">\r\n <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\"\r\n id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n <div class=\"card mt-5\">\r\n <!-- (change)=\"imagearray()\" -->\r\n <div class=\"card-body h-1000px\" (drop)=\"dropforretag($event)\" (dragover)=\"allowDrop($event)\" >\r\n <div class=\"card-label fw-bold text-dark mb-5\">Images for Retagging</div>\r\n <div class=\"col-md-12 item\" >\r\n <div class=\"item\" *ngFor=\"let item of retagimage\">\r\n <img [src]=\"item.img_path\" class=\"my-2 mx-4 img-ret\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n <div class=\"card h-auto p-10\">\r\n <div class=\"card-header d-grid p-0 border-0\">\r\n <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span> -->\r\n <div class=\"card-label mt-5\">Do you want to submit your changes without demographic?</div>\r\n <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"w-100 d-flex mt-10\">\r\n <button class=\"btn btn-outline w-50 me-2 fw-bold\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Ok</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".img{width:90px;height:200px}.card-label{font-family:Inter;font-style:normal;font-weight:600!important;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:8px;font-size:20px}.notify-badge{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 5px;font-size:15px;width:25px;height:25px}.kid-badge{background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:2px 4px;font-size:15px;width:25px;height:25px}.nav-menu{position:sticky;position:-webkit-sticky;top:0}.notify-badge1{position:absolute;right:8px;top:4px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:1px 5px 0;font-size:15px;width:25px;height:25px}.notify-badge2{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:0 8px;font-size:20px}.loader1{width:90px;height:90px;margin-left:580px}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.mapping-height{min-height:auto;max-height:1000px}.mapping-height .h-100{height:96%!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }] });
6665
+ }
6666
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditMappingListComponent, decorators: [{
6667
+ type: Component,
6668
+ args: [{ selector: 'lib-audit-mapping-list', template: "<div *ngIf=\"!auditLoading\" class=\"card\" >\r\n <div class=\"card-header\" >\r\n <div class=\"card-title\">\r\n <h3 class=\"flex-column\">\r\n <!-- <span class=\"card-label fw-bold\">{{filedetails?.queueName}}<span class=\"mx-3 arrow-code\"> - </span> -->\r\n <span>{{filedetails?.storeId}}</span>\r\n \r\n <span class=\"mx-3 arrow-code\"> - </span>\r\n <span >{{filedetails?.Date}}</span>\r\n <!-- <span class=\"mx-3 arrow-code\"> - </span>\r\n <span >{{filedetails?.type}}</span> -->\r\n <!-- </span> -->\r\n </h3>\r\n \r\n <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\" fill=\"black\"/>\r\n </svg></span>\r\n </div>\r\n <!-- <span *ngIf=\"demographic\" class=\"badge badge-light-success ms-3\">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->\r\n </div>\r\n\r\n <div class=\"card-toolbar \">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <a *ngIf=\"!showvalue1\" class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"changesdata()\"><span\r\n class=\"svg-icon svg-icon-primary svg-icon-2x\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span><span class=\"ms-3\">Back to Tagging</span></a>\r\n <button *ngIf=\"!showvalue\" class=\"btn btn-sm btn-primary py-2 mx-2\" >Submit\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=\"M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </button>\r\n \r\n <button *ngIf=\"showvalue\" class=\"btn btn-primary btn-sm py-2 mx-2\" [disabled]=\"submitted\" (click)=\"taggingview()\">Retag <span\r\n class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n \r\n</div>\r\n\r\n\r\n<div class=\"row\"> \r\n <div *ngIf=\"auditLoading\" class=\"card mt-5\">\r\n <div class=\"card-body\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div> \r\n </div>\r\n <!-- <h5 class=\"text-dark-600 fs-3 fw-bold text-center \">Loading Audit file......</h5> -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n <div class=\"card mt-5\">\r\n <div class=\"h-1000px\">\r\n <div ngbAccordion *ngFor=\"let item of category\">\r\n <div *ngIf=\"item?.count !==0\" class=\"mt-6\" ngbAccordionItem [collapsed]=\"!item?.count\">\r\n <div ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div>\r\n {{item?.name}} <span class=\"sub-text mt-2 ms-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_14508_18583)\">\r\n <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_14508_18583\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>{{item?.count}}</span>\r\n </span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n \r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"py-0\">\r\n <ng-template>\r\n <div class=\"h-auto\" (dragover)=\"allowDrop($event)\">\r\n <div class=\"col-md-12 item\" >\r\n <div class=\"item\" *ngFor=\"let obj of item?.value\" >\r\n <img draggable=\"true\" (dragstart)=\"drag($event)\" id=\"{{obj.img_id}}\" name=\"{{item.type}}\"\r\n class=\"my-3 mx-2 img\" [src]=\"obj.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n <div ngbAccordion>\r\n <div class=\"mt-6\" ngbAccordionItem [collapsed]=\"!(!junkcount && !employeecount)\">\r\n <div ngbAccordionHeader>\r\n <button class=\"mainheading\" ngbAccordionButton>\r\n <div>\r\n Unique Customer <span class=\"sub-text mt-2 ms-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_15800_3911)\">\r\n <path d=\"M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_15800_3911\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg> {{customercount}}</span>\r\n </span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n </button>\r\n </div>\r\n \r\n <div ngbAccordionCollapse>\r\n <div ngbAccordionBody class=\"py-0\">\r\n <ng-template>\r\n <div>\r\n <div class=\"h-500\" (dragover)=\"allowDrop($event)\">\r\n <ng-container *ngIf=\"resetGroupNumber() === null\"></ng-container>\r\n <ng-container *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n <div *ngIf=\"obj?.count === 1\" class=\"item\">\r\n <div>\r\n <div *ngFor=\"let img of obj?.mappedid\">\r\n <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\" (click)=\"toggleImage(img?.img_name )\"\r\n id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"notify-badge2 w-25px h-25px cursor-pointer\" (click)=\"toggleImage(img?.img_name )\">\r\n </span>\r\n <span *ngIf=\"obj?.demographic === 'd'\" class=\"notify-badge\" (click)=\"toggleImage(img?.img_name )\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i></span> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container class=\"mt-5\" *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n <div *ngIf=\"obj?.count > 1\" class=\"card-label mt-3\">Group {{ getGroupNumber(obj) }} <span class=\"sub-text mt-3 ms-2\">\r\n <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_14508_18583)\">\r\n <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_14508_18583\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n </clipPath>\r\n </defs>\r\n </svg>{{obj.count}}</span>\r\n </span> \r\n <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" style=\"padding:2px 10.5px !important\" (click)=\"toggleImage(obj?.img_name)\">\r\n </span>\r\n <span *ngIf=\"obj?.demographic === 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" (click)=\"toggleImage(obj?.img_name)\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i></span> Mark as demographic -->\r\n </div>\r\n <div *ngIf=\"obj.count > 1\" class=\"item\">\r\n <div>\r\n <div *ngFor=\"let img of obj?.mappedid\" class=\"item\">\r\n <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\"\r\n id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n <div class=\"card mt-5\">\r\n <!-- (change)=\"imagearray()\" -->\r\n <div class=\"card-body h-1000px\" (drop)=\"dropforretag($event)\" (dragover)=\"allowDrop($event)\" >\r\n <div class=\"card-label fw-bold text-dark mb-5\">Images for Retagging</div>\r\n <div class=\"col-md-12 item\" >\r\n <div class=\"item\" *ngFor=\"let item of retagimage\">\r\n <img [src]=\"item.img_path\" class=\"my-2 mx-4 img-ret\">\r\n <div class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n style=\"font-size:15px;color:#00A3FF\"></i>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n <div class=\"card h-auto p-10\">\r\n <div class=\"card-header d-grid p-0 border-0\">\r\n <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span> -->\r\n <div class=\"card-label mt-5\">Do you want to submit your changes without demographic?</div>\r\n <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"w-100 d-flex mt-10\">\r\n <button class=\"btn btn-outline w-50 me-2 fw-bold\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Ok</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".img{width:90px;height:200px}.card-label{font-family:Inter;font-style:normal;font-weight:600!important;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:8px;font-size:20px}.notify-badge{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 5px;font-size:15px;width:25px;height:25px}.kid-badge{background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:2px 4px;font-size:15px;width:25px;height:25px}.nav-menu{position:sticky;position:-webkit-sticky;top:0}.notify-badge1{position:absolute;right:8px;top:4px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:1px 5px 0;font-size:15px;width:25px;height:25px}.notify-badge2{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:0 8px;font-size:20px}.loader1{width:90px;height:90px;margin-left:580px}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.mapping-height{min-height:auto;max-height:1000px}.mapping-height .h-100{height:96%!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"] }]
6669
+ }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i2.Router }, { type: AuditService }, { type: i4.ToastService }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: TimerService }], propDecorators: { confirmDraft: [{
6670
+ type: ViewChild,
6671
+ args: ['confirmDraft']
6672
+ }] } });
6673
+
4993
6674
  const routes = [
4994
6675
  {
4995
6676
  path: '',
@@ -4998,6 +6679,14 @@ const routes = [
4998
6679
  {
4999
6680
  path: 'list',
5000
6681
  component: FootfallDicviewComponent
6682
+ },
6683
+ {
6684
+ path: "audit",
6685
+ component: StartAuditComponent
6686
+ },
6687
+ {
6688
+ path: "mapping-list",
6689
+ component: AuditMappingListComponent
5001
6690
  }
5002
6691
  ];
5003
6692
  class TangoManageTicketsRoutingModule {
@@ -5068,6 +6757,10 @@ class TangoManageTicketsModule {
5068
6757
  ReactiveSelectComponent,
5069
6758
  GroupSelectComponent,
5070
6759
  FootfallDicviewComponent,
6760
+ AuditMappingListComponent,
6761
+ StartAuditComponent,
6762
+ ViewcategoryComponent,
6763
+ RemoveAuditComponent,
5071
6764
  TicketFootfallNewComponent,
5072
6765
  FootfallPopupComponent,
5073
6766
  FilterOptionsComponent], imports: [CommonModule,
@@ -5075,13 +6768,17 @@ class TangoManageTicketsModule {
5075
6768
  FormsModule,
5076
6769
  ReactiveFormsModule,
5077
6770
  CommonSharedModule,
5078
- NgxDaterangepickerMd] });
6771
+ NgxDaterangepickerMd,
6772
+ NgbAccordionModule,
6773
+ NgxSpinnerModule] });
5079
6774
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageTicketsModule, imports: [CommonModule,
5080
6775
  TangoManageTicketsRoutingModule,
5081
6776
  FormsModule,
5082
6777
  ReactiveFormsModule,
5083
6778
  CommonSharedModule,
5084
- NgxDaterangepickerMd] });
6779
+ NgxDaterangepickerMd,
6780
+ NgbAccordionModule,
6781
+ NgxSpinnerModule] });
5085
6782
  }
5086
6783
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageTicketsModule, decorators: [{
5087
6784
  type: NgModule,
@@ -5093,6 +6790,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
5093
6790
  ReactiveSelectComponent,
5094
6791
  GroupSelectComponent,
5095
6792
  FootfallDicviewComponent,
6793
+ AuditMappingListComponent,
6794
+ StartAuditComponent,
6795
+ ViewcategoryComponent,
6796
+ RemoveAuditComponent,
5096
6797
  TicketFootfallNewComponent,
5097
6798
  FootfallPopupComponent,
5098
6799
  FilterOptionsComponent,
@@ -5104,6 +6805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
5104
6805
  ReactiveFormsModule,
5105
6806
  CommonSharedModule,
5106
6807
  NgxDaterangepickerMd,
6808
+ NgbAccordionModule,
6809
+ NgxSpinnerModule,
5107
6810
  ]
5108
6811
  }]
5109
6812
  }] });