tango-app-ui-manage-tickets 3.7.0-beta.32 → 3.7.0-beta.34

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

@@ -3035,12 +3035,22 @@ class TicketFootfallNewComponent {
                         fromDate: this.headerFilters?.date?.startDate,
                         toDate: this.headerFilters?.date?.endDate,
                     };
-                    this.getTicketSummary();
-                    this.getTicketList();
+                    this.viewTicket('store');
                 }
             },
         });
     }
+    viewTicket(type) {
+        this.tangoType = type;
+        if (type === 'store') {
+            this.getTicketSummary();
+            this.getTicketList(this.tangoType);
+        }
+        else {
+            this.getTicketSummary();
+            this.getTicketList(this.tangoType);
+        }
+    }
     areAllItemsReviewed(mapping) {
         const revised = mapping?.revisedDetail || [];
         if (!revised.length)
@@ -3068,19 +3078,18 @@ class TicketFootfallNewComponent {
             (a.action === 'approved' || a.action === 'rejected'));
     }
     selectedRole = '';
+    statusVal;
     getHeaderStatus() {
         const roleMapping = this.getCurrentRoleMapping();
-        console.log('roleMapping in getHeaderStatus:', roleMapping);
+        this.statusVal = roleMapping;
+        // console.log('roleMapping in getHeaderStatus:', roleMapping);
         if (roleMapping?.status) {
             const allReviewed = this.areAllItemsReviewed(roleMapping);
             if (roleMapping.status === 'In-Progress') {
-                // Show Close button while in-progress
                 this.closeBtn = true;
-                // Enable only when everything reviewed
                 this.closeDisabled = !allReviewed;
             }
             else {
-                // For other statuses (Open, Closed, etc.)
                 this.closeBtn = false;
                 this.closeDisabled = true;
             }
@@ -3091,48 +3100,59 @@ class TicketFootfallNewComponent {
         this.closeDisabled = true;
         return this.ticketData?.status || '--';
     }
+    approverClosed = false;
     getCurrentRoleMapping() {
         if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
             return null;
         }
         let approverMapping = null;
         let reviewerMapping = null;
-        // Go through all tickets and mappingInfo
+        let tangoMapping = null;
+        let hasClosedApprove = false; // 👈 track overall condition
         for (const ticket of this.footfallTicketsData) {
             const source = ticket?._source;
             const mappingList = source?.mappingInfo || [];
-            // find approver mapping with revisedDetail
-            if (!approverMapping) {
-                const foundApprover = mappingList.find((m) => m?.type === 'approve' && m?.revisedDetail?.length);
-                if (foundApprover) {
-                    approverMapping = foundApprover;
+            for (const m of mappingList) {
+                // 👇 overall check for arrowshow (approve + Closed)
+                if (m?.type === 'approve' &&
+                    m?.status?.toLowerCase() === 'closed') {
+                    this.approverClosed = hasClosedApprove = true;
                 }
-            }
-            // find reviewer mapping with revisedDetail
-            if (!reviewerMapping) {
-                const foundReviewer = mappingList.find((m) => m?.type === 'review' && m?.revisedDetail?.length);
-                if (foundReviewer) {
-                    reviewerMapping = foundReviewer;
+                if (m?.type === 'tangoreview' && m?.revisedDetail?.length) {
+                    tangoMapping = m; // last tango wins
+                }
+                if (m?.type === 'approve' && m?.revisedDetail?.length) {
+                    approverMapping = m; // last approve wins
+                }
+                if (m?.type === 'review' && m?.revisedDetail?.length) {
+                    reviewerMapping = m; // last review wins
+                    this.closeBtn = true;
                 }
-                this.closeBtn = true;
             }
         }
-        // 🔹 Priority based on permissions
+        // 👇 set arrowshow based on overall array result
+        this.arrowshow = !hasClosedApprove;
+        // => false if any approve+Closed found, true otherwise
+        // 🔹 1) Tango has highest priority – if present, ignore others
+        if (tangoMapping) {
+            return tangoMapping;
+        }
+        // 🔹 2) Then approver / reviewer based on access
         if (this.hasApproverAccess && approverMapping) {
             return approverMapping;
         }
         if (this.hasReviewerAccess && reviewerMapping) {
             return reviewerMapping;
         }
-        // if no mapping matches permissions, fallback to something or null
-        return approverMapping || reviewerMapping || null;
+        // 🔹 3) Fallback if nothing found
+        return null;
     }
     getStatusBadgeClass(status) {
         const map = {
             'Open': 'badge-light-warning',
             'In-Progress': 'badge-light-primary',
-            'Under tange review': 'badge-light-primary',
-            'Tange review done': 'badge-light-primary',
+            'Under tangoreview': 'badge-light-primary',
+            'Tango review done': 'badge-light-primary',
             'Closed': 'badge-secondary',
             'Pending': 'badge-light-warning',
             'Reviewer-Closed': 'badge-light-warning',
@@ -3173,14 +3193,14 @@ class TicketFootfallNewComponent {
     loading = true;
     noData = false;
     tangoType = "store";
-    getTicketList() {
+    getTicketList(type) {
         this.loading = true;
         this.searchValue = this.searchValue?.trim() || "";
         this.offset = this.offset || 1;
         this.limit = this.limit || 10;
         this.isExport = false;
         this.service
-            .getTicketListApi(this.footfallList_req.client, this.footfallList_req.fromDate, this.footfallList_req.toDate, this.searchValue, this.limit, this.offset, this.isExport, this.sortedColumn, this.sortDirection, this.tangoType)
+            .getTicketListApi(this.footfallList_req.client, this.footfallList_req.fromDate, this.footfallList_req.toDate, this.searchValue, this.limit, this.offset, this.isExport, this.sortedColumn, this.sortDirection, type)
             .pipe(takeUntil(this.destroy$))
             .subscribe({
             next: (res) => {
@@ -3264,14 +3284,14 @@ class TicketFootfallNewComponent {
         this.currentPage = Number(pageOffset);
         this.offset = Number(pageOffset);
         // this.limit = 10;
-        this.getTicketList();
+        this.getTicketList(this.tangoType);
     }
     onPageSizeChange(pageSize) {
         this.pageSize = Number(pageSize);
         this.limit = Number(pageSize);
         this.currentPage = 1;
         this.offset = 1;
-        this.getTicketList();
+        this.getTicketList(this.tangoType);
     }
     setpageSize() {
         if (this.totalItems < 10) {
@@ -3285,7 +3305,7 @@ class TicketFootfallNewComponent {
         this.currentPage = 1;
         this.offset = 1;
         this.limit = 10;
-        this.getTicketList();
+        this.getTicketList(this.tangoType);
     }
     exportXLSX() {
         this.searchValue = this.searchValue?.trim() || "";
@@ -3312,7 +3332,7 @@ class TicketFootfallNewComponent {
             this.sortedColumn = column;
             this.sortDirection = 1;
         }
-        this.getTicketList();
+        this.getTicketList(this.tangoType);
     }
     select = "ticketList";
     ticketData;
@@ -3340,7 +3360,7 @@ class TicketFootfallNewComponent {
         this.select = "ticketList";
         this.footfallTicketsData = [];
         this.getTicketSummary();
-        this.getTicketList();
+        this.getTicketList(this.tangoType);
         this.closeBtn = false;
         this.isCheckboxEnable = false;
     }
@@ -3710,7 +3730,7 @@ class TicketFootfallNewComponent {
     }
     ticketView(data) {
         this.ticketData = data;
-        if (this.ticketData?.status === 'In-Progress' || this.ticketData?.status === 'Under tange review' || this.ticketData?.status === 'Tange review done' || this.getHeaderStatus() === 'In-Progress') {
+        if (this.ticketData?.status === 'In-Progress' || this.ticketData?.status === 'Under tango review' || this.ticketData?.status === 'Tango review done' || this.getHeaderStatus() === 'In-Progress') {
             this.closeBtn = true;
             this.closeDisabled = false;
             this.isCheckboxEnable = true;
@@ -3946,6 +3966,7 @@ class TicketFootfallNewComponent {
             id: this.popupIds,
             status: status,
             type: this.hasApproverAccess ? "approve" : "review",
+            ...(this.remarks?.trim() && { comments: this.remarks.trim() })
         };
         this.service
             .getUpdateTempStatusApi(obj)
@@ -4059,16 +4080,15 @@ class TicketFootfallNewComponent {
         });
     }
     isLockedByReviewer(original) {
-        // When approver has access, ignore reviewer lock
+        // 🔹 Approver flow
         if (this.hasApproverAccess) {
             this.getCurrentRoleMapping();
-            // this.isApproved1(original) || this.isRejected1(original);
-            return false;
-        }
-        else {
-            this.getCurrentReviewMapping();
+            // lock if already approved/rejected by APPROVER
+            return this.isApproved1(original) || this.isRejected1(original);
         }
-        // Otherwise, lock if approved or rejected by review
+        // 🔹 Reviewer flow
+        this.getCurrentReviewMapping();
+        // lock if already approved/rejected by REVIEW
         return this.isApproved(original) || this.isRejected(original);
     }
     isApproved1(original) {
@@ -4088,21 +4108,27 @@ class TicketFootfallNewComponent {
         return actions.some((a) => a.actionType === "review" && a.action === "rejected");
     }
     resetCheckbox(type, original) {
-        if (!original?.actions) {
+        if (!original?.actions || !Array.isArray(original.actions)) {
+            return;
+        }
+        const actions = original.actions;
+        // 1) Check if there is a decision (review/approve → approved/rejected)
+        const hasDecision = actions.some((a) => ((a.actionType === "review" || a.actionType === "approve") &&
+            (a.action === "approved" || a.action === "rejected")));
+        // If NO approved/rejected → do nothing
+        if (!hasDecision) {
             return;
         }
-        // 1) remove ONLY the review action (approved/rejected)
-        original.actions = original.actions.filter((a) => a.actionType !== "review");
-        // after this, example becomes:
-        // [ { actionType: 'tagging', action: 'submitted' } ]
-        // 2) remove from selected list if present
+        // 2) Remove only decision actions
+        original.actions = actions.filter((a) => !((a.actionType === "review" || a.actionType === "approve") &&
+            (a.action === "approved" || a.action === "rejected")));
+        // 3) Remove from selected array
         const tempId = original.tempId;
         const arr = this.selectedByType[type] || [];
-        const index = arr.indexOf(tempId);
-        if (index > -1) {
-            arr.splice(index, 1);
-        }
-        // 3) uncheck "select all" for that type
+        const i = arr.indexOf(tempId);
+        if (i > -1)
+            arr.splice(i, 1);
+        // 4) Uncheck select all for that type
         this.selectAllByType[type] = false;
     }
     viewMode = "tagging";
@@ -4284,11 +4310,11 @@ class TicketFootfallNewComponent {
         // this.loadRoleData(role);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFootfallNewComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$1.GlobalStateService }, { token: TicketService }, { token: i0.ChangeDetectorRef }, { token: ExcelService }, { token: i4.ToastService }, { token: i6.FormBuilder }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFootfallNewComponent, selector: "lib-ticket-footfall-new", outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }, { propertyName: "imagePreviewPopup", first: true, predicate: ["imagePreviewPopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n    <div class=\"row ms-3 my-3\">\r\n        <!-- <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <li class=\"nav-item\">\r\n                <a class=\"nav-link cursor-pointer no-border me-3\">\r\n                    Tickets\r\n                </a> \r\n            </li>\r\n            <li class=\"nav-item\">\r\n                <a class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n                </a>\r\n            </li>\r\n        </ul> -->\r\n        <ul *ngIf=\"hasApproverAccess && hasReviewerAccess\"\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=\"col-md-9 mb-3\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header ellipse1 px-5\">\r\n                    <div class=\"my-0\">\r\n                        <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n                            getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n                        <span class=\"sub-header\">Total tickets</span>\r\n                    </div>\r\n                    <div *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 my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n                                getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n                      getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n                                getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n                      getFootfallSummaryData?.inprogress !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n                                getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">In-progress</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n                      getFootfallSummaryData?.closedTickets !== undefined\" class=\"col my-3\">\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\r\n                        <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n                      getFootfallSummaryData?.dueToday !== undefined\" class=\"col my-3 \">\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 my-3 \">\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 my-3 \">\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>\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 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 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\">Showing tickets with Accuracy Below 85% <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\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\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                            <span class=\"ms-2\">Export</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of tableColumns\"\r\n                                [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n                                (click)=\"col.sortable && onSort(col.key)\">\r\n\r\n                                {{ col.label }}\r\n\r\n                                <!-- Sorting Icon -->\r\n                                <svg *ngIf=\"col.sortable && col.type !== '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\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of footfallListData\">\r\n\r\n                            <td *ngFor=\"let col of tableColumns\">\r\n\r\n                                <!-- Store + ticket clickable -->\r\n                                <ng-container *ngIf=\"col.type === '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.type === 'date' || col.type === '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.type === '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.type === 'text'\">\r\n                                    {{ row[col.key] ?? '--' }}\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\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>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n            <div class=\"card h-100\">\r\n                <div class=\"card-header border-0 pt-3 ps-1 pe-5\">\r\n                    <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_d_887_4505)\">\r\n                                <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feOffset dy=\"1\" />\r\n                                    <feGaussianBlur stdDeviation=\"1\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_887_4505\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div class=\"col-8\">\r\n\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n                                placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n                        </div>\r\n                        <div class=\"col-4 p-0 btn\">\r\n                            <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n                                <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                                Filter\r\n                            </button>\r\n\r\n                            <!-- Overlay (click outside to close) -->\r\n                            <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n                            <form [formGroup]=\"filterForm\">\r\n                                <!-- Filter card -->\r\n                                <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n                                    (click)=\"$event.stopPropagation()\">\r\n                                    <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n                                    <!-- Status -->\r\n                                    <div class=\"mb-3\">\r\n                                        <label class=\"form-label mb-1\">Status</label>\r\n                                        <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n                                            <option value=\"\">Select</option>\r\n                                            <option>Open</option>\r\n                                            <option>In-Progress</option>\r\n                                            <option>Close</option>\r\n                                            <option>Under tange review</option>\r\n                                            <option>Tange review done</option>\r\n                                            <option>Expired</option>\r\n                                        </select>\r\n                                    </div>\r\n\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Reviewer accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n\r\n                                    <!-- TODO: same block for Approver & Tango -->\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Approver accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Tango accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                            (click)=\"resetFilter()\">Reset</button>\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n                                            (click)=\"applyFilter()\">Apply</button>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n                            <!-- LEFT: checkbox + text -->\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <input type=\"checkbox\" class=\"me-2\" [checked]=\"allSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select all {{ storeCount }} stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span class=\"me-1\">Reviewer(%)</span>\r\n                                <!-- if you want arrow icon -->\r\n                                <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"14\" height=\"14\" 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\r\n                    <ul class=\"list-unstyled 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 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\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                <div class=\"nodata-title my-3\">No Stores Found</div>\r\n                                <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n            <div class=\"card bg-light-primary p-1 h-100\">\r\n                <div class=\"card-header border-0 pt-3 px-5\">\r\n                    <div class=\"d-flex justify-content-start\">\r\n                        <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n                                style=\"position: absolute; top: 10px; left: 10px;\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg> </span>\r\n                            <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-toolbar\">\r\n                        <span *ngIf=\"ticketData?.status === 'Raised' || getHeaderStatus() === 'Open'\">\r\n\r\n                            <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">Start\r\n                                Review</button>\r\n                        </span>\r\n                        <span *ngIf=\"getHeaderStatus() === 'In-Progress'\">\r\n\r\n                            <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                (click)=\"stopReview()\">Close\r\n                                Ticket</button>\r\n                        </span>\r\n\r\n                        <span *ngIf=\"ticketData.status === 'Tange review done'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-4 \">\r\n                    <div class=\"row mb-6\">\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\"> <span class=\"badge mx-2\"\r\n                                [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n                                {{ getHeaderStatus() | titlecase }}\r\n                            </span></div>\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n                    </div>\r\n\r\n\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 *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg 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 *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                        fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n\r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n\r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n\r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span\r\n                                                class=\"footfall-label ms-3\">Actual Footfall</span>\r\n                                        </div>\r\n                                        <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}\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=\"mapping?.status !== 'closed' || mapping?.type !== 'tagging'\">\r\n\r\n                                            <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\"\r\n                                                class=\"timeline\"></div>\r\n                                            <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\"\r\n                                                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\r\n\r\n                                                    </div>\r\n\r\n                                                    <div class=\"user-email\">\r\n                                                        {{ mapping?.createdByEmail || source?.createdByEmail }} \u2022 {{ (mapping?.createdAt || source?.createdAt) | 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                                                *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\">\r\n                                                <div class=\"values-row\">\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ mapping?.revicedFootfall === null ? '--' :\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                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n\r\n\r\n\r\n                                    <!-- <div class=\"timeline\"></div> -->\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </section>\r\n                    </div>\r\n\r\n                </div>\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-6 position-relative\">\r\n                        <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n                            <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\"\r\n                                [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n                                All</span>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n                        <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <select class=\"form-select\" aria-placeholder=\"show all\">\r\n                                    <option value=\"all\">Show all</option>\r\n                                    <option value=\"accept\">Accept</option>\r\n                                    <option value=\"reject\">Reject</option>\r\n                                    <option value=\"pending\">Pending</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('rejected')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                                    }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('approved')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                                    'Accept' }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <!-- <div  class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n                        </div>\r\n                        <div class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                (click)=\"popupOpen('approved')\">Approve</button>\r\n                        </div> -->\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <div class=\"bg-white\">\r\n                    <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n                            <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers\">\r\n                                <!-- Header Section -->\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <h3 class=\"text-lg font-semibold mb-4\">\r\n                                        <span class=\"me-2\">\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                    <path\r\n                                                        d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                        stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </g>\r\n                                                <defs>\r\n                                                    <clipPath id=\"clip0_730_76157\">\r\n                                                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                    </clipPath>\r\n                                                </defs>\r\n                                            </svg>\r\n                                        </span>\r\n                                        Duplicates\r\n                                    </h3>\r\n                                </div>\r\n\r\n                                <!-- Body Section -->\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                <div class=\"my-4\">\r\n                                                    <!-- Original Image -->\r\n                                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                                    </div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <div class=\"col-md-4 relative\">\r\n                                                            <div\r\n                                                                class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                    class=\"w-100 rounded border\" />\r\n                                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                                    original.tempId\r\n                                                                    }}</div>\r\n                                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                            <input type=\"checkbox\"\r\n                                                                [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                            <label class=\"ms-2\">Select All</label>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                            class=\"col-md-3 mb-3 position-relative\">\r\n                                                            <div 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                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"19\" height=\"19\" viewBox=\"0 0 19 19\"\r\n                                                                            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                                                                <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                <!-- Duplicate Image -->\r\n                                                                <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n                                                                    (click)=\"openImagePreview(original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                    class=\"w-100 rounded border duplicate-image\" />\r\n\r\n                                                                <!-- Duplicate Info -->\r\n                                                                <div\r\n                                                                    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\" height=\"10\"\r\n                                                                                        rx=\"5\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            fill=\"#FEE4E2\" />\r\n                                                                                        <path\r\n                                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\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 Time: {{\r\n                                                                            getFormattedEntryTime(duplicate.entryTime) }}\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                         \r\n                                                                        </span>\r\n                                                                        <span\r\n                                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                <!-- Duplicate Reason -->\r\n                                                                <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <!-- Status Icons -->\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Body -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                            <!-- \r\n                                        <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n                                        </div> -->\r\n                            <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\">\r\n                                        <!-- icon here -->\r\n                                        Employee/Staff\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n                                        (change)=\"onSelectAll('employee', $event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n\r\n                                <!-- loop over tickets -->\r\n\r\n\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <div *ngIf=\"original?.revopsType === 'employee'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3  h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('employee', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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\r\n                                                        </div>\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                       <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\">\r\n                                                                Entry Time: {{\r\n                                                                getFormattedEntryTime(original?.entryTime) }}\r\n                                                            </div>\r\n                                                            </div>\r\n                                                            <div class=\"col-2 ms-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> House Keeping\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n                                        (change)=\"onSelectAll('houseKeeping',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('houseKeeping', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                            class=\"w-100 rounded border\" />\r\n                                                   <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">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 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\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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) }}</div>\r\n</div>\r\n                                                            <div class=\"col-3 ms-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> Junk\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n                                        (change)=\"onSelectAll('junk',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n                                    <!-- One card for all junk images in this mapping -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <!-- Loop through all items in revisedDetail -->\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <!-- Show only junk items as columns -->\r\n                                                <div *ngIf=\"original?.revopsType === 'junk'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('junk', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                        <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            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(original, 'review')?.action === 'rejected'\r\n  \" class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\r\n                                                            <div 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-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                   \r\n                                                                   \r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\">\r\n                                                                     <svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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>\r\n                                                                 </span>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n                                        </div> -->\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length\r\n                || '--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n            <div class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\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 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <h5 class=\"modal-title mb-2\">{{ previewTitle }}</h5>\r\n\r\n            <div class=\"w-100 position-relative mb-4\">\r\n\r\n                <button class=\"btn btn-light position-absolute start-0 top-50 translate-middle-y\"\r\n                    (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                    \u2039\r\n                </button>\r\n\r\n                <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n               <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-11\">\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-1 ms-3\">\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\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 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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                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                <!-- Duplicate Reason -->\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 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                    [disabled]=\"previewList.length <= 1\">\r\n                    \u203A\r\n                </button>\r\n\r\n            </div>\r\n\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"rejectPopup()\">Reject</button>\r\n                <button class=\"btn btn-primary\" (click)=\"acceptPopup()\">Accept</button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TicketFootfallNewComponent, selector: "lib-ticket-footfall-new", outputs: { filterChange: "filterChange" }, viewQueries: [{ propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }, { propertyName: "imagePreviewPopup", first: true, predicate: ["imagePreviewPopup"], 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'\" 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')\" 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')\" 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=\"col-md-9 mb-3\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header ellipse1 px-5\">\r\n                    <div class=\"my-0\">\r\n                        <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n                            getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n                        <span class=\"sub-header\">Total tickets</span>\r\n                    </div>\r\n                    <div *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 my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n                                getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n                      getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n                                getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n                      getFootfallSummaryData?.inprogress !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n                                getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">In-progress</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n                      getFootfallSummaryData?.closedTickets !== undefined\" class=\"col my-3\">\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\r\n                        <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n                      getFootfallSummaryData?.dueToday !== undefined\" class=\"col my-3 \">\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 my-3 \">\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 my-3 \">\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>\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 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 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\">Showing tickets with Accuracy Below 85% <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\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\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                            <span class=\"ms-2\">Export</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of tableColumns\"\r\n                                [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n                                (click)=\"col.sortable && onSort(col.key)\">\r\n\r\n                                {{ col.label }}\r\n\r\n                                <!-- Sorting Icon -->\r\n                                <svg *ngIf=\"col.sortable && col.type !== '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\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of footfallListData\">\r\n\r\n                            <td *ngFor=\"let col of tableColumns\">\r\n\r\n                                <!-- Store + ticket clickable -->\r\n                                <ng-container *ngIf=\"col.type === '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.type === 'date' || col.type === '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.type === '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.type === 'text'\">\r\n                                    {{ row[col.key] ?? '--' }}\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\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>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n            <div class=\"card h-100\">\r\n                <div class=\"card-header border-0 pt-3 ps-1 pe-5\">\r\n                    <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_d_887_4505)\">\r\n                                <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feOffset dy=\"1\" />\r\n                                    <feGaussianBlur stdDeviation=\"1\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_887_4505\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div class=\"col-8\">\r\n\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n                                placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n                        </div>\r\n                        <div class=\"col-4 p-0 btn\">\r\n                            <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n                                <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                                Filter\r\n                            </button>\r\n\r\n                            <!-- Overlay (click outside to close) -->\r\n                            <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n                            <form [formGroup]=\"filterForm\">\r\n                                <!-- Filter card -->\r\n                                <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n                                    (click)=\"$event.stopPropagation()\">\r\n                                    <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n                                    <!-- Status -->\r\n                                    <div class=\"mb-3\">\r\n                                        <label class=\"form-label mb-1\">Status</label>\r\n                                        <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n                                            <option value=\"\">Select</option>\r\n                                            <option>Open</option>\r\n                                            <option>In-Progress</option>\r\n                                            <option>Close</option>\r\n                                            <option>Under tango review</option>\r\n                                            <option>Tango review done</option>\r\n                                            <option>Expired</option>\r\n                                        </select>\r\n                                    </div>\r\n\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Reviewer accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n\r\n                                    <!-- TODO: same block for Approver & Tango -->\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Approver accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Tango accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                            (click)=\"resetFilter()\">Reset</button>\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n                                            (click)=\"applyFilter()\">Apply</button>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n                            <!-- LEFT: checkbox + text -->\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <input type=\"checkbox\" class=\"me-2\" [checked]=\"allSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select all {{ storeCount }} stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span class=\"me-1\">Reviewer(%)</span>\r\n                                <!-- if you want arrow icon -->\r\n                                <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"14\" height=\"14\" 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\r\n                    <ul class=\"list-unstyled 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 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\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                <div class=\"nodata-title my-3\">No Stores Found</div>\r\n                                <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n            <div class=\"card bg-light-primary p-1 h-100\">\r\n                <div class=\"card-header border-0 pt-3 px-5\">\r\n                    <div class=\"d-flex justify-content-start\">\r\n                        <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n                                style=\"position: absolute; top: 10px; left: 10px;\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg> </span>\r\n                            <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-toolbar\">\r\n                      <!-- Start Review -->\r\n<span *ngIf=\"(ticketData?.status === 'Raised' || getHeaderStatus() === 'Open')\r\n             && statusVal?.type !== 'tangoreview'\">\r\n\r\n  <button *ngIf=\"!closeBtn\"\r\n          class=\"btn btn-sm btn-primary mx-2\"\r\n          (click)=\"startReview()\">\r\n    Start Review\r\n  </button>\r\n</span>\r\n\r\n                       <!-- Close Ticket -->\r\n<span *ngIf=\"getHeaderStatus() === 'In-Progress'\r\n             && statusVal?.type !== 'tangoreview'\">\r\n\r\n  <button *ngIf=\"closeBtn\"\r\n          [disabled]=\"closeDisabled\"\r\n          class=\"btn btn-sm btn-primary mx-2\"\r\n          (click)=\"stopReview()\">\r\n    Close Ticket\r\n  </button>\r\n</span>\r\n\r\n\r\n                        <span *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-4 \">\r\n                    <div class=\"row mb-6\">\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\"> <span class=\"badge mx-2\"\r\n                                [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n                                {{ getHeaderStatus() | titlecase }}\r\n                            </span></div>\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n                    </div>\r\n\r\n\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 *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg 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 *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                        fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n\r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n\r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n\r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span\r\n                                                class=\"footfall-label ms-3\">Actual Footfall</span>\r\n                                        </div>\r\n                                        <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}\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=\"mapping?.status === 'Closed' \r\n       && ['tagging','review','approve','tangoreview'].includes(mapping?.type)\">\r\n\r\n                                            <div \r\n                                                class=\"timeline\"></div>\r\n                                            <div \r\n                                                 \r\n                                                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 }} \u2022 {{ (mapping?.createdAt || source?.createdAt) | 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\r\n  class=\"revision-card\"\r\n  [ngClass]=\"{\r\n    'revision-card-approve-closed':\r\n      mapping?.status === 'Closed' && mapping?.type === 'approve'\r\n  }\"\r\n>\r\n  <div class=\"values-row\">\r\n    <div class=\"value-block\">\r\n      <div class=\"value\">\r\n        {{ mapping?.revicedFootfall === null ? '--' : mapping?.revicedFootfall }}\r\n      </div>\r\n      <div class=\"label fw-bold\">Revised Footfall</div>\r\n    </div>\r\n\r\n    <div class=\"value-block\">\r\n      <div class=\"value accuracy down\">\r\n        {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n        <span class=\"ms-1\">\r\n          <!-- arrow svg -->\r\n        </span>\r\n      </div>\r\n      <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n    </div>\r\n\r\n    <div class=\"timeline-new my-2\"></div>\r\n\r\n    <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n      <div class=\"value\">\r\n        {{ item?.value ?? '--' }}\r\n      </div>\r\n      <div class=\"label\">\r\n        {{ item?.name }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n                                        </ng-container>\r\n                                           \r\n <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\" class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                        <div class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                            (click)=\"showRevisedDetails = !showRevisedDetails\">\r\n                                            <span class=\"text-primary \">\r\n                                                {{ showRevisedDetails ? 'Hide details' : 'Show in details' }}\r\n                                            </span>\r\n                                            <span class=\"chevron ms-3\" [class.rotate-180]=\"showRevisedDetails\"><svg\r\n                                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                    viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                    <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                </svg></span>\r\n                                        </div>\r\n\r\n                                             <div class=\"details-body mt-2\" *ngIf=\"showRevisedDetails\">\r\n   <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n                            <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers mx-0\">\r\n                                <!-- Header Section -->\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <h3 class=\"text-lg font-semibold mb-4\">\r\n                                        <span class=\"me-2\">\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                    <path\r\n                                                        d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                        stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </g>\r\n                                                <defs>\r\n                                                    <clipPath id=\"clip0_730_76157\">\r\n                                                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                    </clipPath>\r\n                                                </defs>\r\n                                            </svg>\r\n                                        </span>\r\n                                        Duplicates\r\n                                    </h3>\r\n                                </div>\r\n\r\n                                <!-- Body Section -->\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                <div class=\"my-4\">\r\n                                                    <!-- Original Image -->\r\n                                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                                    </div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <div class=\"col-md-4 relative\">\r\n                                                            <div\r\n                                                                class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                    class=\"w-100 rounded border\" />\r\n                                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                                    original.tempId\r\n                                                                    }}</div>\r\n                                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                            <input type=\"checkbox\"\r\n                                                                [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                            <label class=\"ms-2\">Select All</label>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                            class=\"col-md-3 mb-3 position-relative\">\r\n                                                            <div 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     \r\n                                                                <!-- Duplicate Image -->\r\n                                                                <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n                                                                    (click)=\"openImagePreview(original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                    class=\"w-100 rounded border duplicate-image\" />\r\n\r\n                                                                <!-- Duplicate Info -->\r\n                                                                <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                                            Tango ID: {{ duplicate.tempId }}\r\n    \r\n                                                                            <span\r\n                                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                    <rect y=\"0.5\" width=\"10\" height=\"10\"\r\n                                                                                        rx=\"5\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            fill=\"#FEE4E2\" />\r\n                                                                                        <path\r\n                                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\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 Time: {{\r\n                                                                            getFormattedEntryTime(duplicate.entryTime) }}\r\n                                                                        </div>\r\n                                                                        </div>\r\n                                                                    <div 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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                         \r\n                                                                        </span>\r\n                                                                        <span\r\n                                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                               \r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <!-- Status Icons -->\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Body -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\">\r\n                                        <!-- icon here -->\r\n                                        Employee/Staff\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n                                        (change)=\"onSelectAll('employee', $event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n\r\n                                <!-- loop over tickets -->\r\n\r\n\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <div *ngIf=\"original?.revopsType === 'employee'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3  h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n                                                      \r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                       <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\">\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> House Keeping\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n                                        (change)=\"onSelectAll('houseKeeping',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                   <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">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 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\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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) }}</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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> Junk\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n                                        (change)=\"onSelectAll('junk',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n                                    <!-- One card for all junk images in this mapping -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <!-- Loop through all items in revisedDetail -->\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <!-- Show only junk items as columns -->\r\n                                                <div *ngIf=\"original?.revopsType === 'junk'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                        <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            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(original, 'review')?.action === 'rejected'\r\n  \" class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\r\n                                                            <div 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\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                   \r\n                                                                   \r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\">\r\n                                                                     <svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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>\r\n                                                                 </span>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                                                </div>\r\n                                        </div>\r\n                        \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                <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\"> Select\r\n                                All</span>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n                        <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <select class=\"form-select\" aria-placeholder=\"show all\">\r\n                                    <option value=\"all\">Show all</option>\r\n                                    <option value=\"accept\">Accept</option>\r\n                                    <option value=\"reject\">Reject</option>\r\n                                    <option value=\"pending\">Pending</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('rejected')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                                    }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('approved')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                                    'Accept' }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <!-- <div  class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n                        </div>\r\n                        <div class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                (click)=\"popupOpen('approved')\">Approve</button>\r\n                        </div> -->\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <div *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\r\n                            <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers\">\r\n                                <!-- Header Section -->\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <h3 class=\"text-lg font-semibold mb-4\">\r\n                                        <span class=\"me-2\">\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                    <path\r\n                                                        d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                        stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </g>\r\n                                                <defs>\r\n                                                    <clipPath id=\"clip0_730_76157\">\r\n                                                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                    </clipPath>\r\n                                                </defs>\r\n                                            </svg>\r\n                                        </span>\r\n                                        Duplicates\r\n                                    </h3>\r\n                                </div>\r\n\r\n                                <!-- Body Section -->\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                <div class=\"my-4\">\r\n                                                    <!-- Original Image -->\r\n                                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                                    </div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <div class=\"col-md-4 relative\">\r\n                                                            <div\r\n                                                                class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                    class=\"w-100 rounded border\" />\r\n                                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                                    original.tempId\r\n                                                                    }}</div>\r\n                                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                            <input type=\"checkbox\"\r\n                                                                [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                            <label class=\"ms-2\">Select All</label>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                            class=\"col-md-3 mb-3 position-relative\">\r\n                                                            <div 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                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"19\" height=\"19\" viewBox=\"0 0 19 19\"\r\n                                                                            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                                                                <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                <!-- Duplicate Image -->\r\n                                                                <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n                                                                    (click)=\"openImagePreview(original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                    class=\"w-100 rounded border duplicate-image\" />\r\n\r\n                                                                <!-- Duplicate Info -->\r\n                                                                <div\r\n                                                                    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\" height=\"10\"\r\n                                                                                        rx=\"5\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            fill=\"#FEE4E2\" />\r\n                                                                                        <path\r\n                                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\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 Time: {{\r\n                                                                            getFormattedEntryTime(duplicate.entryTime) }}\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                         \r\n                                                                        </span>\r\n                                                                        <span\r\n                                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                <!-- Duplicate Reason -->\r\n                                                                <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <!-- Status Icons -->\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Body -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                            <!-- \r\n                                        <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n                                        </div> -->\r\n                            <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\">\r\n                                        <!-- icon here -->\r\n                                        Employee/Staff\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n                                        (change)=\"onSelectAll('employee', $event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n\r\n                                <!-- loop over tickets -->\r\n\r\n\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <div *ngIf=\"original?.revopsType === 'employee'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3  h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('employee', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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\r\n                                                        </div>\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                       <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\">\r\n                                                                Entry Time: {{\r\n                                                                getFormattedEntryTime(original?.entryTime) }}\r\n                                                            </div>\r\n                                                            </div>\r\n                                                            <div class=\"col-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> House Keeping\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n                                        (change)=\"onSelectAll('houseKeeping',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('houseKeeping', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                            class=\"w-100 rounded border\" />\r\n                                                   <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">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 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\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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) }}</div>\r\n</div>\r\n                                                            <div class=\"col-3 ms-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> Junk\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n                                        (change)=\"onSelectAll('junk',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n                                    <!-- One card for all junk images in this mapping -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <!-- Loop through all items in revisedDetail -->\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <!-- Show only junk items as columns -->\r\n                                                <div *ngIf=\"original?.revopsType === 'junk'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('junk', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                        <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            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(original, 'review')?.action === 'rejected'\r\n  \" class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\r\n                                                            <div 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-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                   \r\n                                                                   \r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\">\r\n                                                                     <svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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>\r\n                                                                 </span>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n                                        </div> -->\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length\r\n                || '--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n            <div class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\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 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <h5 class=\"modal-title mb-2\">{{ previewTitle }}</h5>\r\n\r\n            <div class=\"w-100 position-relative mb-4\">\r\n\r\n                <button class=\"btn btn-light position-absolute start-0 top-50 translate-middle-y\"\r\n                    (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                    \u2039\r\n                </button>\r\n\r\n                <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n               <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-11\">\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-1 ms-3\">\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\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 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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                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                <!-- Duplicate Reason -->\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 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                    [disabled]=\"previewList.length <= 1\">\r\n                    \u203A\r\n                </button>\r\n\r\n            </div>\r\n\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"rejectPopup()\">Reject</button>\r\n                <button class=\"btn btn-primary\" (click)=\"acceptPopup()\">Accept</button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}.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}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}\n"], dependencies: [{ kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "pipe", type: i6$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i6$1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TicketFootfallNewComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-ticket-footfall-new", template: "<section *ngIf=\"select ==='ticketList'\">\r\n    <div class=\"row ms-3 my-3\">\r\n        <!-- <ul class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <li class=\"nav-item\">\r\n                <a class=\"nav-link cursor-pointer no-border me-3\">\r\n                    Tickets\r\n                </a> \r\n            </li>\r\n            <li class=\"nav-item\">\r\n                <a class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n                </a>\r\n            </li>\r\n        </ul> -->\r\n        <ul *ngIf=\"hasApproverAccess && hasReviewerAccess\"\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=\"col-md-9 mb-3\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header ellipse1 px-5\">\r\n                    <div class=\"my-0\">\r\n                        <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n                            getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n                        <span class=\"sub-header\">Total tickets</span>\r\n                    </div>\r\n                    <div *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 my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n                                getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n                      getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n                                getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n                      getFootfallSummaryData?.inprogress !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n                                getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">In-progress</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n                      getFootfallSummaryData?.closedTickets !== undefined\" class=\"col my-3\">\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\r\n                        <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n                      getFootfallSummaryData?.dueToday !== undefined\" class=\"col my-3 \">\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 my-3 \">\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 my-3 \">\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>\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 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 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\">Showing tickets with Accuracy Below 85% <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\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\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                            <span class=\"ms-2\">Export</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of tableColumns\"\r\n                                [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n                                (click)=\"col.sortable && onSort(col.key)\">\r\n\r\n                                {{ col.label }}\r\n\r\n                                <!-- Sorting Icon -->\r\n                                <svg *ngIf=\"col.sortable && col.type !== '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\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of footfallListData\">\r\n\r\n                            <td *ngFor=\"let col of tableColumns\">\r\n\r\n                                <!-- Store + ticket clickable -->\r\n                                <ng-container *ngIf=\"col.type === '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.type === 'date' || col.type === '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.type === '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.type === 'text'\">\r\n                                    {{ row[col.key] ?? '--' }}\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\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>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n            <div class=\"card h-100\">\r\n                <div class=\"card-header border-0 pt-3 ps-1 pe-5\">\r\n                    <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_d_887_4505)\">\r\n                                <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feOffset dy=\"1\" />\r\n                                    <feGaussianBlur stdDeviation=\"1\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_887_4505\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div class=\"col-8\">\r\n\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n                                placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n                        </div>\r\n                        <div class=\"col-4 p-0 btn\">\r\n                            <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n                                <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                                Filter\r\n                            </button>\r\n\r\n                            <!-- Overlay (click outside to close) -->\r\n                            <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n                            <form [formGroup]=\"filterForm\">\r\n                                <!-- Filter card -->\r\n                                <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n                                    (click)=\"$event.stopPropagation()\">\r\n                                    <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n                                    <!-- Status -->\r\n                                    <div class=\"mb-3\">\r\n                                        <label class=\"form-label mb-1\">Status</label>\r\n                                        <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n                                            <option value=\"\">Select</option>\r\n                                            <option>Open</option>\r\n                                            <option>In-Progress</option>\r\n                                            <option>Close</option>\r\n                                            <option>Under tange review</option>\r\n                                            <option>Tange review done</option>\r\n                                            <option>Expired</option>\r\n                                        </select>\r\n                                    </div>\r\n\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Reviewer accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n\r\n                                    <!-- TODO: same block for Approver & Tango -->\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Approver accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Tango accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                            (click)=\"resetFilter()\">Reset</button>\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n                                            (click)=\"applyFilter()\">Apply</button>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n                            <!-- LEFT: checkbox + text -->\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <input type=\"checkbox\" class=\"me-2\" [checked]=\"allSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select all {{ storeCount }} stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span class=\"me-1\">Reviewer(%)</span>\r\n                                <!-- if you want arrow icon -->\r\n                                <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"14\" height=\"14\" 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\r\n                    <ul class=\"list-unstyled 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 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\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                <div class=\"nodata-title my-3\">No Stores Found</div>\r\n                                <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n            <div class=\"card bg-light-primary p-1 h-100\">\r\n                <div class=\"card-header border-0 pt-3 px-5\">\r\n                    <div class=\"d-flex justify-content-start\">\r\n                        <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n                                style=\"position: absolute; top: 10px; left: 10px;\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg> </span>\r\n                            <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-toolbar\">\r\n                        <span *ngIf=\"ticketData?.status === 'Raised' || getHeaderStatus() === 'Open'\">\r\n\r\n                            <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">Start\r\n                                Review</button>\r\n                        </span>\r\n                        <span *ngIf=\"getHeaderStatus() === 'In-Progress'\">\r\n\r\n                            <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                (click)=\"stopReview()\">Close\r\n                                Ticket</button>\r\n                        </span>\r\n\r\n                        <span *ngIf=\"ticketData.status === 'Tange review done'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-4 \">\r\n                    <div class=\"row mb-6\">\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\"> <span class=\"badge mx-2\"\r\n                                [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n                                {{ getHeaderStatus() | titlecase }}\r\n                            </span></div>\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n                    </div>\r\n\r\n\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 *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg 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 *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                        fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n\r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n\r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n\r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span\r\n                                                class=\"footfall-label ms-3\">Actual Footfall</span>\r\n                                        </div>\r\n                                        <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}\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=\"mapping?.status !== 'closed' || mapping?.type !== 'tagging'\">\r\n\r\n                                            <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\"\r\n                                                class=\"timeline\"></div>\r\n                                            <div *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\"\r\n                                                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\r\n\r\n                                                    </div>\r\n\r\n                                                    <div class=\"user-email\">\r\n                                                        {{ mapping?.createdByEmail || source?.createdByEmail }} \u2022 {{ (mapping?.createdAt || source?.createdAt) | 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                                                *ngIf=\"mapping?.type === 'tagging' || mapping?.type === 'review'\">\r\n                                                <div class=\"values-row\">\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ mapping?.revicedFootfall === null ? '--' :\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                                        </ng-container>\r\n\r\n                                    </ng-container>\r\n\r\n\r\n\r\n                                    <!-- <div class=\"timeline\"></div> -->\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </section>\r\n                    </div>\r\n\r\n                </div>\r\n                <div class=\"row\">\r\n                    <div class=\"col-md-6 position-relative\">\r\n                        <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n                            <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\"\r\n                                [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n                                All</span>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n                        <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <select class=\"form-select\" aria-placeholder=\"show all\">\r\n                                    <option value=\"all\">Show all</option>\r\n                                    <option value=\"accept\">Accept</option>\r\n                                    <option value=\"reject\">Reject</option>\r\n                                    <option value=\"pending\">Pending</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('rejected')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                                    }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('approved')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                                    'Accept' }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <!-- <div  class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n                        </div>\r\n                        <div class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                (click)=\"popupOpen('approved')\">Approve</button>\r\n                        </div> -->\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <div class=\"bg-white\">\r\n                    <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n                            <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers\">\r\n                                <!-- Header Section -->\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <h3 class=\"text-lg font-semibold mb-4\">\r\n                                        <span class=\"me-2\">\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                    <path\r\n                                                        d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                        stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </g>\r\n                                                <defs>\r\n                                                    <clipPath id=\"clip0_730_76157\">\r\n                                                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                    </clipPath>\r\n                                                </defs>\r\n                                            </svg>\r\n                                        </span>\r\n                                        Duplicates\r\n                                    </h3>\r\n                                </div>\r\n\r\n                                <!-- Body Section -->\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                <div class=\"my-4\">\r\n                                                    <!-- Original Image -->\r\n                                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                                    </div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <div class=\"col-md-4 relative\">\r\n                                                            <div\r\n                                                                class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                    class=\"w-100 rounded border\" />\r\n                                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                                    original.tempId\r\n                                                                    }}</div>\r\n                                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                            <input type=\"checkbox\"\r\n                                                                [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                            <label class=\"ms-2\">Select All</label>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                            class=\"col-md-3 mb-3 position-relative\">\r\n                                                            <div 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                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"19\" height=\"19\" viewBox=\"0 0 19 19\"\r\n                                                                            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                                                                <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                <!-- Duplicate Image -->\r\n                                                                <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n                                                                    (click)=\"openImagePreview(original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                    class=\"w-100 rounded border duplicate-image\" />\r\n\r\n                                                                <!-- Duplicate Info -->\r\n                                                                <div\r\n                                                                    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\" height=\"10\"\r\n                                                                                        rx=\"5\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            fill=\"#FEE4E2\" />\r\n                                                                                        <path\r\n                                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\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 Time: {{\r\n                                                                            getFormattedEntryTime(duplicate.entryTime) }}\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                         \r\n                                                                        </span>\r\n                                                                        <span\r\n                                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                <!-- Duplicate Reason -->\r\n                                                                <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <!-- Status Icons -->\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Body -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                            <!-- \r\n                                        <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n                                        </div> -->\r\n                            <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\">\r\n                                        <!-- icon here -->\r\n                                        Employee/Staff\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n                                        (change)=\"onSelectAll('employee', $event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n\r\n                                <!-- loop over tickets -->\r\n\r\n\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <div *ngIf=\"original?.revopsType === 'employee'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3  h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('employee', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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\r\n                                                        </div>\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                       <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\">\r\n                                                                Entry Time: {{\r\n                                                                getFormattedEntryTime(original?.entryTime) }}\r\n                                                            </div>\r\n                                                            </div>\r\n                                                            <div class=\"col-2 ms-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> House Keeping\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n                                        (change)=\"onSelectAll('houseKeeping',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('houseKeeping', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                            class=\"w-100 rounded border\" />\r\n                                                   <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">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 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\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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) }}</div>\r\n</div>\r\n                                                            <div class=\"col-3 ms-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> Junk\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n                                        (change)=\"onSelectAll('junk',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n                                    <!-- One card for all junk images in this mapping -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <!-- Loop through all items in revisedDetail -->\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <!-- Show only junk items as columns -->\r\n                                                <div *ngIf=\"original?.revopsType === 'junk'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('junk', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                        <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            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(original, 'review')?.action === 'rejected'\r\n  \" class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\r\n                                                            <div 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-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                   \r\n                                                                   \r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\">\r\n                                                                     <svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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>\r\n                                                                 </span>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n                                        </div> -->\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length\r\n                || '--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n            <div class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\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 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <h5 class=\"modal-title mb-2\">{{ previewTitle }}</h5>\r\n\r\n            <div class=\"w-100 position-relative mb-4\">\r\n\r\n                <button class=\"btn btn-light position-absolute start-0 top-50 translate-middle-y\"\r\n                    (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                    \u2039\r\n                </button>\r\n\r\n                <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n               <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-11\">\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-1 ms-3\">\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\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 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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                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                <!-- Duplicate Reason -->\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 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                    [disabled]=\"previewList.length <= 1\">\r\n                    \u203A\r\n                </button>\r\n\r\n            </div>\r\n\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"rejectPopup()\">Reject</button>\r\n                <button class=\"btn btn-primary\" (click)=\"acceptPopup()\">Accept</button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}.nav-item .nav-link.active{border:none;border-radius:6px;background:var(--Primary-50, #EAF8FF);padding:8px 12px}\n"] }]
+            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'\" 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')\" 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')\" 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=\"col-md-9 mb-3\">\r\n            <div class=\"card\">\r\n                <div class=\"card-header ellipse1 px-5\">\r\n                    <div class=\"my-0\">\r\n                        <h5 class=\"card-title my-0\">{{ getFootfallSummaryData?.totalTickets !== null ?\r\n                            getFootfallSummaryData?.totalTickets : '--' }}</h5>\r\n                        <span class=\"sub-header\">Total tickets</span>\r\n                    </div>\r\n                    <div *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 my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openTickets !== null ?\r\n                                getFootfallSummaryData?.openTickets : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.openInfraIssues !== null &&\r\n                      getFootfallSummaryData?.openInfraIssues !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.openInfraIssues !== null ?\r\n                                getFootfallSummaryData?.openInfraIssues : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">Open-Infra Issue</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.inprogress !== null &&\r\n                      getFootfallSummaryData?.inprogress !== undefined\" class=\"col my-3\">\r\n                            <h5 class=\"card-title\">{{ getFootfallSummaryData?.inprogress !== null ?\r\n                                getFootfallSummaryData?.inprogress : '--' }}</h5>\r\n                            <span class=\"card-title-sub-header\">In-progress</span>\r\n                        </div>\r\n                        <div *ngIf=\"getFootfallSummaryData?.closedTickets !== null &&\r\n                      getFootfallSummaryData?.closedTickets !== undefined\" class=\"col my-3\">\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\r\n                        <div *ngIf=\"getFootfallSummaryData?.dueToday !== null &&\r\n                      getFootfallSummaryData?.dueToday !== undefined\" class=\"col my-3 \">\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 my-3 \">\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 my-3 \">\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>\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 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 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\">Showing tickets with Accuracy Below 85% <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\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\r\n                        <button type=\"button\" (click)=\"exportXLSX()\"\r\n                            class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                            <span class=\"ms-2\">Export</span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\">\r\n                <table class=\"table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th *ngFor=\"let col of tableColumns\"\r\n                                [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n                                (click)=\"col.sortable && onSort(col.key)\">\r\n\r\n                                {{ col.label }}\r\n\r\n                                <!-- Sorting Icon -->\r\n                                <svg *ngIf=\"col.sortable && col.type !== '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\r\n                            </th>\r\n                        </tr>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of footfallListData\">\r\n\r\n                            <td *ngFor=\"let col of tableColumns\">\r\n\r\n                                <!-- Store + ticket clickable -->\r\n                                <ng-container *ngIf=\"col.type === '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.type === 'date' || col.type === '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.type === '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.type === 'text'\">\r\n                                    {{ row[col.key] ?? '--' }}\r\n                                </ng-container>\r\n\r\n                            </td>\r\n\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\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>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [ngClass]=\"isCollapsed ? 'd-none' : 'col-md-3 h-auto'\">\r\n            <div class=\"card h-100\">\r\n                <div class=\"card-header border-0 pt-3 ps-1 pe-5\">\r\n                    <span class=\"ms-2 cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_d_887_4505)\">\r\n                                <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feOffset dy=\"1\" />\r\n                                    <feGaussianBlur stdDeviation=\"1\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_887_4505\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div class=\"col-8\">\r\n\r\n                            <span class=\"svg-icon svg-icon-1 position-absolute py-2 ms-3\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\">\r\n                                    <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                        transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                    <path\r\n                                        d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                        fill=\"currentColor\"></path>\r\n                                </svg>\r\n                            </span>\r\n                            <input class=\"form-control form-control-sm mb-2 ps-14 pe-2 w-100\" type=\"text\"\r\n                                placeholder=\"Search\" [(ngModel)]=\"StoresSearchValue\" (change)=\"searchStoresData()\" />\r\n                        </div>\r\n                        <div class=\"col-4 p-0 btn\">\r\n                            <button class=\"btn-filter btn btn-sm btn-outline\" (click)=\"toggleFilter()\">\r\n                                <span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n                                        viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                        <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                    </svg></span>\r\n                                Filter\r\n                            </button>\r\n\r\n                            <!-- Overlay (click outside to close) -->\r\n                            <div class=\"overlay\" *ngIf=\"isFilterOpen\" (click)=\"close()\"></div>\r\n\r\n                            <form [formGroup]=\"filterForm\">\r\n                                <!-- Filter card -->\r\n                                <div class=\"filter-card text-start\" *ngIf=\"isFilterOpen\"\r\n                                    (click)=\"$event.stopPropagation()\">\r\n                                    <h3 class=\"mb-3\">Filter Options</h3>\r\n\r\n                                    <!-- Status -->\r\n                                    <div class=\"mb-3\">\r\n                                        <label class=\"form-label mb-1\">Status</label>\r\n                                        <select class=\"form-select form-select-sm\" formControlName=\"status\">\r\n                                            <option value=\"\">Select</option>\r\n                                            <option>Open</option>\r\n                                            <option>In-Progress</option>\r\n                                            <option>Close</option>\r\n                                            <option>Under tango review</option>\r\n                                            <option>Tango review done</option>\r\n                                            <option>Expired</option>\r\n                                        </select>\r\n                                    </div>\r\n\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Reviewer accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n\r\n                                    <!-- TODO: same block for Approver & Tango -->\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Approver accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                    <!-- Reviewer accuracy -->\r\n                                    <div class=\"row mb-3\">\r\n                                        <div class=\"col-9\">\r\n                                            <!-- label in same row -->\r\n                                            <label class=\"form-label mb-0 fs-8 reviewer-label\">\r\n                                                Tango accuracy (%) by condition\r\n                                            </label>\r\n\r\n                                            <!-- condition dropdown -->\r\n                                            <select class=\"form-select form-select-sm reviewer-select\"\r\n                                                formControlName=\"reviewerCondition\">\r\n                                                <option value=\"\">Select</option>\r\n                                                <option>>= Greater than or equal to</option>\r\n                                                <option>\r\n                                                    < Less than</option>\r\n                                                <option>> Greater than</option>\r\n                                                <option>\r\n                                                    <= Lesser than or equal to</option>\r\n                                                <option>Between</option>\r\n                                            </select>\r\n                                        </div>\r\n                                        <!-- single value -->\r\n                                        <div class=\"col-3\">\r\n                                            <!-- <ng-container *ngIf=\"filterForm.value.reviewerCondition !== 'Between'; else betweenTpl\"> -->\r\n                                            <label class=\"small ms-1\">% </label>\r\n                                            <input type=\"number\"\r\n                                                class=\"form-control form-control-sm reviewer-input text-end\"\r\n                                                formControlName=\"reviewerValue\" min=\"1\" max=\"100\">\r\n                                            <!-- </ng-container> -->\r\n\r\n\r\n                                        </div>\r\n\r\n                                    </div>\r\n\r\n                                    <div class=\"d-flex justify-content-end gap-2 mt-3\">\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\"\r\n                                            (click)=\"resetFilter()\">Reset</button>\r\n                                        <button type=\"button\" class=\"btn btn-sm btn-primary\"\r\n                                            (click)=\"applyFilter()\">Apply</button>\r\n                                    </div>\r\n                                </div>\r\n                            </form>\r\n\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n                            <!-- LEFT: checkbox + text -->\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <input type=\"checkbox\" class=\"me-2\" [checked]=\"allSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select all {{ storeCount }} stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span class=\"me-1\">Reviewer(%)</span>\r\n                                <!-- if you want arrow icon -->\r\n                                <span class=\"sort-arrow cursor-pointer\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"14\" height=\"14\" 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\r\n                    <ul class=\"list-unstyled 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 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\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                <div class=\"nodata-title my-3\">No Stores Found</div>\r\n                                <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        <div [ngClass]=\"isCollapsed ? 'col-12' : 'col-md-9'\">\r\n            <div class=\"card bg-light-primary p-1 h-100\">\r\n                <div class=\"card-header border-0 pt-3 px-5\">\r\n                    <div class=\"d-flex justify-content-start\">\r\n                        <div *ngIf=\"isCollapsed\" class=\"cursor-pointer\"><span (click)=\"toggleSidebar()\"\r\n                                style=\"position: absolute; top: 10px; left: 10px;\">\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                    fill=\"none\">\r\n                                    <path d=\"M22.5 25L17.5 20L22.5 15\" stroke=\"#667085\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </svg> </span>\r\n                            <span class=\"card-title-foot ms-15\">Footfall Directory</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-toolbar\">\r\n                      <!-- Start Review -->\r\n<span *ngIf=\"(ticketData?.status === 'Raised' || getHeaderStatus() === 'Open')\r\n             && statusVal?.type !== 'tangoreview'\">\r\n\r\n  <button *ngIf=\"!closeBtn\"\r\n          class=\"btn btn-sm btn-primary mx-2\"\r\n          (click)=\"startReview()\">\r\n    Start Review\r\n  </button>\r\n</span>\r\n\r\n                       <!-- Close Ticket -->\r\n<span *ngIf=\"getHeaderStatus() === 'In-Progress'\r\n             && statusVal?.type !== 'tangoreview'\">\r\n\r\n  <button *ngIf=\"closeBtn\"\r\n          [disabled]=\"closeDisabled\"\r\n          class=\"btn btn-sm btn-primary mx-2\"\r\n          (click)=\"stopReview()\">\r\n    Close Ticket\r\n  </button>\r\n</span>\r\n\r\n\r\n                        <span *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <path\r\n                                    d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                <path\r\n                                    d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                    stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg>\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n                <div class=\"card-body p-4 \">\r\n                    <div class=\"row mb-6\">\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Store Name</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{ticketData?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\"> <span class=\"badge mx-2\"\r\n                                [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n                                {{ getHeaderStatus() | titlecase }}\r\n                            </span></div>\r\n\r\n                        <div class=\"col-2 card-title-label my-2\">Due Date</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">04 Dec 2025</div>\r\n                    </div>\r\n\r\n\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 *ngIf=\"arrowshow\" (click)=\"openArrow()\"> <svg 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 *ngIf=\"!arrowshow\" (click)=\"closeArrow()\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                        fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n\r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n\r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n\r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span\r\n                                                class=\"footfall-label ms-3\">Actual Footfall</span>\r\n                                        </div>\r\n                                        <div class=\"issue-date\">Issue date : {{source?.createdAt | date:'dd MMM yyyy'}}\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=\"mapping?.status === 'Closed' \r\n       && ['tagging','review','approve','tangoreview'].includes(mapping?.type)\">\r\n\r\n                                            <div \r\n                                                class=\"timeline\"></div>\r\n                                            <div \r\n                                                 \r\n                                                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 }} \u2022 {{ (mapping?.createdAt || source?.createdAt) | 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\r\n  class=\"revision-card\"\r\n  [ngClass]=\"{\r\n    'revision-card-approve-closed':\r\n      mapping?.status === 'Closed' && mapping?.type === 'approve'\r\n  }\"\r\n>\r\n  <div class=\"values-row\">\r\n    <div class=\"value-block\">\r\n      <div class=\"value\">\r\n        {{ mapping?.revicedFootfall === null ? '--' : mapping?.revicedFootfall }}\r\n      </div>\r\n      <div class=\"label fw-bold\">Revised Footfall</div>\r\n    </div>\r\n\r\n    <div class=\"value-block\">\r\n      <div class=\"value accuracy down\">\r\n        {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n        <span class=\"ms-1\">\r\n          <!-- arrow svg -->\r\n        </span>\r\n      </div>\r\n      <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n    </div>\r\n\r\n    <div class=\"timeline-new my-2\"></div>\r\n\r\n    <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n      <div class=\"value\">\r\n        {{ item?.value ?? '--' }}\r\n      </div>\r\n      <div class=\"label\">\r\n        {{ item?.name }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n                                        </ng-container>\r\n                                           \r\n <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\" class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                        <div class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                            (click)=\"showRevisedDetails = !showRevisedDetails\">\r\n                                            <span class=\"text-primary \">\r\n                                                {{ showRevisedDetails ? 'Hide details' : 'Show in details' }}\r\n                                            </span>\r\n                                            <span class=\"chevron ms-3\" [class.rotate-180]=\"showRevisedDetails\"><svg\r\n                                                    xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                    viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                    <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                </svg></span>\r\n                                        </div>\r\n\r\n                                             <div class=\"details-body mt-2\" *ngIf=\"showRevisedDetails\">\r\n   <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n\r\n                            <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers mx-0\">\r\n                                <!-- Header Section -->\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <h3 class=\"text-lg font-semibold mb-4\">\r\n                                        <span class=\"me-2\">\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                    <path\r\n                                                        d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                        stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </g>\r\n                                                <defs>\r\n                                                    <clipPath id=\"clip0_730_76157\">\r\n                                                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                    </clipPath>\r\n                                                </defs>\r\n                                            </svg>\r\n                                        </span>\r\n                                        Duplicates\r\n                                    </h3>\r\n                                </div>\r\n\r\n                                <!-- Body Section -->\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                <div class=\"my-4\">\r\n                                                    <!-- Original Image -->\r\n                                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                                    </div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <div class=\"col-md-4 relative\">\r\n                                                            <div\r\n                                                                class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                    class=\"w-100 rounded border\" />\r\n                                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                                    original.tempId\r\n                                                                    }}</div>\r\n                                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                            <input type=\"checkbox\"\r\n                                                                [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                            <label class=\"ms-2\">Select All</label>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                            class=\"col-md-3 mb-3 position-relative\">\r\n                                                            <div 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     \r\n                                                                <!-- Duplicate Image -->\r\n                                                                <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n                                                                    (click)=\"openImagePreview(original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                    class=\"w-100 rounded border duplicate-image\" />\r\n\r\n                                                                <!-- Duplicate Info -->\r\n                                                                <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                                            Tango ID: {{ duplicate.tempId }}\r\n    \r\n                                                                            <span\r\n                                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                    <rect y=\"0.5\" width=\"10\" height=\"10\"\r\n                                                                                        rx=\"5\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            fill=\"#FEE4E2\" />\r\n                                                                                        <path\r\n                                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\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 Time: {{\r\n                                                                            getFormattedEntryTime(duplicate.entryTime) }}\r\n                                                                        </div>\r\n                                                                        </div>\r\n                                                                    <div 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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                         \r\n                                                                        </span>\r\n                                                                        <span\r\n                                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                               \r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <!-- Status Icons -->\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Body -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\">\r\n                                        <!-- icon here -->\r\n                                        Employee/Staff\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n                                        (change)=\"onSelectAll('employee', $event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n\r\n                                <!-- loop over tickets -->\r\n\r\n\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <div *ngIf=\"original?.revopsType === 'employee'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3  h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n                                                      \r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                       <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\">\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> House Keeping\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n                                        (change)=\"onSelectAll('houseKeeping',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                   <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">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 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\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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) }}</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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> Junk\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n                                        (change)=\"onSelectAll('junk',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n                                    <!-- One card for all junk images in this mapping -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <!-- Loop through all items in revisedDetail -->\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <!-- Show only junk items as columns -->\r\n                                                <div *ngIf=\"original?.revopsType === 'junk'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                        <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-8\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            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(original, 'review')?.action === 'rejected'\r\n  \" class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\r\n                                                            <div 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\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                   \r\n                                                                   \r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\">\r\n                                                                     <svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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>\r\n                                                                 </span>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                                                </div>\r\n                                        </div>\r\n                        \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                <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\"> Select\r\n                                All</span>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n                        <div class=\"row\">\r\n                            <div class=\"col-md-4\">\r\n                                <select class=\"form-select\" aria-placeholder=\"show all\">\r\n                                    <option value=\"all\">Show all</option>\r\n                                    <option value=\"accept\">Accept</option>\r\n                                    <option value=\"reject\">Reject</option>\r\n                                    <option value=\"pending\">Pending</option>\r\n                                </select>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('rejected')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                                    }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <div class=\"col-md-4\">\r\n                                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                    (click)=\"popupOpen('approved')\">\r\n\r\n                                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                                    'Accept' }}\r\n\r\n                                </button>\r\n                            </div>\r\n                            <!-- <div  class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">Deny</button>\r\n                        </div>\r\n                        <div class=\"col-md-4\">\r\n                            <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\r\n                                (click)=\"popupOpen('approved')\">Approve</button>\r\n                        </div> -->\r\n                        </div>\r\n                    </div>\r\n\r\n                </div>\r\n\r\n                <div *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\r\n                            <div *ngIf=\"hasRevopsType('duplicate')\" class=\"layers\">\r\n                                <!-- Header Section -->\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <h3 class=\"text-lg font-semibold mb-4\">\r\n                                        <span class=\"me-2\">\r\n                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                    <path\r\n                                                        d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                        stroke=\"#475467\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                        stroke-linejoin=\"round\" />\r\n                                                </g>\r\n                                                <defs>\r\n                                                    <clipPath id=\"clip0_730_76157\">\r\n                                                        <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                    </clipPath>\r\n                                                </defs>\r\n                                            </svg>\r\n                                        </span>\r\n                                        Duplicates\r\n                                    </h3>\r\n                                </div>\r\n\r\n                                <!-- Body Section -->\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                <div class=\"my-4\">\r\n                                                    <!-- Original Image -->\r\n                                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                                    </div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <div class=\"col-md-4 relative\">\r\n                                                            <div\r\n                                                                class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                    class=\"w-100 rounded border\" />\r\n                                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                                    original.tempId\r\n                                                                    }}</div>\r\n                                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                    <div class=\"row px-5\">\r\n                                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                            <input type=\"checkbox\"\r\n                                                                [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                            <label class=\"ms-2\">Select All</label>\r\n                                                        </div>\r\n                                                        <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                            class=\"col-md-3 mb-3 position-relative\">\r\n                                                            <div 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                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                            width=\"19\" height=\"19\" viewBox=\"0 0 19 19\"\r\n                                                                            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                                                                <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                <!-- Duplicate Image -->\r\n                                                                <img [src]=\"imageUrl + duplicate.filePath\" alt=\"\"\r\n                                                                    (click)=\"openImagePreview(original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                    class=\"w-100 rounded border duplicate-image\" />\r\n\r\n                                                                <!-- Duplicate Info -->\r\n                                                                <div\r\n                                                                    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\" height=\"10\"\r\n                                                                                        rx=\"5\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            fill=\"#FEE4E2\" />\r\n                                                                                        <path\r\n                                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\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 Time: {{\r\n                                                                            getFormattedEntryTime(duplicate.entryTime) }}\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                         \r\n                                                                        </span>\r\n                                                                        <span\r\n                                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                <!-- Duplicate Reason -->\r\n                                                                <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </ng-container>\r\n                                    </ng-container>\r\n                                </ng-container>\r\n                                <!-- Status Icons -->\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Body -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </div>\r\n                                </div>\r\n\r\n                            </div>\r\n\r\n                            <!-- \r\n                                        <div *ngIf=\"source?.duplicateImages?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','duplicate')\">Reject</button>\r\n                                            <button [disabled]=\"!duplicateACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','duplicate')\">Approve</button>\r\n                                        </div> -->\r\n                            <!-- <div *ngIf=\"source?.duplicateImages?.length\" class=\"separator separator-dashed mt-3 mb-5\"></div> -->\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('employee')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\">\r\n                                        <!-- icon here -->\r\n                                        Employee/Staff\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.employee\"\r\n                                        (change)=\"onSelectAll('employee', $event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n\r\n                                <!-- loop over tickets -->\r\n\r\n\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <div *ngIf=\"mapping?.type === viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <div *ngIf=\"original?.revopsType === 'employee'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3  h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.employee.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('employee', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('employee', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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\r\n                                                        </div>\r\n\r\n                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                       <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\">\r\n                                                                Entry Time: {{\r\n                                                                getFormattedEntryTime(original?.entryTime) }}\r\n                                                            </div>\r\n                                                            </div>\r\n                                                            <div class=\"col-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('houseKeeping')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> House Keeping\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.houseKeeping\"\r\n                                        (change)=\"onSelectAll('houseKeeping',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                    <!-- Body Section -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                <div *ngIf=\"original?.revopsType ==='houseKeeping'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.houseKeeping.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('houseKeeping', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('houseKeeping', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                            class=\"w-100 rounded border\" />\r\n                                                   <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">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 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\"\r\n                                                                            fill=\"#D1FADF\" />\r\n                                                                        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                            fill=\"#12B76A\" />\r\n                                                                    </svg>\r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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) }}</div>\r\n</div>\r\n                                                            <div class=\"col-3 ms-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"layers my-2\" *ngIf=\"hasRevopsType('junk')\">\r\n                                <div class=\"card-header min-h-25px pt-3\">\r\n                                    <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg\r\n                                                xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                                    d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                    fill=\"#475467\" />\r\n                                            </svg></span> Junk\r\n\r\n                                    </div>\r\n                                </div>\r\n                                <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                    <input type=\"checkbox\" [(ngModel)]=\"selectAllByType.junk\"\r\n                                        (change)=\"onSelectAll('junk',$event)\">\r\n                                    <label>Select All</label>\r\n                                </div>\r\n                                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n\r\n                                    <!-- One card for all junk images in this mapping -->\r\n                                    <div *ngIf=\"mapping?.type ===viewMode\" class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                        <div class=\"row\">\r\n                                            <!-- Loop through all items in revisedDetail -->\r\n                                            <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n\r\n                                                <!-- Show only junk items as columns -->\r\n                                                <div *ngIf=\"original?.revopsType === 'junk'\"\r\n                                                    class=\"col-md-3 mb-3 position-relative\">\r\n\r\n                                                    <div class=\"pb-3 h-100 rounded-3 position-relative\" [ngClass]=\"{\r\n    'layer-approved': isApproved(original),\r\n    'layer-rejected': isRejected(original),\r\n    'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                        <!-- Top-right Checkbox -->\r\n                                                        <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                            <input *ngIf=\"!isLockedByReviewer(original)\" type=\"checkbox\"\r\n                                                                class=\"position-absolute absolute form-check-input\"\r\n                                                                [checked]=\"selectedByType.junk.includes(original?.tempId)\"\r\n                                                                (change)=\"onImageCheckboxChange('junk', original.tempId)\" />\r\n                                                            <span class=\"position-absolute absolute\"\r\n                                                                *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                (click)=\"resetCheckbox('junk', original)\">\r\n\r\n                                                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\"\r\n                                                                    height=\"19\" viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                    <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                        <rect x=\"1.11133\" y=\"0.555664\" width=\"16\"\r\n                                                                            height=\"16\" rx=\"2\" fill=\"white\" />\r\n                                                                        <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                                                                            height=\"15.4444\" rx=\"1.72222\"\r\n                                                                            stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                                                        <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                            stroke=\"#344054\" 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\" x=\"0.00021708\"\r\n                                                                            y=\"0.00010854\" width=\"18.2222\"\r\n                                                                            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 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\" 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                                                        <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                            class=\"w-100 rounded border\" />\r\n                                                        <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-9\">\r\n                                                            <div class=\"desc-title ms-2 my-2\">\r\n                                                                Tango ID: {{ original.tempId }}\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                        <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\r\n                                                                            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(original, 'review')?.action === 'rejected'\r\n  \" class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                        <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                            <path\r\n                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                fill=\"#FEE4E2\" />\r\n                                                                            <path\r\n                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </g>\r\n                                                                        <defs>\r\n                                                                            <clipPath id=\"clip0_1428_59484\">\r\n                                                                                <rect width=\"12\" height=\"12\"\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\r\n                                                            <div 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-3\">\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n\r\n                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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                                                                   \r\n                                                                   \r\n                                                                </span>\r\n                                                                <span\r\n                                                                    *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\">\r\n                                                                     <svg\r\n                                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                        height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                        <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                            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\"\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>\r\n                                                                 </span>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </ng-container>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </ng-container>\r\n\r\n\r\n                                <div class=\"card-footer py-5\">\r\n                                    <div class=\"comments-accordion\">\r\n                                        <!-- Accordion Header -->\r\n                                        <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                            <div class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                <div class=\"comments-title\">\r\n                                                    <span class=\"comments-count\">{{ comments?.length }} Comments</span>\r\n\r\n                                                </div>\r\n                                                <div class=\"accordion-arrow ms-3\">\r\n                                                    <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n                                                        viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                        <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                        <!-- Accordion Content -->\r\n                                        <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n                                            <div *ngFor=\"let c of comments\" class=\"comment-thread d-flex mb-4\">\r\n                                                <!-- avatar -->\r\n                                                <img class=\"comment-avatar me-3\" [src]=\"c.avatar\" alt=\"avatar\" />\r\n\r\n                                                <!-- content -->\r\n                                                <div>\r\n                                                    <div class=\"fw-semibold\">{{ c.email }}</div>\r\n                                                    <div class=\"text-muted small\">\r\n                                                        {{ c.time | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n                                                    </div>\r\n\r\n                                                    <!-- optional main line -->\r\n                                                    <p class=\"mb-2 mt-2\" *ngIf=\"c.mainText\">\r\n                                                        {{ c.mainText }}\r\n                                                    </p>\r\n\r\n                                                    <!-- Marked as \u201C\u2026\u201D line -->\r\n                                                    <p class=\"mb-1\" *ngIf=\"c.statusLabel\">\r\n                                                        Marked as\r\n                                                        <span [ngClass]=\"'text-' + c.statusType\">\r\n                                                            \u201C{{ c.statusLabel }}\u201D\r\n                                                        </span>\r\n                                                    </p>\r\n\r\n                                                    <!-- note -->\r\n                                                    <p class=\"mb-2\" *ngIf=\"c.note\">\r\n                                                        {{ c.note }}\r\n                                                    </p>\r\n\r\n                                                    <!-- image cards -->\r\n                                                    <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                        <div *ngFor=\"let img of c.images\" class=\"tango-card\">\r\n                                                            <div class=\"tango-image\"\r\n                                                                [style.backgroundImage]=\"'url(' + img.url + ')'\"></div>\r\n\r\n                                                            <div class=\"tango-meta\">\r\n                                                                <div class=\"small\">Tango ID: {{ img.tangoId }}\r\n                                                                    <span *ngIf=\"img.status === 'approve'\"\r\n                                                                        class=\"status-dot status-approve\"></span>\r\n                                                                    <span *ngIf=\"img.status === 'reject'\"\r\n                                                                        class=\"status-dot status-reject\"></span>\r\n                                                                </div>\r\n                                                                <div class=\"small text-muted\">Entry time: {{\r\n                                                                    img.entryTime }}\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </div>\r\n\r\n                                                        <!-- +N more card -->\r\n                                                        <div *ngIf=\"c.moreCount > 0\"\r\n                                                            class=\"tango-card more-card d-flex align-items-center justify-content-center\">\r\n                                                            +{{ c.moreCount }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <!-- <div *ngIf=\"source?.houseKeeping?.length\" class=\"my-7 d-flex justify-content-end\"\r\n                                            role=\"group\">\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-outline me-1\"\r\n                                                (click)=\"popupOpen('rejected','houseKeeping')\">Reject</button>\r\n                                            <button [disabled]=\"!houseKeepingACCount\" class=\"btn btn-primary ms-1\"\r\n                                                (click)=\"popupOpen('approved','houseKeeping')\">Approve</button>\r\n                                        </div> -->\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length\r\n                || '--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n            <div class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\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 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <h5 class=\"modal-title mb-2\">{{ previewTitle }}</h5>\r\n\r\n            <div class=\"w-100 position-relative mb-4\">\r\n\r\n                <button class=\"btn btn-light position-absolute start-0 top-50 translate-middle-y\"\r\n                    (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                    \u2039\r\n                </button>\r\n\r\n                <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n               <div\r\n                                                                    class=\"row my-2\">\r\n                                                                    <div class=\"col-11\">\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-1 ms-3\">\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\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 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=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                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                <!-- Duplicate Reason -->\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 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                    [disabled]=\"previewList.length <= 1\">\r\n                    \u203A\r\n                </button>\r\n\r\n            </div>\r\n\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"rejectPopup()\">Reject</button>\r\n                <button class=\"btn btn-primary\" (click)=\"acceptPopup()\">Accept</button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".card-header,.header{color:var(--Gray-900, #101828);font-size:20px!important;font-style:normal;font-weight:700;line-height:27px}.sub-header{color:var(--Gray-700, #344054);font-size:14px!important;font-style:normal;font-weight:600;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.card-title-foot{color:var(--Gray-800, #1D2939)!important;font-size:18px;font-weight:600;line-height:28px}.card-title-label{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:600;line-height:28px}.card-title-value{color:var(--Gray-800, #1D2939)!important;font-size:16px;font-weight:400;line-height:28px}input[type=checkbox]{width:16px!important;height:16px!important;margin:-2px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-600, #D0D5DD)!important;box-shadow:none;font-size:.5em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]{outline:1px solid var(--primary-600, #00A3FF)!important;background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.5em;padding-left:3px;padding-top:10px;padding-right:0}.rotate{rotate:180deg;transition:1s}.border-selectall{border-radius:6px;border-bottom:1px solid var(--Gray-200, #EAECF0);background:#f9fafb;padding:8px 12px}.border-selectall1{border-radius:6px!important;background:var(--White, #FFF)!important;padding:8px 2px}.border-totalfootfall{border-radius:12px;padding:4px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.vl{border-left:2px solid #000;height:50px}.duplicate-head{color:var(--Gray-700, #344054);font-size:16px;font-weight:600;line-height:20px}.img-border{border-radius:5px!important;border:2px solid var(--Gray-300, #D0D5DD)}.desc-title{color:var(--Gray-900, #101828);font-size:12px;font-weight:500;line-height:20px}.desc-value{color:var(--Gray-900, #475467);font-size:10px;font-weight:500;line-height:10px}.img-border{overflow:hidden;position:relative}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.absolute{top:5px;right:5px;z-index:2}.absolute1{top:5px;left:8px;z-index:2}.img-src{width:25%;height:20%}.backButtonright{border-radius:1000px!important;background:var(--text-primary, #FFF)!important;padding:12px!important;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808!important;box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808!important;position:absolute;top:30px;right:-10px;z-index:0}.backButtonleft{border-radius:1000px!important;background:#fff;padding:14px!important;border:var(--Gray-300, #D0D5DD);box-shadow:0 8.727px 11.636px -2.909px #10182814,0 2.909px 4.364px -1.455px #10182808;position:absolute;top:30px;left:-20px;z-index:5}.select-wrapper{position:relative;display:inline-block;width:100%}.placeholder-overlay{position:absolute;color:var(--Gray-500, #667085);font-family:Inter;font-size:16px!important;font-style:normal;font-weight:400;top:10px;left:15px;pointer-events:none;font-size:1.1rem;z-index:1}.card-title{color:var(--Black, #101828)!important;font-size:20px!important;font-weight:700!important;line-height:30px}.card-title-sub-header{color:var(--Black, #101828);font-size:14px;font-weight:500;line-height:30px}.separator.separator-dashed{border-bottom-style:double!important}.border-1{border-radius:4px!important;border:1px solid var(--Gray-300, #D0D5DD)!important}.store-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;transition:background-color .3s ease}.store-item-active{background:#eaf8ff}.left{display:flex;align-items:center;gap:8px;overflow:hidden;color:var(--Gray-700, #344054);text-overflow:ellipsis;font-size:14px;font-style:normal;font-weight:400;line-height:24px}.left .active-text{overflow:hidden;color:var(--Primary-700, #EAF8FF);font-size:14px;font-style:normal;font-weight:400;line-height:24px}.badge-active{border-radius:16px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;mix-blend-mode:multiply}.badge-normal{color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border-radius:16px;background:var(--Gray-100, #F2F4F7)}.bg-light-primary{background:#f6fcff!important}.card-layer{gap:16px!important;opacity:1!important;padding:16px!important;border-radius:16px!important;border-width:1px!important;background:#fff;border:1px solid #EAECF0!important}.ticket-container{width:100%;background:#fff;border-radius:12px;padding:0;font-family:Inter,sans-serif}.ticket-header{display:flex;justify-content:space-between;align-items:center;border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d;padding:16px 20px;font-weight:600}.footfall-value{font-weight:600;font-size:20px;line-height:30px;letter-spacing:0%;vertical-align:middle;color:#101828}.issue-date{font-size:14px;color:#666}.timeline{width:1.5px;height:15px;background:#d0d5dd;margin-left:33px}.timeline-new{width:1px;height:70px;background:#d0d5dd;margin-left:30px;font-weight:600}.revision-card{background:#fff;border:1px solid #eaeaea;border-radius:12px;padding:0 20px}.user-info{display:flex;align-items:center}.avatar{width:42px;height:40px;border-radius:50%;margin-right:15px;font-size:14px;color:#1d2939;font-weight:600}.user-name{font-size:13px;color:#555}.user-email{font-size:12px;color:#888;margin-top:2px}.values-row{display:flex;justify-content:space-between;flex-wrap:wrap}.value-block{min-width:90px;margin:10px 0}.value{font-size:20px;font-weight:700}.label{font-size:14px;color:#1d2939;margin-top:3px}.accuracy{font-size:18px!important}.accuracy.up,.accuracy.down{color:#00a3ff}.footfall-label{font-weight:700;font-size:14px;line-height:20px;letter-spacing:0%;vertical-align:middle;color:#344054!important}.duplicate-layer{gap:10px;opacity:1;padding:16px;border-bottom-width:1px;border-bottom:1px solid #F2F4F7;background:#fff}.layer-approved{border-color:#a6f4c5!important;box-shadow:0 0 0 2.29px #a6f4c5}.layer-rejected{border-color:#fda29b!important;box-shadow:0 0 0 2.29px #fda29b}.layers{border-radius:8px;border-width:1px;opacity:1;border:1px solid #EAECF0;background:#fcfcfd;margin:12px}.btn-primary{font-size:13px!important;padding:5px 15px!important}.accordion-header{cursor:pointer}svg.rotated{transform:rotate(180deg);transition:transform .3s ease}.accordion-body{animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.ellipsis-underline{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;cursor:pointer;display:inline-block}table td{line-height:14px!important}.btn-filter{font-weight:600;font-size:14px;line-height:20px;letter-spacing:0%;text-transform:capitalize;color:#344054}.overlay{position:fixed;inset:0;background:#0000001a}.filter-card{position:absolute;right:0;background:#fff;border-radius:8px;padding:16px 20px;box-shadow:0 8px 24px #0000001f;font-size:13px}.border-primary-layers{opacity:1;gap:12px;padding-bottom:16px;background:#eaf8ff;border-radius:8px!important}.border-primary-layers .label-title{opacity:1;gap:10px;padding:8px;border-bottom-right-radius:8px!important;background:#daf1ff;font-weight:500!important;font-size:18px!important;line-height:28px!important;letter-spacing:0%;color:#000!important}.border-primary-layers .label-desc{font-weight:500;font-size:16px;line-height:28px;letter-spacing:0%;color:#008edf!important}.comment-thread{border-left:1px solid #e5e5e5;padding-left:16px}.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}.tango-card{width:140px;border-radius:8px;border:1px solid #e5e5e5;overflow:hidden;background:#fff;cursor:pointer}.tango-image{height:80px;background-size:cover;background-position:center}.tango-meta{padding:6px 8px}.more-card{background:#00000008;font-weight:600}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:4px}.status-approve{background:#22c55e}.status-reject{background:#ef4444}.page-content{padding:16px}.filter-backdrop{position:fixed;inset:0;background:#0f172a40;z-index:998}.filter-modal{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;z-index:999}.store-item-active{background-color:#eaf8ff}.store-item{padding:8px 12px 8px 10px;border-radius:6px;padding:8px 12px;gap:12px;opacity:1}.ticket-id{font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;color:#1d2939}.store-name{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#667085}.perc-badge{font-size:12px;min-width:48px;text-align:center}.perc-badge-normal{background-color:#f3f3f3;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#344054}.perc-badge-active{background-color:#d9ecff;font-weight:500;font-size:14px;line-height:20px;letter-spacing:0%;text-align:center;color:#009bf3}.border-selectall{padding:8px 10px;border-radius:12px;background:#f7f7f7}.reviewer-label{font-size:12px;color:gray}.sort-arrow{font-size:10px;line-height:1}.modal-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.test-appvalue{color:#1d2939;font-weight:400;font-size:16px;line-height:24px;letter-spacing:0%}.light-primary{background:#eaf8ff!important}.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}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$1.GlobalStateService }, { type: TicketService }, { type: i0.ChangeDetectorRef }, { type: ExcelService }, { type: i4.ToastService }, { type: i6.FormBuilder }, { type: i2.Router }], propDecorators: { filterChange: [{
                 type: Output
             }], closePopup: [{
@@ -5595,6 +5621,7 @@ class AuditService {
     auditApiUrl;
     traxauditApiUrl;
     vmsAuditUrl;
+    footfallDirapiUrl;
     constructor(http, gs) {
         this.http = http;
         this.gs = gs;
@@ -5607,6 +5634,7 @@ class AuditService {
                 this.auditApiUrl = env.auditApiUrl;
                 this.clientApiUrl = env.clientApiUrl;
                 this.vmsAuditUrl = env.vmsAuditUrl;
+                this.footfallDirapiUrl = env.footfallDirapiUrl;
             }
             this.gs.dataRangeValue.subscribe((e) => {
                 if (e) {
@@ -5617,7 +5645,7 @@ class AuditService {
     }
     // audit code
     getAuditMapping(payload) {
-        return this.http.get(`${this.vmsAuditUrl}/get-file?storeId=${payload?.storeId}&nextId=${payload?.nextId}&limit=${payload?.limit}&Date=${payload?.Date}`);
+        return this.http.get(`${this.vmsAuditUrl}/get-file?storeId=${payload?.storeId}&nextId=${payload?.nextId}&limit=${payload?.limit}&Date=${payload?.Date}&count=${payload?.count}`);
     }
     getAuditconfig(clientId) {
         return this.http.get(`${this.clientApiUrl}/get-footfall-directory-config?clientId=${clientId}`);
@@ -5638,7 +5666,7 @@ class AuditService {
         return this.http.get(`${this.vmsAuditUrl}/get-drafted-data?fileDate=${payload?.fileDate}&storeId=${payload?.storeId}&auditId=${payload?.auditId}`);
     }
     saveaudit(data) {
-        return this.http.post(`${this.clientApiUrl}/save`, data);
+        return this.http.post(`${this.footfallDirapiUrl}/tango-review-ticket`, data);
     }
     userDetails() {
         return this.http.get(`${this.auditApiUrl}/auth/me`, {}).pipe(map((response) => {
@@ -5753,7 +5781,7 @@ class StartAuditComponent {
     employeimage;
     filedetails = {};
     datareason;
-    limit = 50;
+    limit = 500;
     nextId = '';
     spinnerstart = true;
     submitted = false;
@@ -5799,7 +5827,7 @@ class StartAuditComponent {
             var result = window.confirm("Something Went Wrong. Please clear browser cache or Use incognito window");
             if (result) {
                 console.log("OK button clicked!");
-                this.router.navigate(['/manage/tickets']);
+                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
             }
             else {
                 console.log("Alert closed without clicking OK");
@@ -6018,14 +6046,15 @@ class StartAuditComponent {
             storeId: filedata?.filedetails?.storeId,
             limit: this.limit,
             nextId: filedata?.filedetails?.nextToken ? filedata?.filedetails?.nextToken : '',
-            Date: filedata?.filedetails?.Date
+            Date: filedata?.filedetails?.Date,
+            count: filedata?.totalfiles
         };
         this.auditservice.getAuditMapping(payload).pipe(takeUntil(this.destroy$)).subscribe({
             next: (res) => {
                 if (res && res?.code == 200) {
                     this.storedetails = res?.data;
                     setTimeout(() => {
-                        if (res?.data?.file?.nextToken && this.selectedType === 'track') {
+                        if (res?.data?.file?.nextToken) {
                             this.getMapping(res?.data?.file?.nextToken);
                         }
                     }, 100);
@@ -6224,7 +6253,7 @@ class StartAuditComponent {
     }
     Reviewdata() {
         let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
-        if (filedata?.filedetails?.nextToken && this.selectedType !== 'track') {
+        if (filedata?.filedetails?.nextToken) {
             this.toastr.getErrorToast('Scroll Down to bottom load the files before Move to Next page!');
         }
         else {
@@ -6270,7 +6299,7 @@ class StartAuditComponent {
                         const modalRef = this.modalService.open(this.confirmerror, { centered: true });
                         modalRef.result.then((result) => {
                             if (result.isConfirmed) {
-                                this.router.navigate(['manage/tickets'], { queryParams: { type: 'audit' } });
+                                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
                             }
                         });
                     }
@@ -6306,7 +6335,7 @@ class StartAuditComponent {
     }
     async savedraft() {
         let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
-        if (filedata?.filedetails?.nextToken && this.selectedType !== 'track') {
+        if (filedata?.filedetails?.nextToken) {
             this.toastr.getErrorToast('Scroll Down to bottom load the files before save!');
         }
         else {
@@ -6357,7 +6386,7 @@ class StartAuditComponent {
                                     const modalRef = this.modalService.open(this.confirmerror);
                                     modalRef.result.then((result) => {
                                         if (result.isConfirmed) {
-                                            this.router.navigate(['tickets/users'], { queryParams: { type: 'audit' } });
+                                            this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
                                         }
                                     });
                                 }
@@ -6404,7 +6433,7 @@ class StartAuditComponent {
                         next: (res) => {
                             if (res && res.code == 200) {
                                 this.submitted = false;
-                                this.router.navigate(['tickets/users'], { queryParams: { type: 'audit' } });
+                                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
                             }
                             else {
                                 if (res && res.code == 203) {
@@ -6412,7 +6441,7 @@ class StartAuditComponent {
                                     const modalRef = this.modalService.open(this.confirmerror);
                                     modalRef.result.then((result) => {
                                         if (result.isConfirmed) {
-                                            this.router.navigate(['tickets/users'], { queryParams: { type: 'audit' } });
+                                            this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
                                         }
                                     });
                                 }
@@ -6433,7 +6462,7 @@ class StartAuditComponent {
     }
     backtotickets() {
         this.savedraft();
-        this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall-new' } });
+        this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
     }
     cameraPreview() {
         // const ModalRef = this.modalService.open(CameraPreviewComponent,{
@@ -6461,6 +6490,352 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['window:keydown', ['$event']]
             }] } });
 
+class AuditReportPopupComponent {
+    modalService;
+    activeModal;
+    router;
+    timerService;
+    cd;
+    apiservice;
+    route;
+    toast;
+    Retagjunkcount = 0;
+    Retagemployeecount = 0;
+    Retagcustomercount = 0;
+    demographicCount;
+    retagjunkdata;
+    retagemployeedata;
+    retagcustomerdata;
+    totalfiles;
+    auth = false;
+    submitauth = false;
+    Errormsg = '';
+    selectedType;
+    confirmerror;
+    destroy$ = new Subject();
+    timePassed = 0;
+    subscription = null;
+    formattedTime = '00:00:00';
+    category = [];
+    constructor(modalService, activeModal, router, timerService, cd, apiservice, route, toast) {
+        this.modalService = modalService;
+        this.activeModal = activeModal;
+        this.router = router;
+        this.timerService = timerService;
+        this.cd = cd;
+        this.apiservice = apiservice;
+        this.route = route;
+        this.toast = toast;
+    }
+    ngOnInit() {
+        let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+        this.totalfiles = filedata;
+        this.apiservice.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res?.code == 200) {
+                    this.category = res.data.footfallDirectoryConfigs.taggingLimitation;
+                    this.category.map((data) => {
+                        let filterData = JSON.parse(sessionStorage.getItem(data?.type) || '{}');
+                        data.value = filterData;
+                        data.count = data?.value?.length;
+                    });
+                    console.log("🚀 ~ AuditReportPopupComponent ~ ngOnInit ~ this.category:", this.category);
+                    let stringifydata = sessionStorage.getItem('audit') || '{}';
+                    const decompressedData = LZString.decompress(stringifydata);
+                    var customer = JSON.parse(decompressedData || '{}');
+                    this.Retagcustomercount = customer.length;
+                }
+            }
+        });
+        this.setTimer();
+    }
+    setTimer() {
+        this.subscription = this.timerService.getTimePassed().subscribe(time => {
+            this.timePassed = time;
+            this.formattedTime = this.timerService.formatTime(time);
+            this.cd.detectChanges();
+        });
+        this.timerService.startTimer();
+        document.addEventListener('mousemove', this.handleGlobalMouseEvent);
+        document.addEventListener('click', this.handleGlobalMouseEvent);
+        document.addEventListener('mouseenter', this.handleGlobalMouseEvent);
+        document.addEventListener('scroll', this.handleGlobalMouseEvent);
+    }
+    handleGlobalMouseEvent = () => {
+        this.timerService.startTimer();
+    };
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+        document.removeEventListener('mousemove', this.handleGlobalMouseEvent);
+        document.removeEventListener('click', this.handleGlobalMouseEvent);
+        document.removeEventListener('mouseenter', this.handleGlobalMouseEvent);
+        document.removeEventListener('scroll', this.handleGlobalMouseEvent);
+        this.timerService.clearTimer();
+    }
+    changebrand() {
+        this.auth = true;
+        var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+        let junkimage = [];
+        let employeeimage = [];
+        let customerimage = [];
+        this.retagjunkdata.map((e) => {
+            delete e.img_path;
+            delete e.selected;
+            delete e.count;
+            delete e.dropped;
+            delete e.mappedid;
+            junkimage.push(e);
+        });
+        this.retagemployeedata.map((e) => {
+            delete e.img_path;
+            delete e.selected;
+            delete e.count;
+            delete e.dropped;
+            delete e.mappedid;
+            employeeimage.push(e);
+        });
+        this.retagcustomerdata.map((e) => {
+            if (e.count > 1) {
+                delete e.img_path;
+                delete e.selected;
+                delete e.dropped;
+                var result = e.mappedid;
+                e.mappedid = result;
+                e.count = result.length;
+                e.mappedid.forEach((e1) => { delete e1.img_path; });
+                customerimage.push(e);
+            }
+            if (e.demographic === 'd' && e.count === 1) {
+                delete e.img_path;
+                delete e.selected;
+                delete e.dropped;
+                var result = e.mappedid;
+                e.mappedid = result;
+                e.count = result.length;
+                e.mappedid.forEach((e1) => { delete e1.img_path; });
+                customerimage.push(e);
+            }
+        });
+        var obj = {
+            auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails?.auditId,
+            storeId: totalfile?.filedetails?.store_id,
+            auditType: totalfile?.filedetails?.type,
+            fileDate: totalfile?.filedetails?.file_date,
+            beforeCount: totalfile?.totalfiles,
+            junkCount: this.Retagjunkcount,
+            junk: junkimage ? junkimage : [],
+            employeeCount: this.Retagemployeecount,
+            employee: employeeimage ? employeeimage : [],
+            customerCount: this.Retagcustomercount,
+            zoneName: totalfile?.filedetails?.zoneName ? totalfile?.filedetails?.zoneName : '',
+            moduleType: this.selectedType,
+            customer: customerimage ? customerimage : [],
+            timeSpent: this.timePassed
+        };
+        this.apiservice.saveaudit(obj).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    this.toast.getSuccessToast(res?.data?.result);
+                    this.auth = false;
+                    this.timerService.resetTimer();
+                    sessionStorage.removeItem('timeSpent');
+                    this.closepopup();
+                    sessionStorage.removeItem('employee');
+                    sessionStorage.removeItem('junk');
+                    sessionStorage.removeItem('audit');
+                    sessionStorage.removeItem('totalfiles');
+                    sessionStorage.removeItem('retag');
+                    this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
+                }
+                else {
+                    this.auth = false;
+                    if (res && res.code == 203) {
+                        this.Errormsg = res.error;
+                        const modalRef = this.modalService.open(this.confirmerror);
+                        modalRef.result.then((result) => {
+                            if (result.isConfirmed) {
+                                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
+                            }
+                        });
+                    }
+                }
+            },
+            error: (err) => {
+                const errorMessage = err?.error?.message || err?.error?.error || err?.message || 'Invalid status code: undefined';
+                this.toast.getErrorToast(errorMessage);
+            },
+        });
+    }
+    nextfile() {
+        this.auth = true;
+        let totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+        console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ totalfile:", totalfile);
+        let revisedDetail = [];
+        let stringifydata = sessionStorage.getItem('audit') || '{}';
+        const decompressedData = LZString.decompress(stringifydata);
+        var customer = JSON.parse(decompressedData || '{}');
+        customer.map((customerData) => {
+            if (customerData.count > 1) {
+                // console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ customerData:", customerData)
+                let duplicateData = customerData.mappedid.filter((data) => data.img_name != customerData?.img_name);
+                console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ duplicateData:", duplicateData);
+                let duplicateImage = [];
+                duplicateData.map((dupData) => {
+                    duplicateImage.push({
+                        "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${dupData?.img_name}`,
+                        "tempId": dupData?.img_name,
+                        "filePath": dupData?.img_path,
+                        "isChecked": true
+                    });
+                });
+                let newObj = {
+                    "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${customerData?.img_name}`,
+                    "clientId": totalfile?.filedetails?.clientId,
+                    "storeId": totalfile?.filedetails?.storeId,
+                    "tempId": customerData?.img_name,
+                    "dateString": totalfile?.filedetails?.Date,
+                    "timeRange": "11AM-12PM",
+                    "processType": "footfall",
+                    "revopsType": "duplicate",
+                    "filePath": customerData?.img_path,
+                    "status": "submitted",
+                    "description": "",
+                    "isChecked": true,
+                    "type": "tagging-reflect",
+                    "parent": null,
+                    "isParent": true,
+                    "duplicateImage": duplicateImage
+                };
+                console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ newObj:", newObj);
+                revisedDetail.push(newObj);
+            }
+            else {
+                // console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ customerData:", customerData)
+                let newObj = {
+                    "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${customerData?.img_name}`,
+                    "clientId": totalfile?.filedetails?.clientId,
+                    "storeId": totalfile?.filedetails?.storeId,
+                    "tempId": customerData?.img_name,
+                    "dateString": totalfile?.filedetails?.Date,
+                    "timeRange": "11AM-12PM",
+                    "processType": "footfall",
+                    "revopsType": "duplicate",
+                    "filePath": customerData?.img_path,
+                    "status": "submitted",
+                    "description": "",
+                    "isChecked": true,
+                    "type": "tagging-reflect",
+                    "parent": null,
+                    "isParent": true,
+                    "duplicateImage": []
+                };
+                console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ newObj:", newObj);
+                revisedDetail.push(newObj);
+            }
+        });
+        let count = [];
+        this.category.map((data) => {
+            count.push({
+                name: data.name,
+                value: data.count,
+                type: data.type
+            });
+            let filterData = JSON.parse(sessionStorage.getItem(data?.type) || '[]');
+            filterData.map((otherData) => {
+                let otherObj = {
+                    "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${otherData?.img_name}`,
+                    "clientId": totalfile?.filedetails?.clientId,
+                    "storeId": totalfile?.filedetails?.storeId,
+                    "tempId": otherData?.img_name,
+                    "dateString": totalfile?.filedetails?.Date,
+                    "processType": "footfall",
+                    "revopsType": data?.type,
+                    "filePath": otherData?.img_path,
+                    "status": "submitted",
+                    "description": "",
+                    "isChecked": true,
+                    "type": "tagging-reflect",
+                    "parent": null,
+                    "isParent": false,
+                    "duplicateImage": []
+                };
+                revisedDetail.push(otherObj);
+            });
+        });
+        var obj = {
+            "type": "tangoreview",
+            "mode": "web",
+            "revicedFootfall": this.Retagcustomercount,
+            "revicedPerc": Math.round((this.Retagcustomercount / totalfile?.totalfiles) * 100) + "%",
+            count: count,
+            revisedDetail: revisedDetail
+        };
+        console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ obj:", obj);
+        // return
+        let payload = {
+            storeId: totalfile?.filedetails?.storeId,
+            "dateString": totalfile?.filedetails?.Date,
+            mappingInfo: obj
+        };
+        this.apiservice.saveaudit(payload).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    this.auth = false;
+                    this.timerService.resetTimer();
+                    sessionStorage.removeItem('timeSpent');
+                    this.closepopup();
+                    sessionStorage.removeItem('employee');
+                    sessionStorage.removeItem('junk');
+                    sessionStorage.removeItem('audit');
+                    sessionStorage.removeItem('totalfiles');
+                    sessionStorage.removeItem('retag');
+                    var obj = {
+                        totalfiles: {}
+                    };
+                    obj.totalfiles.queueName = totalfile?.filedetails?.queueName;
+                    sessionStorage.setItem('totalfiles', JSON.stringify(obj));
+                    this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
+                }
+                else {
+                    this.auth = false;
+                    if (res && res.code == 203) {
+                        this.Errormsg = res.error;
+                        const modalRef = this.modalService.open(this.confirmerror);
+                        modalRef.result.then((result) => {
+                            if (result.isConfirmed) {
+                                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
+                            }
+                        });
+                    }
+                }
+            },
+            error: (err) => {
+                const errorMessage = err?.error?.message || err?.error?.error || err?.message || 'Invalid status code: undefined';
+                this.toast.getErrorToast(errorMessage);
+            },
+        });
+    }
+    closepopup() {
+        this.activeModal.close();
+    }
+    reviewdata() {
+        this.router.navigate(["/manage/tickets/mapping-list"]);
+        this.activeModal.close();
+    }
+    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: i2.Router }, { token: TimerService }, { token: i0.ChangeDetectorRef }, { token: AuditService }, { token: i2.ActivatedRoute }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    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-body mt-5\">\r\n    <div class=\" d-flex align-items-center\">\r\n        <div class=\"d-flex justify-content-between w-75\">\r\n            <div class=\"d-flex flex-column ms-5\">\r\n                <a class=\"btn btn-outline btn-sm py-2 mx-2\" (click)=\"reviewdata()\"><span\r\n                        class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span><span class=\"ms-3\">Back to Review</span></a>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"d-flex justify-content-between w-100\">\r\n            <span class=\"fs-2 text-dark fw-bolder my-3 audit-test\">Audit Report</span>\r\n           \r\n        </div>\r\n        <div class=\"btn btn-sm btn-icon btn-active-color-primary me-10\" (click)=\"closepopup()\" data-bs-dismiss=\"modal\">\r\n            <span class=\"svg-icon svg-icon-1\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <rect opacity=\"0.5\" x=\"6\" y=\"17.3137\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(-45 6 17.3137)\"\r\n                        fill=\"black\"></rect>\r\n                    <rect x=\"7.41422\" y=\"6\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(45 7.41422 6)\" fill=\"black\">\r\n                    </rect>\r\n                </svg>\r\n            </span>\r\n        </div>\r\n    </div>\r\n    \r\n  \r\n    <div class=\"card-body \">\r\n        <div class=\" align-items-center text-center mt-5 mb-5 fs-4\">\r\n            <span class=\"text-gray-400 me-2\"> Before Count</span>\r\n            <span class=\"fw-bold me-10\"> {{totalfiles?.totalfiles}} </span>\r\n            <span class=\"text-gray-400 me-2\"> After Count </span>\r\n            <span class=\"fw-bold me-10\"> {{Retagcustomercount}} </span>\r\n        </div>\r\n        <div class=\" mt-5 mx-20 p-10\">\r\n            <div *ngFor=\"let item of category\">\r\n                <div class=\"d-flex flex-stack \" >\r\n                    <span class=\"text-gray-500\">{{item.name}}</span>\r\n                    <button type=\"button\"\r\n                        class=\"text-dark fs-4 btn btn-icon btn-sm h-auto  btn-color-gray-400 btn-active-color-primary justify-content-end\">\r\n                      {{item.count}} </button>\r\n                </div>\r\n                <div class=\"separator separator-dashed my-3\"></div>\r\n            </div>\r\n     \r\n\r\n        <div class=\"d-flex flex-stack\">\r\n\r\n            <span class=\"text-gray-500\">CUSTOMER</span>\r\n\r\n            <button type=\"button\"\r\n                class=\"text-dark fs-4 btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end\">\r\n             {{Retagcustomercount}} </button>\r\n\r\n        </div>\r\n\r\n        <div class=\"separator separator-dashed my-3\"></div>\r\n\r\n       \r\n        <div class=\"mt-10 text-center\">\r\n            <button class=\"btn btn-primary btn-sm py-2 mx-5 px-8 mt-2\"  [disabled]=\"auth\" (click)=\"nextfile()\" > Submit\r\n            </button>\r\n        </div>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #confirmerror let-modal>\r\n    <div class=\"w-400px h-auto p-10 card\">\r\n        <div class=\"card-header border-0\">\r\n            <div class=\"card-label\">{{Errormsg}}</div>\r\n        </div>\r\n        <div class=\"card-body mt-5\">\r\n            <div class=\"w-100 d-flex mt-5\">\r\n                <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button class=\"btn btn-primary w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Confirm</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".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}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditReportPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-audit-report-popup', template: "<div class=\"modal-body mt-5\">\r\n    <div class=\" d-flex align-items-center\">\r\n        <div class=\"d-flex justify-content-between w-75\">\r\n            <div class=\"d-flex flex-column ms-5\">\r\n                <a class=\"btn btn-outline btn-sm py-2 mx-2\" (click)=\"reviewdata()\"><span\r\n                        class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                            </svg></span><span class=\"ms-3\">Back to Review</span></a>\r\n            </div>\r\n\r\n        </div>\r\n        <div class=\"d-flex justify-content-between w-100\">\r\n            <span class=\"fs-2 text-dark fw-bolder my-3 audit-test\">Audit Report</span>\r\n           \r\n        </div>\r\n        <div class=\"btn btn-sm btn-icon btn-active-color-primary me-10\" (click)=\"closepopup()\" data-bs-dismiss=\"modal\">\r\n            <span class=\"svg-icon svg-icon-1\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                    <rect opacity=\"0.5\" x=\"6\" y=\"17.3137\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(-45 6 17.3137)\"\r\n                        fill=\"black\"></rect>\r\n                    <rect x=\"7.41422\" y=\"6\" width=\"16\" height=\"2\" rx=\"1\" transform=\"rotate(45 7.41422 6)\" fill=\"black\">\r\n                    </rect>\r\n                </svg>\r\n            </span>\r\n        </div>\r\n    </div>\r\n    \r\n  \r\n    <div class=\"card-body \">\r\n        <div class=\" align-items-center text-center mt-5 mb-5 fs-4\">\r\n            <span class=\"text-gray-400 me-2\"> Before Count</span>\r\n            <span class=\"fw-bold me-10\"> {{totalfiles?.totalfiles}} </span>\r\n            <span class=\"text-gray-400 me-2\"> After Count </span>\r\n            <span class=\"fw-bold me-10\"> {{Retagcustomercount}} </span>\r\n        </div>\r\n        <div class=\" mt-5 mx-20 p-10\">\r\n            <div *ngFor=\"let item of category\">\r\n                <div class=\"d-flex flex-stack \" >\r\n                    <span class=\"text-gray-500\">{{item.name}}</span>\r\n                    <button type=\"button\"\r\n                        class=\"text-dark fs-4 btn btn-icon btn-sm h-auto  btn-color-gray-400 btn-active-color-primary justify-content-end\">\r\n                      {{item.count}} </button>\r\n                </div>\r\n                <div class=\"separator separator-dashed my-3\"></div>\r\n            </div>\r\n     \r\n\r\n        <div class=\"d-flex flex-stack\">\r\n\r\n            <span class=\"text-gray-500\">CUSTOMER</span>\r\n\r\n            <button type=\"button\"\r\n                class=\"text-dark fs-4 btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end\">\r\n             {{Retagcustomercount}} </button>\r\n\r\n        </div>\r\n\r\n        <div class=\"separator separator-dashed my-3\"></div>\r\n\r\n       \r\n        <div class=\"mt-10 text-center\">\r\n            <button class=\"btn btn-primary btn-sm py-2 mx-5 px-8 mt-2\"  [disabled]=\"auth\" (click)=\"nextfile()\" > Submit\r\n            </button>\r\n        </div>\r\n    </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #confirmerror let-modal>\r\n    <div class=\"w-400px h-auto p-10 card\">\r\n        <div class=\"card-header border-0\">\r\n            <div class=\"card-label\">{{Errormsg}}</div>\r\n        </div>\r\n        <div class=\"card-body mt-5\">\r\n            <div class=\"w-100 d-flex mt-5\">\r\n                <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button class=\"btn btn-primary w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Confirm</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: [".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}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: i2.Router }, { type: TimerService }, { type: i0.ChangeDetectorRef }, { type: AuditService }, { type: i2.ActivatedRoute }, { type: i4.ToastService }], propDecorators: { selectedType: [{
+                type: Input
+            }], confirmerror: [{
+                type: ViewChild,
+                args: ['confirmerror']
+            }] } });
+
 class AuditMappingListComponent {
     modalService;
     router;
@@ -6597,6 +6972,7 @@ class AuditMappingListComponent {
             storeId: totalfile?.filedetails?.storeId,
             fileDate: totalfile?.filedetails?.Date,
             auditId: totalfile?.auditId,
+            count: totalfile?.totalfiles
         };
         this.auditService.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
             next: (res) => {
@@ -6647,6 +7023,7 @@ class AuditMappingListComponent {
             storeId: totalfile?.filedetails?.storeId,
             fileDate: totalfile?.filedetails?.Date,
             auditId: totalfile?.auditId,
+            count: totalfile?.totalfiles
         };
         this.auditService.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
             next: (res) => {
@@ -6878,30 +7255,15 @@ class AuditMappingListComponent {
             var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
             this.retagimage = retagdata;
         }
-        this.router.navigate(["/tickets/audit/retag-mapping", this.selectedType]);
-    }
-    //   submitaudit() {
-    //     if(!this.demographic){
-    //       const modalRef = this.modalService.open(this.confirmDraft,{
-    //         centered:true,size:'md'
-    //     })
-    //     modalRef.result.then((result) =>{
-    //       if (result === 'isConfirmed') {
-    //         const modalRef = this.modalService.open(AuditReportPopupComponent, {
-    //           size: 'lg',
-    //           centered: true
-    //         })
-    //         modalRef.componentInstance.selectedType = this.selectedType;
-    //       }
-    //   })
-    // } else{
-    //     const modalRef = this.modalService.open(AuditReportPopupComponent, {
-    //       size: 'lg',
-    //       centered: true
-    //     })
-    //     modalRef.componentInstance.selectedType = this.selectedType;
-    //     }
-    // }
+        this.router.navigate(["/manage/tickets/retag-mapping"]);
+    }
+    submitaudit() {
+        const modalRef = this.modalService.open(AuditReportPopupComponent, {
+            size: 'lg',
+            centered: true
+        });
+        modalRef.componentInstance.selectedType = this.selectedType;
+    }
     setValue(i) {
         let index = 0;
         if (i > index) {
@@ -6938,33 +7300,465 @@ class AuditMappingListComponent {
         sessionStorage.setItem('audit', compressedData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditMappingListComponent, deps: [{ token: i1$2.NgbModal }, { token: i2.Router }, { token: AuditService }, { token: i4.ToastService }, { token: i2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: TimerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditMappingListComponent, selector: "lib-audit-mapping-list", viewQueries: [{ propertyName: "confirmDraft", first: true, predicate: ["confirmDraft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!auditLoading\" class=\"card\" >\r\n    <div class=\"card-header\" >\r\n        <div class=\"card-title\">\r\n            <h3 class=\"flex-column\">\r\n                <!-- <span class=\"card-label fw-bold\">{{filedetails?.queueName}}<span class=\"mx-3 arrow-code\"> - </span> -->\r\n                    <span>{{filedetails?.storeId}}</span>\r\n                    \r\n                    <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.Date}}</span>\r\n                    <!-- <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.type}}</span> -->\r\n                <!-- </span> -->\r\n            </h3>\r\n    \r\n            <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n                <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\" fill=\"black\"/>\r\n                </svg></span>\r\n            </div>\r\n            <!-- <span *ngIf=\"demographic\" class=\"badge badge-light-success ms-3\">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->\r\n        </div>\r\n\r\n        <div class=\"card-toolbar \">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <a *ngIf=\"!showvalue1\" class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"changesdata()\"><span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span><span class=\"ms-3\">Back to Tagging</span></a>\r\n                            <button *ngIf=\"!showvalue\" class=\"btn btn-sm btn-primary py-2 mx-2\"  >Submit\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path d=\"M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </svg>\r\n                            </button>\r\n                \r\n                    <button *ngIf=\"showvalue\" class=\"btn btn-primary btn-sm py-2 mx-2\" [disabled]=\"submitted\" (click)=\"taggingview()\">Retag <span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                        </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    \r\n</div>\r\n\r\n\r\n<div class=\"row\"> \r\n    <div *ngIf=\"auditLoading\" class=\"card mt-5\">\r\n            <div class=\"card-body\">\r\n            <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>               \r\n            </div>\r\n        <!-- <h5 class=\"text-dark-600 fs-3 fw-bold text-center \">Loading Audit file......</h5> -->\r\n    </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"h-1000px\">\r\n                <div ngbAccordion *ngFor=\"let item of category\">\r\n                    <div *ngIf=\"item?.count !==0\" class=\"mt-6\" ngbAccordionItem [collapsed]=\"!item?.count\">\r\n                        <div ngbAccordionHeader>\r\n                            <button class=\"mainheading\" ngbAccordionButton>\r\n                              <div>\r\n                                {{item?.name}} <span class=\"sub-text mt-2 ms-2\">\r\n                                    <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                     <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                     <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                     </g>\r\n                                     <defs>\r\n                                     <clipPath id=\"clip0_14508_18583\">\r\n                                     <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                     </clipPath>\r\n                                     </defs>\r\n                                     </svg>{{item?.count}}</span>\r\n                                    </span>\r\n                              </div>\r\n                              <div class=\"divider\"></div>\r\n                            </button>\r\n                          </div>\r\n                         \r\n                        <div ngbAccordionCollapse>\r\n                            <div ngbAccordionBody class=\"py-0\">\r\n                                <ng-template>\r\n                                    <div class=\"h-auto\" (dragover)=\"allowDrop($event)\">\r\n                                        <div class=\"col-md-12 item\" >\r\n                                            <div class=\"item\" *ngFor=\"let obj of item?.value\" >\r\n                                        <img draggable=\"true\" (dragstart)=\"drag($event)\" id=\"{{obj.img_id}}\" name=\"{{item.type}}\"\r\n                                             class=\"my-3 mx-2 img\" [src]=\"obj.img_path\">\r\n                                            <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n                                            </div>\r\n                                            </div>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                   \r\n                </div>\r\n                <div ngbAccordion>\r\n                    <div class=\"mt-6\" ngbAccordionItem [collapsed]=\"!(!junkcount && !employeecount)\">\r\n                           <div ngbAccordionHeader>\r\n                               <button class=\"mainheading\" ngbAccordionButton>\r\n                                 <div>\r\n                                   Unique Customer  <span class=\"sub-text mt-2 ms-2\">\r\n                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                           <g clip-path=\"url(#clip0_15800_3911)\">\r\n                                           <path d=\"M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                           </g>\r\n                                           <defs>\r\n                                           <clipPath id=\"clip0_15800_3911\">\r\n                                           <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                           </clipPath>\r\n                                           </defs>\r\n                                           </svg> {{customercount}}</span>\r\n                                       </span>\r\n                                 </div>\r\n                                 <div class=\"divider\"></div>\r\n                               </button>\r\n                             </div>\r\n                            \r\n                           <div ngbAccordionCollapse>\r\n                               <div ngbAccordionBody class=\"py-0\">\r\n                                   <ng-template>\r\n                                       <div>\r\n                                           <div class=\"h-500\" (dragover)=\"allowDrop($event)\">\r\n                                               <ng-container *ngIf=\"resetGroupNumber() === null\"></ng-container>\r\n                                               <ng-container *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count === 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\" (click)=\"toggleImage(img?.img_name )\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                               <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"notify-badge2 w-25px h-25px cursor-pointer\" (click)=\"toggleImage(img?.img_name )\">\r\n                                                               </span>\r\n                                                               <span *ngIf=\"obj?.demographic === 'd'\" class=\"notify-badge\" (click)=\"toggleImage(img?.img_name )\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                                   style=\"font-size:15px;color:#00A3FF\"></i></span> -->\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                                               <ng-container class=\"mt-5\" *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count > 1\" class=\"card-label mt-3\">Group {{ getGroupNumber(obj) }} <span class=\"sub-text mt-3 ms-2\">\r\n                                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                                        <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                                        <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                        </g>\r\n                                                        <defs>\r\n                                                        <clipPath id=\"clip0_14508_18583\">\r\n                                                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                                        </clipPath>\r\n                                                        </defs>\r\n                                                        </svg>{{obj.count}}</span>\r\n                                                       </span> \r\n                                                       <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" style=\"padding:2px 10.5px !important\" (click)=\"toggleImage(obj?.img_name)\">\r\n                                                       </span>\r\n                                                       <span *ngIf=\"obj?.demographic === 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" (click)=\"toggleImage(obj?.img_name)\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                           style=\"font-size:15px;color:#00A3FF\"></i></span> Mark as demographic -->\r\n                                                   </div>\r\n                                                   <div *ngIf=\"obj.count > 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\" class=\"item\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                           \r\n                                           </div>\r\n                                       </div>\r\n                                   </ng-template>\r\n                               </div>\r\n                           </div>\r\n                       </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n        <div class=\"card mt-5\">\r\n            <!-- (change)=\"imagearray()\" -->\r\n            <div class=\"card-body h-1000px\" (drop)=\"dropforretag($event)\" (dragover)=\"allowDrop($event)\" >\r\n                <div class=\"card-label fw-bold text-dark mb-5\">Images for Retagging</div>\r\n                <div class=\"col-md-12 item\" >\r\n                <div class=\"item\" *ngFor=\"let item of retagimage\">\r\n                <img  [src]=\"item.img_path\" class=\"my-2 mx-4 img-ret\">\r\n                <div  class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n                <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n                    style=\"font-size:15px;color:#00A3FF\"></i>\r\n                </span>\r\n                </div>\r\n           </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n    <div class=\"card h-auto p-10\">\r\n        <div class=\"card-header d-grid p-0 border-0\">\r\n            <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n            <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span>  -->\r\n            <div class=\"card-label mt-5\">Do you want to submit your changes without demographic?</div>\r\n            <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            <div class=\"w-100 d-flex mt-10\">\r\n                <button class=\"btn btn-outline w-50 me-2 fw-bold\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Ok</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".img{width:90px;height:200px}.card-label{font-family:Inter;font-style:normal;font-weight:600!important;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:8px;font-size:20px}.notify-badge{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 5px;font-size:15px;width:25px;height:25px}.kid-badge{background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:2px 4px;font-size:15px;width:25px;height:25px}.nav-menu{position:sticky;position:-webkit-sticky;top:0}.notify-badge1{position:absolute;right:8px;top:4px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:1px 5px 0;font-size:15px;width:25px;height:25px}.notify-badge2{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:0 8px;font-size:20px}.loader1{width:90px;height:90px;margin-left:580px}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.mapping-height{min-height:auto;max-height:1000px}.mapping-height .h-100{height:96%!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditMappingListComponent, selector: "lib-audit-mapping-list", viewQueries: [{ propertyName: "confirmDraft", first: true, predicate: ["confirmDraft"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!auditLoading\" class=\"card\" >\r\n    <div class=\"card-header\" >\r\n        <div class=\"card-title\">\r\n            <h3 class=\"flex-column\">\r\n                <!-- <span class=\"card-label fw-bold\">{{filedetails?.queueName}}<span class=\"mx-3 arrow-code\"> - </span> -->\r\n                    <span>{{filedetails?.storeId}}</span>\r\n                    \r\n                    <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.Date}}</span>\r\n                    <!-- <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.type}}</span> -->\r\n                <!-- </span> -->\r\n            </h3>\r\n    \r\n            <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n                <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\" fill=\"black\"/>\r\n                </svg></span>\r\n            </div>\r\n            <!-- <span *ngIf=\"demographic\" class=\"badge badge-light-success ms-3\">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->\r\n        </div>\r\n\r\n        <div class=\"card-toolbar \">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <a *ngIf=\"!showvalue1\" class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"changesdata()\"><span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span><span class=\"ms-3\">Back to Tagging</span></a>\r\n                            <button *ngIf=\"!showvalue\" class=\"btn btn-sm btn-primary py-2 mx-2\" (click)=\"submitaudit()\"  >Submit\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path d=\"M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </svg>\r\n                            </button>\r\n                \r\n                    <button *ngIf=\"showvalue\" class=\"btn btn-primary btn-sm py-2 mx-2\" [disabled]=\"submitted\" (click)=\"taggingview()\">Retag <span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                        </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    \r\n</div>\r\n\r\n\r\n<div class=\"row\"> \r\n    <div *ngIf=\"auditLoading\" class=\"card mt-5\">\r\n            <div class=\"card-body\">\r\n            <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>               \r\n            </div>\r\n        <!-- <h5 class=\"text-dark-600 fs-3 fw-bold text-center \">Loading Audit file......</h5> -->\r\n    </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"h-1000px\">\r\n                <div ngbAccordion *ngFor=\"let item of category\">\r\n                    <div *ngIf=\"item?.count !==0\" class=\"mt-6\" ngbAccordionItem [collapsed]=\"!item?.count\">\r\n                        <div ngbAccordionHeader>\r\n                            <button class=\"mainheading\" ngbAccordionButton>\r\n                              <div>\r\n                                {{item?.name}} <span class=\"sub-text mt-2 ms-2\">\r\n                                    <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                     <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                     <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                     </g>\r\n                                     <defs>\r\n                                     <clipPath id=\"clip0_14508_18583\">\r\n                                     <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                     </clipPath>\r\n                                     </defs>\r\n                                     </svg>{{item?.count}}</span>\r\n                                    </span>\r\n                              </div>\r\n                              <div class=\"divider\"></div>\r\n                            </button>\r\n                          </div>\r\n                         \r\n                        <div ngbAccordionCollapse>\r\n                            <div ngbAccordionBody class=\"py-0\">\r\n                                <ng-template>\r\n                                    <div class=\"h-auto\" (dragover)=\"allowDrop($event)\">\r\n                                        <div class=\"col-md-12 item\" >\r\n                                            <div class=\"item\" *ngFor=\"let obj of item?.value\" >\r\n                                        <img draggable=\"true\" (dragstart)=\"drag($event)\" id=\"{{obj.img_id}}\" name=\"{{item.type}}\"\r\n                                             class=\"my-3 mx-2 img\" [src]=\"obj.img_path\">\r\n                                            <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n                                            </div>\r\n                                            </div>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                   \r\n                </div>\r\n                <div ngbAccordion>\r\n                    <div class=\"mt-6\" ngbAccordionItem [collapsed]=\"!(!junkcount && !employeecount)\">\r\n                           <div ngbAccordionHeader>\r\n                               <button class=\"mainheading\" ngbAccordionButton>\r\n                                 <div>\r\n                                   Unique Customer  <span class=\"sub-text mt-2 ms-2\">\r\n                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                           <g clip-path=\"url(#clip0_15800_3911)\">\r\n                                           <path d=\"M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                           </g>\r\n                                           <defs>\r\n                                           <clipPath id=\"clip0_15800_3911\">\r\n                                           <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                           </clipPath>\r\n                                           </defs>\r\n                                           </svg> {{customercount}}</span>\r\n                                       </span>\r\n                                 </div>\r\n                                 <div class=\"divider\"></div>\r\n                               </button>\r\n                             </div>\r\n                            \r\n                           <div ngbAccordionCollapse>\r\n                               <div ngbAccordionBody class=\"py-0\">\r\n                                   <ng-template>\r\n                                       <div>\r\n                                           <div class=\"h-500\" (dragover)=\"allowDrop($event)\">\r\n                                               <ng-container *ngIf=\"resetGroupNumber() === null\"></ng-container>\r\n                                               <ng-container *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count === 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\" (click)=\"toggleImage(img?.img_name )\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                               <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"notify-badge2 w-25px h-25px cursor-pointer\" (click)=\"toggleImage(img?.img_name )\">\r\n                                                               </span>\r\n                                                               <span *ngIf=\"obj?.demographic === 'd'\" class=\"notify-badge\" (click)=\"toggleImage(img?.img_name )\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                                   style=\"font-size:15px;color:#00A3FF\"></i></span> -->\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                                               <ng-container class=\"mt-5\" *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count > 1\" class=\"card-label mt-3\">Group {{ getGroupNumber(obj) }} <span class=\"sub-text mt-3 ms-2\">\r\n                                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                                        <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                                        <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                        </g>\r\n                                                        <defs>\r\n                                                        <clipPath id=\"clip0_14508_18583\">\r\n                                                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                                        </clipPath>\r\n                                                        </defs>\r\n                                                        </svg>{{obj.count}}</span>\r\n                                                       </span> \r\n                                                       <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" style=\"padding:2px 10.5px !important\" (click)=\"toggleImage(obj?.img_name)\">\r\n                                                       </span>\r\n                                                       <span *ngIf=\"obj?.demographic === 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" (click)=\"toggleImage(obj?.img_name)\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                           style=\"font-size:15px;color:#00A3FF\"></i></span> Mark as demographic -->\r\n                                                   </div>\r\n                                                   <div *ngIf=\"obj.count > 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\" class=\"item\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                           \r\n                                           </div>\r\n                                       </div>\r\n                                   </ng-template>\r\n                               </div>\r\n                           </div>\r\n                       </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n        <div class=\"card mt-5\">\r\n            <!-- (change)=\"imagearray()\" -->\r\n            <div class=\"card-body h-1000px\" (drop)=\"dropforretag($event)\" (dragover)=\"allowDrop($event)\" >\r\n                <div class=\"card-label fw-bold text-dark mb-5\">Images for Retagging</div>\r\n                <div class=\"col-md-12 item\" >\r\n                <div class=\"item\" *ngFor=\"let item of retagimage\">\r\n                <img  [src]=\"item.img_path\" class=\"my-2 mx-4 img-ret\">\r\n                <div  class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n                <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n                    style=\"font-size:15px;color:#00A3FF\"></i>\r\n                </span>\r\n                </div>\r\n           </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n    <div class=\"card h-auto p-10\">\r\n        <div class=\"card-header d-grid p-0 border-0\">\r\n            <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n            <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span>  -->\r\n            <div class=\"card-label mt-5\">Do you want to submit your changes without demographic?</div>\r\n            <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            <div class=\"w-100 d-flex mt-10\">\r\n                <button class=\"btn btn-outline w-50 me-2 fw-bold\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Ok</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".img{width:90px;height:200px}.card-label{font-family:Inter;font-style:normal;font-weight:600!important;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:8px;font-size:20px}.notify-badge{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 5px;font-size:15px;width:25px;height:25px}.kid-badge{background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:2px 4px;font-size:15px;width:25px;height:25px}.nav-menu{position:sticky;position:-webkit-sticky;top:0}.notify-badge1{position:absolute;right:8px;top:4px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:1px 5px 0;font-size:15px;width:25px;height:25px}.notify-badge2{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:0 8px;font-size:20px}.loader1{width:90px;height:90px;margin-left:580px}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.mapping-height{min-height:auto;max-height:1000px}.mapping-height .h-100{height:96%!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgbAccordionButton, selector: "button[ngbAccordionButton]" }, { kind: "directive", type: i1$2.NgbAccordionDirective, selector: "[ngbAccordion]", inputs: ["animation", "closeOthers", "destroyOnHide"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordion"] }, { kind: "directive", type: i1$2.NgbAccordionItem, selector: "[ngbAccordionItem]", inputs: ["ngbAccordionItem", "destroyOnHide", "disabled", "collapsed"], outputs: ["show", "shown", "hide", "hidden"], exportAs: ["ngbAccordionItem"] }, { kind: "directive", type: i1$2.NgbAccordionHeader, selector: "[ngbAccordionHeader]" }, { kind: "directive", type: i1$2.NgbAccordionBody, selector: "[ngbAccordionBody]" }, { kind: "directive", type: i1$2.NgbAccordionCollapse, selector: "[ngbAccordionCollapse]", exportAs: ["ngbAccordionCollapse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditMappingListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-audit-mapping-list', template: "<div *ngIf=\"!auditLoading\" class=\"card\" >\r\n    <div class=\"card-header\" >\r\n        <div class=\"card-title\">\r\n            <h3 class=\"flex-column\">\r\n                <!-- <span class=\"card-label fw-bold\">{{filedetails?.queueName}}<span class=\"mx-3 arrow-code\"> - </span> -->\r\n                    <span>{{filedetails?.storeId}}</span>\r\n                    \r\n                    <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.Date}}</span>\r\n                    <!-- <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.type}}</span> -->\r\n                <!-- </span> -->\r\n            </h3>\r\n    \r\n            <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n                <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\" fill=\"black\"/>\r\n                </svg></span>\r\n            </div>\r\n            <!-- <span *ngIf=\"demographic\" class=\"badge badge-light-success ms-3\">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->\r\n        </div>\r\n\r\n        <div class=\"card-toolbar \">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <a *ngIf=\"!showvalue1\" class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"changesdata()\"><span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span><span class=\"ms-3\">Back to Tagging</span></a>\r\n                            <button *ngIf=\"!showvalue\" class=\"btn btn-sm btn-primary py-2 mx-2\"  >Submit\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path d=\"M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </svg>\r\n                            </button>\r\n                \r\n                    <button *ngIf=\"showvalue\" class=\"btn btn-primary btn-sm py-2 mx-2\" [disabled]=\"submitted\" (click)=\"taggingview()\">Retag <span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                        </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    \r\n</div>\r\n\r\n\r\n<div class=\"row\"> \r\n    <div *ngIf=\"auditLoading\" class=\"card mt-5\">\r\n            <div class=\"card-body\">\r\n            <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>               \r\n            </div>\r\n        <!-- <h5 class=\"text-dark-600 fs-3 fw-bold text-center \">Loading Audit file......</h5> -->\r\n    </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"h-1000px\">\r\n                <div ngbAccordion *ngFor=\"let item of category\">\r\n                    <div *ngIf=\"item?.count !==0\" class=\"mt-6\" ngbAccordionItem [collapsed]=\"!item?.count\">\r\n                        <div ngbAccordionHeader>\r\n                            <button class=\"mainheading\" ngbAccordionButton>\r\n                              <div>\r\n                                {{item?.name}} <span class=\"sub-text mt-2 ms-2\">\r\n                                    <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                     <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                     <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                     </g>\r\n                                     <defs>\r\n                                     <clipPath id=\"clip0_14508_18583\">\r\n                                     <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                     </clipPath>\r\n                                     </defs>\r\n                                     </svg>{{item?.count}}</span>\r\n                                    </span>\r\n                              </div>\r\n                              <div class=\"divider\"></div>\r\n                            </button>\r\n                          </div>\r\n                         \r\n                        <div ngbAccordionCollapse>\r\n                            <div ngbAccordionBody class=\"py-0\">\r\n                                <ng-template>\r\n                                    <div class=\"h-auto\" (dragover)=\"allowDrop($event)\">\r\n                                        <div class=\"col-md-12 item\" >\r\n                                            <div class=\"item\" *ngFor=\"let obj of item?.value\" >\r\n                                        <img draggable=\"true\" (dragstart)=\"drag($event)\" id=\"{{obj.img_id}}\" name=\"{{item.type}}\"\r\n                                             class=\"my-3 mx-2 img\" [src]=\"obj.img_path\">\r\n                                            <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n                                            </div>\r\n                                            </div>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                   \r\n                </div>\r\n                <div ngbAccordion>\r\n                    <div class=\"mt-6\" ngbAccordionItem [collapsed]=\"!(!junkcount && !employeecount)\">\r\n                           <div ngbAccordionHeader>\r\n                               <button class=\"mainheading\" ngbAccordionButton>\r\n                                 <div>\r\n                                   Unique Customer  <span class=\"sub-text mt-2 ms-2\">\r\n                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                           <g clip-path=\"url(#clip0_15800_3911)\">\r\n                                           <path d=\"M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                           </g>\r\n                                           <defs>\r\n                                           <clipPath id=\"clip0_15800_3911\">\r\n                                           <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                           </clipPath>\r\n                                           </defs>\r\n                                           </svg> {{customercount}}</span>\r\n                                       </span>\r\n                                 </div>\r\n                                 <div class=\"divider\"></div>\r\n                               </button>\r\n                             </div>\r\n                            \r\n                           <div ngbAccordionCollapse>\r\n                               <div ngbAccordionBody class=\"py-0\">\r\n                                   <ng-template>\r\n                                       <div>\r\n                                           <div class=\"h-500\" (dragover)=\"allowDrop($event)\">\r\n                                               <ng-container *ngIf=\"resetGroupNumber() === null\"></ng-container>\r\n                                               <ng-container *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count === 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\" (click)=\"toggleImage(img?.img_name )\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                               <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"notify-badge2 w-25px h-25px cursor-pointer\" (click)=\"toggleImage(img?.img_name )\">\r\n                                                               </span>\r\n                                                               <span *ngIf=\"obj?.demographic === 'd'\" class=\"notify-badge\" (click)=\"toggleImage(img?.img_name )\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                                   style=\"font-size:15px;color:#00A3FF\"></i></span> -->\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                                               <ng-container class=\"mt-5\" *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count > 1\" class=\"card-label mt-3\">Group {{ getGroupNumber(obj) }} <span class=\"sub-text mt-3 ms-2\">\r\n                                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                                        <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                                        <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                        </g>\r\n                                                        <defs>\r\n                                                        <clipPath id=\"clip0_14508_18583\">\r\n                                                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                                        </clipPath>\r\n                                                        </defs>\r\n                                                        </svg>{{obj.count}}</span>\r\n                                                       </span> \r\n                                                       <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" style=\"padding:2px 10.5px !important\" (click)=\"toggleImage(obj?.img_name)\">\r\n                                                       </span>\r\n                                                       <span *ngIf=\"obj?.demographic === 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" (click)=\"toggleImage(obj?.img_name)\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                           style=\"font-size:15px;color:#00A3FF\"></i></span> Mark as demographic -->\r\n                                                   </div>\r\n                                                   <div *ngIf=\"obj.count > 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\" class=\"item\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                           \r\n                                           </div>\r\n                                       </div>\r\n                                   </ng-template>\r\n                               </div>\r\n                           </div>\r\n                       </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n        <div class=\"card mt-5\">\r\n            <!-- (change)=\"imagearray()\" -->\r\n            <div class=\"card-body h-1000px\" (drop)=\"dropforretag($event)\" (dragover)=\"allowDrop($event)\" >\r\n                <div class=\"card-label fw-bold text-dark mb-5\">Images for Retagging</div>\r\n                <div class=\"col-md-12 item\" >\r\n                <div class=\"item\" *ngFor=\"let item of retagimage\">\r\n                <img  [src]=\"item.img_path\" class=\"my-2 mx-4 img-ret\">\r\n                <div  class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n                <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n                    style=\"font-size:15px;color:#00A3FF\"></i>\r\n                </span>\r\n                </div>\r\n           </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n    <div class=\"card h-auto p-10\">\r\n        <div class=\"card-header d-grid p-0 border-0\">\r\n            <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n            <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span>  -->\r\n            <div class=\"card-label mt-5\">Do you want to submit your changes without demographic?</div>\r\n            <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            <div class=\"w-100 d-flex mt-10\">\r\n                <button class=\"btn btn-outline w-50 me-2 fw-bold\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Ok</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".img{width:90px;height:200px}.card-label{font-family:Inter;font-style:normal;font-weight:600!important;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:8px;font-size:20px}.notify-badge{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 5px;font-size:15px;width:25px;height:25px}.kid-badge{background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:2px 4px;font-size:15px;width:25px;height:25px}.nav-menu{position:sticky;position:-webkit-sticky;top:0}.notify-badge1{position:absolute;right:8px;top:4px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:1px 5px 0;font-size:15px;width:25px;height:25px}.notify-badge2{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:0 8px;font-size:20px}.loader1{width:90px;height:90px;margin-left:580px}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.mapping-height{min-height:auto;max-height:1000px}.mapping-height .h-100{height:96%!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"] }]
+            args: [{ selector: 'lib-audit-mapping-list', template: "<div *ngIf=\"!auditLoading\" class=\"card\" >\r\n    <div class=\"card-header\" >\r\n        <div class=\"card-title\">\r\n            <h3 class=\"flex-column\">\r\n                <!-- <span class=\"card-label fw-bold\">{{filedetails?.queueName}}<span class=\"mx-3 arrow-code\"> - </span> -->\r\n                    <span>{{filedetails?.storeId}}</span>\r\n                    \r\n                    <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.Date}}</span>\r\n                    <!-- <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span >{{filedetails?.type}}</span> -->\r\n                <!-- </span> -->\r\n            </h3>\r\n    \r\n            <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n                <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                <path d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\" fill=\"black\"/>\r\n                </svg></span>\r\n            </div>\r\n            <!-- <span *ngIf=\"demographic\" class=\"badge badge-light-success ms-3\">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->\r\n        </div>\r\n\r\n        <div class=\"card-toolbar \">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <a *ngIf=\"!showvalue1\" class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"changesdata()\"><span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\" ><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span><span class=\"ms-3\">Back to Tagging</span></a>\r\n                            <button *ngIf=\"!showvalue\" class=\"btn btn-sm btn-primary py-2 mx-2\" (click)=\"submitaudit()\"  >Submit\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                    <path d=\"M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                    </svg>\r\n                            </button>\r\n                \r\n                    <button *ngIf=\"showvalue\" class=\"btn btn-primary btn-sm py-2 mx-2\" [disabled]=\"submitted\" (click)=\"taggingview()\">Retag <span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path d=\"M4.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333\" stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                </svg></span>\r\n                        </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n    \r\n</div>\r\n\r\n\r\n<div class=\"row\"> \r\n    <div *ngIf=\"auditLoading\" class=\"card mt-5\">\r\n            <div class=\"card-body\">\r\n            <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"shimmer\">\r\n                    <div class=\"wrapper\">\r\n                      <div class=\"stroke animate title\"></div>\r\n                      <div class=\"stroke animate link\"></div>\r\n                      <div class=\"stroke animate description\"></div>\r\n                    </div>\r\n                  </div>               \r\n            </div>\r\n        <!-- <h5 class=\"text-dark-600 fs-3 fw-bold text-center \">Loading Audit file......</h5> -->\r\n    </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"h-1000px\">\r\n                <div ngbAccordion *ngFor=\"let item of category\">\r\n                    <div *ngIf=\"item?.count !==0\" class=\"mt-6\" ngbAccordionItem [collapsed]=\"!item?.count\">\r\n                        <div ngbAccordionHeader>\r\n                            <button class=\"mainheading\" ngbAccordionButton>\r\n                              <div>\r\n                                {{item?.name}} <span class=\"sub-text mt-2 ms-2\">\r\n                                    <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                     <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                     <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                     </g>\r\n                                     <defs>\r\n                                     <clipPath id=\"clip0_14508_18583\">\r\n                                     <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                     </clipPath>\r\n                                     </defs>\r\n                                     </svg>{{item?.count}}</span>\r\n                                    </span>\r\n                              </div>\r\n                              <div class=\"divider\"></div>\r\n                            </button>\r\n                          </div>\r\n                         \r\n                        <div ngbAccordionCollapse>\r\n                            <div ngbAccordionBody class=\"py-0\">\r\n                                <ng-template>\r\n                                    <div class=\"h-auto\" (dragover)=\"allowDrop($event)\">\r\n                                        <div class=\"col-md-12 item\" >\r\n                                            <div class=\"item\" *ngFor=\"let obj of item?.value\" >\r\n                                        <img draggable=\"true\" (dragstart)=\"drag($event)\" id=\"{{obj.img_id}}\" name=\"{{item.type}}\"\r\n                                             class=\"my-3 mx-2 img\" [src]=\"obj.img_path\">\r\n                                            <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n                                            </div>\r\n                                            </div>\r\n                                    </div>\r\n                                </ng-template>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    \r\n                   \r\n                </div>\r\n                <div ngbAccordion>\r\n                    <div class=\"mt-6\" ngbAccordionItem [collapsed]=\"!(!junkcount && !employeecount)\">\r\n                           <div ngbAccordionHeader>\r\n                               <button class=\"mainheading\" ngbAccordionButton>\r\n                                 <div>\r\n                                   Unique Customer  <span class=\"sub-text mt-2 ms-2\">\r\n                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                           <g clip-path=\"url(#clip0_15800_3911)\">\r\n                                           <path d=\"M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                           </g>\r\n                                           <defs>\r\n                                           <clipPath id=\"clip0_15800_3911\">\r\n                                           <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                           </clipPath>\r\n                                           </defs>\r\n                                           </svg> {{customercount}}</span>\r\n                                       </span>\r\n                                 </div>\r\n                                 <div class=\"divider\"></div>\r\n                               </button>\r\n                             </div>\r\n                            \r\n                           <div ngbAccordionCollapse>\r\n                               <div ngbAccordionBody class=\"py-0\">\r\n                                   <ng-template>\r\n                                       <div>\r\n                                           <div class=\"h-500\" (dragover)=\"allowDrop($event)\">\r\n                                               <ng-container *ngIf=\"resetGroupNumber() === null\"></ng-container>\r\n                                               <ng-container *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count === 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\" (click)=\"toggleImage(img?.img_name )\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                               <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"notify-badge2 w-25px h-25px cursor-pointer\" (click)=\"toggleImage(img?.img_name )\">\r\n                                                               </span>\r\n                                                               <span *ngIf=\"obj?.demographic === 'd'\" class=\"notify-badge\" (click)=\"toggleImage(img?.img_name )\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                                   style=\"font-size:15px;color:#00A3FF\"></i></span> -->\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                                               <ng-container class=\"mt-5\" *ngFor=\"let obj of auditmappingdata;let i=index\">\r\n                                                   <div *ngIf=\"obj?.count > 1\" class=\"card-label mt-3\">Group {{ getGroupNumber(obj) }} <span class=\"sub-text mt-3 ms-2\">\r\n                                                       <span class=\"badge badge-light-default\"><svg class=\"me-2\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n                                                        <g clip-path=\"url(#clip0_14508_18583)\">\r\n                                                        <path d=\"M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z\" stroke=\"#667085\" stroke-width=\"1.1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                                                        </g>\r\n                                                        <defs>\r\n                                                        <clipPath id=\"clip0_14508_18583\">\r\n                                                        <rect width=\"12\" height=\"12\" fill=\"white\"/>\r\n                                                        </clipPath>\r\n                                                        </defs>\r\n                                                        </svg>{{obj.count}}</span>\r\n                                                       </span> \r\n                                                       <!-- <span *ngIf=\"obj?.demographic !== 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" style=\"padding:2px 10.5px !important\" (click)=\"toggleImage(obj?.img_name)\">\r\n                                                       </span>\r\n                                                       <span *ngIf=\"obj?.demographic === 'd'\" class=\"kid-badge cursor-pointer ms-3 me-3\" (click)=\"toggleImage(obj?.img_name)\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                                                           style=\"font-size:15px;color:#00A3FF\"></i></span> Mark as demographic -->\r\n                                                   </div>\r\n                                                   <div *ngIf=\"obj.count > 1\" class=\"item\">\r\n                                                       <div>\r\n                                                           <div *ngFor=\"let img of obj?.mappedid\" class=\"item\">\r\n                                                               <img draggable=\"true\" name=\"{{obj.img_id}}\" (dragstart)=\"drag($event)\"\r\n                                                               id=\"{{img.img_id}}\" class=\"my-3 mx-2 img\" [src]=\"img.img_path\">\r\n                                                               <div class=\"text-center m-0 fs-7 fw-bold\">{{img.img_name}}</div>\r\n                                                           </div>\r\n                                                       </div>\r\n                                                   </div>\r\n                                               </ng-container>\r\n                           \r\n                                           </div>\r\n                                       </div>\r\n                                   </ng-template>\r\n                               </div>\r\n                           </div>\r\n                       </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n        <div class=\"card mt-5\">\r\n            <!-- (change)=\"imagearray()\" -->\r\n            <div class=\"card-body h-1000px\" (drop)=\"dropforretag($event)\" (dragover)=\"allowDrop($event)\" >\r\n                <div class=\"card-label fw-bold text-dark mb-5\">Images for Retagging</div>\r\n                <div class=\"col-md-12 item\" >\r\n                <div class=\"item\" *ngFor=\"let item of retagimage\">\r\n                <img  [src]=\"item.img_path\" class=\"my-2 mx-4 img-ret\">\r\n                <div  class=\"text-center m-0 fs-7 fw-bold\">{{item.img_name}}</div>\r\n                <span class=\"notify-badge1 cursor-pointer\" (click)=\"removeimage(item)\"><i class=\"fa fa-close\" aria-hidden=\"true\"\r\n                    style=\"font-size:15px;color:#00A3FF\"></i>\r\n                </span>\r\n                </div>\r\n           </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #confirmDraft let-modal>\r\n    <div class=\"card h-auto p-10\">\r\n        <div class=\"card-header d-grid p-0 border-0\">\r\n            <span><img src=\"./assets/tango/Images/Successtoast.png\"></span>\r\n            <!-- <span *ngIf=\"getBack\"><img src=\"./assets/tango/custompopup-Icons/danger-icon.svg\"></span>  -->\r\n            <div class=\"card-label mt-5\">Do you want to submit your changes without demographic?</div>\r\n            <!-- <div *ngIf=\"getBack\" class=\"card-label mt-5\">Unsaved Changes</div> -->\r\n        </div>\r\n        <div class=\"card-body p-0\">\r\n            <div class=\"w-100 d-flex mt-10\">\r\n                <button class=\"btn btn-outline w-50 me-2 fw-bold\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button class=\"btn btn-primary savebtn w-50 ms-2\" (click)=\"modal.close('isConfirmed')\">Ok</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [".img{width:90px;height:200px}.card-label{font-family:Inter;font-style:normal;font-weight:600!important;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:8px;font-size:20px}.notify-badge{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:0 5px;font-size:15px;width:25px;height:25px}.kid-badge{background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);padding:2px 4px;font-size:15px;width:25px;height:25px}.nav-menu{position:sticky;position:-webkit-sticky;top:0}.notify-badge1{position:absolute;right:8px;top:4px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:1px 5px 0;font-size:15px;width:25px;height:25px}.notify-badge2{position:absolute;right:4px;top:8px;background:var(--Primary-50, #EAF8FF);color:#00a3ff;border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;padding:0 8px;font-size:20px}.loader1{width:90px;height:90px;margin-left:580px}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.mapping-height{min-height:auto;max-height:1000px}.mapping-height .h-100{height:96%!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i2.Router }, { type: AuditService }, { type: i4.ToastService }, { type: i2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: TimerService }], propDecorators: { confirmDraft: [{
                 type: ViewChild,
                 args: ['confirmDraft']
             }] } });
 
-const routes = [
-    {
-        path: '',
-        component: TangoManageTicketsComponent
-    },
-    {
-        path: 'list',
-        component: FootfallDicviewComponent
-    },
-    {
-        path: "audit",
-        component: StartAuditComponent
-    },
-    {
-        path: "mapping-list",
-        component: AuditMappingListComponent
-    }
+class AuditRetagComponent {
+    modalService;
+    router;
+    $api;
+    toastr;
+    route;
+    timerService;
+    cd;
+    totalfile = 0;
+    customer = 0;
+    junk = 0;
+    employee = 0;
+    junkimage = [];
+    retagimage = [];
+    submitvalue = true;
+    auditmappingdata = [];
+    customercount = 0;
+    junkcount = 0;
+    employeecount = 0;
+    employeimage = [];
+    filedetails = {};
+    auditLoading = false;
+    selectedType;
+    destroy$ = new Subject();
+    timePassed = 0;
+    subscription = null;
+    formattedTime = '00:00:00';
+    openmodel = false;
+    category = [];
+    handleKeyPress(event) {
+        if (this.openmodel)
+            return;
+        if (event.key === 'g' || event.code === 'KeyG') {
+            var group = this.auditmappingdata.filter((data) => data.selected === true);
+            if (group.length > 0) {
+                if (group.length == 1) {
+                    this.toastr.getErrorToast('Please Select multiple file then add to Group');
+                }
+                else {
+                    let dummyarray = group.shift();
+                    var groupimages = [];
+                    group.forEach((data) => {
+                        this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_name }) => img_name == data.img_name), 1);
+                        groupimages.push(data.mappedid[0]);
+                    });
+                    dummyarray.count = dummyarray.count + groupimages.length;
+                    dummyarray.selected = false;
+                    dummyarray.mappedid = [...dummyarray.mappedid, ...groupimages];
+                    const jsonString = JSON.stringify(this.auditmappingdata);
+                    const compressedData = LZString.compress(jsonString);
+                    sessionStorage.setItem('audit', compressedData);
+                }
+                // this.initial_data_loading()
+            }
+            else {
+                this.toastr.getErrorToast('Please Select file then add to Group');
+            }
+        }
+        const pressed = (event.key || '').toLowerCase();
+        const matched = this.category.find((m) => {
+            if (!m.key)
+                return false;
+            const mapKey = m.key.toLowerCase();
+            // match by event.key (preferred) OR by event.code like 'KeyJ'
+            return pressed === mapKey || event.code === `Key${mapKey.toUpperCase()}`;
+        });
+        console.log(matched);
+        if (!matched)
+            return;
+        if (matched) {
+            var newData = this.auditmappingdata.filter((data) => data.selected === true);
+            if (newData.length > 0) {
+                var oldData = JSON.parse(sessionStorage.getItem(matched?.type) || '{}');
+                if (Number(oldData.length) > 0) {
+                    newData = [...oldData, ...newData];
+                }
+                else {
+                    newData = newData;
+                }
+                this.category.map((data) => {
+                    if (data.type === matched?.type) {
+                        data.count = newData.length;
+                    }
+                });
+                sessionStorage.setItem(matched?.type, JSON.stringify(newData));
+                this.auditmappingdata = this.auditmappingdata.filter((data) => data.selected === false);
+                const jsonString = JSON.stringify(this.auditmappingdata);
+                const compressedData = LZString.compress(jsonString);
+                sessionStorage.setItem('audit', compressedData);
+                this.toastr.getSuccessToast(`${matched?.type} Added Succesfully!`);
+            }
+            else {
+                this.toastr.getErrorToast(`Please Select file then add to ${matched?.type} `);
+            }
+        }
+    }
+    constructor(modalService, router, $api, toastr, route, timerService, cd) {
+        this.modalService = modalService;
+        this.router = router;
+        this.$api = $api;
+        this.toastr = toastr;
+        this.route = route;
+        this.timerService = timerService;
+        this.cd = cd;
+        this.selectedType = this.route.snapshot.paramMap.get('type');
+    }
+    ngOnInit() {
+        this.getAuditConfig();
+        if (this.retagimage.length == 0) {
+            this.submitvalue = false;
+        }
+        this.auditLoading = false;
+        this.setTimer();
+    }
+    getAuditConfig() {
+        let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+        this.$api.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res?.code == 200) {
+                    console.log(res.data.footfallDirectoryConfigs.taggingLimitation);
+                    this.category = res.data.footfallDirectoryConfigs.taggingLimitation;
+                    this.initial_data_loading();
+                }
+            }
+        });
+    }
+    setTimer() {
+        this.subscription = this.timerService.getTimePassed().subscribe(time => {
+            this.timePassed = time;
+            this.formattedTime = this.timerService.formatTime(time);
+            this.cd.detectChanges();
+        });
+        this.timerService.startTimer();
+        document.addEventListener('mousemove', this.handleGlobalMouseEvent);
+        document.addEventListener('click', this.handleGlobalMouseEvent);
+        document.addEventListener('mouseenter', this.handleGlobalMouseEvent);
+        document.addEventListener('scroll', this.handleGlobalMouseEvent);
+    }
+    handleGlobalMouseEvent = () => {
+        this.timerService.startTimer();
+    };
+    ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
+        document.removeEventListener('mousemove', this.handleGlobalMouseEvent);
+        document.removeEventListener('click', this.handleGlobalMouseEvent);
+        document.removeEventListener('mouseenter', this.handleGlobalMouseEvent);
+        document.removeEventListener('scroll', this.handleGlobalMouseEvent);
+        this.timerService.clearTimer();
+    }
+    initial_data_loading() {
+        if ('audit' in sessionStorage) {
+            let stringifydata = sessionStorage.getItem('audit') || '{}';
+            const decompressedData = LZString.decompress(stringifydata);
+            var auditdata = JSON.parse(decompressedData || '{}');
+            if (auditdata.length > 0) {
+                this.auditmappingdata = auditdata;
+                this.customercount = this.auditmappingdata.length;
+            }
+            else {
+                this.auditmappingdata = [];
+                this.customercount = 0;
+            }
+        }
+        this.category.map((data) => {
+            var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
+            data.count = count?.length;
+        });
+        if ('retag' in sessionStorage) {
+            var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
+            if (retagdata.length > 0) {
+                this.retagimage = retagdata;
+            }
+            else {
+                this.retagimage = [];
+            }
+        }
+        if ('totalfiles' in sessionStorage) {
+            var files = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+            this.totalfile = files?.totalfiles;
+            this.filedetails = files?.filedetails;
+        }
+    }
+    getmappingdata() {
+        this.auditLoading = false;
+        var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+        this.filedetails = totalfile?.filedetails;
+        var payload = {
+            storeId: totalfile?.filedetails?.storeId,
+            fileDate: totalfile?.filedetails?.Date,
+            auditId: totalfile?.auditId,
+            count: totalfile?.totalfiles
+        };
+        this.$api.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res?.code == 200) {
+                    this.auditLoading = false;
+                    sessionStorage.removeItem('retag');
+                    this.retagimage = [];
+                    this.category.map((data) => {
+                        let filterData = res?.data?.result?.draftedData?.filter((x) => x.type === data.type);
+                        data.value = filterData[0]?.value && filterData[0]?.value.length > 0 ? filterData[0]?.value : [];
+                        data.count = data?.value?.length;
+                        sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []));
+                    });
+                    let customerData = res?.data?.result?.draftedData?.filter((x) => x.type === 'customer');
+                    this.auditmappingdata = customerData[0]?.value;
+                    const jsonString = JSON.stringify(customerData[0]?.value);
+                    const compressedData = LZString.compress(jsonString);
+                    sessionStorage.setItem('audit', compressedData);
+                    this.initial_data_loading();
+                }
+            },
+            error: (err) => {
+            },
+        });
+    }
+    reviewdata() {
+        this.submitvalue = false;
+        var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+        if ('audit' in sessionStorage) {
+            let stringifydata = sessionStorage.getItem('audit') || '{}';
+            const decompressedData = LZString.decompress(stringifydata);
+            var auditdata = JSON.parse(decompressedData || '{}');
+            if (auditdata.length > 0) {
+                this.auditmappingdata = auditdata;
+                this.customercount = this.auditmappingdata.length;
+            }
+        }
+        if ('retag' in sessionStorage) {
+            var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
+            this.retagimage = retagdata;
+            this.auditmappingdata = [...this.auditmappingdata, ...this.retagimage];
+            const jsonString = JSON.stringify(this.auditmappingdata);
+            const compressedData = LZString.compress(jsonString);
+            sessionStorage.setItem('audit', compressedData);
+            sessionStorage.removeItem('retag');
+            this.retagimage = [];
+        }
+        let stringifydata = sessionStorage.getItem('audit') || '{}';
+        const decompressedData = LZString.decompress(stringifydata);
+        var customer = JSON.parse(decompressedData || '{}');
+        let storedData = [
+            {
+                type: "customer",
+                value: customer ? customer : [],
+            }
+        ];
+        this.category.map((data) => {
+            let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
+            storedData.push({
+                type: data.type,
+                value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
+            });
+        });
+        console.log("🚀 ~ StartAuditComponent ~ Reviewdata ~ storedData:", storedData);
+        var inserobj = {
+            storeId: totalfile?.filedetails?.storeId,
+            auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
+            fileDate: totalfile?.filedetails?.Date,
+            totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
+            retagCount: 0,
+            timeSpent: this.timePassed,
+            retagImage: [],
+            draftedData: storedData
+        };
+        this.$api.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe({
+            next: (res) => {
+                if (res && res.code == 200) {
+                    this.getmappingdata();
+                    this.router.navigate(["/manage/tickets/mapping-list",]);
+                }
+            },
+            error: (err) => {
+                this.toastr.getErrorToast(err?.error);
+            },
+        });
+    }
+    retagallowDrop(event) {
+        event.preventDefault();
+    }
+    dragStart(event) {
+        event.dataTransfer.setData("text/plain", event.target.id);
+    }
+    dropretag(event) {
+        event.preventDefault();
+        const dropretagimage = event.dataTransfer.getData('text/plain');
+        event.target.appendChild(document.getElementById(dropretagimage));
+        const dropzone = dropretagimage;
+        this.auditmappingdata.map((data) => {
+            if (data.img_id == dropzone.id) {
+                if (data.mappedid.length > 0) {
+                    var findone = this.auditmappingdata.filter((data) => data.img_name == dropretagimage);
+                    if (findone.length > 0) {
+                        data.count = data.count + findone[0].count;
+                        data.mappedid = [...data.mappedid, ...findone[0].mappedid];
+                    }
+                }
+                else {
+                    data.count = data.count + 1,
+                        data.mappedid.push(dropretagimage);
+                }
+            }
+        });
+    }
+    selectretagimage(res) {
+        this.retagimage.map((data) => {
+            if (data.img_id == res) {
+                if (data.mappedid.length == 1) {
+                    data.selected = !data.selected;
+                }
+            }
+        });
+    }
+    selectgroupimage(res) {
+        this.auditmappingdata.map((data) => {
+            if (data.img_id == res) {
+                if (data.mappedid.length == 1) {
+                    data.selected = !data.selected;
+                }
+            }
+        });
+    }
+    removeaudit(data) {
+        const modalRef = this.modalService.open(RemoveAuditComponent, {
+            size: 'lg',
+            centered: true,
+            backdrop: 'static',
+            keyboard: false
+        });
+        modalRef.componentInstance.data = data;
+        modalRef.closed.subscribe((res) => {
+            if (res && res?.reload) {
+                this.initial_data_loading();
+            }
+        });
+    }
+    submitaudit() {
+        const modalRef = this.modalService.open(AuditReportPopupComponent, {
+            size: 'lg',
+            centered: true,
+            backdrop: 'static',
+            keyboard: false
+        });
+        modalRef.componentInstance.selectedType = this.selectedType;
+        modalRef.closed;
+    }
+    viewcategory(data) {
+        const modalRef = this.modalService.open(ViewcategoryComponent, {
+            size: 'lg',
+            centered: true,
+            backdrop: 'static',
+            keyboard: false
+        });
+        modalRef.componentInstance.data = data;
+        modalRef.componentInstance.imageList = data,
+            modalRef.closed.subscribe((res) => {
+                if (res && res?.reload) {
+                    this.initial_data_loading();
+                }
+            });
+    }
+    dropImage(event) {
+        const htmltag = event.dataTransfer.getData('text/html');
+        var Name = getTagNameFromHTML(htmltag);
+        const dropZone = event.target;
+        if (Name == 'customer' || Name == 'retag') {
+            event.preventDefault();
+            const draggedImageId = event.dataTransfer.getData('text/plain');
+            const draggedImage = document.getElementById(draggedImageId);
+            event.target.appendChild(draggedImage);
+            this.auditmappingdata.map((data, index) => {
+                if (data.img_id === dropZone.id) {
+                    let findone = [];
+                    const retagdata = JSON.parse(sessionStorage.getItem('retag') || '[]');
+                    this.retagimage = retagdata;
+                    findone = this.retagimage.filter((imgData) => imgData.img_id === draggedImageId);
+                    if (findone.length === 0) {
+                        findone = this.auditmappingdata.filter((imgData) => imgData.img_id === draggedImageId);
+                    }
+                    this.retagimage = this.retagimage.filter((imgData) => imgData.img_id !== draggedImageId);
+                    sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
+                    if (findone.length > 0) {
+                        data.count += findone[0].count;
+                        data.mappedid = [...data.mappedid, ...findone[0].mappedid];
+                    }
+                    else {
+                        data.count += 1;
+                        data.mappedid.push(draggedImageId);
+                    }
+                }
+            });
+            if (Name == 'customer') {
+                this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_id }) => img_id == draggedImageId), 1);
+                this.auditmappingdata.map((data) => data.selected = false);
+            }
+            this.customercount = this.auditmappingdata?.length;
+            const jsonString = JSON.stringify(this.auditmappingdata);
+            const compressedData = LZString.compress(jsonString);
+            sessionStorage.setItem('audit', compressedData);
+            var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}');
+            this.retagimage = retagdata;
+            if (this.retagimage.length == 0) {
+                this.submitvalue = false;
+            }
+        }
+        function getTagNameFromHTML(html) {
+            var tempElement = document.createElement('div');
+            tempElement.innerHTML = html;
+            var firstChild = tempElement.firstChild;
+            if (firstChild.hasAttribute('name')) {
+                var namePropertyValue = firstChild.getAttribute('name');
+                return namePropertyValue;
+            }
+            return null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditRetagComponent, deps: [{ token: i1$2.NgbModal }, { token: i2.Router }, { token: AuditService }, { token: i4.ToastService }, { token: i2.ActivatedRoute }, { token: TimerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditRetagComponent, selector: "lib-audit-retag", host: { listeners: { "window:keydown": "handleKeyPress($event)" } }, ngImport: i0, template: "<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <div class=\"card-title\">\r\n            <h3 class=\"flex-column\">\r\n                <div class=\"card-label\">\r\n                    <span>{{filedetails?.storeId}}</span>\r\n                    <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span>{{filedetails?.Date}}</span>\r\n                </div>\r\n            </h3>\r\n            <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n                <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\"\r\n                            fill=\"black\" />\r\n                    </svg></span>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <a class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"reviewdata()\"><span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></span><span class=\"ms-3\">Back to Review</span></a>\r\n\r\n                    <button class=\"btn btn-sm btn-primary py-2 mx-2\" [disabled]=\"submitvalue\"\r\n                        (click)=\"submitaudit()\">Submit\r\n                        <span class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M4.16699 10.0001H15.8337M15.8337 10.0001L10.0003 4.16675M15.8337 10.0001L10.0003 15.8334\"\r\n                                    stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg></span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-header\">\r\n        <h3 class=\"card-title align-items-center flex-row\">\r\n            <span class=\"card-label text-dark\">Total Files - <span>{{totalfile}}</span></span>\r\n         \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=\"me-3 text fw-semibold\">Unique Customers <span\r\n                            class=\" badge badge-light-primary\">{{auditmappingdata?.length ? auditmappingdata?.length :\r\n                            0}}</span></span>\r\n                            <div   *ngFor=\"let item of category\">\r\n                                <button class=\"btn btn-outline text w-semibold btn-sm py-2 butn-flag mx-2\" (click)=\"viewcategory(item)\" [disabled]=\"!item?.count\">View\r\n                                    {{item?.name}}\r\n                                    <span class=\" badge badge-light-primary\">{{item?.count}}</span> </button>\r\n                            </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n    <div *ngIf=\"auditLoading\" 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            <!-- <h5 class=\"text-dark-600 fw-bold text-center mt-5\">Loading Audit file......</h5> -->\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"card-body h-1000px\">\r\n                <div class=\"card-label fw-bold\">Images for Retagging</div>\r\n                <div class=\"text-sub mt-2 fw-semibold\">Drag and Drop on correct customers</div>\r\n                <div class=\"item\" *ngFor=\"let obj1 of retagimage\" (dragover)=\"retagallowDrop($event)\">\r\n                    <img draggable=\"true\" (dragstart)=\"dragStart($event)\" id=\"{{obj1.img_id}}\" [src]=\"obj1.img_path\"\r\n                        class=\"my-3 mx-4 img-ret\" (click)=\"selectretagimage(obj1.img_id)\" name=\"retag\">\r\n                    <div class=\"text-center m-0 fs-7 fw-bold\">{{obj1.img_name}}</div>\r\n                    <span *ngIf=\"obj1.selected\" class=\"notify-badge1 nwbg\"><i class=\"fa fa-check colorvalue\"\r\n                            aria-hidden=\"true\" style=\"font-size:15px;color:#00A3FF\"></i></span>\r\n                    <span class=\"notify-badge cursor-pointer\" (click)=\"removeaudit(obj1)\"\r\n                        *ngIf=\"obj1.count>1\">{{obj1.count}}</span>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"card-body h-1000px\">\r\n                <div class=\"card-label fw-bold\">Unique Customers <span class=\"card-label\">{{auditmappingdata?.length ?\r\n                        auditmappingdata?.length : 0}}</span></div>\r\n                <div class=\"item\" *ngFor=\"let obj of auditmappingdata;let i=index\" style=\"padding: 10px;\">\r\n\r\n                    <img class=\"mx-3 mb-5 img\" [src]=\"obj.img_path\" id=\"{{obj.img_id}}\" alt=\"Image\" name=\"customer\"\r\n                        (dragover)=\"retagallowDrop($event)\" (drop)=\"dropImage($event)\" draggable=\"true\"\r\n                        (dragstart)=\"dragStart($event)\" (click)=\"selectgroupimage(obj.img_id )\">\r\n                    <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n                    <span *ngIf=\"obj.selected\" class=\"notify-badge1\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                            style=\"font-size:15px;color:#00A3FF\"></i></span>\r\n\r\n                    <span class=\"notify-badge cursor-pointer\" (click)=\"removeaudit(obj)\"\r\n                        *ngIf=\"obj.count>1\">{{obj.count}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>", styles: [".img{width:90px;height:200px}.text{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.card-label{font-family:Inter;font-style:normal;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn:hover{color:#009ef7!important}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.btn-check:checked+.btn.btn-light-primary,.btn-check:active+.btn.btn-light-primary,.btn.btn-light-primary:focus:not(.btn-active),.btn.btn-light-primary:hover:not(.btn-active),.btn.btn-light-primary:active:not(.btn-active),.btn.btn-light-primary.active,.btn.btn-light-primary.show,.show>.btn.btn-light-primary{background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;padding-top:20px;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;color:#00a3ff;padding:5px 10px;font-size:15px}.notify-badge1{position:absolute;right:14px;top:5px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;border:2px solid var(--Primary-600, #00A3FF);color:#00a3ff;padding:0 7px;font-size:19px}.colorvalue{font-size:20px;color:#fff}.nwbg{top:23px!important;right:7px!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}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditRetagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-audit-retag', template: "<div class=\"card\">\r\n    <div class=\"card-header\">\r\n        <div class=\"card-title\">\r\n            <h3 class=\"flex-column\">\r\n                <div class=\"card-label\">\r\n                    <span>{{filedetails?.storeId}}</span>\r\n                    <span class=\"mx-3 arrow-code\"> - </span>\r\n                    <span>{{filedetails?.Date}}</span>\r\n                </div>\r\n            </h3>\r\n            <div class=\"rounded-3 ms-3 d-flex align-items-center bg-timer\">\r\n                <span class=\"me-3 text-timer fw-semibold\">{{ formattedTime }}</span>\r\n                <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                        <path\r\n                            d=\"M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z\"\r\n                            fill=\"black\" />\r\n                    </svg></span>\r\n            </div>\r\n        </div>\r\n        <div class=\"card-toolbar\">\r\n            <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <a class=\"btn btn-sm btn-default btn-outline py-2 mx-2\" (click)=\"reviewdata()\"><span\r\n                            class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675\"\r\n                                    stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" />\r\n                            </svg></span><span class=\"ms-3\">Back to Review</span></a>\r\n\r\n                    <button class=\"btn btn-sm btn-primary py-2 mx-2\" [disabled]=\"submitvalue\"\r\n                        (click)=\"submitaudit()\">Submit\r\n                        <span class=\"svg-icon svg-icon-primary svg-icon-2x\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                                <path\r\n                                    d=\"M4.16699 10.0001H15.8337M15.8337 10.0001L10.0003 4.16675M15.8337 10.0001L10.0003 15.8334\"\r\n                                    stroke=\"white\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </svg></span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"card-header\">\r\n        <h3 class=\"card-title align-items-center flex-row\">\r\n            <span class=\"card-label text-dark\">Total Files - <span>{{totalfile}}</span></span>\r\n         \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=\"me-3 text fw-semibold\">Unique Customers <span\r\n                            class=\" badge badge-light-primary\">{{auditmappingdata?.length ? auditmappingdata?.length :\r\n                            0}}</span></span>\r\n                            <div   *ngFor=\"let item of category\">\r\n                                <button class=\"btn btn-outline text w-semibold btn-sm py-2 butn-flag mx-2\" (click)=\"viewcategory(item)\" [disabled]=\"!item?.count\">View\r\n                                    {{item?.name}}\r\n                                    <span class=\" badge badge-light-primary\">{{item?.count}}</span> </button>\r\n                            </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"row\">\r\n    <div *ngIf=\"auditLoading\" 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            <!-- <h5 class=\"text-dark-600 fw-bold text-center mt-5\">Loading Audit file......</h5> -->\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-5\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"card-body h-1000px\">\r\n                <div class=\"card-label fw-bold\">Images for Retagging</div>\r\n                <div class=\"text-sub mt-2 fw-semibold\">Drag and Drop on correct customers</div>\r\n                <div class=\"item\" *ngFor=\"let obj1 of retagimage\" (dragover)=\"retagallowDrop($event)\">\r\n                    <img draggable=\"true\" (dragstart)=\"dragStart($event)\" id=\"{{obj1.img_id}}\" [src]=\"obj1.img_path\"\r\n                        class=\"my-3 mx-4 img-ret\" (click)=\"selectretagimage(obj1.img_id)\" name=\"retag\">\r\n                    <div class=\"text-center m-0 fs-7 fw-bold\">{{obj1.img_name}}</div>\r\n                    <span *ngIf=\"obj1.selected\" class=\"notify-badge1 nwbg\"><i class=\"fa fa-check colorvalue\"\r\n                            aria-hidden=\"true\" style=\"font-size:15px;color:#00A3FF\"></i></span>\r\n                    <span class=\"notify-badge cursor-pointer\" (click)=\"removeaudit(obj1)\"\r\n                        *ngIf=\"obj1.count>1\">{{obj1.count}}</span>\r\n\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"!auditLoading\" class=\"col-md-7\">\r\n        <div class=\"card mt-5\">\r\n            <div class=\"card-body h-1000px\">\r\n                <div class=\"card-label fw-bold\">Unique Customers <span class=\"card-label\">{{auditmappingdata?.length ?\r\n                        auditmappingdata?.length : 0}}</span></div>\r\n                <div class=\"item\" *ngFor=\"let obj of auditmappingdata;let i=index\" style=\"padding: 10px;\">\r\n\r\n                    <img class=\"mx-3 mb-5 img\" [src]=\"obj.img_path\" id=\"{{obj.img_id}}\" alt=\"Image\" name=\"customer\"\r\n                        (dragover)=\"retagallowDrop($event)\" (drop)=\"dropImage($event)\" draggable=\"true\"\r\n                        (dragstart)=\"dragStart($event)\" (click)=\"selectgroupimage(obj.img_id )\">\r\n                    <div class=\"text-center m-0 fs-7 fw-bold\">{{obj.img_name}}</div>\r\n                    <span *ngIf=\"obj.selected\" class=\"notify-badge1\"><i class=\"fa fa-check\" aria-hidden=\"true\"\r\n                            style=\"font-size:15px;color:#00A3FF\"></i></span>\r\n\r\n                    <span class=\"notify-badge cursor-pointer\" (click)=\"removeaudit(obj)\"\r\n                        *ngIf=\"obj.count>1\">{{obj.count}}</span>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>", styles: [".img{width:90px;height:200px}.text{color:var(--Gray-700, #344054);font-size:14px;line-height:20px}.text-sub{color:var(--Gray-500, #667085)!important;font-family:Inter;font-size:14px!important;font-weight:400!important;line-height:20px}.card-label{font-family:Inter;font-style:normal;font-size:18px!important}.text-col{font-family:Inter;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#3f4254}.img-ret{width:90px;height:170px}.butn:hover{color:#009ef7!important}.butn-flag{border:1px solid #009ef7!important;border-right-style:none!important;border-radius:.5rem 0rem 0rem .5rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.butn-flag1{border:1px solid #009ef7!important;border-radius:0rem .5rem .5rem 0rem!important;padding:calc(.25rem + 1px) calc(1.5rem + 1px)!important;background-color:#fff!important}.btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.btn-check:checked+.btn.btn-light-primary,.btn-check:active+.btn.btn-light-primary,.btn.btn-light-primary:focus:not(.btn-active),.btn.btn-light-primary:hover:not(.btn-active),.btn.btn-light-primary:active:not(.btn-active),.btn.btn-light-primary.active,.btn.btn-light-primary.show,.show>.btn.btn-light-primary{background-color:#fff!important}.butn{border:1px solid #009ef7!important;padding:calc(.65rem + 1px) calc(1.5rem + 1px)!important}.h-800px{min-height:120px;max-height:auto}.h-500{min-height:300px}.h-1000px{overflow:auto}.item{position:relative;padding-top:20px;display:inline-block}.notify-badge{position:absolute;right:0;top:195px;background:var(--Primary-50, #EAF8FF);border:2px solid var(--Primary-600, #00A3FF);text-align:center;border-radius:6px;color:#00a3ff;padding:5px 10px;font-size:15px}.notify-badge1{position:absolute;right:14px;top:5px;background:var(--Primary-50, #EAF8FF);text-align:center;border-radius:6px;border:2px solid var(--Primary-600, #00A3FF);color:#00a3ff;padding:0 7px;font-size:19px}.colorvalue{font-size:20px;color:#fff}.nwbg{top:23px!important;right:7px!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}.text-timer{color:var(--Gray-900, #101828);font-size:24px;line-height:32px}.bg-timer{border-radius:12px;background:var(--Primary-25, #F6FCFF);padding:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i2.Router }, { type: AuditService }, { type: i4.ToastService }, { type: i2.ActivatedRoute }, { type: TimerService }, { type: i0.ChangeDetectorRef }], propDecorators: { handleKeyPress: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
+            }] } });
+
+const routes = [
+    {
+        path: '',
+        component: TangoManageTicketsComponent
+    },
+    {
+        path: 'list',
+        component: FootfallDicviewComponent
+    },
+    {
+        path: "audit",
+        component: StartAuditComponent
+    },
+    {
+        path: "mapping-list",
+        component: AuditMappingListComponent
+    },
+    {
+        path: 'retag-mapping',
+        component: AuditRetagComponent
+    },
 ];
 class TangoManageTicketsRoutingModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TangoManageTicketsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -7040,7 +7834,9 @@ class TangoManageTicketsModule {
             RemoveAuditComponent,
             TicketFootfallNewComponent,
             FootfallPopupComponent,
-            FilterOptionsComponent], imports: [CommonModule,
+            FilterOptionsComponent,
+            AuditReportPopupComponent,
+            AuditRetagComponent], imports: [CommonModule,
             TangoManageTicketsRoutingModule,
             FormsModule,
             ReactiveFormsModule,
@@ -7074,6 +7870,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TicketFootfallNewComponent,
                         FootfallPopupComponent,
                         FilterOptionsComponent,
+                        AuditReportPopupComponent,
+                        AuditRetagComponent
                     ],
                     imports: [
                         CommonModule,