tango-app-ui-manage-tickets 3.7.0-beta.81 → 3.7.0-beta.83
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.
- package/esm2022/lib/components/audit-report-popup/audit-report-popup.component.mjs +5 -3
- package/esm2022/lib/components/ticket-footfall-new/ticket-footfall-new.component.mjs +10 -7
- package/esm2022/lib/components/ticketclosepopup/ticketclosepopup.component.mjs +2 -2
- package/fesm2022/tango-app-ui-manage-tickets.mjs +14 -9
- package/fesm2022/tango-app-ui-manage-tickets.mjs.map +1 -1
- package/lib/components/audit-report-popup/audit-report-popup.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3136,7 +3136,7 @@ class TicketclosepopupComponent {
|
|
|
3136
3136
|
console.log("🚀 ~ TicketclosepopupComponent ~ tangoTicket:", this.tangoTicket);
|
|
3137
3137
|
console.log("🚀 ~ TicketclosepopupComponent ~ storeTicket:", this.storeTicket);
|
|
3138
3138
|
if (this.storeTicket && this.storeTicket?.mappingInfo.length > 0) {
|
|
3139
|
-
this.centralOpsData = this.storeTicket.mappingInfo.filter((data) => data.type != "tangoreview")
|
|
3139
|
+
this.centralOpsData = this.storeTicket.mappingInfo.filter((data) => data.type != "tangoreview").at(-1);
|
|
3140
3140
|
console.log("🚀 ~ TicketclosepopupComponent ~ ngOnInit ~ this.centralOpsData:", this.centralOpsData);
|
|
3141
3141
|
}
|
|
3142
3142
|
if (this.tangoTicket && this.tangoTicket?.mappingInfo.length > 0) {
|
|
@@ -4696,6 +4696,7 @@ class TicketFootfallNewComponent {
|
|
|
4696
4696
|
modalRef.componentInstance.storeTicket =
|
|
4697
4697
|
findstoreticket[0]._source;
|
|
4698
4698
|
modalRef.result.then((result) => {
|
|
4699
|
+
console.log("🚀 ~ TicketFootfallNewComponent ~ startAudit ~ result.type:", result.type);
|
|
4699
4700
|
if (result.type === "merge") {
|
|
4700
4701
|
let obj = findTangoticket[0]?._source;
|
|
4701
4702
|
if (obj && obj?.mappingInfo.length > 0) {
|
|
@@ -4720,15 +4721,17 @@ class TicketFootfallNewComponent {
|
|
|
4720
4721
|
.subscribe({
|
|
4721
4722
|
next: (res) => {
|
|
4722
4723
|
if (res && res?.code === 200) {
|
|
4723
|
-
this.
|
|
4724
|
-
|
|
4725
|
-
|
|
4724
|
+
this.ts.getSuccessToast("Ticket Merged Successfully");
|
|
4725
|
+
this.dataStoreView({ ticketId: this.ticketId });
|
|
4726
|
+
// this.router.navigate(["/manage/tickets"], {
|
|
4727
|
+
// queryParams: { type: "footfall" },
|
|
4728
|
+
// });
|
|
4726
4729
|
}
|
|
4727
4730
|
},
|
|
4728
4731
|
});
|
|
4729
4732
|
}
|
|
4730
4733
|
}
|
|
4731
|
-
else if (result.type == "") {
|
|
4734
|
+
else if (result.type == "start") {
|
|
4732
4735
|
const data = {
|
|
4733
4736
|
totalfiles: this.ticketData?.footfall,
|
|
4734
4737
|
filedetails: {
|
|
@@ -6441,11 +6444,11 @@ class TicketFootfallNewComponent {
|
|
|
6441
6444
|
}
|
|
6442
6445
|
}
|
|
6443
6446
|
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: i1$3.FormBuilder }, { token: i2.Router }, { token: AuditService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6444
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFootfallNewComponent, selector: "lib-ticket-footfall-new", outputs: { filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "internalticket", first: true, predicate: ["internalticket"], descendants: true }, { propertyName: "closeacuuracyissue", first: true, predicate: ["closeacuuracyissue"], descendants: true }, { propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }, { propertyName: "imagePreviewPopup", first: true, predicate: ["imagePreviewPopup"], descendants: true }, { propertyName: "ReassignTicketPopup", first: true, predicate: ["ReassignTicketPopup"], descendants: true }, { propertyName: "closeMultiplePopup", first: true, predicate: ["closeMultiplePopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <ul *ngIf=\"usersDetails?.userType === 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul>\r\n <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <!-- Approver tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n Approver\r\n </a>\r\n </li>\r\n\r\n <!-- Reviewer tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n Reviewer\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"mb-3 col-md-12\">\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 *ngIf=\"getFootfallSummaryData?.averageAccuracyOverAll !== null &&\r\n getFootfallSummaryData?.averageAccuracyOverAll !== undefined\" 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 *ngIf=\"getFootfallSummaryData?.openTickets !== null &&\r\n getFootfallSummaryData?.openTickets !== undefined\" class=\"col-auto my-3 me-auto\">\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 <ng-container *ngIf=\"tangoType !=='internal'\">\r\n <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col-auto my-3 mx-auto\">\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 </ng-container>\r\n <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n getFootfallSummaryData?.inprogress !== undefined\" class=\"col-auto my-3 mx-auto\">\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 \r\n <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n getFootfallSummaryData?.dueToday !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 style=\"color:#DC6803 !important\" class=\"card-title\">{{ getFootfallSummaryData?.dueToday\r\n !== null ?\r\n getFootfallSummaryData?.dueToday : '--' }}</h5>\r\n <span class=\"card-title-sub-header\" style=\"color:#DC6803 !important\">Due today</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.Expired !== null &&\r\n getFootfallSummaryData?.Expired !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.Expired !== null ?\r\n getFootfallSummaryData?.Expired : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Expired</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.underTangoReview !== null &&\r\n getFootfallSummaryData?.underTangoReview !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.underTangoReview !== null ?\r\n getFootfallSummaryData?.underTangoReview : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Under tango review</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n getFootfallSummaryData?.closedTickets !== undefined\" class=\"col-auto my-3 ms-auto\">\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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyAbove !== null &&\r\n getFootfallSummaryData?.ticketAccuracyAbove !== undefined\" 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</div>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgTicket !== null &&\r\n getFootfallSummaryData?.avgTicket !== undefined\" class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.avgTicket !== null ?\r\n getFootfallSummaryData?.avgTicket : '--' }}</h5>\r\n <div class=\"sub-header\">Average ticket %</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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyBelow !== null &&\r\n getFootfallSummaryData?.ticketAccuracyBelow !== undefined\"\r\n 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgAccuracy !== null &&\r\n getFootfallSummaryData?.avgAccuracy !== undefined\" class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.avgAccuracy !== null ?\r\n getFootfallSummaryData?.avgAccuracy : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Average accuracy%</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\" *ngIf=\"tangoType==='store'\"><span\r\n *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span\r\n *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below\r\n {{clientData?.tangoReview ? clientData?.tangoReview:'85%'}} </span><span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <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\r\n {{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 <!-- <section *ngIf=\"!loading && !noData\"> -->\r\n <button type=\"button\" (click)=\"filterPanel.open(); $event.stopPropagation()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-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>Filter\r\n\r\n </button>\r\n <lib-ticket-filter-panel #filterPanel [client]=\"headerFilters?.client\" [tab]=\"tangoType\"\r\n [permissionType]=\"permissionType\" [userType]=\"usersDetails?.userType\"\r\n (panelClosed)=\"onFilterPanelClosed()\" (apply)=\"onFilterApply($event)\">\r\n </lib-ticket-filter-panel>\r\n <!-- </section> -->\r\n <button type=\"button\" *ngIf=\"!loading && !noData\" (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 <button\r\n class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\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\" *ngIf=\"!loading && !noData\">\r\n <table class=\"table custom-table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <!-- NEW: checkbox column for approver only -->\r\n <th\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [checked]=\"areAllSelectableRowsSelected()\"\r\n (change)=\"toggleSelectAllRows($event)\" />\r\n </th>\r\n\r\n <th *ngFor=\"let col of tableColumns\"\r\n [class.cursor-pointer]=\"col.sortable && col.subtype !== 'store'\"\r\n (click)=\"col.sortable && col.subtype !== 'store' && onSort(col.key)\">\r\n {{ col.label }}\r\n\r\n <svg *ngIf=\"col.sortable && col.subtype !== 'store'\"\r\n [ngClass]=\"sortedColumn === col.key && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.333V12.667L12.667 8 8 12.667 3.333 8\"\r\n [attr.stroke]=\"sortedColumn === col.key ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let row of footfallListData\">\r\n <!-- NEW: per-row checkbox (approver only) -->\r\n <td\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [disabled]=\"!isRowSelectable(row)\" [checked]=\"isRowSelected(row)\"\r\n [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n (change)=\"toggleRowSelection(row, $event)\" />\r\n </td>\r\n\r\n <td *ngFor=\"let col of tableColumns\">\r\n <!-- Store + ticket clickable -->\r\n <ng-container *ngIf=\"col.subtype === 'store'\">\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(row)\">\r\n {{ row.ticketId }}\r\n </div>\r\n <div class=\"pt-2\">{{ row.storeName }}</div>\r\n </ng-container>\r\n\r\n <!-- Date -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'date' || col.subtype === 'ticketRaised'\">\r\n {{ row[col.key] | date: 'dd MMM, yyyy' }}\r\n </ng-container>\r\n\r\n <!-- Status -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'status'\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(row[col.key])\">\r\n {{ row[col.key] | titlecase }}\r\n </span>\r\n </ng-container>\r\n\r\n <!-- Default Text -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'text'\">\r\n {{ row[col.key] ?? '--' }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\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 *ngIf=\"loading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </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 </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\"\r\n [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'd-none' : 'col-md-3 h-100'\">\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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n 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><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-12\">\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 *ngIf=\"openTicketsList.length\" class=\"text-end text-nowrp ms-3 my-2\">\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary text-nowrap mx-2\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\r\n </button>\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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2\" [checked]=\"newallSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select <span\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all\r\n {{ storeCount }}</span> 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 *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\"\r\n class=\"me-1\">Reviewer(%)</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\"\r\n class=\"me-1\">Accuracy(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span (click)=\"onSortClick()\" class=\"sort-arrow cursor-pointer\"><svg\r\n [ngClass]=\"sortOpen === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 <ul *ngIf=\"openTicketsList?.length\" class=\"list-unstyled h-800px overflow-auto ps-0\">\r\n <li *ngFor=\"let store of openTicketsList\" 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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\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\"\r\n 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>\r\n <div [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 h-auto\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"this.usersDetails.userType !=='tango'\" class=\"cursor-pointer\"><span\r\n *ngIf=\"isCollapsed\" (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\" [ngClass]=\"isCollapsed ? 'ms-10' : 'ms-0'\">Footfall\r\n Directory</span>\r\n </div>\r\n <div *ngIf=\"this.usersDetails.userType ==='tango'\" class=\"cursor-pointer\"><span\r\n (click)=\"backToNavigation()\" 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-10\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar py-0\">\r\n <!-- Start Review -->\r\n <section *ngIf=\"usersDetails?.userType !=='tango'\">\r\n <span\r\n *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || statusVal?.status === 'Open')\">\r\n\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n Start Review\r\n </button>\r\n </span>\r\n <!-- <section *ngIf=\"\r\n (hasReviewerAccess && selectedRole === 'reviewer') ||\r\n (hasApproverAccess && selectedRole === 'approver')\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section> -->\r\n <section *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email) ||\r\n (hasApproverAccess && selectedRole === 'approver'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\"\r\n class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section>\r\n </section>\r\n <!-- {{statusVal?.type}}{{statusVal?.status}} -->\r\n <span\r\n *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||\r\n usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='Open'||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start Audit</button>\r\n </span>\r\n\r\n <span\r\n *ngIf=\"this.tangoType === 'store'&&usersDetails?.userType ==='tango'&&statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n <span *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\">\r\n <span *ngIf=\"closeBtn\" class=\"ticket-actions-wrapper\"\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" 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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" 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\">{{footfallTicketsData[0]?._source?.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\">{{footfallTicketsData[0]?._source?.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\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n {{ getHeaderStatus() | titlecase }}\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"dueDate\" class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div *ngIf=\"dueDate\" class=\"col-1 font-bold my-2\">:</div>\r\n <div *ngIf=\"dueDate\" class=\"col-3 card-title-value my-2\">{{dueDate ? (dueDate | date:'dd MMM yyyy') :''}}</div>\r\n </div>\r\n <div class=\"accuracy-panel\" *ngIf=\"getHeaderStatus()==='Open - Accuracy Issue'\">\r\n <!-- Title + badge -->\r\n <div class=\" accuracy-header\">\r\n <span class=\"badge badge-light-blue px-3 py-2 badge-light-blue\">Accuracy issue</span>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"info-line mb-3\">\r\n <i class=\"bi bi-info-circle-fill me-2\"></i>\r\n Please review and determine the root cause of the low accuracy.\r\n </p>\r\n\r\n <!-- Form area -->\r\n <div class=\"row gx-3\">\r\n <!-- Column for select and +Add -->\r\n <div class=\"col-12 col-md-4\">\r\n <div class=\"form-small\">\r\n <label class=\"visually-hidden\" for=\"issueSelect\">Select issue</label>\r\n <select id=\"issueSelect\" class=\"form-select form-select-sm\"\r\n [(ngModel)]=\"selectedIssue\" name=\"selectedIssue\">\r\n <option value=\"\">Select issue</option>\r\n <option value=\"{{item?.issueName}}\" *ngFor=\"let item of accuracyList\">\r\n {{item?.issueName}}</option>\r\n </select>\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-sm btn-outline-secondary add-btn\"\r\n (click)=\"onAddIssue()\">\r\n + Add\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n <!-- You can put additional fields here if needed -->\r\n <div class=\"col-12 col-md-8\">\r\n <input type=\"text\" class=\"form-control\" *ngIf=\"selectedIssue!==''\"\r\n [(ngModel)]=\"selectedsubIssue\"\r\n placeholder=\"Changes camera location, hence closing this ticket\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Footer with right-aligned buttons -->\r\n <div class=\"panel-footer\">\r\n\r\n <button type=\"button\" [disabled]=\"selectedIssue===''||selectedsubIssue===''\"\r\n class=\"btn btn-sm btn-primary\" (click)=\"oncloseSubmit()\">Close &\r\n Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"40\" 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 (click)=\"openArrow()\">\r\n <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" 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\r\n class=\"footfall-label ms-3\">Actual\r\n Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.dateString | date:'dd MMM yyyy'}}\r\n </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\r\n *ngIf=\"\r\n ['tagging','review','approve','tangoreview'].includes(mapping?.type)\r\n && (\r\n mapping?.status === 'Closed'\r\n || mapping?.status === 'Closed - Accuracy Issue'\r\n || mapping?.status === 'Open - Accuracy Issue'\r\n || mapping?.status === 'Raised'\r\n )\r\n \"\r\n>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n <div class=\"user-info ms-4\">\r\n\r\n <div class=\"avatar avatar-text light-primary p-3\">\r\n {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n 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 <span *ngIf=\"mapping?.type === 'approve'\">\r\n Approved by\r\n </span>\r\n\r\n <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n Tango\r\n </span>\r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }}\r\n {{(mapping?.createdAt || source?.createdAt)\r\n | date:'HH:mm:ss \u2013dd 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 [ngClass]=\"{'revision-card-approve-closed':(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' :\r\n 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\r\n </ng-container>\r\n\r\n <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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 <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n 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\r\n <!-- Body Section -->\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-4\">\r\n <!-- Original Image -->\r\n <div\r\n class=\"duplicate-head px-5 my-3\">\r\n Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div\r\n class=\"col-md-4 relative\">\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n class=\"separator separator-dashed mt-3 mb-5\">\r\n </div>\r\n <div class=\"row px-5\">\r\n <h5\r\n class=\"duplicate-head my-3 fs-6\">\r\n Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\"\r\n class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label\r\n class=\"ms-2\">Select\r\n 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 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\r\n *ngIf=\"isCheckboxEnable\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"!isLockedByReviewer(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=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div\r\n class=\"row my-2\">\r\n <div\r\n class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango\r\n ID: {{\r\n duplicate.tempId\r\n }}\r\n\r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n 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\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\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 class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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> <span\r\n *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#FFEAD5\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#FB6514\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\"\r\n [(ngModel)]=\"selectAllByType[type]\"\r\n (change)=\"onSelectAll(type, $event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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\r\n *ngIf=\"isCheckboxEnable\">\r\n\r\n <input\r\n *ngIf=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span\r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original, i, type)\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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 *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{\r\n getCategoryCommentCountForSource(source,\r\n type) }} \r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'tagging'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango\r\n ID:\r\n {{\r\n c.tempId\r\n }}\r\n </div>\r\n <div\r\n class=\"text-muted\">\r\n Entry\r\n time:\r\n {{\r\n c.entryTime\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && ['tangoreview'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n\r\n <div>\r\n <div class=\"nav-group bg-white btn-group w-auto my-2\">\r\n <ng-container>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends('footfall')\">\r\n Total Footfall\r\n <span\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ this.filterList?.length || 0 }}\r\n </span>\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3 text-capitalize\"\r\n *ngFor=\"let item of countData\"\r\n [ngClass]=\"type === item.type ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends(item.type)\">\r\n {{item.type}}\r\n <span\r\n [ngClass]=\"type === item.type ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ item?.count || 0 }}\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div *ngFor=\"let original of filteredList;let i=index\"\r\n class=\"col-6 col-sm-4 col-md-3 col-lg-2-4 mb-2\">\r\n\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n <img [src]=\"original?.filePath\" alt=\"\"\r\n class=\"w-100 h-250px rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-3 my-2 pe-5 text-end\">\r\n <span\r\n *ngIf=\"original.revopsType==='non-tagging'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"18\"\r\n viewBox=\"0 0 19 18\" fill=\"none\">\r\n <path\r\n d=\"M6.02344 5.625H6.03094M16.2159 10.4325L10.8384 15.81C10.6991 15.9495 10.5337 16.0601 10.3516 16.1356C10.1695 16.2111 9.97431 16.2499 9.77719 16.2499C9.58006 16.2499 9.38487 16.2111 9.20278 16.1356C9.02068 16.0601 8.85525 15.9495 8.71594 15.81L2.27344 9.375V1.875H9.77344L16.2159 8.3175C16.4953 8.59854 16.6521 8.97872 16.6521 9.375C16.6521 9.77128 16.4953 10.1515 16.2159 10.4325Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='duplicate'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='employee'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='houseKeeping'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='vendor'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='technician'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='junk'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\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\r\n\r\n </div>\r\n <div *ngIf=\"showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- <div class=\"timeline\"></div> -->\r\n\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <section *ngIf=\"!footfallLoading && !footfallNoData\">\r\n\r\n\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 [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\">\r\n 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\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">\r\n\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Deny'\r\n : 'Reject' }}\r\n\r\n </button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('approved')\">\r\n\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Approve'\r\n : 'Accept' }}\r\n\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"!approverClosed\" 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 <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n stroke-linecap=\"round\" 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\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 pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-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\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</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\r\n 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 *ngIf=\"matchesStatusFilter(duplicate)\"\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\"\r\n *ngIf=\"!isLockedByReviewer(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 class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n viewBox=\"0 0 19 19\" fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect x=\"1.11133\"\r\n y=\"0.555664\" width=\"16\"\r\n height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg> </span>\r\n </div>\r\n </div>\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 <div class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\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 </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" 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> <span *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n\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[type]\"\r\n (change)=\"onSelectAll(type, $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\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type && matchesStatusFilter(original)\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n 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\"\r\n width=\"16\" height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\" y=\"0.833442\"\r\n width=\"15.4444\" height=\"15.4444\"\r\n rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\" y=\"0.00010854\"\r\n width=\"18.2222\" height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n 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=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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 (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n 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\nheight: 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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\"\r\n 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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\" *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{getCategoryCommentCountForSource(source, type) }}\r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container *ngIf=\"block.type === 'tagging'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"tango-meta small\">\r\n <div>Tango ID: {{ c.tempId }}\r\n </div>\r\n <div class=\"text-muted\">Entry\r\n time:\r\n {{ c.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container *ngIf=\"i < 3\">\r\n <div class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div class=\"more-overlay\"></div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length -\r\n 3 }}</div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </div>\r\n <ng-container *ngIf=\"footfallNoData\">\r\n <div class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-5\">\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 footfall directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\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\r\n ? this.overallSelectedIds?.length : this.popupValue ?\r\n this.popupValue:'--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n </p>\r\n <!-- Count Box -->\r\n <!-- &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) -->\r\n <div *ngIf=\"selectedCategories?.length === 1 &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) \" 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>\r\n\r\n<ng-template #closeMultiplePopup 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. Since accuracy is below 85%, it will be sent to Tango and marked as \u201CUnder Tango Review\u201D until reviewed.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"multipleCloseCancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"multipleCloseTicket()\">\r\n Got It\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup 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 Re-Assign Ticket\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n Transfer the ticket to another user\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"row w-100 my-3\">\r\n <div class=\"col-md-12 mb-4\">\r\n <label class=\"label mb-2\">Choose User</label>\r\n <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n </div>\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)=\"cancelassign()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n Re-Assign\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n <h5 class=\"modal-title mb-2 m-0\">{{ currentPreviewItem.revopsType | titlecase}}</h5>\r\n\r\n <!-- Close Button -->\r\n <button type=\"button\" class=\"btn-close fs-4\" aria-label=\"Close\" (click)=\"model.close()\">\r\n\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"w-100 position-relative mb-4\">\r\n\r\n <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-10\">\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\" class=\"ms-2\"><svg\r\n 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 *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'rejected'\" class=\"ms-2\"><svg\r\n 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\" 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\" 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(currentPreviewItem.entryTime) }}</div>\r\n </div>\r\n <div class=\"col-2 mt-2 text-end\">\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ currentPreviewItem.reason }}</small>\r\n </div> -->\r\n\r\n <button class=\"btn btn-light position-absolute me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n <section *ngIf=\"isCheckboxEnable\">\r\n\r\n <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n\r\n <!-- Reject / Deny -->\r\n <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected', currentPreviewItem)\">\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Deny'\r\n : 'Reject' }}\r\n </button>\r\n\r\n <!-- Approve / Accept -->\r\n <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved', currentPreviewItem)\">\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Approve'\r\n : 'Accept' }}\r\n </button>\r\n\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n <div class=\"h-auto p-10\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-title\">Start audit</div>\r\n <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n </div>\r\n <div class=\"row my-3\">\r\n <div class=\"col-md-7 mb-4\">\r\n <label class=\"label\">Store</label>\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-5 mt-7\">\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [isInvalidDate]=\"disableToday\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 card p-3 back-ground\" *ngIf=\"footfallcount>0\">\r\n <div class=\"card-title\">{{footfallcount}}</div>\r\n <div class=\"mt-2 card-title1\">Total footfall</div>\r\n </div>\r\n <div class=\"card-body mt-5\">\r\n <div class=\"w-100 d-flex mt-5\">\r\n\r\n <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button [disabled]=\"footfallcount<=0\" class=\"btn btn-primary w-50 ms-2\"\r\n (click)=\"modal.close('isConfirmed')\">start</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n <div class=\"images-modal\">\r\n <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n <div>\r\n\r\n <div class=\"comment-header d-flex align-items-start\">\r\n\r\n <!-- Avatar -->\r\n <div class=\"avatar avatar-text light-primary p-3 me-3\">\r\n {{ getInitialsFromEmail(selectedComment.createdByEmail) }}\r\n </div>\r\n\r\n <!-- Text content -->\r\n <div class=\"comment-info\">\r\n <!-- email -->\r\n <div class=\"medium fw-semibold\">\r\n {{ selectedComment?.createdByEmail }}\r\n </div>\r\n\r\n <!-- created time -->\r\n <div class=\"medium text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- optional comment text under time -->\r\n <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n {{ selectedComment?.message }}\r\n </p>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"closeImagesPopup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\"\r\n height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M13 1L1 13M1 1L13 13\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <!-- <button type=\"button\" class=\"btn-close ms-3\" >\r\n </button> -->\r\n </div>\r\n\r\n\r\n <div class=\"modal-body d-flex flex-wrap border border-1 p-3 gap-2\">\r\n <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card me-2\">\r\n <div class=\"tango-image\" [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{ img.tempId }}\r\n\r\n <!-- status dots -->\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'approved'\"><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></span>\r\n\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'rejected'\"><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\" 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\" 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=\"text-muted\">\r\n Entry time: {{ img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'approved'\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></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 #closeacuuracyissue let-modal>\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-5 fw-bold\">\r\n Close accuracy issue\r\n </h5>\r\n <p class=\"mb-5 test-appvalue\">\r\n The ticket will be \u201Cclosed\u201D and updated in the store as a final revision.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"modal.close('isConfirmed')\">\r\n Close accuracy issue\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-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}.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{position:relative;display:flex;align-items:flex-start;padding-left:0}.comment-thread .avatar{width:40px;height:40px}.comment-thread:before{left:20px}.comment-thread:before{content:\"\";position:absolute;left:24px;top:50px;bottom:0;width:1.5px;background-color:#e5e5e5}.comment-thread:first-child:before{top:30%}.comment-thread:last-child:before{bottom:20%}.comment-thread .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-right:12px;display:flex;align-items:center;justify-content:center}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:175px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff}.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}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.revision-card-approve-closed{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.back-ground{background-color:#f9fafb}.card-title1{font-weight:600;font-size:14px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.acc-issue{background-color:#eaf8ff}.accuracy-panel{background:#eaf6ff;border:1px solid #d6eefc;border-radius:8px;padding:18px;margin-bottom:3px}.accuracy-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.info-line{color:#1f6fb3;margin-bottom:14px;font-size:.95rem}.form-small{max-width:400px}.add-btn{margin-top:8px}.panel-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}.badge-light-blue{background:#ffffffd9;color:#0d6efd;font-weight:600}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:1000px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}.col-lg-2-4{width:14%;float:left}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #344054)!important;font-size:14px;font-weight:500!important;line-height:20px}.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}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i10.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: TicketFilterPanelComponent, selector: "lib-ticket-filter-panel", inputs: ["permissionType", "userType", "client", "tab"], outputs: ["apply", "panelClosed"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
6447
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFootfallNewComponent, selector: "lib-ticket-footfall-new", outputs: { filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "internalticket", first: true, predicate: ["internalticket"], descendants: true }, { propertyName: "closeacuuracyissue", first: true, predicate: ["closeacuuracyissue"], descendants: true }, { propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }, { propertyName: "imagePreviewPopup", first: true, predicate: ["imagePreviewPopup"], descendants: true }, { propertyName: "ReassignTicketPopup", first: true, predicate: ["ReassignTicketPopup"], descendants: true }, { propertyName: "closeMultiplePopup", first: true, predicate: ["closeMultiplePopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <ul *ngIf=\"usersDetails?.userType === 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul>\r\n <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <!-- Approver tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n Approver\r\n </a>\r\n </li>\r\n\r\n <!-- Reviewer tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n Reviewer\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"mb-3 col-md-12\">\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 *ngIf=\"getFootfallSummaryData?.averageAccuracyOverAll !== null &&\r\n getFootfallSummaryData?.averageAccuracyOverAll !== undefined\" 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 *ngIf=\"getFootfallSummaryData?.openTickets !== null &&\r\n getFootfallSummaryData?.openTickets !== undefined\" class=\"col-auto my-3 me-auto\">\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 <ng-container *ngIf=\"tangoType !=='internal'\">\r\n <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col-auto my-3 mx-auto\">\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 </ng-container>\r\n <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n getFootfallSummaryData?.inprogress !== undefined\" class=\"col-auto my-3 mx-auto\">\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 \r\n <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n getFootfallSummaryData?.dueToday !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 style=\"color:#DC6803 !important\" class=\"card-title\">{{ getFootfallSummaryData?.dueToday\r\n !== null ?\r\n getFootfallSummaryData?.dueToday : '--' }}</h5>\r\n <span class=\"card-title-sub-header\" style=\"color:#DC6803 !important\">Due today</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.Expired !== null &&\r\n getFootfallSummaryData?.Expired !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.Expired !== null ?\r\n getFootfallSummaryData?.Expired : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Expired</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.underTangoReview !== null &&\r\n getFootfallSummaryData?.underTangoReview !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.underTangoReview !== null ?\r\n getFootfallSummaryData?.underTangoReview : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Under tango review</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n getFootfallSummaryData?.closedTickets !== undefined\" class=\"col-auto my-3 ms-auto\">\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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyAbove !== null &&\r\n getFootfallSummaryData?.ticketAccuracyAbove !== undefined\" 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</div>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgTicket !== null &&\r\n getFootfallSummaryData?.avgTicket !== undefined\" class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.avgTicket !== null ?\r\n getFootfallSummaryData?.avgTicket : '--' }}</h5>\r\n <div class=\"sub-header\">Average ticket %</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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyBelow !== null &&\r\n getFootfallSummaryData?.ticketAccuracyBelow !== undefined\"\r\n 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgAccuracy !== null &&\r\n getFootfallSummaryData?.avgAccuracy !== undefined\" class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.avgAccuracy !== null ?\r\n getFootfallSummaryData?.avgAccuracy : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Average accuracy%</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\" *ngIf=\"tangoType==='store'\"><span\r\n *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span\r\n *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below\r\n {{clientData?.tangoReview ? clientData?.tangoReview:'85%'}} </span><span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <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\r\n {{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 <!-- <section *ngIf=\"!loading && !noData\"> -->\r\n <button type=\"button\" (click)=\"filterPanel.open(); $event.stopPropagation()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-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>Filter\r\n\r\n </button>\r\n <lib-ticket-filter-panel #filterPanel [client]=\"headerFilters?.client\" [tab]=\"tangoType\"\r\n [permissionType]=\"permissionType\" [userType]=\"usersDetails?.userType\"\r\n (panelClosed)=\"onFilterPanelClosed()\" (apply)=\"onFilterApply($event)\">\r\n </lib-ticket-filter-panel>\r\n <!-- </section> -->\r\n <button type=\"button\" *ngIf=\"!loading && !noData\" (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 <button\r\n class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\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\" *ngIf=\"!loading && !noData\">\r\n <table class=\"table custom-table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <!-- NEW: checkbox column for approver only -->\r\n <th\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [checked]=\"areAllSelectableRowsSelected()\"\r\n (change)=\"toggleSelectAllRows($event)\" />\r\n </th>\r\n\r\n <th *ngFor=\"let col of tableColumns\"\r\n [class.cursor-pointer]=\"col.sortable && col.subtype !== 'store'\"\r\n (click)=\"col.sortable && col.subtype !== 'store' && onSort(col.key)\">\r\n {{ col.label }}\r\n\r\n <svg *ngIf=\"col.sortable && col.subtype !== 'store'\"\r\n [ngClass]=\"sortedColumn === col.key && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.333V12.667L12.667 8 8 12.667 3.333 8\"\r\n [attr.stroke]=\"sortedColumn === col.key ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let row of footfallListData\">\r\n <!-- NEW: per-row checkbox (approver only) -->\r\n <td\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [disabled]=\"!isRowSelectable(row)\" [checked]=\"isRowSelected(row)\"\r\n [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n (change)=\"toggleRowSelection(row, $event)\" />\r\n </td>\r\n\r\n <td *ngFor=\"let col of tableColumns\">\r\n <!-- Store + ticket clickable -->\r\n <ng-container *ngIf=\"col.subtype === 'store'\">\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(row)\">\r\n {{ row.ticketId }}\r\n </div>\r\n <div class=\"pt-2\">{{ row.storeName }}</div>\r\n </ng-container>\r\n\r\n <!-- Date -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'date' || col.subtype === 'ticketRaised'\">\r\n {{ row[col.key] | date: 'dd MMM, yyyy' }}\r\n </ng-container>\r\n\r\n <!-- Status -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'status'\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(row[col.key])\">\r\n {{ row[col.key] | titlecase }}\r\n </span>\r\n </ng-container>\r\n\r\n <!-- Default Text -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'text'\">\r\n {{ row[col.key] ?? '--' }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\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 *ngIf=\"loading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </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 </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\"\r\n [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'd-none' : 'col-md-3 h-100'\">\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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n 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><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-12\">\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 *ngIf=\"openTicketsList.length\" class=\"text-end text-nowrp ms-3 my-2\">\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary text-nowrap mx-2\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\r\n </button>\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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2\" [checked]=\"newallSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select <span\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all\r\n {{ storeCount }}</span> 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 *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\"\r\n class=\"me-1\">Reviewer(%)</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\"\r\n class=\"me-1\">Accuracy(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span (click)=\"onSortClick()\" class=\"sort-arrow cursor-pointer\"><svg\r\n [ngClass]=\"sortOpen === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 <ul *ngIf=\"openTicketsList?.length\" class=\"list-unstyled h-800px overflow-auto ps-0\">\r\n <li *ngFor=\"let store of openTicketsList\" 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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\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\"\r\n 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>\r\n <div [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 page-content\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"this.usersDetails.userType !=='tango'\" class=\"cursor-pointer\"><span\r\n *ngIf=\"isCollapsed\" (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\" [ngClass]=\"isCollapsed ? 'ms-10' : 'ms-0'\">Footfall\r\n Directory</span>\r\n </div>\r\n <div *ngIf=\"this.usersDetails.userType ==='tango'\" class=\"cursor-pointer\"><span\r\n (click)=\"backToNavigation()\" 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-10\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar py-0\">\r\n <!-- Start Review -->\r\n <section *ngIf=\"usersDetails?.userType !=='tango'\">\r\n <span\r\n *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || statusVal?.status === 'Open')\">\r\n\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n Start Review\r\n </button>\r\n </span>\r\n <!-- <section *ngIf=\"\r\n (hasReviewerAccess && selectedRole === 'reviewer') ||\r\n (hasApproverAccess && selectedRole === 'approver')\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section> -->\r\n <section *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email) ||\r\n (hasApproverAccess && selectedRole === 'approver'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\"\r\n class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section>\r\n </section>\r\n <!-- {{statusVal?.type}}{{statusVal?.status}} -->\r\n <span\r\n *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||\r\n usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='Open'||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start Audit</button>\r\n </span>\r\n\r\n <span\r\n *ngIf=\"this.tangoType === 'store'&&usersDetails?.userType ==='tango'&&statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n <span *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\">\r\n <span *ngIf=\"closeBtn\" class=\"ticket-actions-wrapper\"\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" 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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" 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\">{{footfallTicketsData[0]?._source?.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\">{{footfallTicketsData[0]?._source?.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\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n {{ getHeaderStatus() | titlecase }}\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"dueDate\" class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div *ngIf=\"dueDate\" class=\"col-1 font-bold my-2\">:</div>\r\n <div *ngIf=\"dueDate\" class=\"col-3 card-title-value my-2\">{{dueDate ? (dueDate | date:'dd MMM yyyy') :''}}</div>\r\n </div>\r\n <div class=\"accuracy-panel\" *ngIf=\"getHeaderStatus()==='Open - Accuracy Issue'\">\r\n <!-- Title + badge -->\r\n <div class=\" accuracy-header\">\r\n <span class=\"badge badge-light-blue px-3 py-2 badge-light-blue\">Accuracy issue</span>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"info-line mb-3\">\r\n <i class=\"bi bi-info-circle-fill me-2\"></i>\r\n Please review and determine the root cause of the low accuracy.\r\n </p>\r\n\r\n <!-- Form area -->\r\n <div class=\"row gx-3\">\r\n <!-- Column for select and +Add -->\r\n <div class=\"col-12 col-md-4\">\r\n <div class=\"form-small\">\r\n <label class=\"visually-hidden\" for=\"issueSelect\">Select issue</label>\r\n <select id=\"issueSelect\" class=\"form-select form-select-sm\"\r\n [(ngModel)]=\"selectedIssue\" name=\"selectedIssue\">\r\n <option value=\"\">Select issue</option>\r\n <option value=\"{{item?.issueName}}\" *ngFor=\"let item of accuracyList\">\r\n {{item?.issueName}}</option>\r\n </select>\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-sm btn-outline-secondary add-btn\"\r\n (click)=\"onAddIssue()\">\r\n + Add\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n <!-- You can put additional fields here if needed -->\r\n <div class=\"col-12 col-md-8\">\r\n <input type=\"text\" class=\"form-control\" *ngIf=\"selectedIssue!==''\"\r\n [(ngModel)]=\"selectedsubIssue\"\r\n placeholder=\"Changes camera location, hence closing this ticket\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Footer with right-aligned buttons -->\r\n <div class=\"panel-footer\">\r\n\r\n <button type=\"button\" [disabled]=\"selectedIssue===''||selectedsubIssue===''\"\r\n class=\"btn btn-sm btn-primary\" (click)=\"oncloseSubmit()\">Close &\r\n Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"40\" 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 (click)=\"openArrow()\">\r\n <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" 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\r\n class=\"footfall-label ms-3\">Actual\r\n Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.dateString | date:'dd MMM yyyy'}}\r\n </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\r\n *ngIf=\"\r\n ['tagging','review','approve','tangoreview'].includes(mapping?.type)\r\n && (\r\n mapping?.status === 'Closed'\r\n || mapping?.status === 'Closed - Accuracy Issue'\r\n || mapping?.status === 'Open - Accuracy Issue'\r\n || mapping?.status === 'Raised'\r\n )\r\n \"\r\n>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n <div class=\"user-info ms-4\">\r\n\r\n <div class=\"avatar avatar-text light-primary p-3\">\r\n {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n 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 <span *ngIf=\"mapping?.type === 'approve'\">\r\n Approved by\r\n </span>\r\n\r\n <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n Tango\r\n </span>\r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }}\r\n {{(mapping?.createdAt || source?.createdAt)\r\n | date:'HH:mm:ss \u2013dd 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 [ngClass]=\"{'revision-card-approve-closed':(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' :\r\n 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\r\n </ng-container>\r\n\r\n <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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 <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n 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\r\n <!-- Body Section -->\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-4\">\r\n <!-- Original Image -->\r\n <div\r\n class=\"duplicate-head px-5 my-3\">\r\n Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div\r\n class=\"col-md-4 relative\">\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n class=\"separator separator-dashed mt-3 mb-5\">\r\n </div>\r\n <div class=\"row px-5\">\r\n <h5\r\n class=\"duplicate-head my-3 fs-6\">\r\n Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\"\r\n class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label\r\n class=\"ms-2\">Select\r\n 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 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\r\n *ngIf=\"isCheckboxEnable\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"!isLockedByReviewer(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=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div\r\n class=\"row my-2\">\r\n <div\r\n class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango\r\n ID: {{\r\n duplicate.tempId\r\n }}\r\n\r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n 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\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\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 class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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> <span\r\n *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#FFEAD5\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#FB6514\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\"\r\n [(ngModel)]=\"selectAllByType[type]\"\r\n (change)=\"onSelectAll(type, $event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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\r\n *ngIf=\"isCheckboxEnable\">\r\n\r\n <input\r\n *ngIf=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span\r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original, i, type)\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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 *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{\r\n getCategoryCommentCountForSource(source,\r\n type) }} \r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'tagging'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango\r\n ID:\r\n {{\r\n c.tempId\r\n }}\r\n </div>\r\n <div\r\n class=\"text-muted\">\r\n Entry\r\n time:\r\n {{\r\n c.entryTime\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && ['tangoreview'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n\r\n <div>\r\n <div class=\"nav-group bg-white btn-group w-auto my-2\">\r\n <ng-container>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends('footfall')\">\r\n Total Footfall\r\n <span\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ this.filterList?.length || 0 }}\r\n </span>\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3 text-capitalize\"\r\n *ngFor=\"let item of countData\"\r\n [ngClass]=\"type === item.type ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends(item.type)\">\r\n {{item.type}}\r\n <span\r\n [ngClass]=\"type === item.type ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ item?.count || 0 }}\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div *ngFor=\"let original of filteredList;let i=index\"\r\n class=\"col-6 col-sm-4 col-md-3 col-lg-2-4 mb-2\">\r\n\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n <img [src]=\"original?.filePath\" alt=\"\"\r\n class=\"w-100 h-250px rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-3 my-2 pe-5 text-end\">\r\n <span\r\n *ngIf=\"original.revopsType==='non-tagging'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"18\"\r\n viewBox=\"0 0 19 18\" fill=\"none\">\r\n <path\r\n d=\"M6.02344 5.625H6.03094M16.2159 10.4325L10.8384 15.81C10.6991 15.9495 10.5337 16.0601 10.3516 16.1356C10.1695 16.2111 9.97431 16.2499 9.77719 16.2499C9.58006 16.2499 9.38487 16.2111 9.20278 16.1356C9.02068 16.0601 8.85525 15.9495 8.71594 15.81L2.27344 9.375V1.875H9.77344L16.2159 8.3175C16.4953 8.59854 16.6521 8.97872 16.6521 9.375C16.6521 9.77128 16.4953 10.1515 16.2159 10.4325Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='duplicate'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='employee'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='houseKeeping'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='vendor'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='technician'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='junk'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\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\r\n\r\n </div>\r\n <div *ngIf=\"showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- <div class=\"timeline\"></div> -->\r\n\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <section class=\"my-card\" *ngIf=\"!footfallLoading && !footfallNoData\">\r\n\r\n\r\n \r\n <div *ngIf=\"!approverClosed\" class=\"bg-white\">\r\n <div class=\"row top-bar\">\r\n <div class=\"col-md-6 position-relative mt-3\">\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 [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\">\r\n Select\r\n All</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 mt-2 pe-8\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n \r\n \r\n \r\n \r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Deny</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Reject</span>\r\n \r\n \r\n </button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('approved')\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Accept</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Approve</span>\r\n \r\n </button>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n stroke-linecap=\"round\" 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\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 pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-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\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</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\r\n 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 *ngIf=\"matchesStatusFilter(duplicate)\"\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\"\r\n *ngIf=\"!isLockedByReviewer(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 class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n viewBox=\"0 0 19 19\" fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect x=\"1.11133\"\r\n y=\"0.555664\" width=\"16\"\r\n height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg> </span>\r\n </div>\r\n </div>\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 <div class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\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 </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" 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> <span *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n\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[type]\"\r\n (change)=\"onSelectAll(type, $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\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type && matchesStatusFilter(original)\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n 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\"\r\n width=\"16\" height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\" y=\"0.833442\"\r\n width=\"15.4444\" height=\"15.4444\"\r\n rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\" y=\"0.00010854\"\r\n width=\"18.2222\" height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n 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=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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 (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n 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\nheight: 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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\"\r\n 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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\" *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{getCategoryCommentCountForSource(source, type) }}\r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container *ngIf=\"block.type === 'tagging'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"tango-meta small\">\r\n <div>Tango ID: {{ c.tempId }}\r\n </div>\r\n <div class=\"text-muted\">Entry\r\n time:\r\n {{ c.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container *ngIf=\"i < 3\">\r\n <div class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div class=\"more-overlay\"></div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length -\r\n 3 }}</div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </div>\r\n <ng-container *ngIf=\"footfallNoData\">\r\n <div class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-5\">\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 footfall directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\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\r\n ? this.overallSelectedIds?.length : this.popupValue ?\r\n this.popupValue:'--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n </p>\r\n <!-- Count Box -->\r\n <!-- &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) -->\r\n <div *ngIf=\"selectedCategories?.length === 1 &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) \" 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>\r\n\r\n<ng-template #closeMultiplePopup 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. Since accuracy is below 85%, it will be sent to Tango and marked as \u201CUnder Tango Review\u201D until reviewed.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"multipleCloseCancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"multipleCloseTicket()\">\r\n Got It\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup 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 Re-Assign Ticket\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n Transfer the ticket to another user\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"row w-100 my-3\">\r\n <div class=\"col-md-12 mb-4\">\r\n <label class=\"label mb-2\">Choose User</label>\r\n <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n </div>\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)=\"cancelassign()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n Re-Assign\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n <h5 class=\"modal-title mb-2 m-0\">{{ currentPreviewItem.revopsType | titlecase}}</h5>\r\n\r\n <!-- Close Button -->\r\n <button type=\"button\" class=\"btn-close fs-4\" aria-label=\"Close\" (click)=\"model.close()\">\r\n\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"w-100 position-relative mb-4\">\r\n\r\n <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-10\">\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\" class=\"ms-2\"><svg\r\n 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 *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'rejected'\" class=\"ms-2\"><svg\r\n 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\" 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\" 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(currentPreviewItem.entryTime) }}</div>\r\n </div>\r\n <div class=\"col-2 mt-2 text-end\">\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ currentPreviewItem.reason }}</small>\r\n </div> -->\r\n\r\n <button class=\"btn btn-light position-absolute me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n <section *ngIf=\"isCheckboxEnable\">\r\n\r\n <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n\r\n <!-- Reject / Deny -->\r\n <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected', currentPreviewItem)\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Deny</span>\r\n<span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Reject</span>\r\n </button>\r\n\r\n <!-- Approve / Accept -->\r\n <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved', currentPreviewItem)\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Accept</span>\r\n<span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Approve</span>\r\n </button>\r\n\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n <div class=\"h-auto p-10\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-title\">Start audit</div>\r\n <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n </div>\r\n <div class=\"row my-3\">\r\n <div class=\"col-md-7 mb-4\">\r\n <label class=\"label\">Store</label>\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-5 mt-7\">\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [isInvalidDate]=\"disableToday\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 card p-3 back-ground\" *ngIf=\"footfallcount>0\">\r\n <div class=\"card-title\">{{footfallcount}}</div>\r\n <div class=\"mt-2 card-title1\">Total footfall</div>\r\n </div>\r\n <div class=\"card-body mt-5\">\r\n <div class=\"w-100 d-flex mt-5\">\r\n\r\n <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button [disabled]=\"footfallcount<=0\" class=\"btn btn-primary w-50 ms-2\"\r\n (click)=\"modal.close('isConfirmed')\">start</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n <div class=\"images-modal\">\r\n <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n <div>\r\n\r\n <div class=\"comment-header d-flex align-items-start\">\r\n\r\n <!-- Avatar -->\r\n <div class=\"avatar avatar-text light-primary p-3 me-3\">\r\n {{ getInitialsFromEmail(selectedComment.createdByEmail) }}\r\n </div>\r\n\r\n <!-- Text content -->\r\n <div class=\"comment-info\">\r\n <!-- email -->\r\n <div class=\"medium fw-semibold\">\r\n {{ selectedComment?.createdByEmail }}\r\n </div>\r\n\r\n <!-- created time -->\r\n <div class=\"medium text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- optional comment text under time -->\r\n <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n {{ selectedComment?.message }}\r\n </p>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"closeImagesPopup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\"\r\n height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M13 1L1 13M1 1L13 13\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <!-- <button type=\"button\" class=\"btn-close ms-3\" >\r\n </button> -->\r\n </div>\r\n\r\n\r\n <div class=\"modal-body d-flex flex-wrap border border-1 p-3 gap-2\">\r\n <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card me-2\">\r\n <div class=\"tango-image\" [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{ img.tempId }}\r\n\r\n <!-- status dots -->\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'approved'\"><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></span>\r\n\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'rejected'\"><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\" 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\" 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=\"text-muted\">\r\n Entry time: {{ img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'approved'\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></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 #closeacuuracyissue let-modal>\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-5 fw-bold\">\r\n Close accuracy issue\r\n </h5>\r\n <p class=\"mb-5 test-appvalue\">\r\n The ticket will be \u201Cclosed\u201D and updated in the store as a final revision.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"modal.close('isConfirmed')\">\r\n Close accuracy issue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.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-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}.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{position:relative;display:flex;align-items:flex-start;padding-left:0}.comment-thread .avatar{width:40px;height:40px}.comment-thread:before{left:20px}.comment-thread:before{content:\"\";position:absolute;left:24px;top:50px;bottom:0;width:1.5px;background-color:#e5e5e5}.comment-thread:first-child:before{top:30%}.comment-thread:last-child:before{bottom:20%}.comment-thread .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-right:12px;display:flex;align-items:center;justify-content:center}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:175px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff}.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}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.revision-card-approve-closed{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.back-ground{background-color:#f9fafb}.card-title1{font-weight:600;font-size:14px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.acc-issue{background-color:#eaf8ff}.accuracy-panel{background:#eaf6ff;border:1px solid #d6eefc;border-radius:8px;padding:18px;margin-bottom:3px}.accuracy-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.info-line{color:#1f6fb3;margin-bottom:14px;font-size:.95rem}.form-small{max-width:400px}.add-btn{margin-top:8px}.panel-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}.badge-light-blue{background:#ffffffd9;color:#0d6efd;font-weight:600}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:1000px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}.col-lg-2-4{width:14%;float:left}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #344054)!important;font-size:14px;font-weight:500!important;line-height:20px}.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}.my-card{position:relative}.top-bar{position:sticky;top:0;left:0;width:100%;background:#fff;z-index:1}.page-content{height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden;padding:16px}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i10.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "component", type: TicketFilterPanelComponent, selector: "lib-ticket-filter-panel", inputs: ["permissionType", "userType", "client", "tab"], outputs: ["apply", "panelClosed"] }, { kind: "pipe", type: i6.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
|
|
6445
6448
|
}
|
|
6446
6449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFootfallNewComponent, decorators: [{
|
|
6447
6450
|
type: Component,
|
|
6448
|
-
args: [{ selector: "lib-ticket-footfall-new", template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <ul *ngIf=\"usersDetails?.userType === 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul>\r\n <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <!-- Approver tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n Approver\r\n </a>\r\n </li>\r\n\r\n <!-- Reviewer tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n Reviewer\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"mb-3 col-md-12\">\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 *ngIf=\"getFootfallSummaryData?.averageAccuracyOverAll !== null &&\r\n getFootfallSummaryData?.averageAccuracyOverAll !== undefined\" 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 *ngIf=\"getFootfallSummaryData?.openTickets !== null &&\r\n getFootfallSummaryData?.openTickets !== undefined\" class=\"col-auto my-3 me-auto\">\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 <ng-container *ngIf=\"tangoType !=='internal'\">\r\n <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col-auto my-3 mx-auto\">\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 </ng-container>\r\n <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n getFootfallSummaryData?.inprogress !== undefined\" class=\"col-auto my-3 mx-auto\">\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 \r\n <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n getFootfallSummaryData?.dueToday !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 style=\"color:#DC6803 !important\" class=\"card-title\">{{ getFootfallSummaryData?.dueToday\r\n !== null ?\r\n getFootfallSummaryData?.dueToday : '--' }}</h5>\r\n <span class=\"card-title-sub-header\" style=\"color:#DC6803 !important\">Due today</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.Expired !== null &&\r\n getFootfallSummaryData?.Expired !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.Expired !== null ?\r\n getFootfallSummaryData?.Expired : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Expired</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.underTangoReview !== null &&\r\n getFootfallSummaryData?.underTangoReview !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.underTangoReview !== null ?\r\n getFootfallSummaryData?.underTangoReview : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Under tango review</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n getFootfallSummaryData?.closedTickets !== undefined\" class=\"col-auto my-3 ms-auto\">\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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyAbove !== null &&\r\n getFootfallSummaryData?.ticketAccuracyAbove !== undefined\" 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</div>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgTicket !== null &&\r\n getFootfallSummaryData?.avgTicket !== undefined\" class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.avgTicket !== null ?\r\n getFootfallSummaryData?.avgTicket : '--' }}</h5>\r\n <div class=\"sub-header\">Average ticket %</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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyBelow !== null &&\r\n getFootfallSummaryData?.ticketAccuracyBelow !== undefined\"\r\n 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgAccuracy !== null &&\r\n getFootfallSummaryData?.avgAccuracy !== undefined\" class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.avgAccuracy !== null ?\r\n getFootfallSummaryData?.avgAccuracy : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Average accuracy%</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\" *ngIf=\"tangoType==='store'\"><span\r\n *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span\r\n *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below\r\n {{clientData?.tangoReview ? clientData?.tangoReview:'85%'}} </span><span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <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\r\n {{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 <!-- <section *ngIf=\"!loading && !noData\"> -->\r\n <button type=\"button\" (click)=\"filterPanel.open(); $event.stopPropagation()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-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>Filter\r\n\r\n </button>\r\n <lib-ticket-filter-panel #filterPanel [client]=\"headerFilters?.client\" [tab]=\"tangoType\"\r\n [permissionType]=\"permissionType\" [userType]=\"usersDetails?.userType\"\r\n (panelClosed)=\"onFilterPanelClosed()\" (apply)=\"onFilterApply($event)\">\r\n </lib-ticket-filter-panel>\r\n <!-- </section> -->\r\n <button type=\"button\" *ngIf=\"!loading && !noData\" (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 <button\r\n class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\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\" *ngIf=\"!loading && !noData\">\r\n <table class=\"table custom-table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <!-- NEW: checkbox column for approver only -->\r\n <th\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [checked]=\"areAllSelectableRowsSelected()\"\r\n (change)=\"toggleSelectAllRows($event)\" />\r\n </th>\r\n\r\n <th *ngFor=\"let col of tableColumns\"\r\n [class.cursor-pointer]=\"col.sortable && col.subtype !== 'store'\"\r\n (click)=\"col.sortable && col.subtype !== 'store' && onSort(col.key)\">\r\n {{ col.label }}\r\n\r\n <svg *ngIf=\"col.sortable && col.subtype !== 'store'\"\r\n [ngClass]=\"sortedColumn === col.key && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.333V12.667L12.667 8 8 12.667 3.333 8\"\r\n [attr.stroke]=\"sortedColumn === col.key ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let row of footfallListData\">\r\n <!-- NEW: per-row checkbox (approver only) -->\r\n <td\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [disabled]=\"!isRowSelectable(row)\" [checked]=\"isRowSelected(row)\"\r\n [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n (change)=\"toggleRowSelection(row, $event)\" />\r\n </td>\r\n\r\n <td *ngFor=\"let col of tableColumns\">\r\n <!-- Store + ticket clickable -->\r\n <ng-container *ngIf=\"col.subtype === 'store'\">\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(row)\">\r\n {{ row.ticketId }}\r\n </div>\r\n <div class=\"pt-2\">{{ row.storeName }}</div>\r\n </ng-container>\r\n\r\n <!-- Date -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'date' || col.subtype === 'ticketRaised'\">\r\n {{ row[col.key] | date: 'dd MMM, yyyy' }}\r\n </ng-container>\r\n\r\n <!-- Status -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'status'\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(row[col.key])\">\r\n {{ row[col.key] | titlecase }}\r\n </span>\r\n </ng-container>\r\n\r\n <!-- Default Text -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'text'\">\r\n {{ row[col.key] ?? '--' }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\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 *ngIf=\"loading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </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 </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\"\r\n [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'd-none' : 'col-md-3 h-100'\">\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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n 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><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-12\">\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 *ngIf=\"openTicketsList.length\" class=\"text-end text-nowrp ms-3 my-2\">\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary text-nowrap mx-2\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\r\n </button>\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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2\" [checked]=\"newallSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select <span\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all\r\n {{ storeCount }}</span> 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 *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\"\r\n class=\"me-1\">Reviewer(%)</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\"\r\n class=\"me-1\">Accuracy(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span (click)=\"onSortClick()\" class=\"sort-arrow cursor-pointer\"><svg\r\n [ngClass]=\"sortOpen === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 <ul *ngIf=\"openTicketsList?.length\" class=\"list-unstyled h-800px overflow-auto ps-0\">\r\n <li *ngFor=\"let store of openTicketsList\" 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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\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\"\r\n 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>\r\n <div [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 h-auto\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"this.usersDetails.userType !=='tango'\" class=\"cursor-pointer\"><span\r\n *ngIf=\"isCollapsed\" (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\" [ngClass]=\"isCollapsed ? 'ms-10' : 'ms-0'\">Footfall\r\n Directory</span>\r\n </div>\r\n <div *ngIf=\"this.usersDetails.userType ==='tango'\" class=\"cursor-pointer\"><span\r\n (click)=\"backToNavigation()\" 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-10\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar py-0\">\r\n <!-- Start Review -->\r\n <section *ngIf=\"usersDetails?.userType !=='tango'\">\r\n <span\r\n *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || statusVal?.status === 'Open')\">\r\n\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n Start Review\r\n </button>\r\n </span>\r\n <!-- <section *ngIf=\"\r\n (hasReviewerAccess && selectedRole === 'reviewer') ||\r\n (hasApproverAccess && selectedRole === 'approver')\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section> -->\r\n <section *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email) ||\r\n (hasApproverAccess && selectedRole === 'approver'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\"\r\n class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section>\r\n </section>\r\n <!-- {{statusVal?.type}}{{statusVal?.status}} -->\r\n <span\r\n *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||\r\n usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='Open'||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start Audit</button>\r\n </span>\r\n\r\n <span\r\n *ngIf=\"this.tangoType === 'store'&&usersDetails?.userType ==='tango'&&statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n <span *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\">\r\n <span *ngIf=\"closeBtn\" class=\"ticket-actions-wrapper\"\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" 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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" 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\">{{footfallTicketsData[0]?._source?.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\">{{footfallTicketsData[0]?._source?.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\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n {{ getHeaderStatus() | titlecase }}\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"dueDate\" class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div *ngIf=\"dueDate\" class=\"col-1 font-bold my-2\">:</div>\r\n <div *ngIf=\"dueDate\" class=\"col-3 card-title-value my-2\">{{dueDate ? (dueDate | date:'dd MMM yyyy') :''}}</div>\r\n </div>\r\n <div class=\"accuracy-panel\" *ngIf=\"getHeaderStatus()==='Open - Accuracy Issue'\">\r\n <!-- Title + badge -->\r\n <div class=\" accuracy-header\">\r\n <span class=\"badge badge-light-blue px-3 py-2 badge-light-blue\">Accuracy issue</span>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"info-line mb-3\">\r\n <i class=\"bi bi-info-circle-fill me-2\"></i>\r\n Please review and determine the root cause of the low accuracy.\r\n </p>\r\n\r\n <!-- Form area -->\r\n <div class=\"row gx-3\">\r\n <!-- Column for select and +Add -->\r\n <div class=\"col-12 col-md-4\">\r\n <div class=\"form-small\">\r\n <label class=\"visually-hidden\" for=\"issueSelect\">Select issue</label>\r\n <select id=\"issueSelect\" class=\"form-select form-select-sm\"\r\n [(ngModel)]=\"selectedIssue\" name=\"selectedIssue\">\r\n <option value=\"\">Select issue</option>\r\n <option value=\"{{item?.issueName}}\" *ngFor=\"let item of accuracyList\">\r\n {{item?.issueName}}</option>\r\n </select>\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-sm btn-outline-secondary add-btn\"\r\n (click)=\"onAddIssue()\">\r\n + Add\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n <!-- You can put additional fields here if needed -->\r\n <div class=\"col-12 col-md-8\">\r\n <input type=\"text\" class=\"form-control\" *ngIf=\"selectedIssue!==''\"\r\n [(ngModel)]=\"selectedsubIssue\"\r\n placeholder=\"Changes camera location, hence closing this ticket\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Footer with right-aligned buttons -->\r\n <div class=\"panel-footer\">\r\n\r\n <button type=\"button\" [disabled]=\"selectedIssue===''||selectedsubIssue===''\"\r\n class=\"btn btn-sm btn-primary\" (click)=\"oncloseSubmit()\">Close &\r\n Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"40\" 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 (click)=\"openArrow()\">\r\n <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" 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\r\n class=\"footfall-label ms-3\">Actual\r\n Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.dateString | date:'dd MMM yyyy'}}\r\n </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\r\n *ngIf=\"\r\n ['tagging','review','approve','tangoreview'].includes(mapping?.type)\r\n && (\r\n mapping?.status === 'Closed'\r\n || mapping?.status === 'Closed - Accuracy Issue'\r\n || mapping?.status === 'Open - Accuracy Issue'\r\n || mapping?.status === 'Raised'\r\n )\r\n \"\r\n>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n <div class=\"user-info ms-4\">\r\n\r\n <div class=\"avatar avatar-text light-primary p-3\">\r\n {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n 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 <span *ngIf=\"mapping?.type === 'approve'\">\r\n Approved by\r\n </span>\r\n\r\n <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n Tango\r\n </span>\r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }}\r\n {{(mapping?.createdAt || source?.createdAt)\r\n | date:'HH:mm:ss \u2013dd 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 [ngClass]=\"{'revision-card-approve-closed':(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' :\r\n 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\r\n </ng-container>\r\n\r\n <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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 <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n 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\r\n <!-- Body Section -->\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-4\">\r\n <!-- Original Image -->\r\n <div\r\n class=\"duplicate-head px-5 my-3\">\r\n Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div\r\n class=\"col-md-4 relative\">\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n class=\"separator separator-dashed mt-3 mb-5\">\r\n </div>\r\n <div class=\"row px-5\">\r\n <h5\r\n class=\"duplicate-head my-3 fs-6\">\r\n Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\"\r\n class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label\r\n class=\"ms-2\">Select\r\n 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 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\r\n *ngIf=\"isCheckboxEnable\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"!isLockedByReviewer(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=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div\r\n class=\"row my-2\">\r\n <div\r\n class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango\r\n ID: {{\r\n duplicate.tempId\r\n }}\r\n\r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n 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\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\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 class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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> <span\r\n *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#FFEAD5\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#FB6514\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\"\r\n [(ngModel)]=\"selectAllByType[type]\"\r\n (change)=\"onSelectAll(type, $event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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\r\n *ngIf=\"isCheckboxEnable\">\r\n\r\n <input\r\n *ngIf=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span\r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original, i, type)\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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 *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{\r\n getCategoryCommentCountForSource(source,\r\n type) }} \r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'tagging'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango\r\n ID:\r\n {{\r\n c.tempId\r\n }}\r\n </div>\r\n <div\r\n class=\"text-muted\">\r\n Entry\r\n time:\r\n {{\r\n c.entryTime\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && ['tangoreview'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n\r\n <div>\r\n <div class=\"nav-group bg-white btn-group w-auto my-2\">\r\n <ng-container>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends('footfall')\">\r\n Total Footfall\r\n <span\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ this.filterList?.length || 0 }}\r\n </span>\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3 text-capitalize\"\r\n *ngFor=\"let item of countData\"\r\n [ngClass]=\"type === item.type ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends(item.type)\">\r\n {{item.type}}\r\n <span\r\n [ngClass]=\"type === item.type ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ item?.count || 0 }}\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div *ngFor=\"let original of filteredList;let i=index\"\r\n class=\"col-6 col-sm-4 col-md-3 col-lg-2-4 mb-2\">\r\n\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n <img [src]=\"original?.filePath\" alt=\"\"\r\n class=\"w-100 h-250px rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-3 my-2 pe-5 text-end\">\r\n <span\r\n *ngIf=\"original.revopsType==='non-tagging'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"18\"\r\n viewBox=\"0 0 19 18\" fill=\"none\">\r\n <path\r\n d=\"M6.02344 5.625H6.03094M16.2159 10.4325L10.8384 15.81C10.6991 15.9495 10.5337 16.0601 10.3516 16.1356C10.1695 16.2111 9.97431 16.2499 9.77719 16.2499C9.58006 16.2499 9.38487 16.2111 9.20278 16.1356C9.02068 16.0601 8.85525 15.9495 8.71594 15.81L2.27344 9.375V1.875H9.77344L16.2159 8.3175C16.4953 8.59854 16.6521 8.97872 16.6521 9.375C16.6521 9.77128 16.4953 10.1515 16.2159 10.4325Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='duplicate'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='employee'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='houseKeeping'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='vendor'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='technician'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='junk'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\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\r\n\r\n </div>\r\n <div *ngIf=\"showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- <div class=\"timeline\"></div> -->\r\n\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <section *ngIf=\"!footfallLoading && !footfallNoData\">\r\n\r\n\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 [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\">\r\n 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\r\n\r\n\r\n\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">\r\n\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Deny'\r\n : 'Reject' }}\r\n\r\n </button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('approved')\">\r\n\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Approve'\r\n : 'Accept' }}\r\n\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div *ngIf=\"!approverClosed\" 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 <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n stroke-linecap=\"round\" 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\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 pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-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\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</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\r\n 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 *ngIf=\"matchesStatusFilter(duplicate)\"\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\"\r\n *ngIf=\"!isLockedByReviewer(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 class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n viewBox=\"0 0 19 19\" fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect x=\"1.11133\"\r\n y=\"0.555664\" width=\"16\"\r\n height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg> </span>\r\n </div>\r\n </div>\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 <div class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\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 </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" 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> <span *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n\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[type]\"\r\n (change)=\"onSelectAll(type, $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\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type && matchesStatusFilter(original)\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n 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\"\r\n width=\"16\" height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\" y=\"0.833442\"\r\n width=\"15.4444\" height=\"15.4444\"\r\n rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\" y=\"0.00010854\"\r\n width=\"18.2222\" height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n 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=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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 (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n 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\nheight: 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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\"\r\n 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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\" *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{getCategoryCommentCountForSource(source, type) }}\r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container *ngIf=\"block.type === 'tagging'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"tango-meta small\">\r\n <div>Tango ID: {{ c.tempId }}\r\n </div>\r\n <div class=\"text-muted\">Entry\r\n time:\r\n {{ c.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container *ngIf=\"i < 3\">\r\n <div class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div class=\"more-overlay\"></div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length -\r\n 3 }}</div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </div>\r\n <ng-container *ngIf=\"footfallNoData\">\r\n <div class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-5\">\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 footfall directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\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\r\n ? this.overallSelectedIds?.length : this.popupValue ?\r\n this.popupValue:'--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n </p>\r\n <!-- Count Box -->\r\n <!-- &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) -->\r\n <div *ngIf=\"selectedCategories?.length === 1 &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) \" 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>\r\n\r\n<ng-template #closeMultiplePopup 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. Since accuracy is below 85%, it will be sent to Tango and marked as \u201CUnder Tango Review\u201D until reviewed.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"multipleCloseCancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"multipleCloseTicket()\">\r\n Got It\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup 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 Re-Assign Ticket\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n Transfer the ticket to another user\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"row w-100 my-3\">\r\n <div class=\"col-md-12 mb-4\">\r\n <label class=\"label mb-2\">Choose User</label>\r\n <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n </div>\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)=\"cancelassign()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n Re-Assign\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n <h5 class=\"modal-title mb-2 m-0\">{{ currentPreviewItem.revopsType | titlecase}}</h5>\r\n\r\n <!-- Close Button -->\r\n <button type=\"button\" class=\"btn-close fs-4\" aria-label=\"Close\" (click)=\"model.close()\">\r\n\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"w-100 position-relative mb-4\">\r\n\r\n <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-10\">\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\" class=\"ms-2\"><svg\r\n 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 *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'rejected'\" class=\"ms-2\"><svg\r\n 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\" 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\" 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(currentPreviewItem.entryTime) }}</div>\r\n </div>\r\n <div class=\"col-2 mt-2 text-end\">\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ currentPreviewItem.reason }}</small>\r\n </div> -->\r\n\r\n <button class=\"btn btn-light position-absolute me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n <section *ngIf=\"isCheckboxEnable\">\r\n\r\n <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n\r\n <!-- Reject / Deny -->\r\n <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected', currentPreviewItem)\">\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Deny'\r\n : 'Reject' }}\r\n </button>\r\n\r\n <!-- Approve / Accept -->\r\n <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved', currentPreviewItem)\">\r\n {{ ((hasApproverAccess && selectedRole === 'approver')\r\n || (hasReviewerAccess && selectedRole === 'reviewer'))\r\n ? 'Approve'\r\n : 'Accept' }}\r\n </button>\r\n\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n <div class=\"h-auto p-10\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-title\">Start audit</div>\r\n <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n </div>\r\n <div class=\"row my-3\">\r\n <div class=\"col-md-7 mb-4\">\r\n <label class=\"label\">Store</label>\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-5 mt-7\">\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [isInvalidDate]=\"disableToday\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 card p-3 back-ground\" *ngIf=\"footfallcount>0\">\r\n <div class=\"card-title\">{{footfallcount}}</div>\r\n <div class=\"mt-2 card-title1\">Total footfall</div>\r\n </div>\r\n <div class=\"card-body mt-5\">\r\n <div class=\"w-100 d-flex mt-5\">\r\n\r\n <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button [disabled]=\"footfallcount<=0\" class=\"btn btn-primary w-50 ms-2\"\r\n (click)=\"modal.close('isConfirmed')\">start</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n <div class=\"images-modal\">\r\n <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n <div>\r\n\r\n <div class=\"comment-header d-flex align-items-start\">\r\n\r\n <!-- Avatar -->\r\n <div class=\"avatar avatar-text light-primary p-3 me-3\">\r\n {{ getInitialsFromEmail(selectedComment.createdByEmail) }}\r\n </div>\r\n\r\n <!-- Text content -->\r\n <div class=\"comment-info\">\r\n <!-- email -->\r\n <div class=\"medium fw-semibold\">\r\n {{ selectedComment?.createdByEmail }}\r\n </div>\r\n\r\n <!-- created time -->\r\n <div class=\"medium text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- optional comment text under time -->\r\n <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n {{ selectedComment?.message }}\r\n </p>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"closeImagesPopup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\"\r\n height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M13 1L1 13M1 1L13 13\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <!-- <button type=\"button\" class=\"btn-close ms-3\" >\r\n </button> -->\r\n </div>\r\n\r\n\r\n <div class=\"modal-body d-flex flex-wrap border border-1 p-3 gap-2\">\r\n <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card me-2\">\r\n <div class=\"tango-image\" [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{ img.tempId }}\r\n\r\n <!-- status dots -->\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'approved'\"><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></span>\r\n\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'rejected'\"><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\" 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\" 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=\"text-muted\">\r\n Entry time: {{ img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'approved'\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></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 #closeacuuracyissue let-modal>\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-5 fw-bold\">\r\n Close accuracy issue\r\n </h5>\r\n <p class=\"mb-5 test-appvalue\">\r\n The ticket will be \u201Cclosed\u201D and updated in the store as a final revision.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"modal.close('isConfirmed')\">\r\n Close accuracy issue\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-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}.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{position:relative;display:flex;align-items:flex-start;padding-left:0}.comment-thread .avatar{width:40px;height:40px}.comment-thread:before{left:20px}.comment-thread:before{content:\"\";position:absolute;left:24px;top:50px;bottom:0;width:1.5px;background-color:#e5e5e5}.comment-thread:first-child:before{top:30%}.comment-thread:last-child:before{bottom:20%}.comment-thread .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-right:12px;display:flex;align-items:center;justify-content:center}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:175px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff}.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}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.revision-card-approve-closed{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.back-ground{background-color:#f9fafb}.card-title1{font-weight:600;font-size:14px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.acc-issue{background-color:#eaf8ff}.accuracy-panel{background:#eaf6ff;border:1px solid #d6eefc;border-radius:8px;padding:18px;margin-bottom:3px}.accuracy-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.info-line{color:#1f6fb3;margin-bottom:14px;font-size:.95rem}.form-small{max-width:400px}.add-btn{margin-top:8px}.panel-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}.badge-light-blue{background:#ffffffd9;color:#0d6efd;font-weight:600}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:1000px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}.col-lg-2-4{width:14%;float:left}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #344054)!important;font-size:14px;font-weight:500!important;line-height:20px}.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}\n"] }]
|
|
6451
|
+
args: [{ selector: "lib-ticket-footfall-new", template: "<section *ngIf=\"select ==='ticketList'\">\r\n <div class=\"row ms-3 my-3\">\r\n <ul *ngIf=\"usersDetails?.userType === 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n class=\"nav-link cursor-pointer no-border me-3\">\r\n Tickets\r\n </a>\r\n </li>\r\n <li class=\"nav-item\">\r\n <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n </a>\r\n </li>\r\n </ul>\r\n <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n <!-- Approver tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n Approver\r\n </a>\r\n </li>\r\n\r\n <!-- Reviewer tab -->\r\n <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n Reviewer\r\n </a>\r\n </li>\r\n </ul>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"mb-3 col-md-12\">\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 *ngIf=\"getFootfallSummaryData?.averageAccuracyOverAll !== null &&\r\n getFootfallSummaryData?.averageAccuracyOverAll !== undefined\" 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 *ngIf=\"getFootfallSummaryData?.openTickets !== null &&\r\n getFootfallSummaryData?.openTickets !== undefined\" class=\"col-auto my-3 me-auto\">\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 <ng-container *ngIf=\"tangoType !=='internal'\">\r\n <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col-auto my-3 mx-auto\">\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 </ng-container>\r\n <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n getFootfallSummaryData?.inprogress !== undefined\" class=\"col-auto my-3 mx-auto\">\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 \r\n <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n getFootfallSummaryData?.dueToday !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 style=\"color:#DC6803 !important\" class=\"card-title\">{{ getFootfallSummaryData?.dueToday\r\n !== null ?\r\n getFootfallSummaryData?.dueToday : '--' }}</h5>\r\n <span class=\"card-title-sub-header\" style=\"color:#DC6803 !important\">Due today</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.Expired !== null &&\r\n getFootfallSummaryData?.Expired !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.Expired !== null ?\r\n getFootfallSummaryData?.Expired : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Expired</span>\r\n </div>\r\n\r\n <div *ngIf=\"getFootfallSummaryData?.underTangoReview !== null &&\r\n getFootfallSummaryData?.underTangoReview !== undefined\" class=\"col-auto my-3 mx-auto\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.underTangoReview !== null ?\r\n getFootfallSummaryData?.underTangoReview : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Under tango review</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n getFootfallSummaryData?.closedTickets !== undefined\" class=\"col-auto my-3 ms-auto\">\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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyAbove !== null &&\r\n getFootfallSummaryData?.ticketAccuracyAbove !== undefined\" 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</div>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgTicket !== null &&\r\n getFootfallSummaryData?.avgTicket !== undefined\" class=\"my-0\">\r\n <h5 class=\"card-title mt-0\">{{ getFootfallSummaryData?.avgTicket !== null ?\r\n getFootfallSummaryData?.avgTicket : '--' }}</h5>\r\n <div class=\"sub-header\">Average ticket %</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 *ngIf=\"getFootfallSummaryData?.ticketAccuracyBelow !== null &&\r\n getFootfallSummaryData?.ticketAccuracyBelow !== undefined\"\r\n 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 {{clientData?.tangoReview ?\r\n clientData?.tangoReview:'85%'}}</span>\r\n </div>\r\n <div *ngIf=\"getFootfallSummaryData?.avgAccuracy !== null &&\r\n getFootfallSummaryData?.avgAccuracy !== undefined\" class=\"col-lg-12 col-xl-12 col-md-12 my-3\">\r\n <h5 class=\"card-title\">{{ getFootfallSummaryData?.avgAccuracy !== null ?\r\n getFootfallSummaryData?.avgAccuracy : '--' }}</h5>\r\n <span class=\"card-title-sub-header\">Average accuracy%</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\" *ngIf=\"tangoType==='store'\"><span\r\n *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span\r\n *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below\r\n {{clientData?.tangoReview ? clientData?.tangoReview:'85%'}} </span><span\r\n class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <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\r\n {{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 <!-- <section *ngIf=\"!loading && !noData\"> -->\r\n <button type=\"button\" (click)=\"filterPanel.open(); $event.stopPropagation()\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n <span class=\"mx-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>Filter\r\n\r\n </button>\r\n <lib-ticket-filter-panel #filterPanel [client]=\"headerFilters?.client\" [tab]=\"tangoType\"\r\n [permissionType]=\"permissionType\" [userType]=\"usersDetails?.userType\"\r\n (panelClosed)=\"onFilterPanelClosed()\" (apply)=\"onFilterApply($event)\">\r\n </lib-ticket-filter-panel>\r\n <!-- </section> -->\r\n <button type=\"button\" *ngIf=\"!loading && !noData\" (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 <button\r\n class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\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\" *ngIf=\"!loading && !noData\">\r\n <table class=\"table custom-table bottom-border text-nowrap\">\r\n <thead>\r\n <tr>\r\n <!-- NEW: checkbox column for approver only -->\r\n <th\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [checked]=\"areAllSelectableRowsSelected()\"\r\n (change)=\"toggleSelectAllRows($event)\" />\r\n </th>\r\n\r\n <th *ngFor=\"let col of tableColumns\"\r\n [class.cursor-pointer]=\"col.sortable && col.subtype !== 'store'\"\r\n (click)=\"col.sortable && col.subtype !== 'store' && onSort(col.key)\">\r\n {{ col.label }}\r\n\r\n <svg *ngIf=\"col.sortable && col.subtype !== 'store'\"\r\n [ngClass]=\"sortedColumn === col.key && sortDirection === 1 ? 'rotate' : ''\"\r\n width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M8 3.333V12.667L12.667 8 8 12.667 3.333 8\"\r\n [attr.stroke]=\"sortedColumn === col.key ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <tr *ngFor=\"let row of footfallListData\">\r\n <!-- NEW: per-row checkbox (approver only) -->\r\n <td\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n <input type=\"checkbox\" [disabled]=\"!isRowSelectable(row)\" [checked]=\"isRowSelected(row)\"\r\n [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n (change)=\"toggleRowSelection(row, $event)\" />\r\n </td>\r\n\r\n <td *ngFor=\"let col of tableColumns\">\r\n <!-- Store + ticket clickable -->\r\n <ng-container *ngIf=\"col.subtype === 'store'\">\r\n <div class=\"text-primary ellipsis-underline\" (click)=\"ticketView(row)\">\r\n {{ row.ticketId }}\r\n </div>\r\n <div class=\"pt-2\">{{ row.storeName }}</div>\r\n </ng-container>\r\n\r\n <!-- Date -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'date' || col.subtype === 'ticketRaised'\">\r\n {{ row[col.key] | date: 'dd MMM, yyyy' }}\r\n </ng-container>\r\n\r\n <!-- Status -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'status'\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(row[col.key])\">\r\n {{ row[col.key] | titlecase }}\r\n </span>\r\n </ng-container>\r\n\r\n <!-- Default Text -->\r\n <ng-container class=\"pt-5\" *ngIf=\"col.subtype === 'text'\">\r\n {{ row[col.key] ?? '--' }}\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n\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 *ngIf=\"loading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </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 </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\"\r\n [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'd-none' : 'col-md-3 h-100'\">\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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n 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><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-12\">\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 *ngIf=\"openTicketsList.length\" class=\"text-end text-nowrp ms-3 my-2\">\r\n <button\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary text-nowrap mx-2\"\r\n (click)=\"getMultipleTicketClose()\">\r\n Close Ticket\r\n </button>\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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2\" [checked]=\"newallSelected\"\r\n (change)=\"toggleSelectAll()\" />\r\n <label class=\"m-0 font-semibold\">\r\n Select <span\r\n *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all\r\n {{ storeCount }}</span> 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 *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\"\r\n class=\"me-1\">Reviewer(%)</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\"\r\n class=\"me-1\">Accuracy(%)</span>\r\n <!-- if you want arrow icon -->\r\n <span (click)=\"onSortClick()\" class=\"sort-arrow cursor-pointer\"><svg\r\n [ngClass]=\"sortOpen === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\r\n viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M6.83464 1L6.83463 12.6667M6.83463 12.6667L12.668 6.83333M6.83463 12.6667L1.0013 6.83333\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 <ul *ngIf=\"openTicketsList?.length\" class=\"list-unstyled h-800px overflow-auto ps-0\">\r\n <li *ngFor=\"let store of openTicketsList\" 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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n (change)=\"toggleStoreSelection(store)\" />\r\n\r\n <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\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\"\r\n 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>\r\n <div [ngClass]=\"isCollapsed || this.usersDetails.userType ==='tango' ? 'col-12' : 'col-md-9'\">\r\n <div class=\"card bg-light-primary p-1 page-content\">\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" class=\"card-header border-0 pt-3 px-5\">\r\n <div class=\"d-flex justify-content-start\">\r\n <div *ngIf=\"this.usersDetails.userType !=='tango'\" class=\"cursor-pointer\"><span\r\n *ngIf=\"isCollapsed\" (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\" [ngClass]=\"isCollapsed ? 'ms-10' : 'ms-0'\">Footfall\r\n Directory</span>\r\n </div>\r\n <div *ngIf=\"this.usersDetails.userType ==='tango'\" class=\"cursor-pointer\"><span\r\n (click)=\"backToNavigation()\" 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-10\">Footfall Directory</span>\r\n </div>\r\n </div>\r\n <div class=\"card-toolbar py-0\">\r\n <!-- Start Review -->\r\n <section *ngIf=\"usersDetails?.userType !=='tango'\">\r\n <span\r\n *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || statusVal?.status === 'Open')\">\r\n\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n Start Review\r\n </button>\r\n </span>\r\n <!-- <section *ngIf=\"\r\n (hasReviewerAccess && selectedRole === 'reviewer') ||\r\n (hasApproverAccess && selectedRole === 'approver')\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section> -->\r\n <section *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email) ||\r\n (hasApproverAccess && selectedRole === 'approver'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\r\n \">\r\n <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\"\r\n class=\"btn btn-sm btn-primary mx-2\" (click)=\"stopReview()\">\r\n Close Ticket\r\n </button>\r\n </span>\r\n </section>\r\n </section>\r\n <!-- {{statusVal?.type}}{{statusVal?.status}} -->\r\n <span\r\n *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||\r\n usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='Open'||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&ticketData?.status==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <button class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start Audit</button>\r\n </span>\r\n\r\n <span\r\n *ngIf=\"this.tangoType === 'store'&&usersDetails?.userType ==='tango'&&statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email||\r\n usersDetails?.userType ==='tango'&&this.tangoType === 'internal'&&statusVal?.type === 'tangoreview' && statusVal?.status ==='In-Progress'&&footfallTicketsData[0]?._source?.createdByEmail===this.usersDetails.email\">\r\n <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n <span *ngIf=\"\r\n (\r\n (hasReviewerAccess && selectedRole === 'reviewer'&&ticketStatus === usersDetails?.email)\r\n )\r\n \">\r\n <span *ngIf=\"\r\n getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n ticketData?.status?.toLowerCase() === 'in-progress'\">\r\n <span *ngIf=\"closeBtn\" class=\"ticket-actions-wrapper\"\r\n (click)=\"$event.stopPropagation()\">\r\n\r\n <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" 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\"\r\n 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\"\r\n 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\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n Re-Assign Ticket\r\n </div>\r\n <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n Export\r\n </div> -->\r\n </div>\r\n </span>\r\n </span>\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!footfallLoading && !footfallNoData\" 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\">{{footfallTicketsData[0]?._source?.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\">{{footfallTicketsData[0]?._source?.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\">\r\n <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n {{ getHeaderStatus() | titlecase }}\r\n </span>\r\n </div>\r\n\r\n <div *ngIf=\"dueDate\" class=\"col-2 card-title-label my-2\">Due Date</div>\r\n <div *ngIf=\"dueDate\" class=\"col-1 font-bold my-2\">:</div>\r\n <div *ngIf=\"dueDate\" class=\"col-3 card-title-value my-2\">{{dueDate ? (dueDate | date:'dd MMM yyyy') :''}}</div>\r\n </div>\r\n <div class=\"accuracy-panel\" *ngIf=\"getHeaderStatus()==='Open - Accuracy Issue'\">\r\n <!-- Title + badge -->\r\n <div class=\" accuracy-header\">\r\n <span class=\"badge badge-light-blue px-3 py-2 badge-light-blue\">Accuracy issue</span>\r\n </div>\r\n\r\n <!-- Info Text -->\r\n <p class=\"info-line mb-3\">\r\n <i class=\"bi bi-info-circle-fill me-2\"></i>\r\n Please review and determine the root cause of the low accuracy.\r\n </p>\r\n\r\n <!-- Form area -->\r\n <div class=\"row gx-3\">\r\n <!-- Column for select and +Add -->\r\n <div class=\"col-12 col-md-4\">\r\n <div class=\"form-small\">\r\n <label class=\"visually-hidden\" for=\"issueSelect\">Select issue</label>\r\n <select id=\"issueSelect\" class=\"form-select form-select-sm\"\r\n [(ngModel)]=\"selectedIssue\" name=\"selectedIssue\">\r\n <option value=\"\">Select issue</option>\r\n <option value=\"{{item?.issueName}}\" *ngFor=\"let item of accuracyList\">\r\n {{item?.issueName}}</option>\r\n </select>\r\n\r\n <!-- <button type=\"button\" class=\"btn btn-sm btn-outline-secondary add-btn\"\r\n (click)=\"onAddIssue()\">\r\n + Add\r\n </button> -->\r\n </div>\r\n </div>\r\n\r\n <!-- You can put additional fields here if needed -->\r\n <div class=\"col-12 col-md-8\">\r\n <input type=\"text\" class=\"form-control\" *ngIf=\"selectedIssue!==''\"\r\n [(ngModel)]=\"selectedsubIssue\"\r\n placeholder=\"Changes camera location, hence closing this ticket\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Footer with right-aligned buttons -->\r\n <div class=\"panel-footer\">\r\n\r\n <button type=\"button\" [disabled]=\"selectedIssue===''||selectedsubIssue===''\"\r\n class=\"btn btn-sm btn-primary\" (click)=\"oncloseSubmit()\">Close &\r\n Submit</button>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n\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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"40\" 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 (click)=\"openArrow()\">\r\n <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n viewBox=\"0 0 40 40\" 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\r\n class=\"footfall-label ms-3\">Actual\r\n Footfall</span>\r\n </div>\r\n <div class=\"issue-date\">Issue date : {{source?.dateString | date:'dd MMM yyyy'}}\r\n </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\r\n *ngIf=\"\r\n ['tagging','review','approve','tangoreview'].includes(mapping?.type)\r\n && (\r\n mapping?.status === 'Closed'\r\n || mapping?.status === 'Closed - Accuracy Issue'\r\n || mapping?.status === 'Open - Accuracy Issue'\r\n || mapping?.status === 'Raised'\r\n )\r\n \"\r\n>\r\n\r\n\r\n <div class=\"timeline\"></div>\r\n <div class=\"user-info ms-4\">\r\n\r\n <div class=\"avatar avatar-text light-primary p-3\">\r\n {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n 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 <span *ngIf=\"mapping?.type === 'approve'\">\r\n Approved by\r\n </span>\r\n\r\n <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n Tango\r\n </span>\r\n </div>\r\n\r\n <div class=\"user-email\">\r\n {{ mapping?.createdByEmail || source?.createdByEmail }}\r\n {{(mapping?.createdAt || source?.createdAt)\r\n | date:'HH:mm:ss \u2013dd 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 [ngClass]=\"{'revision-card-approve-closed':(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n <div class=\"values-row\">\r\n <div class=\"value-block\">\r\n <div class=\"value\">\r\n {{ mapping?.revicedFootfall === null ? '--' :\r\n 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\r\n </ng-container>\r\n\r\n <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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 <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n 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\r\n <!-- Body Section -->\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail\">\r\n <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n class=\"card-body bg-white layers pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-4\">\r\n <!-- Original Image -->\r\n <div\r\n class=\"duplicate-head px-5 my-3\">\r\n Original image\r\n </div>\r\n <div class=\"row px-5\">\r\n <div\r\n class=\"col-md-4 relative\">\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\"\r\n class=\"w-100 rounded border\" />\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}</div>\r\n <div\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div\r\n class=\"separator separator-dashed mt-3 mb-5\">\r\n </div>\r\n <div class=\"row px-5\">\r\n <h5\r\n class=\"duplicate-head my-3 fs-6\">\r\n Tagged Duplicates</h5>\r\n <div *ngIf=\"isCheckboxEnable\"\r\n class=\"my-3\">\r\n <input type=\"checkbox\"\r\n [checked]=\"areAllDuplicatesSelected(original)\"\r\n (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n <label\r\n class=\"ms-2\">Select\r\n 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 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\r\n *ngIf=\"isCheckboxEnable\">\r\n <input\r\n type=\"checkbox\"\r\n *ngIf=\"!isLockedByReviewer(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=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div\r\n class=\"row my-2\">\r\n <div\r\n class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango\r\n ID: {{\r\n duplicate.tempId\r\n }}\r\n\r\n <span\r\n *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n 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\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div\r\n class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\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 class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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> <span\r\n *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#FFEAD5\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#FB6514\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n <input type=\"checkbox\"\r\n [(ngModel)]=\"selectAllByType[type]\"\r\n (change)=\"onSelectAll(type, $event)\">\r\n <label>Select All</label>\r\n </div>\r\n <ng-container\r\n *ngFor=\"let mapping of source?.mappingInfo\">\r\n <!-- Body Section -->\r\n <div *ngIf=\"mapping?.type ===viewMode\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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\r\n *ngIf=\"isCheckboxEnable\">\r\n\r\n <input\r\n *ngIf=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span\r\n class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\"\r\n height=\"19\"\r\n viewBox=\"0 0 19 19\"\r\n fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect\r\n x=\"1.11133\"\r\n y=\"0.555664\"\r\n width=\"16\"\r\n height=\"16\"\r\n rx=\"2\"\r\n fill=\"white\" />\r\n <rect\r\n x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\r\n mode=\"normal\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend\r\n mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original, i, type)\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div\r\n class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{\r\n original.tempId\r\n }}\r\n <span\r\n *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n class=\"ms-2\"><svg\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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\r\n class=\"desc-value ms-2\">\r\n Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\"\r\n height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect\r\n width=\"24\"\r\n height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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 *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{\r\n getCategoryCommentCountForSource(source,\r\n type) }} \r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'tagging'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango\r\n ID:\r\n {{\r\n c.tempId\r\n }}\r\n </div>\r\n <div\r\n class=\"text-muted\">\r\n Entry\r\n time:\r\n {{\r\n c.entryTime\r\n }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div\r\n class=\"fw-semibold\">\r\n {{\r\n c.createdByEmail\r\n }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"showApproveDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"(mapping?.status === 'Closed' || mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && ['tangoreview'].includes(mapping?.type)\"\r\n class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n <div *ngIf=\"!showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Show in details\r\n </span>\r\n <span class=\"chevron ms-3 cursor-pointer\"\r\n [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\r\n </div>\r\n\r\n <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n\r\n <div>\r\n <div class=\"nav-group bg-white btn-group w-auto my-2\">\r\n <ng-container>\r\n\r\n <button class=\"btn btn-outline px-6 py-3\"\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends('footfall')\">\r\n Total Footfall\r\n <span\r\n [ngClass]=\"type === 'footfall' ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ this.filterList?.length || 0 }}\r\n </span>\r\n </button>\r\n <button class=\"btn btn-outline px-6 py-3 text-capitalize\"\r\n *ngFor=\"let item of countData\"\r\n [ngClass]=\"type === item.type ? 'activePlanBtn' : 'inactivePlanBtn'\"\r\n (click)=\"selectPlanTrends(item.type)\">\r\n {{item.type}}\r\n <span\r\n [ngClass]=\"type === item.type ? 'activePlanBtn badge badge-active' : 'inactivePlanBtn badge badge-light-default'\">\r\n {{ item?.count || 0 }}\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n </div>\r\n <div class=\"row\">\r\n <div *ngFor=\"let original of filteredList;let i=index\"\r\n class=\"col-6 col-sm-4 col-md-3 col-lg-2-4 mb-2\">\r\n\r\n <div\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n <img [src]=\"original?.filePath\" alt=\"\"\r\n class=\"w-100 h-250px rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}\r\n\r\n </div>\r\n\r\n </div>\r\n <div class=\"col-3 my-2 pe-5 text-end\">\r\n <span\r\n *ngIf=\"original.revopsType==='non-tagging'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"18\"\r\n viewBox=\"0 0 19 18\" fill=\"none\">\r\n <path\r\n d=\"M6.02344 5.625H6.03094M16.2159 10.4325L10.8384 15.81C10.6991 15.9495 10.5337 16.0601 10.3516 16.1356C10.1695 16.2111 9.97431 16.2499 9.77719 16.2499C9.58006 16.2499 9.38487 16.2111 9.20278 16.1356C9.02068 16.0601 8.85525 15.9495 8.71594 15.81L2.27344 9.375V1.875H9.77344L16.2159 8.3175C16.4953 8.59854 16.6521 8.97872 16.6521 9.375C16.6521 9.77128 16.4953 10.1515 16.2159 10.4325Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n </path>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='duplicate'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n 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\"\r\n stroke-width=\"2\"\r\n 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\"\r\n fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='employee'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='houseKeeping'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\">\r\n <path fill-rule=\"evenodd\"\r\n 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>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='vendor'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"original.revopsType==='technician'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"original.revopsType==='junk'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\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\r\n\r\n </div>\r\n <div *ngIf=\"showTangoDetails\"\r\n class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n (click)=\"toggleRevisedDetails(mapping)\">\r\n <span class=\"text-primary \">\r\n Hide in details\r\n </span>\r\n\r\n <span class=\"chevron ms-3 cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n <!-- <div class=\"timeline\"></div> -->\r\n\r\n </div>\r\n </ng-container>\r\n </section>\r\n </div>\r\n\r\n </div>\r\n <section class=\"my-card\" *ngIf=\"!footfallLoading && !footfallNoData\">\r\n\r\n\r\n \r\n <div *ngIf=\"!approverClosed\" class=\"bg-white\">\r\n <div class=\"row top-bar\">\r\n <div class=\"col-md-6 position-relative mt-3\">\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 [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\">\r\n Select\r\n All</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 mt-2 pe-8\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n \r\n \r\n \r\n \r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Deny</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Reject</span>\r\n \r\n \r\n </button>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <button [disabled]=\"!overallSelectedIds?.length\"\r\n class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('approved')\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Accept</span>\r\n <span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Approve</span>\r\n \r\n </button>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n <ng-container *ngFor=\"let type of revopsTypes\">\r\n <section *ngIf=\"type ==='duplicate'\">\r\n\r\n <div *ngIf=\"hasRevopsType(type)\" 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\"\r\n stroke-linecap=\"round\" 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\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 pt-5 pb-0 px-0 m-3\">\r\n <div class=\"mt-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\r\n class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n <img [src]=\"imageUrl + original?.filePath\"\r\n alt=\"\" class=\"w-100 rounded border\" />\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n original.tempId\r\n }}</div>\r\n <div class=\"desc-value ms-2\">Entry Time: {{\r\n getFormattedEntryTime(original?.entryTime)\r\n }}</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\r\n 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 *ngIf=\"matchesStatusFilter(duplicate)\"\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\"\r\n *ngIf=\"!isLockedByReviewer(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 class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(duplicate)\"\r\n (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n viewBox=\"0 0 19 19\" fill=\"none\">\r\n <g\r\n filter=\"url(#filter0_d_2023_13718)\">\r\n <rect x=\"1.11133\"\r\n y=\"0.555664\" width=\"16\"\r\n height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\"\r\n y=\"0.833442\"\r\n width=\"15.4444\"\r\n height=\"15.4444\"\r\n rx=\"1.72222\"\r\n stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path\r\n d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter\r\n id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\"\r\n y=\"0.00010854\"\r\n width=\"18.2222\"\r\n height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood\r\n flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix\r\n in=\"SourceAlpha\"\r\n 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\r\n dy=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\r\n <feColorMatrix\r\n 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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n\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\"\r\n alt=\"\"\r\n (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n <!-- Duplicate Info -->\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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\r\n Time: {{\r\n getFormattedEntryTime(duplicate.entryTime)\r\n }}\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94051\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n\r\n </span>\r\n <span\r\n *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect width=\"24\" height=\"24\"\r\n rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_486_94090\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg> </span>\r\n </div>\r\n </div>\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 <div class=\"card-footer py-5\"\r\n *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion1(type,original?.tempId)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <span class=\"comments-count\">\r\n {{ getCategoryCommentCountForSource(source, type, original?.tempId) }}\r\n\r\n Comments</span>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\"\r\n stroke=\"#667085\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategoryMap[type + '_' + original?.tempId] === 'duplicate'\r\n && commentsAccordionOpenMap[type + '_' + original?.tempId]\">\r\n\r\n <!-- Loop each block: tagging / review / approve -->\r\n <ng-container\r\n *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- Loop inside comments -->\r\n <ng-container\r\n *ngFor=\"let c of block.comments\">\r\n <ng-container\r\n *ngIf=\"(block?.parent === original?.tempId && block.category ==='duplicate') || (c?.parent === original?.tempId && c.category ==='duplicate')\">\r\n\r\n <div *ngIf=\"(c.category === 'duplicate' || block.category === 'duplicate')\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{\r\n getInitialsFromEmail(c.createdByEmail)\r\n }}\r\n </div>\r\n <div class=\"w-100\">\r\n <!-- email -->\r\n <div\r\n class=\"fw-semibold\">\r\n {{ c.createdByEmail\r\n }}\r\n </div>\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- message text -->\r\n <p class=\"mb-2 mt-2\"\r\n *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n <!-- Review / Approve only -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <!-- Tagged images -->\r\n <div\r\n class=\"d-flex flex-wrap\">\r\n\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n <!-- Show only first 4 -->\r\n <ng-container\r\n *ngIf=\"i < 3\">\r\n <div\r\n class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n <!-- +N more -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div\r\n class=\"more-overlay\">\r\n </div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length\r\n -\r\n 3 }}\r\n </div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View\r\n all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </div>\r\n\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\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 </ng-container>\r\n <!-- Status Icons -->\r\n\r\n\r\n </div>\r\n </section>\r\n <section *ngIf=\"type !=='duplicate'\">\r\n <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n <div class=\"card-header min-h-25px pt-3\">\r\n <div class=\"duplicate-head text-lg my-3\"><span\r\n *ngIf=\"type ==='employee'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"16\"\r\n viewBox=\"0 0 18 16\" fill=\"none\">\r\n <path\r\n d=\"M12.75 14.75V13.25C12.75 12.4544 12.4339 11.6913 11.8713 11.1287C11.3087 10.5661 10.5456 10.25 9.75 10.25H3.75C2.95435 10.25 2.19129 10.5661 1.62868 11.1287C1.06607 11.6913 0.75 12.4544 0.75 13.25V14.75M17.25 14.75V13.25C17.2495 12.5853 17.0283 11.9396 16.621 11.4142C16.2138 10.8889 15.6436 10.5137 15 10.3475M12 1.3475C12.6453 1.51273 13.2173 1.88803 13.6257 2.41423C14.0342 2.94044 14.2559 3.58762 14.2559 4.25375C14.2559 4.91988 14.0342 5.56706 13.6257 6.09327C13.2173 6.61947 12.6453 6.99477 12 7.16M9.75 4.25C9.75 5.90685 8.40685 7.25 6.75 7.25C5.09315 7.25 3.75 5.90685 3.75 4.25C3.75 2.59315 5.09315 1.25 6.75 1.25C8.40685 1.25 9.75 2.59315 9.75 4.25Z\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span *ngIf=\"type ==='houseKeeping'\"\r\n class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\"\r\n height=\"18\" 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> <span *ngIf=\"type ==='junk'\" class=\"me-2\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"17\" height=\"19\"\r\n viewBox=\"0 0 17 19\" fill=\"none\">\r\n <path\r\n d=\"M1 4.33333H2.66667M2.66667 4.33333H16M2.66667 4.33333V16C2.66667 16.442 2.84226 16.8659 3.15482 17.1785C3.46738 17.4911 3.89131 17.6667 4.33333 17.6667H12.6667C13.1087 17.6667 13.5326 17.4911 13.8452 17.1785C14.1577 16.8659 14.3333 16.442 14.3333 16V4.33333H2.66667ZM5.16667 4.33333V2.66667C5.16667 2.22464 5.34226 1.80072 5.65482 1.48816C5.96738 1.17559 6.39131 1 6.83333 1H10.1667C10.6087 1 11.0326 1.17559 11.3452 1.48816C11.6577 1.80072 11.8333 2.22464 11.8333 2.66667V4.33333M6.83333 8.5V13.5M10.1667 8.5V13.5\"\r\n stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span> <span\r\n *ngIf=\"type !=='junk' && type !=='houseKeeping' && type !=='employee'\"\r\n class=\"me-2\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\"\r\n viewBox=\"0 0 21 21\" fill=\"none\">\r\n <path\r\n d=\"M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n fill=\"#EBE9FE\" />\r\n <path\r\n d=\"M5.66406 5.66663H5.67406M19.2541 12.0766L12.0841 19.2466C11.8983 19.4326 11.6777 19.5801 11.4349 19.6807C11.1921 19.7814 10.9319 19.8332 10.6691 19.8332C10.4062 19.8332 10.146 19.7814 9.90318 19.6807C9.66039 19.5801 9.43981 19.4326 9.25406 19.2466L0.664062 10.6666V0.666626H10.6641L19.2541 9.25663C19.6266 9.63135 19.8356 10.1383 19.8356 10.6666C19.8356 11.195 19.6266 11.7019 19.2541 12.0766Z\"\r\n stroke=\"#7A5AF8\" stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg></span> {{type | titlecase}}\r\n\r\n\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[type]\"\r\n (change)=\"onSelectAll(type, $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\"\r\n class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n <div class=\"row\">\r\n <ng-container\r\n *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n <div *ngIf=\"original?.revopsType ===type && matchesStatusFilter(original)\"\r\n class=\"col-md-3 mb-3 position-relative\">\r\n <div 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=\"!isLockedByReviewer(original)\"\r\n type=\"checkbox\"\r\n class=\"position-absolute absolute form-check-input\"\r\n [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n <span class=\"position-absolute absolute\"\r\n *ngIf=\"isLockedByReviewer(original)\"\r\n (click)=\"resetCheckbox(type, original)\">\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"19\" height=\"19\"\r\n 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\"\r\n width=\"16\" height=\"16\" rx=\"2\"\r\n fill=\"white\" />\r\n <rect x=\"1.38911\" y=\"0.833442\"\r\n width=\"15.4444\" height=\"15.4444\"\r\n rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n stroke-width=\"0.555556\" />\r\n <path d=\"M5.87109 8.55566H12.3526\"\r\n stroke=\"#344054\"\r\n stroke-width=\"0.927778\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_2023_13718\"\r\n x=\"0.00021708\" y=\"0.00010854\"\r\n width=\"18.2222\" height=\"18.2222\"\r\n filterUnits=\"userSpaceOnUse\"\r\n color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\"\r\n result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\"\r\n 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=\"0.555556\" />\r\n <feGaussianBlur\r\n stdDeviation=\"0.555556\" />\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\"\r\n in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_2023_13718\" />\r\n <feBlend mode=\"normal\"\r\n in=\"SourceGraphic\"\r\n in2=\"effect1_dropShadow_2023_13718\"\r\n 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 (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n class=\"w-100 rounded border cursor-pointer\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-8\">\r\n <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n {{\r\n 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\nheight: 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\"\r\n height=\"10\" rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path fill-rule=\"evenodd\"\r\n 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect width=\"12\"\r\n height=\"12\"\r\n 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)\r\n }}</div>\r\n </div>\r\n <div class=\"col-4\">\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"37\" height=\"37\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </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\" *ngIf=\"source?.commentsDetails?.length\">\r\n <div class=\"comments-accordion\">\r\n <!-- Accordion Header -->\r\n <div class=\"accordion-header\"\r\n (click)=\"toggleCommentsAccordion(type)\">\r\n <div\r\n class=\"d-flex justify-content-start align-items-center w-100\">\r\n <div class=\"comments-title\">\r\n\r\n <span class=\"comments-count\">\r\n {{getCategoryCommentCountForSource(source, type) }}\r\n Comments</span>\r\n\r\n\r\n </div>\r\n <div class=\"accordion-arrow ms-3\">\r\n <svg [class.rotated]=\"selectedCommentCategory === type && commentsAccordionOpen\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\"\r\n height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n 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 mt-3\"\r\n *ngIf=\"selectedCommentCategory === type && commentsAccordionOpen\">\r\n\r\n <!-- loop each block: tagging / review / approve -->\r\n <ng-container *ngFor=\"let block of source?.commentsDetails\">\r\n\r\n <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n <ng-container *ngIf=\"block.type === 'tagging'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n <div *ngIf=\"block.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div>\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex flex-wrap\">\r\n <div class=\"tango-card me-2\"\r\n *ngIf=\"c.filePath\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n </div>\r\n\r\n <div class=\"tango-meta small\">\r\n <div>Tango ID: {{ c.tempId }}\r\n </div>\r\n <div class=\"text-muted\">Entry\r\n time:\r\n {{ c.entryTime }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n <ng-container\r\n *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n <ng-container *ngFor=\"let c of block.comments\">\r\n\r\n <div *ngIf=\"c.category === selectedCommentCategory\"\r\n class=\"comment-thread d-flex mb-4\">\r\n\r\n <!-- avatar -->\r\n <div\r\n class=\"avatar avatar-text light-primary p-3\">\r\n\r\n {{ getInitialsFromEmail(c.createdByEmail) }}\r\n </div>\r\n\r\n <!-- content -->\r\n <div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\"\r\n *ngIf=\"c.createdAt\">\r\n {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy'\r\n }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n {{ c.message }}\r\n </p>\r\n\r\n\r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex flex-wrap\"\r\n *ngIf=\"c.taggedImages?.length\">\r\n\r\n <!-- first 3 images -->\r\n <div\r\n *ngFor=\"let img of c.taggedImages; let i = index\">\r\n <ng-container *ngIf=\"i < 3\">\r\n <div class=\"tango-card me-2\">\r\n <div class=\"tango-image\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row\">\r\n\r\n <div\r\n class=\"col-9\">\r\n <div\r\n class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{\r\n img.tempId\r\n }}\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n fill=\"none\">\r\n <rect\r\n y=\"0.5\"\r\n width=\"10\"\r\n height=\"10\"\r\n rx=\"5\"\r\n fill=\"#D1FADF\" />\r\n <path\r\n fill-rule=\"evenodd\"\r\n 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></span>\r\n\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'review'\"><svg\r\n style=\"width: 20px;\r\n height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n fill=\"none\">\r\n <g\r\n 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\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath\r\n id=\"clip0_1428_59484\">\r\n <rect\r\n width=\"12\"\r\n height=\"12\"\r\n 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=\"text-muted\">\r\n Entry time: {{\r\n img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span\r\n *ngIf=\"c.status === 'approved' && block.type === 'approve'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#D1FADF\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span\r\n *ngIf=\"c.status === 'rejected' && block.type === 'approve'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"27\" height=\"27\"\r\n viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\"\r\n fill=\"#FEE4E2\" />\r\n <g\r\n clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\"\r\n fill=\"white\"\r\n transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- +N View all card -->\r\n <div class=\"tango-card me-2 more-card text-center\"\r\n *ngIf=\"c.taggedImages.length > 3\"\r\n [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n (click)=\"openImagesPopup(c,block)\">\r\n <div class=\"more-overlay\"></div>\r\n\r\n <!-- vertical container -->\r\n <div\r\n class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n <div\r\n class=\"more-text fw-semibold\">\r\n +{{\r\n c.taggedImages.length -\r\n 3 }}</div>\r\n <div\r\n class=\"text-primary text-dark text-decoration-underline small\">\r\n View all\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n\r\n\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n <div *ngIf=\"footfallLoading\" class=\"card mt-5\">\r\n <div class=\"card-body h-500px\">\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 </div>\r\n <ng-container *ngIf=\"footfallNoData\">\r\n <div class=\"row mt-20\">\r\n <div class=\"col-lg-12 mt-20 mb-5\">\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 footfall directory</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\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\r\n ? this.overallSelectedIds?.length : this.popupValue ?\r\n this.popupValue:'--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n </p>\r\n <!-- Count Box -->\r\n <!-- &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) -->\r\n <div *ngIf=\"selectedCategories?.length === 1 &&(selectedCategories[0] !== 'duplicate'|| selectedDuplicateParentCount === 1) \" 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>\r\n\r\n<ng-template #closeMultiplePopup 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. Since accuracy is below 85%, it will be sent to Tango and marked as \u201CUnder Tango Review\u201D until reviewed.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"multipleCloseCancel()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"multipleCloseTicket()\">\r\n Got It\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup 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 Re-Assign Ticket\r\n </h5>\r\n\r\n <!-- Description -->\r\n <p class=\"mb-3 test-appvalue\">\r\n Transfer the ticket to another user\r\n </p>\r\n\r\n <!-- Count Box -->\r\n <div class=\"row w-100 my-3\">\r\n <div class=\"col-md-12 mb-4\">\r\n <label class=\"label mb-2\">Choose User</label>\r\n <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n </div>\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)=\"cancelassign()\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n Re-Assign\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n <div class=\"p-4 m-4\">\r\n <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n <h5 class=\"modal-title mb-2 m-0\">{{ currentPreviewItem.revopsType | titlecase}}</h5>\r\n\r\n <!-- Close Button -->\r\n <button type=\"button\" class=\"btn-close fs-4\" aria-label=\"Close\" (click)=\"model.close()\">\r\n\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"w-100 position-relative mb-4\">\r\n\r\n <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n <div class=\"row my-2\">\r\n <div class=\"col-10\">\r\n <div class=\"desc-title ms-2 my-2\">\r\n Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\" class=\"ms-2\"><svg\r\n 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 *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'rejected'\" class=\"ms-2\"><svg\r\n 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\" 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\" 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(currentPreviewItem.entryTime) }}</div>\r\n </div>\r\n <div class=\"col-2 mt-2 text-end\">\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></span>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n <small class=\"text-muted\">{{ currentPreviewItem.reason }}</small>\r\n </div> -->\r\n\r\n <button class=\"btn btn-light position-absolute me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n [disabled]=\"previewList.length <= 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n <path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n <section *ngIf=\"isCheckboxEnable\">\r\n\r\n <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n\r\n <!-- Reject / Deny -->\r\n <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected', currentPreviewItem)\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Deny</span>\r\n<span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Reject</span>\r\n </button>\r\n\r\n <!-- Approve / Accept -->\r\n <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved', currentPreviewItem)\">\r\n <span *ngIf=\"hasReviewerAccess && selectedRole === 'reviewer'\">Accept</span>\r\n<span *ngIf=\"hasApproverAccess && selectedRole === 'approver'\">Approve</span>\r\n </button>\r\n\r\n </div>\r\n </section>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n <div class=\"h-auto p-10\">\r\n <div class=\"card-header border-0\">\r\n <div class=\"card-title\">Start audit</div>\r\n <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n </div>\r\n <div class=\"row my-3\">\r\n <div class=\"col-md-7 mb-4\">\r\n <label class=\"label\">Store</label>\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n </div>\r\n <div class=\"col-md-5 mt-7\">\r\n\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" [isInvalidDate]=\"disableToday\"\r\n (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3 card p-3 back-ground\" *ngIf=\"footfallcount>0\">\r\n <div class=\"card-title\">{{footfallcount}}</div>\r\n <div class=\"mt-2 card-title1\">Total footfall</div>\r\n </div>\r\n <div class=\"card-body mt-5\">\r\n <div class=\"w-100 d-flex mt-5\">\r\n\r\n <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button [disabled]=\"footfallcount<=0\" class=\"btn btn-primary w-50 ms-2\"\r\n (click)=\"modal.close('isConfirmed')\">start</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n <div class=\"images-modal\">\r\n <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n <div>\r\n\r\n <div class=\"comment-header d-flex align-items-start\">\r\n\r\n <!-- Avatar -->\r\n <div class=\"avatar avatar-text light-primary p-3 me-3\">\r\n {{ getInitialsFromEmail(selectedComment.createdByEmail) }}\r\n </div>\r\n\r\n <!-- Text content -->\r\n <div class=\"comment-info\">\r\n <!-- email -->\r\n <div class=\"medium fw-semibold\">\r\n {{ selectedComment?.createdByEmail }}\r\n </div>\r\n\r\n <!-- created time -->\r\n <div class=\"medium text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- optional comment text under time -->\r\n <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n {{ selectedComment?.message }}\r\n </p>\r\n </div>\r\n <span class=\"cursor-pointer\" (click)=\"closeImagesPopup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\"\r\n height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path d=\"M13 1L1 13M1 1L13 13\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></span>\r\n <!-- <button type=\"button\" class=\"btn-close ms-3\" >\r\n </button> -->\r\n </div>\r\n\r\n\r\n <div class=\"modal-body d-flex flex-wrap border border-1 p-3 gap-2\">\r\n <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card me-2\">\r\n <div class=\"tango-image\" [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n </div>\r\n <div class=\"row my-2\">\r\n <div class=\"col-9\">\r\n <div class=\"tango-meta small\">\r\n <div>\r\n Tango ID: {{ img.tempId }}\r\n\r\n <!-- status dots -->\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'approved'\"><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></span>\r\n\r\n <span *ngIf=\"blockType === 'review' && selectedComment.status === 'rejected'\"><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\" 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\" 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=\"text-muted\">\r\n Entry time: {{ img.entryTime }}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3 px-0 mt-2\">\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'approved'\" >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n <g clip-path=\"url(#clip0_486_94051)\">\r\n <path\r\n d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94051\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <span *ngIf=\"blockType === 'approve' && selectedComment.status === 'rejected'\"><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n <g clip-path=\"url(#clip0_486_94090)\">\r\n <path\r\n d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_486_94090\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n </clipPath>\r\n </defs>\r\n </svg></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 #closeacuuracyissue let-modal>\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-5 fw-bold\">\r\n Close accuracy issue\r\n </h5>\r\n <p class=\"mb-5 test-appvalue\">\r\n The ticket will be \u201Cclosed\u201D and updated in the store as a final revision.\r\n </p>\r\n <div class=\"w-100 d-flex justify-content-end\">\r\n <button class=\"btn btn-outline me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n <button class=\"btn btn-primary\" (click)=\"modal.close('isConfirmed')\">\r\n Close accuracy issue\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.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-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}.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{position:relative;display:flex;align-items:flex-start;padding-left:0}.comment-thread .avatar{width:40px;height:40px}.comment-thread:before{left:20px}.comment-thread:before{content:\"\";position:absolute;left:24px;top:50px;bottom:0;width:1.5px;background-color:#e5e5e5}.comment-thread:first-child:before{top:30%}.comment-thread:last-child:before{bottom:20%}.comment-thread .avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-right:12px;display:flex;align-items:center;justify-content:center}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:175px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff}.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}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}.revision-card-approve-closed{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.back-ground{background-color:#f9fafb}.card-title1{font-weight:600;font-size:14px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.acc-issue{background-color:#eaf8ff}.accuracy-panel{background:#eaf6ff;border:1px solid #d6eefc;border-radius:8px;padding:18px;margin-bottom:3px}.accuracy-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}.info-line{color:#1f6fb3;margin-bottom:14px;font-size:.95rem}.form-small{max-width:400px}.add-btn{margin-top:8px}.panel-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:18px}.badge-light-blue{background:#ffffffd9;color:#0d6efd;font-weight:600}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:1000px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}.col-lg-2-4{width:14%;float:left}.activePlanBtn{border-radius:6px;background:var(--Primary-50, #EAF8FF);color:var(--Gray-700, #344054);font-size:14px!important;font-weight:500!important;line-height:20px}.inactivePlanBtn{color:var(--Gray-500, #344054)!important;font-size:14px;font-weight:500!important;line-height:20px}.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}.my-card{position:relative}.top-bar{position:sticky;top:0;left:0;width:100%;background:#fff;z-index:1}.page-content{height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden;padding:16px}\n"] }]
|
|
6449
6452
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$1.GlobalStateService }, { type: TicketService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i4.ToastService }, { type: i1$3.FormBuilder }, { type: i2.Router }, { type: AuditService }], propDecorators: { tooltip: [{
|
|
6450
6453
|
type: ViewChild,
|
|
6451
6454
|
args: ["tooltip"]
|
|
@@ -8611,6 +8614,7 @@ class AuditReportPopupComponent {
|
|
|
8611
8614
|
centralOpsData;
|
|
8612
8615
|
tangoData;
|
|
8613
8616
|
tangoAccuracy = '';
|
|
8617
|
+
ticketType = '';
|
|
8614
8618
|
constructor(modalService, activeModal, service, router, timerService, cd, apiservice, route, toast) {
|
|
8615
8619
|
this.modalService = modalService;
|
|
8616
8620
|
this.activeModal = activeModal;
|
|
@@ -8623,6 +8627,7 @@ class AuditReportPopupComponent {
|
|
|
8623
8627
|
this.toast = toast;
|
|
8624
8628
|
}
|
|
8625
8629
|
ngOnInit() {
|
|
8630
|
+
this.ticketType = sessionStorage.getItem('ticketType');
|
|
8626
8631
|
let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
|
|
8627
8632
|
this.totalfiles = filedata;
|
|
8628
8633
|
this.apiservice.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
|
|
@@ -8946,11 +8951,11 @@ class AuditReportPopupComponent {
|
|
|
8946
8951
|
this.activeModal.close();
|
|
8947
8952
|
}
|
|
8948
8953
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditReportPopupComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }, { token: TicketService }, { token: i2.Router }, { token: TimerService }, { token: i0.ChangeDetectorRef }, { token: AuditService }, { token: i2.ActivatedRoute }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8949
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditReportPopupComponent, selector: "lib-audit-report-popup", inputs: { selectedType: "selectedType" }, viewQueries: [{ propertyName: "confirmerror", first: true, predicate: ["confirmerror"], descendants: true }], ngImport: i0, template: "<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\r\n <div class=\"modal-content merge-ticket-modal\">\r\n\r\n <!-- Header -->\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">Close ticket</h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closepopup()\"></button>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"tangoAccuracy>85&¢ralOpsData?.revicedFootfall\">\r\n <p class=\"mb-0\">The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.</p>\r\n </div>\r\n <div *ngIf=\"tangoAccuracy>85&&!centralOpsData?.revicedFootfall\">\r\n <p class=\"mb-0\">You\u2019re about to close this ticket. Do you want to proceed?</p>\r\n </div>\r\n <!-- Info banner -->\r\n <div class=\"alert merge-info d-flex\" *ngIf=\"tangoAccuracy<85\">\r\n <div class=\"me-3 mt-1\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </div>\r\n <div>\r\n\r\n <p class=\"mb-0\">\r\n The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.\r\n Since accuracy is below 85%, it will be marked as an <b>\u201COpen-Accuracy Issue\u201D</b> in Tango.\r\n Please add the cause for the low accuracy.\r\n </p>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Cards -->\r\n <div class=\"row g-3 mt-2\">\r\n <!-- Central Ops -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"centralOpsData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Central Ops</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{centralOpsData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{centralOpsData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"tangoData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Tango</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{tangoData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{tangoData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closepopup()\">\r\n cancel\r\n </button>\r\n <button *ngIf=\"tangoAccuracy>85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n submit\r\n </button>\r\n <button *ngIf=\"tangoAccuracy<85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n Review\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.audit-test{font-family:Inter;font-style:normal;font-weight:600!important;font-size:22px!important;line-height:27px;color:#000}.text-gray-500{font-family:Inter;font-style:normal;font-weight:500!important;font-size:14px!important;line-height:17px;color:#5e6278}.ms-25{margin-left:16rem}.text-gray-400{font-family:Inter;font-style:normal;font-weight:500;font-size:14px!important;line-height:17px;letter-spacing:-.02em;color:#676e76}::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px!important}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!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}.merge-ticket-modal{border-radius:16px}.merge-info{border:1px dashed #a9c4ff;background:#f5f9ff;border-radius:10px;font-size:13px;color:#008edf}.merge-info i{font-size:18px}.card{border-radius:12px}.card .value{font-size:24px;font-weight:600}.card .label{font-size:12px;color:#6c757d}.arrow{font-size:16px;margin-left:4px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
8954
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditReportPopupComponent, selector: "lib-audit-report-popup", inputs: { selectedType: "selectedType" }, viewQueries: [{ propertyName: "confirmerror", first: true, predicate: ["confirmerror"], descendants: true }], ngImport: i0, template: "<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\r\n <div class=\"modal-content merge-ticket-modal\">\r\n\r\n <!-- Header -->\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">Close ticket</h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closepopup()\"></button>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"tangoAccuracy>85&¢ralOpsData?.revicedFootfall&&ticketType!='internal'\">\r\n <p class=\"mb-0\">The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.</p>\r\n </div>\r\n <div *ngIf=\"tangoAccuracy>85&&!centralOpsData?.revicedFootfall||ticketType==='internal'\">\r\n <p class=\"mb-0\">You\u2019re about to close this ticket. Do you want to proceed?</p>\r\n </div>\r\n <!-- Info banner -->\r\n <div class=\"alert merge-info d-flex\" *ngIf=\"ticketType!='internal'&&tangoAccuracy<85\">\r\n <div class=\"me-3 mt-1\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </div>\r\n <div>\r\n\r\n <p class=\"mb-0\">\r\n The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.\r\n Since accuracy is below 85%, it will be marked as an <b>\u201COpen-Accuracy Issue\u201D</b> in Tango.\r\n Please add the cause for the low accuracy.\r\n </p>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Cards -->\r\n <div class=\"row g-3 mt-2\">\r\n <!-- Central Ops -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"centralOpsData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Central Ops</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{centralOpsData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{centralOpsData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"tangoData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Tango</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{tangoData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{tangoData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closepopup()\">\r\n cancel\r\n </button>\r\n <button *ngIf=\"tangoAccuracy>85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n submit\r\n </button>\r\n <button *ngIf=\"tangoAccuracy<85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n Review\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.audit-test{font-family:Inter;font-style:normal;font-weight:600!important;font-size:22px!important;line-height:27px;color:#000}.text-gray-500{font-family:Inter;font-style:normal;font-weight:500!important;font-size:14px!important;line-height:17px;color:#5e6278}.ms-25{margin-left:16rem}.text-gray-400{font-family:Inter;font-style:normal;font-weight:500;font-size:14px!important;line-height:17px;letter-spacing:-.02em;color:#676e76}::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px!important}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!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}.merge-ticket-modal{border-radius:16px}.merge-info{border:1px dashed #a9c4ff;background:#f5f9ff;border-radius:10px;font-size:13px;color:#008edf}.merge-info i{font-size:18px}.card{border-radius:12px}.card .value{font-size:24px;font-weight:600}.card .label{font-size:12px;color:#6c757d}.arrow{font-size:16px;margin-left:4px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
8950
8955
|
}
|
|
8951
8956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditReportPopupComponent, decorators: [{
|
|
8952
8957
|
type: Component,
|
|
8953
|
-
args: [{ selector: 'lib-audit-report-popup', template: "<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\r\n <div class=\"modal-content merge-ticket-modal\">\r\n\r\n <!-- Header -->\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">Close ticket</h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closepopup()\"></button>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"tangoAccuracy>85&¢ralOpsData?.revicedFootfall\">\r\n <p class=\"mb-0\">The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.</p>\r\n </div>\r\n <div *ngIf=\"tangoAccuracy>85&&!centralOpsData?.revicedFootfall\">\r\n <p class=\"mb-0\">You\u2019re about to close this ticket. Do you want to proceed?</p>\r\n </div>\r\n <!-- Info banner -->\r\n <div class=\"alert merge-info d-flex\" *ngIf=\"tangoAccuracy<85\">\r\n <div class=\"me-3 mt-1\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </div>\r\n <div>\r\n\r\n <p class=\"mb-0\">\r\n The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.\r\n Since accuracy is below 85%, it will be marked as an <b>\u201COpen-Accuracy Issue\u201D</b> in Tango.\r\n Please add the cause for the low accuracy.\r\n </p>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Cards -->\r\n <div class=\"row g-3 mt-2\">\r\n <!-- Central Ops -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"centralOpsData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Central Ops</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{centralOpsData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{centralOpsData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"tangoData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Tango</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{tangoData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{tangoData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closepopup()\">\r\n cancel\r\n </button>\r\n <button *ngIf=\"tangoAccuracy>85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n submit\r\n </button>\r\n <button *ngIf=\"tangoAccuracy<85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n Review\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.audit-test{font-family:Inter;font-style:normal;font-weight:600!important;font-size:22px!important;line-height:27px;color:#000}.text-gray-500{font-family:Inter;font-style:normal;font-weight:500!important;font-size:14px!important;line-height:17px;color:#5e6278}.ms-25{margin-left:16rem}.text-gray-400{font-family:Inter;font-style:normal;font-weight:500;font-size:14px!important;line-height:17px;letter-spacing:-.02em;color:#676e76}::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px!important}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!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}.merge-ticket-modal{border-radius:16px}.merge-info{border:1px dashed #a9c4ff;background:#f5f9ff;border-radius:10px;font-size:13px;color:#008edf}.merge-info i{font-size:18px}.card{border-radius:12px}.card .value{font-size:24px;font-weight:600}.card .label{font-size:12px;color:#6c757d}.arrow{font-size:16px;margin-left:4px}\n"] }]
|
|
8958
|
+
args: [{ selector: 'lib-audit-report-popup', template: "<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\r\n <div class=\"modal-content merge-ticket-modal\">\r\n\r\n <!-- Header -->\r\n <div class=\"modal-header border-0 pb-0\">\r\n <h5 class=\"modal-title\">Close ticket</h5>\r\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closepopup()\"></button>\r\n </div>\r\n\r\n <!-- Body -->\r\n <div class=\"modal-body\">\r\n <div *ngIf=\"tangoAccuracy>85&¢ralOpsData?.revicedFootfall&&ticketType!='internal'\">\r\n <p class=\"mb-0\">The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.</p>\r\n </div>\r\n <div *ngIf=\"tangoAccuracy>85&&!centralOpsData?.revicedFootfall||ticketType==='internal'\">\r\n <p class=\"mb-0\">You\u2019re about to close this ticket. Do you want to proceed?</p>\r\n </div>\r\n <!-- Info banner -->\r\n <div class=\"alert merge-info d-flex\" *ngIf=\"ticketType!='internal'&&tangoAccuracy<85\">\r\n <div class=\"me-3 mt-1\">\r\n <i class=\"bi bi-info-circle\"></i>\r\n </div>\r\n <div>\r\n\r\n <p class=\"mb-0\">\r\n The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.\r\n Since accuracy is below 85%, it will be marked as an <b>\u201COpen-Accuracy Issue\u201D</b> in Tango.\r\n Please add the cause for the low accuracy.\r\n </p>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Cards -->\r\n <div class=\"row g-3 mt-2\">\r\n <!-- Central Ops -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"centralOpsData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Central Ops</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{centralOpsData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{centralOpsData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tango -->\r\n <div class=\"col-12 col-md-6\" *ngIf=\"tangoData?.revicedFootfall\">\r\n <div class=\"card h-100\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title mb-3 fw-semibold\">Tango</div>\r\n <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n <div>\r\n <div class=\"value\">{{tangoData?.revicedFootfall}}</div>\r\n <div class=\"label\">Footfall</div>\r\n </div>\r\n <div class=\"text-end\">\r\n <div class=\"value text-primary\">\r\n {{tangoData?.revicedPerc}}\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n \u2193\r\n </span>\r\n <span class=\"arrow\"\r\n *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n \u2191\r\n </span>\r\n </div>\r\n <div class=\"label\">Accuracy</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"modal-footer border-0 pt-0\">\r\n <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closepopup()\">\r\n cancel\r\n </button>\r\n <button *ngIf=\"tangoAccuracy>85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n submit\r\n </button>\r\n <button *ngIf=\"tangoAccuracy<85\" type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n Review\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.audit-test{font-family:Inter;font-style:normal;font-weight:600!important;font-size:22px!important;line-height:27px;color:#000}.text-gray-500{font-family:Inter;font-style:normal;font-weight:500!important;font-size:14px!important;line-height:17px;color:#5e6278}.ms-25{margin-left:16rem}.text-gray-400{font-family:Inter;font-style:normal;font-weight:500;font-size:14px!important;line-height:17px;letter-spacing:-.02em;color:#676e76}::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px!important}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!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}.merge-ticket-modal{border-radius:16px}.merge-info{border:1px dashed #a9c4ff;background:#f5f9ff;border-radius:10px;font-size:13px;color:#008edf}.merge-info i{font-size:18px}.card{border-radius:12px}.card .value{font-size:24px;font-weight:600}.card .label{font-size:12px;color:#6c757d}.arrow{font-size:16px;margin-left:4px}\n"] }]
|
|
8954
8959
|
}], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: TicketService }, { type: i2.Router }, { type: TimerService }, { type: i0.ChangeDetectorRef }, { type: AuditService }, { type: i2.ActivatedRoute }, { type: i4.ToastService }], propDecorators: { selectedType: [{
|
|
8955
8960
|
type: Input
|
|
8956
8961
|
}], confirmerror: [{
|