tango-app-ui-manage-tickets 3.7.0-beta.41 → 3.7.0-beta.43

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

@@ -3407,6 +3407,14 @@ class TicketFootfallNewComponent {
                         fromDate: this.headerFilters?.date?.startDate,
                         toDate: this.headerFilters?.date?.endDate,
                     };
+                    if (!this.selectedRole) {
+                        if (this.hasApproverAccess) {
+                            this.selectedRole = 'approver';
+                        }
+                        else if (this.hasReviewerAccess) {
+                            this.selectedRole = 'reviewer';
+                        }
+                    }
                     this.viewTicket('store');
                     let payload = {
                         clientId: this.headerFilters.clients
@@ -3433,20 +3441,16 @@ class TicketFootfallNewComponent {
     }
     viewTicket(type) {
         this.tangoType = type;
-        if (this.hasApproverAccess) {
-            this.getTicketSummary();
+        this.getTicketSummary();
+        if (this.hasApproverAccess && this.selectedRole === 'approver') {
             this.SelectedRole('approver');
+            return;
         }
-        else {
-            if (type === 'store') {
-                this.getTicketSummary();
-                this.getTicketList(this.tangoType);
-            }
-            else {
-                this.getTicketSummary();
-                this.getTicketList(this.tangoType);
-            }
+        if (this.hasReviewerAccess && this.selectedRole === 'reviewer') {
+            this.SelectedRole('reviewer');
+            return;
         }
+        this.getTicketList(this.tangoType);
     }
     areAllItemsReviewed(mapping) {
         const revised = mapping?.revisedDetail || [];
@@ -3477,24 +3481,63 @@ class TicketFootfallNewComponent {
     selectedRole = '';
     statusVal;
     getHeaderStatus() {
-        const roleMapping = this.getCurrentRoleMapping();
-        this.statusVal = roleMapping;
-        if (roleMapping?.status) {
-            const allReviewed = this.areAllItemsReviewed(roleMapping);
-            if (roleMapping.status === 'In-Progress') {
-                this.closeBtn = true;
-                this.closeDisabled = !allReviewed;
+        // Default: ticket-level status
+        let headerStatus = this.ticketData?.status || '--';
+        if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
+            return headerStatus;
+        }
+        // 🔹 1) Collect latest mapping by type (only those with a status)
+        let tangoMapping = null;
+        let approverMapping = null;
+        let reviewerMapping = null;
+        for (const ticket of this.footfallTicketsData) {
+            const source = ticket?._source;
+            const mappingList = source?.mappingInfo || [];
+            for (const m of mappingList) {
+                if (!m?.status)
+                    continue; // need status to show in header
+                if (m.type === 'tangoreview') {
+                    tangoMapping = m; // last tango wins
+                }
+                if (m.type === 'approve') {
+                    approverMapping = m; // last approve wins (Open / In-Progress / Closed)
+                }
+                if (m.type === 'review') {
+                    reviewerMapping = m; // last review wins
+                }
             }
-            else {
-                this.closeBtn = false;
-                this.closeDisabled = true;
+        }
+        // 🔹 2) Compute permissionType same as your API
+        let permissionType = null;
+        if (this.usersDetails?.userType !== 'tango') {
+            if (this.hasApproverAccess && this.selectedRole === 'approver') {
+                permissionType = 'approve';
+            }
+            else if (this.hasReviewerAccess && this.selectedRole === 'reviewer') {
+                permissionType = 'review';
             }
-            return roleMapping.status; // e.g. "Open", "In-Progress", "Closed"
         }
-        // Fallback: ticket status
-        this.closeBtn = false;
-        this.closeDisabled = true;
-        return this.ticketData?.status || '--';
+        let roleMapping = null;
+        // 🔹 3) Decide which mapping to show in header
+        if (!permissionType) {
+            // tango or no special role → prefer tango > approve > review
+            roleMapping = tangoMapping || approverMapping || reviewerMapping;
+        }
+        else if (permissionType === 'approve') {
+            // approver view → try approve first, else fallbacks
+            roleMapping = approverMapping || tangoMapping || reviewerMapping;
+        }
+        else if (permissionType === 'review') {
+            // reviewer view → try review first, else fallbacks
+            roleMapping = reviewerMapping || tangoMapping || approverMapping;
+        }
+        // Save for other places if needed
+        this.statusVal = roleMapping;
+        if (roleMapping?.status) {
+            this.areAllItemsReviewed(roleMapping); // keep your side-effect
+            headerStatus = roleMapping.status; // "Open", "In-Progress", "Closed", etc.
+        }
+        return headerStatus;
     }
     approverClosed = false;
     getCurrentRoleMapping() {
@@ -3514,23 +3557,20 @@ class TicketFootfallNewComponent {
                     m?.status?.toLowerCase() === 'closed') {
                     this.approverClosed = hasClosedApprove = true;
                     this.arrowshow = !hasClosedApprove;
+                    console.log(this.approverClosed);
                 }
                 if (m?.type === 'tangoreview' && m?.revisedDetail?.length) {
                     tangoMapping = m; // last tango wins
                 }
                 if (m?.type === 'approve' && m?.revisedDetail?.length) {
-                    approverMapping = m; // last approve wins
+                    approverMapping = m;
+                    // last approve wins
                 }
                 if (m?.type === 'review' && m?.revisedDetail?.length) {
                     reviewerMapping = m; // last review wins
-                    this.closeBtn = true;
-                    this.closeDisabled = false;
                 }
             }
         }
-        // 👇 set arrowshow based on overall array result
-        // => false if any approve+Closed found, true otherwise
-        // 🔹 1) Tango has highest priority – if present, ignore others
         if (tangoMapping) {
             return tangoMapping;
         }
@@ -3561,8 +3601,7 @@ class TicketFootfallNewComponent {
         const map = {
             'Open': 'badge-light-warning',
             'In-Progress': 'badge-light-primary',
-            'Under tangoreview': 'badge-light-primary',
-            'Tango review done': 'badge-light-primary',
+            'tangoreview': 'badge-light-primary',
             'Closed': 'badge-secondary',
             'Pending': 'badge-light-warning',
             'Reviewer-Closed': 'badge-light-warning',
@@ -4002,42 +4041,33 @@ class TicketFootfallNewComponent {
     isSelected(store) {
         return this.selectedStores.includes(store);
     }
-    // when user clicks on a single store checkbox
     toggleStoreSelection(store) {
         if (this.isSelected(store)) {
-            // remove
             this.selectedStores = this.selectedStores.filter((s) => s !== store);
         }
         else {
-            // add (if you want single select, use: this.selectedStores = [store];)
             this.selectedStores = [...this.selectedStores, store];
-            // call API for this store
-            // this.handleStoreSelected(store);
         }
-        // keep "Select All" in sync
+        this.closeMultiple = (this.selectedStores.length > 1) ? false : true;
         this.allSelected =
             this.selectedStores.length === this.openTicketsList.length &&
                 this.openTicketsList.length > 0;
     }
-    // when user clicks on "Select All"
+    newallSelected = false;
     toggleSelectAll() {
-        if (this.allSelected) {
-            // unselect everything
+        if (this.newallSelected) {
             this.selectedStores = [];
-            this.allSelected = false;
+            this.newallSelected = false;
         }
         else {
-            // select all visible stores
             this.selectedStores = [...this.openTicketsList];
-            this.allSelected = true;
-            // usually no need to call detail API here, but you can if you want
+            this.newallSelected = true;
         }
     }
     ticketViewChanges(store) {
         this.dataStoreView(store);
-        // single selection on row click
         this.selectedStores = [store];
-        this.allSelected =
+        this.newallSelected =
             this.selectedStores.length === this.openTicketsList.length &&
                 this.openTicketsList.length > 0;
     }
@@ -4533,8 +4563,8 @@ class TicketFootfallNewComponent {
             this.selectedStores.push(storeId);
         }
         this.hasInitialStoreSynced = true;
-        this.allSelected =
-            this.selectedStores.length === this.openTicketsList.length;
+        // this.allSelected =
+        //   this.selectedStores.length === this.openTicketsList.length;
     }
     revopsTypes = [];
     buildRevopsTypes(tickets) {
@@ -4542,12 +4572,13 @@ class TicketFootfallNewComponent {
         (tickets || []).forEach((ticket) => {
             const mappingInfo = ticket?._source?.mappingInfo || [];
             mappingInfo.forEach((mapping) => {
+                // 🔹 ONE function handles review + approve
+                this.updateCloseStateFromMapping(mapping);
+                // 🔹 Existing revopsTypes logic
                 (mapping?.revisedDetail || []).forEach((item) => {
-                    // 1) Normal entries: have revopsType
                     if (item?.revopsType) {
                         types.add(item.revopsType);
                     }
-                    // 2) Summary entries: have type + name (House keeping, Vendor, Technician, etc.)
                     else if (item?.type && item?.name) {
                         types.add(item.type); // e.g. 'vendor', 'technician', 'houseKeeping'
                     }
@@ -4555,10 +4586,68 @@ class TicketFootfallNewComponent {
             });
         });
         this.revopsTypes = Array.from(types);
-        console.log('Revops types:', this.revopsTypes);
+    }
+    // Handles both: review & approve in ONE place
+    updateCloseStateFromMapping(mapping) {
+        if (!mapping || mapping.status !== 'In-Progress') {
+            return;
+        }
+        // Decide which stage this mapping belongs to
+        const stage = mapping.type === 'review'
+            ? 'review'
+            : mapping.type === 'approve'
+                ? 'approve'
+                : null;
+        if (!stage)
+            return; // ignore other types
+        const { total, done, fullyDone } = this.getActionCompletion(mapping, stage);
+        // 🔹 Case 1: nothing to review → hide/disable button
+        if (done === 0) {
+            this.isCheckboxEnable = true;
+            this.closeBtn = true;
+            this.closeDisabled = true;
+            console.log('No items to review, hiding close button');
+            // return;
+        }
+        else {
+            this.isCheckboxEnable = true;
+            this.closeBtn = true;
+            this.closeDisabled = !fullyDone;
+        }
+        this.cd.detectChanges();
+        // 🔹 Case 2: in-progress (some or none reviewed) → show button, disable if not fully done
+        console.log('updateCloseStateFromMapping:', {
+            stage,
+            total,
+            done,
+            fullyDone,
+            closeBtn: this.closeBtn,
+            closeDisabled: this.closeDisabled,
+        });
+    }
+    getActionCompletion(mapping, actionType) {
+        const details = mapping?.revisedDetail || [];
+        const allItems = [];
+        for (const d of details) {
+            if (!d.isParent && d.revopsType !== 'duplicate') {
+                allItems.push(d);
+            }
+            if (d.isParent && Array.isArray(d.duplicateImage)) {
+                allItems.push(...d.duplicateImage);
+            }
+        }
+        const isDone = (item) => {
+            const actions = item.actions || [];
+            const act = actions.find((a) => a.actionType === actionType);
+            return act && (act.action === 'approved' || act.action === 'rejected');
+        };
+        const done = allItems.filter(isDone).length;
+        const total = allItems.length;
+        if (done > 1) {
+        }
+        return { total, done, fullyDone: total > 0 && done === total };
     }
     hasRevopsType(type) {
-        console.log(type);
         return this.revopsTypes.includes(type);
     }
     overallSelectedIds;
@@ -4633,12 +4722,14 @@ class TicketFootfallNewComponent {
             "dateString": this.ticketData?.issueDate,
             "mode": "web"
         };
+        // return
         this.service.getUpdateTicketStatusApi(obj).pipe(takeUntil(this.destroy$)).subscribe({
             next: (res) => {
                 if (res && res.code === 200) {
                     this.isCheckboxEnable = true; // call this on your "Review" button click
                     this.closeBtn = true;
-                    this.closeDisabled = false;
+                    this.closeDisabled = true;
+                    this.getTicketList(this.tangoType);
                     this.dataStoreView(this.ticketData);
                 }
             },
@@ -4662,45 +4753,28 @@ class TicketFootfallNewComponent {
     }
     ticketView(data) {
         this.ticketData = data;
-        this.isCheckboxEnable = false;
-        this.closeBtn = false;
-        this.closeDisabled = true;
+        this.allSelected = false;
         if (!data) {
-            console.warn('No data passed to ticketView');
             this.getOpenTicketList(data);
             this.select = 'ticketMethod';
             return;
         }
-        const reviewedBy = data.ReviewedBy || data.approvedBy;
-        const currentUserEmail = this.usersDetails?.email;
-        const isSameUser = reviewedBy &&
-            currentUserEmail &&
-            reviewedBy.trim().toLowerCase() === currentUserEmail.trim().toLowerCase();
-        if (!isSameUser) {
-            this.isCheckboxEnable = false;
+        const status = (data.status || '').trim();
+        if (status === 'Open') {
+            // when ticket status is Open → use open-ticket API
+            this.getOpenTicketList(data);
         }
         else {
-            if (data.status === 'In-Progress') {
-                this.closeBtn = true;
-                this.closeDisabled = false;
-                this.isCheckboxEnable = true;
-            }
-            else if (data.status === 'Closed') {
-                this.isCheckboxEnable = false;
-            }
-            else {
-                this.closeBtn = false;
-                this.closeDisabled = true;
-                this.isCheckboxEnable = false;
-            }
+            // otherwise → use store view API
+            this.dataStoreView(data);
         }
-        this.getOpenTicketList(data);
-        this.select = 'ticketMethod';
+        this.select = 'ticketMethod'; // keep your existing tab; change if you use a different view key
     }
     dataStoreView(data) {
         this.footfallTicketsData = [];
         this.footfallNoData = false;
         this.footfallLoading = true;
+        this.allSelected = false;
         const ticket = data?.ticketId;
         this.lastSelectedTicket = ticket;
         this.addStoreIfNotExists(ticket);
@@ -4733,7 +4807,8 @@ class TicketFootfallNewComponent {
                         }
                         this.footfallNoData = false;
                         this.footfallLoading = false;
-                        this.updateCloseButtonFromStore();
+                        this.cd.detectChanges();
+                        // this.updateCloseButtonFromStore();
                     }
                 }
                 else {
@@ -4877,24 +4952,33 @@ class TicketFootfallNewComponent {
         console.log(this.selectedByType);
     }
     // Single checkbox change for one image
-    onImageCheckboxChange(type, id) {
-        // ensure array exists
-        const current = this.selectedByType[type] || [];
-        const selected = new Set(current);
-        if (selected.has(id)) {
-            selected.delete(id); // uncheck
+    onImageCheckboxChange(type, id, event) {
+        const checked = event?.target?.checked;
+        // 🔹 Ensure arrays/flags exist for this dynamic type
+        if (!this.selectedByType[type]) {
+            this.selectedByType[type] = [];
+        }
+        if (this.selectAllByType[type] === undefined) {
+            this.selectAllByType[type] = false;
+        }
+        const arr = this.selectedByType[type];
+        if (checked) {
+            // add if not present
+            if (!arr.includes(id)) {
+                arr.push(id);
+            }
         }
         else {
-            selected.add(id); // check
+            // remove if present
+            const idx = arr.indexOf(id);
+            if (idx > -1) {
+                arr.splice(idx, 1);
+            }
         }
-        // assign new array (better for change detection)
-        this.selectedByType[type] = Array.from(selected);
-        // total items for this type (now using deduped list)
+        // total items for this type
         const total = this.getListByType(type).length;
-        // ✅ auto-check "select all" when all items of that type are selected
-        this.selectAllByType[type] =
-            total > 0 && this.selectedByType[type].length === total;
-        console.log(`type=${type}, total=${total}, selected=${this.selectedByType[type].length}, selectAll=${this.selectAllByType[type]}`);
+        // auto-update "Select All" for that type
+        this.selectAllByType[type] = total > 0 && arr.length === total;
         this.updateOverallSelectedIds();
         this.popupvalue = type;
     }
@@ -4922,6 +5006,11 @@ class TicketFootfallNewComponent {
     selectedEmployeeImagesList = [];
     selectedJunkImagesList = [];
     submitValue(status = "approved", category = "duplicate") {
+        let permissionType = this.hasApproverAccess && this.selectedRole === 'approver'
+            ? 'approve'
+            : this.hasReviewerAccess && this.selectedRole === 'reviewer'
+                ? 'review'
+                : null;
         // Step 1: Validate based on current category
         let obj = {
             id: this.popupIds,
@@ -4983,6 +5072,7 @@ class TicketFootfallNewComponent {
             clientId: [this.headerFilters?.client],
             fromDate: this.headerFilters?.date?.startDate,
             toDate: this.headerFilters?.date?.endDate,
+            type: this.hasApproverAccess && this.selectedRole == 'approver' ? "approve" : "review"
         };
         this.service
             .getOpenTicketListApi(obj)
@@ -5013,6 +5103,7 @@ class TicketFootfallNewComponent {
                 else {
                     this.openTicketsList = [];
                     this.selectedStores = [];
+                    this.footfallNoData = true;
                     this.allSelected = false;
                 }
             },
@@ -5028,7 +5119,7 @@ class TicketFootfallNewComponent {
     }
     isLockedByReviewer(original) {
         // 🔹 Approver flow
-        if (this.hasApproverAccess) {
+        if (this.hasApproverAccess && this.selectedRole === 'approver') {
             this.getCurrentRoleMapping();
             // lock if already approved/rejected by APPROVER
             return this.isApproved1(original) || this.isRejected1(original);
@@ -5082,13 +5173,16 @@ class TicketFootfallNewComponent {
     getAction(original, type) {
         return original?.actions?.find((a) => a.actionType === type) || null;
     }
-    updateCloseButtonFromStore() {
-        const mapping = this.getCurrentReviewMapping();
-        console.log('mapping used for close calc:', mapping);
-        // if no mapping found, keep closeBtn false
-        this.closeBtn = !!mapping && this.isTicketFullyReviewed(mapping);
-        console.log('closeBtn =>', this.closeBtn);
-    }
+    // updateCloseButtonFromStore() {
+    //   const mapping = this.getCurrentReviewMapping();
+    //   console.log('mapping used for close calc:', mapping);
+    // if no mapping found, keep closeBtn false
+    //   this.closeBtn = !!mapping && this.isTicketFullyReviewed(mapping);
+    // if(this.isTicketFullyReviewed(mapping)){
+    //   this.closeDisabled =false;
+    // }
+    //   console.log(this.closeBtn)
+    // }
     getCurrentReviewMapping() {
         if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
             return null;
@@ -5110,7 +5204,7 @@ class TicketFootfallNewComponent {
         if (!mapping?.revisedDetail)
             return false;
         const details = mapping.revisedDetail;
-        const nonDupTypes = ["employee", "junk", "houseKeeping"];
+        const nonDupTypes = [];
         const nonDupItems = details.filter(d => nonDupTypes.includes(d.revopsType));
         const nonDupReviewedCount = nonDupItems.filter(d => {
             const review = this.getAction(d, "review");
@@ -5142,6 +5236,11 @@ class TicketFootfallNewComponent {
         return namePart.substring(0, 2).toUpperCase();
     }
     confirmCloseTicket() {
+        let permissionType = this.hasApproverAccess && this.selectedRole === 'approver'
+            ? 'approve'
+            : this.hasReviewerAccess && this.selectedRole === 'reviewer'
+                ? 'review'
+                : null;
         let obj = {
             ticketName: "footfall-directory",
             storeId: this.footfallTicketsData[0]?._source?.storeId,
@@ -5173,9 +5272,9 @@ class TicketFootfallNewComponent {
                     err?.message ||
                     "Error closing ticket";
                 this.ts.getErrorToast(errorMsg);
-                this.isCheckboxEnable = true;
-                this.closeBtn = true;
-                this.closeDisabled = false;
+                // this.isCheckboxEnable = true;
+                // this.closeBtn = true;
+                // this.closeDisabled = false;
             }
         });
     }
@@ -5412,10 +5511,10 @@ class TicketFootfallNewComponent {
         // this.exportTicket();
     }
     getMultipleTicketClose() {
-        if (!this.selectedStores || !this.selectedStores.length) {
-            this.ts.getErrorToast('Please select at least one ticket');
-            return;
-        }
+        // if (!this.selectedStores || !this.selectedStores.length) {
+        //   this.ts.getErrorToast('Please select at least one ticket');
+        //   return;
+        // }
         const ticketList = this.selectedStores.map((store) => ({
             storeId: store.storeId,
             dateString: store.dateString || store.issueDate,
@@ -5511,11 +5610,11 @@ class TicketFootfallNewComponent {
         this.selectedComment = null;
     }
     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 }, { token: AuditService }], 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" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "internalticket", first: true, predicate: ["internalticket"], descendants: true }, { propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }, { propertyName: "imagePreviewPopup", first: true, predicate: ["imagePreviewPopup"], descendants: true }, { propertyName: "ReassignTicketPopup", first: true, predicate: ["ReassignTicketPopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n    <div class=\"row ms-3 my-3\">\r\n        <ul *ngIf=\"usersDetails?.userType === 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\">\r\n                    Tickets\r\n                </a>\r\n            </li>\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <!-- Approver tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n                <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n                    Approver\r\n                </a>\r\n            </li>\r\n\r\n            <!-- Reviewer tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n                <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n                    Reviewer\r\n                </a>\r\n            </li>\r\n        </ul>\r\n\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"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\" *ngIf=\"tangoType==='store'\"><span *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below 85% </span><span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\r\n                    {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search by store\"\r\n                            autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\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                        <button\r\n                            class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n                            *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n                                <button *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n                                     (click)=\"getMultipleTicketClose()\">\r\n                                     Close Ticket\r\n                                 </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\" *ngIf=\"!loading && !noData\">\r\n               <table class=\"table custom-table bottom-border text-nowrap\">\r\n  <thead>\r\n    <tr>\r\n      <!-- NEW: checkbox column for approver only -->\r\n      <th *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"areAllSelectableRowsSelected()\"\r\n          (change)=\"toggleSelectAllRows($event)\"\r\n        />\r\n      </th>\r\n\r\n      <th\r\n        *ngFor=\"let col of tableColumns\"\r\n        [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n        (click)=\"col.sortable && col.type !== 'store' && onSort(col.key)\"\r\n      >\r\n        {{ col.label }}\r\n\r\n        <!-- Sorting Icon -->\r\n        <svg\r\n          *ngIf=\"col.sortable && col.type !== 'store'\"\r\n          [ngClass]=\"sortedColumn === col.key && sortDirection === 1 ? 'rotate' : ''\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 16 16\"\r\n          fill=\"none\"\r\n        >\r\n          <path\r\n            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\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n\r\n  <tbody>\r\n    <tr *ngFor=\"let row of footfallListData\">\r\n      <!-- NEW: per-row checkbox (approver only) -->\r\n      <td *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n        <input \r\n          type=\"checkbox\"\r\n          [disabled]=\"!isRowSelectable(row)\"     \r\n          [checked]=\"isRowSelected(row)\"\r\n          [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n          (change)=\"toggleRowSelection(row, $event)\"\r\n        />\r\n      </td>\r\n\r\n      <td *ngFor=\"let col of tableColumns\">\r\n        <!-- Store + ticket clickable -->\r\n        <ng-container *ngIf=\"col.type === 'store'\">\r\n          <div\r\n            class=\"text-primary ellipsis-underline\"\r\n            (click)=\"ticketView(row)\"\r\n          >\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\r\n          class=\"pt-5\"\r\n          *ngIf=\"col.type === 'date' || col.type === 'ticketRaised'\"\r\n        >\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\r\n            class=\"badge mx-2\"\r\n            [ngClass]=\"getStatusBadgeClass(row[col.key])\"\r\n          >\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      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n                <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                    [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n                    (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"loading\" class=\"card mt-5\">\r\n            <div class=\"card-body h-500px\">\r\n                <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"noData\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12 mb-3\">\r\n                    <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_d_887_4505)\">\r\n                                <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feOffset dy=\"1\" />\r\n                                    <feGaussianBlur stdDeviation=\"1\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_887_4505\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg></span><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div class=\"col-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                        </div>\r\n                        <div class=\"text-end text-nowrp ms-3 mt-2\">\r\n                            <button *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                        (click)=\"getMultipleTicketClose()\">\r\n                                        Close Ticket\r\n                                    </button>\r\n                        </div>\r\n                     \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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" type=\"checkbox\" class=\"me-2\" [checked]=\"allSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select <span *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all {{ storeCount }}</span> stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span 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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n                                        (change)=\"toggleStoreSelection(store)\" />\r\n\r\n                                    <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" 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                        \r\n                        <span *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || getHeaderStatus() === 'Open')\">\r\n     \r\n     <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n         Start Review\r\n        </button>\r\n    </span>\r\n    <section *ngIf=\"ticketData?.ReviewedBy === usersDetails?.email \r\n    || ticketData?.approvedBy === usersDetails?.email\">\r\n     \r\n                             <!-- Close Ticket -->\r\n                             <span *ngIf=\"ticketData?.status === 'In-Progress'\">\r\n     \r\n                                 <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                     (click)=\"stopReview()\">\r\n                                     Close Ticket\r\n                                 </button>\r\n                             </span>\r\n                         </section>\r\n\r\n\r\n                        <span\r\n                            *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||usersDetails?.userType ==='tango'&&ticketData?.type === 'internal'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n                            <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n                                <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <path\r\n                                            d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n                                    <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n                                        Re-Assign Ticket\r\n                                    </div>\r\n                                    <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n                                        Export\r\n                                    </div> -->\r\n                                </div>\r\n                            </span>\r\n                        </span>\r\n                    </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\">{{footfallTicketsData[0]?._source?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{footfallTicketsData[0]?._source?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\"> <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\">06 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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91902)\">\r\n                                            <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                                            <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91902\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span (click)=\"openArrow()\">\r\n                                    <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                        fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n                        \r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                        \r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n                        \r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span class=\"footfall-label ms-3\">Actual\r\n                                                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 *ngIf=\"mapping?.status === 'Closed' \r\n                                                                   && ['tagging','review','approve','tangoreview'].includes(mapping?.type)\">\r\n                        \r\n                                            <div class=\"timeline\"></div>\r\n                                            <div class=\"user-info ms-4\">\r\n                        \r\n                                                <div class=\"avatar avatar-text light-primary p-3\">\r\n                                                    {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n                                                    source?.createdByEmail) }}\r\n                                                </div>\r\n                        \r\n                                                <div>\r\n                                                    <div class=\"user-name\">\r\n                                                        <span *ngIf=\"mapping?.type === 'tagging'\">\r\n                                                            Ticket created by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'review'\">\r\n                                                            Reviewed by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'approve'\">\r\n                                                            Approved by\r\n                                                        </span>\r\n                        \r\n                                                        <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n                                                            Tango\r\n                                                        </span>\r\n                                                    </div>\r\n                        \r\n                                                    <div class=\"user-email\">\r\n                                                        {{ mapping?.createdByEmail || source?.createdByEmail }} {{(mapping?.createdAt ||\r\n                                                        source?.createdAt)\r\n                                                        | date:'HH:mm:ss \u2013dd MMM yyyy' }}\r\n                                                    </div>\r\n                                                </div>\r\n                        \r\n                                            </div>\r\n                        \r\n                        \r\n                                            <div class=\"timeline\"></div>\r\n                        \r\n                                            <!-- Show revision card only when NOT closed & type is tagging -->\r\n                                            <div class=\"revision-card\"\r\n                                                [ngClass]=\"{'revision-card-approve-closed':mapping?.status === 'Closed' && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n                                                <div class=\"values-row\">\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ mapping?.revicedFootfall === null ? '--' :\r\n                                                            mapping?.revicedFootfall }}\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold\">Revised Footfall</div>\r\n                                                    </div>\r\n                        \r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value accuracy down\">\r\n                                                            {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n                                                            <span class=\"ms-1\">\r\n                                                                <!-- arrow svg -->\r\n                                                            </span>\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n                                                    </div>\r\n                        \r\n                                                    <div class=\"timeline-new my-2\"></div>\r\n                        \r\n                                                    <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ item?.value ?? '--' }}\r\n                                                        </div>\r\n                                                        <div class=\"label\">\r\n                                                            {{ item?.name }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                        \r\n                        \r\n                                        </ng-container>\r\n                        \r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\" [class.rotate-180]=\"showRevisedDetails\"><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                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                                        fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                        \r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n<ng-container *ngFor=\"let type of revopsTypes\">\r\n<section *ngIf=\"type ==='duplicate'\">\r\n\r\n    <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n        <!-- Header Section -->\r\n        <div class=\"card-header min-h-25px pt-3\">\r\n            <h3 class=\"text-lg font-semibold mb-4\">\r\n                <span class=\"me-2\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                        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\r\n                <!-- Body Section -->\r\n                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                    <!-- Body Section -->\r\n                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                <div class=\"my-4\">\r\n                                    <!-- Original Image -->\r\n                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                    </div>\r\n                                    <div class=\"row px-5\">\r\n                                        <div class=\"col-md-4 relative\">\r\n                                            <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                    class=\"w-100 rounded border\" />\r\n                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                    original.tempId\r\n                                                    }}</div>\r\n                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n\r\n                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                    <div class=\"row px-5\">\r\n                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                            <input type=\"checkbox\" [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\" [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                <!-- Checkbox -->\r\n                                                <div *ngIf=\"isCheckboxEnable\">\r\n                                                    <input type=\"checkbox\" *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                        style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                        [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                        (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                        class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                    <span class=\"position-absolute absolute\" \r\n                                                        *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                        (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n    <svg   xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n        viewBox=\"0 0 19 19\" fill=\"none\">\r\n        <g filter=\"url(#filter0_d_2023_13718)\">\r\n            <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\"\r\n                rx=\"2\" fill=\"white\" />\r\n            <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                stroke-width=\"0.555556\" />\r\n            <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                stroke-width=\"0.927778\" 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\" 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\" 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\" 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\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(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                    class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                <!-- Duplicate Info -->\r\n                                                <div class=\"row my-2\">\r\n                                                    <div class=\"col-9\">\r\n                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                            Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                            <span\r\n                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n\r\n                                                        </div>\r\n\r\n                                                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                            getFormattedEntryTime(duplicate.entryTime)\r\n                                                            }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-3\">\r\n                                                        <span\r\n                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                                                <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                                    <path\r\n                                                                        d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                        stroke=\"#039855\" stroke-linecap=\"round\"\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\" 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\" 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\" 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                        <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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                width=\"16\" height=\"16\" 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        \r\n          <!-- Loop each block: tagging / review / approve -->\r\n          <ng-container *ngFor=\"let block of activityData\">\r\n        \r\n            <!-- Loop inside comments -->\r\n            <div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n        \r\n              <!-- avatar -->\r\n               <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                   {{ getInitialsFromEmail(c.createdByEmail) }}\r\n               </div>\r\n              <div class=\"w-100\">\r\n        \r\n                <!-- email -->\r\n                <div class=\"fw-semibold\">\r\n                  {{ c.createdByEmail }}\r\n                </div>\r\n                 <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n            {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n          </div>\r\n       \r\n                <!-- message text -->\r\n                <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                  {{ c.message }}\r\n                </p>\r\n        \r\n                <!-- Review / Approve only -->\r\n                <ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                  <!-- Tagged images -->\r\n                  <div class=\"d-flex gap-2 flex-wrap\">\r\n        \r\n                    <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                      \r\n                      <!-- Show only first 4 -->\r\n                      <ng-container *ngIf=\"i < 3\">\r\n                        <div class=\"tango-card\">\r\n                          <div class=\"tango-image\"\r\n                               [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\"></div>\r\n        \r\n                          <div class=\"tango-meta small\">\r\n                            <div>\r\n                              Tango ID: {{ img.tempId }}\r\n        \r\n                              <!-- status dots -->\r\n                              <span *ngIf=\"c.status === 'approved'\"><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                            <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n        \r\n                              <span *ngIf=\"c.status === 'rejected'\"\r\n                                    ><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                            <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                <path\r\n                                                                                    d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    fill=\"#FEE4E2\" />\r\n                                                                                <path\r\n                                                                                    d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                    stroke-linejoin=\"round\" />\r\n                                                                            </g>\r\n                                                                            <defs>\r\n                                                                                <clipPath id=\"clip0_1428_59484\">\r\n                                                                                    <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                        transform=\"translate(0.599609 0.5)\" />\r\n                                                                                </clipPath>\r\n                                                                            </defs>\r\n                                                                        </svg></span>\r\n                            </div>\r\n        \r\n                            <div class=\"text-muted\">\r\n                              Entry time: {{ img.entryTime }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </ng-container>\r\n        \r\n                    </div>\r\n        \r\n                    <!-- +N more -->\r\n        <div\r\n          class=\"tango-card more-card text-center\"\r\n          *ngIf=\"c.taggedImages.length > 3\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n          (click)=\"openImagesPopup(c)\"\r\n        >\r\n          <div class=\"more-overlay\"></div>\r\n        \r\n          <!-- vertical container -->\r\n          <div class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n            <div class=\"more-text fw-semibold\">+{{ c.taggedImages.length - 3 }}</div>\r\n            <div class=\"text-primary text-dark text-decoration-underline small\">\r\n              View all\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        \r\n        \r\n                  </div>\r\n        \r\n                </ng-container>\r\n        \r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        \r\n        \r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                    \r\n                </ng-container>\r\n                <!-- Status Icons -->\r\n\r\n\r\n            </div>\r\n</section>\r\n<section *ngIf=\"type !=='duplicate'\">\r\n    <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n       <div class=\"card-header min-h-25px pt-3\">\r\n           <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                       width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                       <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                           d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                           fill=\"#475467\" />\r\n                   </svg></span> {{type}}\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[type]\"\r\n    (change)=\"onSelectAll(type, $event)\">\r\n           <label>Select All</label>\r\n       </div>\r\n       <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n           <!-- Body Section -->\r\n           <div *ngIf=\"mapping?.type ===viewMode\" 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;let i=index\">\r\n                       <div *ngIf=\"original?.revopsType ===type\"\r\n                           class=\"col-md-3 mb-3 position-relative\">\r\n                           <div class=\"pb-3 h-100 rounded-3 position-relative\" [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[type] || []).includes(original?.tempId)\"\r\n                                       (change)=\"onImageCheckboxChange(type, original.tempId)\" />\r\n                                   <span class=\"position-absolute absolute\" \r\n                                       *ngIf=\"isLockedByReviewer(original)\"\r\n                                       (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                       <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n                                           viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                           <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                               <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\"\r\n                                                   fill=\"white\" />\r\n                                               <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\"\r\n                                                   rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                               <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                                                   stroke-width=\"0.927778\" 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\" 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\" 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=\"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\" in2=\"BackgroundImageFix\"\r\n                                                       result=\"effect1_dropShadow_2023_13718\" />\r\n                                                   <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                       in2=\"effect1_dropShadow_2023_13718\" result=\"shape\" />\r\n                                               </filter>\r\n                                           </defs>\r\n                                       </svg>\r\n                                   </span>\r\n                               </div>\r\n\r\n\r\n                               <img [src]=\"imageUrl + original?.filePath\" alt=\"\" (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                   class=\"w-100 rounded border cursor-pointer\" />\r\n                               <div class=\"row my-2\">\r\n                                   <div class=\"col-9\">\r\n                                       <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                           original.tempId\r\n                                           }}\r\n                                           <span *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                               class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                   <rect y=\"0.5\" width=\"10\" 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                   <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                       <path\r\n                                                           d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           fill=\"#FEE4E2\" />\r\n                                                       <path\r\n                                                           d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                           stroke-linejoin=\"round\" />\r\n                                                   </g>\r\n                                                   <defs>\r\n                                                       <clipPath id=\"clip0_1428_59484\">\r\n                                                           <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                               transform=\"translate(0.599609 0.5)\" />\r\n                                                       </clipPath>\r\n                                                   </defs>\r\n                                               </svg></span>\r\n                                       </div>\r\n                                       <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                           getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                   </div>\r\n                                   <div class=\"col-3 ms-3\">\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                               <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                   <path\r\n                                                       d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                       stroke=\"#039855\" stroke-linecap=\"round\"\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\" fill=\"white\"\r\n                                                           transform=\"translate(6 6)\" />\r\n                                                   </clipPath>\r\n                                               </defs>\r\n                                           </svg>\r\n                                       </span>\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                               xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                                               <g clip-path=\"url(#clip0_486_94090)\">\r\n                                                   <path\r\n                                                       d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                       stroke=\"#D92D20\" stroke-linecap=\"round\"\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\" 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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                               width=\"16\" height=\"16\" 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\r\n<!-- loop each block: tagging / review / approve -->\r\n<ng-container *ngFor=\"let block of activityData1\">\r\n\r\n<!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n<ng-container *ngIf=\"block.type === 'tagging'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div>\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n   <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n     <div class=\"tango-image\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n     </div>\r\n\r\n     <div class=\"tango-meta small\">\r\n       <div>Tango ID: {{ c.tempId }}</div>\r\n       <div class=\"text-muted\">Entry time: {{ c.entryTime }}</div>\r\n     </div>\r\n   </div>\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n<!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n<ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n \r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex gap-2 flex-wrap\" *ngIf=\"c.taggedImages?.length\">\r\n\r\n   <!-- first 3 images -->\r\n   <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n     <ng-container *ngIf=\"i < 3\">\r\n       <div class=\"tango-card\">\r\n         <div class=\"tango-image\"\r\n              [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n         </div>\r\n\r\n         <div class=\"tango-meta small\">\r\n           <div>\r\n             Tango ID: {{ img.tempId }}\r\n             <span *ngIf=\"c.status === 'approved'\"\r\n                   class=\"status-dot status-approve\"></span>\r\n             <span *ngIf=\"c.status === 'rejected'\"\r\n                   class=\"status-dot status-reject\"></span>\r\n           </div>\r\n           <div class=\"text-muted\">\r\n             Entry time: {{ img.entryTime }}\r\n           </div>\r\n         </div>\r\n       </div>\r\n     </ng-container>\r\n   </div>\r\n\r\n   <!-- +N View all card -->\r\n   <div\r\n     class=\"tango-card more-card text-center\"\r\n     *ngIf=\"c.taggedImages.length > 3\"\r\n     [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n     (click)=\"openImagesPopup(c)\"\r\n   >\r\n     <div class=\"more-overlay\"></div>\r\n\r\n     <div class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n       <div class=\"more-text fw-semibold\">\r\n         +{{ c.taggedImages.length - 3 }}\r\n       </div>\r\n       <div class=\"text-primary text-decoration-underline small\">\r\n         View all\r\n       </div>\r\n     </div>\r\n   </div>\r\n\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n</ng-container>\r\n</div>\r\n\r\n           </div>\r\n       </div>\r\n   </div>\r\n</section>\r\n</ng-container>\r\n         \r\n\r\n\r\n        </div>\r\n    </ng-container>\r\n                                            </div>\r\n                        \r\n                        \r\n                                            <div *ngIf=\"showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                        \r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                                        fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                        \r\n                        \r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['tangoreview'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\" [class.rotate-180]=\"showRevisedDetails\"><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                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n                        \r\n                                            </div>\r\n                        \r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n<ng-container *ngFor=\"let type of revopsTypes\">\r\n<section *ngIf=\"type ==='duplicate'\">\r\n\r\n    <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n        <!-- Header Section -->\r\n        <div class=\"card-header min-h-25px pt-3\">\r\n            <h3 class=\"text-lg font-semibold mb-4\">\r\n                <span class=\"me-2\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                        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\r\n                <!-- Body Section -->\r\n                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                    <!-- Body Section -->\r\n                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                <div class=\"my-4\">\r\n                                    <!-- Original Image -->\r\n                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                    </div>\r\n                                    <div class=\"row px-5\">\r\n                                        <div class=\"col-md-4 relative\">\r\n                                            <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                    class=\"w-100 rounded border\" />\r\n                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                    original.tempId\r\n                                                    }}</div>\r\n                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n\r\n                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                    <div class=\"row px-5\">\r\n                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                            <input type=\"checkbox\" [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\" [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                <!-- Checkbox -->\r\n                                                <div *ngIf=\"isCheckboxEnable\">\r\n                                                    <input type=\"checkbox\" *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                        style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                        [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                        (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                        class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                    <span class=\"position-absolute absolute\" \r\n                                                        *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                        (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n    <svg   xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n        viewBox=\"0 0 19 19\" fill=\"none\">\r\n        <g filter=\"url(#filter0_d_2023_13718)\">\r\n            <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\"\r\n                rx=\"2\" fill=\"white\" />\r\n            <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                stroke-width=\"0.555556\" />\r\n            <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                stroke-width=\"0.927778\" 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\" 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\" 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\" 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\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(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                    class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                <!-- Duplicate Info -->\r\n                                                <div class=\"row my-2\">\r\n                                                    <div class=\"col-9\">\r\n                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                            Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                            <span\r\n                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n\r\n                                                        </div>\r\n\r\n                                                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                            getFormattedEntryTime(duplicate.entryTime)\r\n                                                            }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-3\">\r\n                                                        <span\r\n                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                                                <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                                    <path\r\n                                                                        d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                        stroke=\"#039855\" stroke-linecap=\"round\"\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\" 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\" 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\" 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                        <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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                width=\"16\" height=\"16\" 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        \r\n          <!-- Loop each block: tagging / review / approve -->\r\n          <ng-container *ngFor=\"let block of activityData\">\r\n        \r\n            <!-- Loop inside comments -->\r\n            <div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n        \r\n              <!-- avatar -->\r\n               <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                   {{ getInitialsFromEmail(c.createdByEmail) }}\r\n               </div>\r\n              <div class=\"w-100\">\r\n        \r\n                <!-- email -->\r\n                <div class=\"fw-semibold\">\r\n                  {{ c.createdByEmail }}\r\n                </div>\r\n                 <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n            {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n          </div>\r\n       \r\n                <!-- message text -->\r\n                <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                  {{ c.message }}\r\n                </p>\r\n        \r\n                <!-- Review / Approve only -->\r\n                <ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                  <!-- Tagged images -->\r\n                  <div class=\"d-flex gap-2 flex-wrap\">\r\n        \r\n                    <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                      \r\n                      <!-- Show only first 4 -->\r\n                      <ng-container *ngIf=\"i < 3\">\r\n                        <div class=\"tango-card\">\r\n                          <div class=\"tango-image\"\r\n                               [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\"></div>\r\n        \r\n                          <div class=\"tango-meta small\">\r\n                            <div>\r\n                              Tango ID: {{ img.tempId }}\r\n        \r\n                              <!-- status dots -->\r\n                              <span *ngIf=\"c.status === 'approved'\"><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                            <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n        \r\n                              <span *ngIf=\"c.status === 'rejected'\"\r\n                                    ><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                            <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                <path\r\n                                                                                    d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    fill=\"#FEE4E2\" />\r\n                                                                                <path\r\n                                                                                    d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                    stroke-linejoin=\"round\" />\r\n                                                                            </g>\r\n                                                                            <defs>\r\n                                                                                <clipPath id=\"clip0_1428_59484\">\r\n                                                                                    <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                        transform=\"translate(0.599609 0.5)\" />\r\n                                                                                </clipPath>\r\n                                                                            </defs>\r\n                                                                        </svg></span>\r\n                            </div>\r\n        \r\n                            <div class=\"text-muted\">\r\n                              Entry time: {{ img.entryTime }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </ng-container>\r\n        \r\n                    </div>\r\n        \r\n                    <!-- +N more -->\r\n        <div\r\n          class=\"tango-card more-card text-center\"\r\n          *ngIf=\"c.taggedImages.length > 3\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n          (click)=\"openImagesPopup(c)\"\r\n        >\r\n          <div class=\"more-overlay\"></div>\r\n        \r\n          <!-- vertical container -->\r\n          <div class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n            <div class=\"more-text fw-semibold\">+{{ c.taggedImages.length - 3 }}</div>\r\n            <div class=\"text-primary text-dark text-decoration-underline small\">\r\n              View all\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        \r\n        \r\n                  </div>\r\n        \r\n                </ng-container>\r\n        \r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        \r\n        \r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                    \r\n                </ng-container>\r\n                <!-- Status Icons -->\r\n\r\n\r\n            </div>\r\n</section>\r\n<section *ngIf=\"type !=='duplicate'\">\r\n    <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n       <div class=\"card-header min-h-25px pt-3\">\r\n           <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                       width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                       <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                           d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                           fill=\"#475467\" />\r\n                   </svg></span> {{type}}\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[type]\"\r\n    (change)=\"onSelectAll(type, $event)\">\r\n           <label>Select All</label>\r\n       </div>\r\n       <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n           <!-- Body Section -->\r\n           <div *ngIf=\"mapping?.type ===viewMode\" 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;let i=index\">\r\n                       <div *ngIf=\"original?.revopsType ===type\"\r\n                           class=\"col-md-3 mb-3 position-relative\">\r\n                           <div class=\"pb-3 h-100 rounded-3 position-relative\" [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[type] || []).includes(original?.tempId)\"\r\n                                       (change)=\"onImageCheckboxChange(type, original.tempId)\" />\r\n                                   <span class=\"position-absolute absolute\" \r\n                                       *ngIf=\"isLockedByReviewer(original)\"\r\n                                       (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                       <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n                                           viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                           <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                               <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\"\r\n                                                   fill=\"white\" />\r\n                                               <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\"\r\n                                                   rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                               <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                                                   stroke-width=\"0.927778\" 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\" 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\" 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=\"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\" in2=\"BackgroundImageFix\"\r\n                                                       result=\"effect1_dropShadow_2023_13718\" />\r\n                                                   <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                       in2=\"effect1_dropShadow_2023_13718\" result=\"shape\" />\r\n                                               </filter>\r\n                                           </defs>\r\n                                       </svg>\r\n                                   </span>\r\n                               </div>\r\n\r\n\r\n                               <img [src]=\"imageUrl + original?.filePath\" alt=\"\" (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                   class=\"w-100 rounded border cursor-pointer\" />\r\n                               <div class=\"row my-2\">\r\n                                   <div class=\"col-9\">\r\n                                       <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                           original.tempId\r\n                                           }}\r\n                                           <span *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                               class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                   <rect y=\"0.5\" width=\"10\" 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                   <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                       <path\r\n                                                           d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           fill=\"#FEE4E2\" />\r\n                                                       <path\r\n                                                           d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                           stroke-linejoin=\"round\" />\r\n                                                   </g>\r\n                                                   <defs>\r\n                                                       <clipPath id=\"clip0_1428_59484\">\r\n                                                           <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                               transform=\"translate(0.599609 0.5)\" />\r\n                                                       </clipPath>\r\n                                                   </defs>\r\n                                               </svg></span>\r\n                                       </div>\r\n                                       <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                           getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                   </div>\r\n                                   <div class=\"col-3 ms-3\">\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                               <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                   <path\r\n                                                       d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                       stroke=\"#039855\" stroke-linecap=\"round\"\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\" fill=\"white\"\r\n                                                           transform=\"translate(6 6)\" />\r\n                                                   </clipPath>\r\n                                               </defs>\r\n                                           </svg>\r\n                                       </span>\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                               xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                                               <g clip-path=\"url(#clip0_486_94090)\">\r\n                                                   <path\r\n                                                       d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                       stroke=\"#D92D20\" stroke-linecap=\"round\"\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\" 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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                               width=\"16\" height=\"16\" 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\r\n<!-- loop each block: tagging / review / approve -->\r\n<ng-container *ngFor=\"let block of activityData1\">\r\n\r\n<!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n<ng-container *ngIf=\"block.type === 'tagging'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div>\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n   <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n     <div class=\"tango-image\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n     </div>\r\n\r\n     <div class=\"tango-meta small\">\r\n       <div>Tango ID: {{ c.tempId }}</div>\r\n       <div class=\"text-muted\">Entry time: {{ c.entryTime }}</div>\r\n     </div>\r\n   </div>\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n<!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n<ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n \r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex gap-2 flex-wrap\" *ngIf=\"c.taggedImages?.length\">\r\n\r\n   <!-- first 3 images -->\r\n   <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n     <ng-container *ngIf=\"i < 3\">\r\n       <div class=\"tango-card\">\r\n         <div class=\"tango-image\"\r\n              [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n         </div>\r\n\r\n         <div class=\"tango-meta small\">\r\n           <div>\r\n             Tango ID: {{ img.tempId }}\r\n             <span *ngIf=\"c.status === 'approved'\"\r\n                   class=\"status-dot status-approve\"></span>\r\n             <span *ngIf=\"c.status === 'rejected'\"\r\n                   class=\"status-dot status-reject\"></span>\r\n           </div>\r\n           <div class=\"text-muted\">\r\n             Entry time: {{ img.entryTime }}\r\n           </div>\r\n         </div>\r\n       </div>\r\n     </ng-container>\r\n   </div>\r\n\r\n   <!-- +N View all card -->\r\n   <div\r\n     class=\"tango-card more-card text-center\"\r\n     *ngIf=\"c.taggedImages.length > 3\"\r\n     [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n     (click)=\"openImagesPopup(c)\"\r\n   >\r\n     <div class=\"more-overlay\"></div>\r\n\r\n     <div class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n       <div class=\"more-text fw-semibold\">\r\n         +{{ c.taggedImages.length - 3 }}\r\n       </div>\r\n       <div class=\"text-primary text-decoration-underline small\">\r\n         View all\r\n       </div>\r\n     </div>\r\n   </div>\r\n\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n</ng-container>\r\n</div>\r\n\r\n           </div>\r\n       </div>\r\n   </div>\r\n</section>\r\n</ng-container>\r\n         \r\n\r\n\r\n        </div>\r\n    </ng-container>\r\n                                            </div>\r\n                                            <div *ngIf=\"showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                        \r\n                                                <span class=\"chevron ms-3 cursor-pointer\">\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 d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                        \r\n                        \r\n                                    </ng-container>\r\n                        \r\n                        \r\n                        \r\n                                    <!-- <div class=\"timeline\"></div> -->\r\n                        \r\n                                </div>\r\n                            </ng-container>\r\n                        </section>\r\n                        </div>\r\n\r\n                        </div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-6 position-relative\">\r\n        <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n            <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\" [(ngModel)]=\"allSelected\"\r\n                (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n                All</span>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4\">\r\n                <select class=\"form-select\" aria-placeholder=\"show all\">\r\n                    <option value=\"all\">Show all</option>\r\n                    <option value=\"accept\">Accept</option>\r\n                    <option value=\"reject\">Reject</option>\r\n                    <option value=\"pending\">Pending</option>\r\n                </select>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\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\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"!approverClosed\" class=\"bg-white\">\r\n    <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n<ng-container *ngFor=\"let type of revopsTypes\">\r\n<section *ngIf=\"type ==='duplicate'\">\r\n\r\n    <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n        <!-- Header Section -->\r\n        <div class=\"card-header min-h-25px pt-3\">\r\n            <h3 class=\"text-lg font-semibold mb-4\">\r\n                <span class=\"me-2\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                        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\r\n                <!-- Body Section -->\r\n                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                    <!-- Body Section -->\r\n                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                <div class=\"my-4\">\r\n                                    <!-- Original Image -->\r\n                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                    </div>\r\n                                    <div class=\"row px-5\">\r\n                                        <div class=\"col-md-4 relative\">\r\n                                            <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                    class=\"w-100 rounded border\" />\r\n                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                    original.tempId\r\n                                                    }}</div>\r\n                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n\r\n                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                    <div class=\"row px-5\">\r\n                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                            <input type=\"checkbox\" [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\" [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                <!-- Checkbox -->\r\n                                                <div *ngIf=\"isCheckboxEnable\">\r\n                                                    <input type=\"checkbox\" *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                        style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                        [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                        (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                        class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                    <span class=\"position-absolute absolute\" \r\n                                                        *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                        (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n    <svg   xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n        viewBox=\"0 0 19 19\" fill=\"none\">\r\n        <g filter=\"url(#filter0_d_2023_13718)\">\r\n            <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\"\r\n                rx=\"2\" fill=\"white\" />\r\n            <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                stroke-width=\"0.555556\" />\r\n            <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                stroke-width=\"0.927778\" 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\" 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\" 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\" 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\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(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                    class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                <!-- Duplicate Info -->\r\n                                                <div class=\"row my-2\">\r\n                                                    <div class=\"col-9\">\r\n                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                            Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                            <span\r\n                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n\r\n                                                        </div>\r\n\r\n                                                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                            getFormattedEntryTime(duplicate.entryTime)\r\n                                                            }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-3\">\r\n                                                        <span\r\n                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                                                <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                                    <path\r\n                                                                        d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                        stroke=\"#039855\" stroke-linecap=\"round\"\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\" 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\" 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\" 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                        <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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                width=\"16\" height=\"16\" 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        \r\n          <!-- Loop each block: tagging / review / approve -->\r\n          <ng-container *ngFor=\"let block of activityData\">\r\n        \r\n            <!-- Loop inside comments -->\r\n            <div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n        \r\n              <!-- avatar -->\r\n               <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                   {{ getInitialsFromEmail(c.createdByEmail) }}\r\n               </div>\r\n              <div class=\"w-100\">\r\n        \r\n                <!-- email -->\r\n                <div class=\"fw-semibold\">\r\n                  {{ c.createdByEmail }}\r\n                </div>\r\n                 <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n            {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n          </div>\r\n       \r\n                <!-- message text -->\r\n                <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                  {{ c.message }}\r\n                </p>\r\n        \r\n                <!-- Review / Approve only -->\r\n                <ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                  <!-- Tagged images -->\r\n                  <div class=\"d-flex gap-2 flex-wrap\">\r\n        \r\n                    <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                      \r\n                      <!-- Show only first 4 -->\r\n                      <ng-container *ngIf=\"i < 3\">\r\n                        <div class=\"tango-card\">\r\n                          <div class=\"tango-image\"\r\n                               [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\"></div>\r\n        \r\n                          <div class=\"tango-meta small\">\r\n                            <div>\r\n                              Tango ID: {{ img.tempId }}\r\n        \r\n                              <!-- status dots -->\r\n                              <span *ngIf=\"c.status === 'approved'\"><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                            <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n        \r\n                              <span *ngIf=\"c.status === 'rejected'\"\r\n                                    ><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                            <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                <path\r\n                                                                                    d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    fill=\"#FEE4E2\" />\r\n                                                                                <path\r\n                                                                                    d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                    stroke-linejoin=\"round\" />\r\n                                                                            </g>\r\n                                                                            <defs>\r\n                                                                                <clipPath id=\"clip0_1428_59484\">\r\n                                                                                    <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                        transform=\"translate(0.599609 0.5)\" />\r\n                                                                                </clipPath>\r\n                                                                            </defs>\r\n                                                                        </svg></span>\r\n                            </div>\r\n        \r\n                            <div class=\"text-muted\">\r\n                              Entry time: {{ img.entryTime }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </ng-container>\r\n        \r\n                    </div>\r\n        \r\n                    <!-- +N more -->\r\n        <div\r\n          class=\"tango-card more-card text-center\"\r\n          *ngIf=\"c.taggedImages.length > 3\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n          (click)=\"openImagesPopup(c)\"\r\n        >\r\n          <div class=\"more-overlay\"></div>\r\n        \r\n          <!-- vertical container -->\r\n          <div class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n            <div class=\"more-text fw-semibold\">+{{ c.taggedImages.length - 3 }}</div>\r\n            <div class=\"text-primary text-dark text-decoration-underline small\">\r\n              View all\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        \r\n        \r\n                  </div>\r\n        \r\n                </ng-container>\r\n        \r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        \r\n        \r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                    \r\n                </ng-container>\r\n                <!-- Status Icons -->\r\n\r\n\r\n            </div>\r\n</section>\r\n<section *ngIf=\"type !=='duplicate'\">\r\n    <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n       <div class=\"card-header min-h-25px pt-3\">\r\n           <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                       width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                       <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                           d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                           fill=\"#475467\" />\r\n                   </svg></span> {{type}}\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[type]\"\r\n    (change)=\"onSelectAll(type, $event)\">\r\n           <label>Select All</label>\r\n       </div>\r\n       <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n           <!-- Body Section -->\r\n           <div *ngIf=\"mapping?.type ===viewMode\" 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;let i=index\">\r\n                       <div *ngIf=\"original?.revopsType ===type\"\r\n                           class=\"col-md-3 mb-3 position-relative\">\r\n                           <div class=\"pb-3 h-100 rounded-3 position-relative\" [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[type] || []).includes(original?.tempId)\"\r\n                                       (change)=\"onImageCheckboxChange(type, original.tempId)\" />\r\n                                   <span class=\"position-absolute absolute\" \r\n                                       *ngIf=\"isLockedByReviewer(original)\"\r\n                                       (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                       <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n                                           viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                           <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                               <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\"\r\n                                                   fill=\"white\" />\r\n                                               <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\"\r\n                                                   rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                               <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                                                   stroke-width=\"0.927778\" 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\" 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\" 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=\"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\" in2=\"BackgroundImageFix\"\r\n                                                       result=\"effect1_dropShadow_2023_13718\" />\r\n                                                   <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                       in2=\"effect1_dropShadow_2023_13718\" result=\"shape\" />\r\n                                               </filter>\r\n                                           </defs>\r\n                                       </svg>\r\n                                   </span>\r\n                               </div>\r\n\r\n\r\n                               <img [src]=\"imageUrl + original?.filePath\" alt=\"\" (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                   class=\"w-100 rounded border cursor-pointer\" />\r\n                               <div class=\"row my-2\">\r\n                                   <div class=\"col-9\">\r\n                                       <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                           original.tempId\r\n                                           }}\r\n                                           <span *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                               class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                   <rect y=\"0.5\" width=\"10\" 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                   <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                       <path\r\n                                                           d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           fill=\"#FEE4E2\" />\r\n                                                       <path\r\n                                                           d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                           stroke-linejoin=\"round\" />\r\n                                                   </g>\r\n                                                   <defs>\r\n                                                       <clipPath id=\"clip0_1428_59484\">\r\n                                                           <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                               transform=\"translate(0.599609 0.5)\" />\r\n                                                       </clipPath>\r\n                                                   </defs>\r\n                                               </svg></span>\r\n                                       </div>\r\n                                       <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                           getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                   </div>\r\n                                   <div class=\"col-3 ms-3\">\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                               <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                   <path\r\n                                                       d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                       stroke=\"#039855\" stroke-linecap=\"round\"\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\" fill=\"white\"\r\n                                                           transform=\"translate(6 6)\" />\r\n                                                   </clipPath>\r\n                                               </defs>\r\n                                           </svg>\r\n                                       </span>\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                               xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                                               <g clip-path=\"url(#clip0_486_94090)\">\r\n                                                   <path\r\n                                                       d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                       stroke=\"#D92D20\" stroke-linecap=\"round\"\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\" 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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                               width=\"16\" height=\"16\" 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\r\n<!-- loop each block: tagging / review / approve -->\r\n<ng-container *ngFor=\"let block of activityData1\">\r\n\r\n<!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n<ng-container *ngIf=\"block.type === 'tagging'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div>\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n   <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n     <div class=\"tango-image\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n     </div>\r\n\r\n     <div class=\"tango-meta small\">\r\n       <div>Tango ID: {{ c.tempId }}</div>\r\n       <div class=\"text-muted\">Entry time: {{ c.entryTime }}</div>\r\n     </div>\r\n   </div>\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n<!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n<ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n \r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex gap-2 flex-wrap\" *ngIf=\"c.taggedImages?.length\">\r\n\r\n   <!-- first 3 images -->\r\n   <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n     <ng-container *ngIf=\"i < 3\">\r\n       <div class=\"tango-card\">\r\n         <div class=\"tango-image\"\r\n              [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n         </div>\r\n\r\n         <div class=\"tango-meta small\">\r\n           <div>\r\n             Tango ID: {{ img.tempId }}\r\n             <span *ngIf=\"c.status === 'approved'\"\r\n                   class=\"status-dot status-approve\"></span>\r\n             <span *ngIf=\"c.status === 'rejected'\"\r\n                   class=\"status-dot status-reject\"></span>\r\n           </div>\r\n           <div class=\"text-muted\">\r\n             Entry time: {{ img.entryTime }}\r\n           </div>\r\n         </div>\r\n       </div>\r\n     </ng-container>\r\n   </div>\r\n\r\n   <!-- +N View all card -->\r\n   <div\r\n     class=\"tango-card more-card text-center\"\r\n     *ngIf=\"c.taggedImages.length > 3\"\r\n     [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n     (click)=\"openImagesPopup(c)\"\r\n   >\r\n     <div class=\"more-overlay\"></div>\r\n\r\n     <div class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n       <div class=\"more-text fw-semibold\">\r\n         +{{ c.taggedImages.length - 3 }}\r\n       </div>\r\n       <div class=\"text-primary text-decoration-underline small\">\r\n         View all\r\n       </div>\r\n     </div>\r\n   </div>\r\n\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n</ng-container>\r\n</div>\r\n\r\n           </div>\r\n       </div>\r\n   </div>\r\n</section>\r\n</ng-container>\r\n         \r\n\r\n\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n</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 ?  this.overallSelectedIds?.length : this.popupValue ?\r\n               this.popupValue:'--'  }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n            <!-- Count Box -->\r\n            <div *ngIf=\"selectedCategories?.length === 1\" class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                Re-Assign Ticket\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                Transfer the ticket to another user\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n          <div class=\"row w-100 my-3\">\r\n            <div class=\"col-md-12 mb-4\">\r\n                <label class=\"label mb-2\">Choose User</label>\r\n                <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n                    (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n            </div>\r\n            </div>\r\n`\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancelassign()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n                   Re-Assign\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n         <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n            <h5 class=\"modal-title mb-2 m-0\">{{ previewTitle }}</h5>\r\n\r\n            <!-- Close Button -->\r\n            <button type=\"button\"\r\n                    class=\"btn-close fs-4\"\r\n                    aria-label=\"Close\"\r\n                    (click)=\"model.close()\">\r\n                    \r\n            </button>\r\n\r\n        </div>\r\n\r\n            <div class=\"w-100 position-relative mb-4\">\r\n\r\n                <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n                    (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                   <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n<path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n                </button>\r\n\r\n                <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n                <div class=\"row my-2\">\r\n                    <div class=\"col-10\">\r\n                        <div class=\"desc-title ms-2 my-2\">\r\n                            Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n                            <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\"\r\n                                class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                    <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                        d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                        fill=\"#12B76A\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span *ngIf=\"getAction(currentPreviewItem, '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\" stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1428_59484\">\r\n                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                transform=\"translate(0.599609 0.5)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>\r\n\r\n                        </div>\r\n\r\n                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                            getFormattedEntryTime(currentPreviewItem.entryTime) }}</div>\r\n                    </div>\r\n                    <div class=\"col-2 mt-2 text-end\">\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\"\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=\"42\" height=\"42\" 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 me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                    [disabled]=\"previewList.length <= 1\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n<path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n                </button>\r\n\r\n            </div>\r\n\r\n            <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected',currentPreviewItem)\">\r\n\r\n                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                    }}</button>\r\n                <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved',currentPreviewItem)\">\r\n\r\n                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                    'Accept' }}</button>\r\n            </div>\r\n\r\n        </div>\r\n    \r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n    <div class=\"h-auto p-10\">\r\n        <div class=\"card-header border-0\">\r\n            <div class=\"card-title\">Start audit</div>\r\n            <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n        </div>\r\n        <div class=\"row my-3\">\r\n            <div class=\"col-md-7 mb-4\">\r\n                <label class=\"label\">Store</label>\r\n                <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n                    (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n            </div>\r\n            <div class=\"col-md-5 mt-7\">\r\n\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                    </span>\r\n                    <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n                        ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n                        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                        autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                        (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-3\" *ngIf=\"footfallcount>0\">\r\n            <div>{{footfallcount}}</div>\r\n            <div class=\"mt-2\">Total footfall</div>\r\n        </div>\r\n        <div class=\"card-body mt-5\">\r\n            <div class=\"w-100 d-flex mt-5\">\r\n\r\n                <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button [disabled]=\"disableAudit&&footfallcount>0\" class=\"btn btn-primary w-50 ms-2\"\r\n                    (click)=\"modal.close('isConfirmed')\">start</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n  <div class=\"images-modal\">\r\n    <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n  <div>\r\n    <h6 class=\"mb-1\">All Images</h6>\r\n\r\n    <!-- email -->\r\n    <div class=\"small fw-semibold\">\r\n      {{ selectedComment?.createdByEmail }}\r\n    </div>\r\n\r\n    <!-- time -->\r\n    <div class=\"small text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n      {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n    </div>\r\n\r\n    <!-- optional comment text under time -->\r\n    <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n      {{ selectedComment?.message }}\r\n    </p>\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"btn-close ms-3\"\r\n    (click)=\"closeImagesPopup()\">\r\n  </button>\r\n</div>\r\n\r\n\r\n    <div class=\"modal-body d-flex flex-wrap gap-3\">\r\n      <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card\">\r\n        <div class=\"tango-image\"\r\n             [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n        </div>\r\n          <div class=\"tango-meta small\">\r\n                    <div>\r\n                      Tango ID: {{ img.tempId }}\r\n\r\n                      <!-- status dots -->\r\n                      <span *ngIf=\"img.status === 'approved'\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n\r\n                      <span *ngIf=\"img.status === 'rejected'\"\r\n                            ><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n                    </div>\r\n\r\n                    <div class=\"text-muted\">\r\n                      Entry time: {{ img.entryTime }}\r\n                    </div>\r\n                  </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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}.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}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:900px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}\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: "component", type: i4.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i10.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "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" }, host: { listeners: { "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }, { propertyName: "internalticket", first: true, predicate: ["internalticket"], descendants: true }, { propertyName: "closePopup", first: true, predicate: ["closePopup"], descendants: true }, { propertyName: "zoomPopup", first: true, predicate: ["zoomPopup"], descendants: true }, { propertyName: "imagePreviewPopup", first: true, predicate: ["imagePreviewPopup"], descendants: true }, { propertyName: "ReassignTicketPopup", first: true, predicate: ["ReassignTicketPopup"], descendants: true }], ngImport: i0, template: "<section *ngIf=\"select ==='ticketList'\">\r\n    <div class=\"row ms-3 my-3\">\r\n        <ul *ngIf=\"usersDetails?.userType === 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\">\r\n                    Tickets\r\n                </a>\r\n            </li>\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <!-- Approver tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n                <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n                    Approver\r\n                </a>\r\n            </li>\r\n\r\n            <!-- Reviewer tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n                <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n                    Reviewer\r\n                </a>\r\n            </li>\r\n        </ul>\r\n\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"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\" *ngIf=\"tangoType==='store'\"><span\r\n                        *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span\r\n                        *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below 85% </span><span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\r\n                    {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search by store\"\r\n                            autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\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                        <button\r\n                            class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n                            *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n                        <button\r\n                            *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                            [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n                            (click)=\"getMultipleTicketClose()\">\r\n                            Close Ticket\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\" *ngIf=\"!loading && !noData\">\r\n                <table class=\"table custom-table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <!-- NEW: checkbox column for approver only -->\r\n                            <th\r\n                                *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n                                <input type=\"checkbox\" [checked]=\"areAllSelectableRowsSelected()\"\r\n                                    (change)=\"toggleSelectAllRows($event)\" />\r\n                            </th>\r\n\r\n                            <th *ngFor=\"let col of tableColumns\"\r\n                                [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n                                (click)=\"col.sortable && col.type !== 'store' && onSort(col.key)\">\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                            </th>\r\n                        </tr>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of footfallListData\">\r\n                            <!-- NEW: per-row checkbox (approver only) -->\r\n                            <td\r\n                                *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n                                <input type=\"checkbox\" [disabled]=\"!isRowSelectable(row)\" [checked]=\"isRowSelected(row)\"\r\n                                    [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n                                    (change)=\"toggleRowSelection(row, $event)\" />\r\n                            </td>\r\n\r\n                            <td *ngFor=\"let col of tableColumns\">\r\n                                <!-- Store + ticket clickable -->\r\n                                <ng-container *ngIf=\"col.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                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n                <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                    [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n                    (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"loading\" class=\"card mt-5\">\r\n            <div class=\"card-body h-500px\">\r\n                <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"noData\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12 mb-3\">\r\n                    <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n                                fill=\"none\">\r\n                                <g filter=\"url(#filter0_d_887_4505)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                    <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                        <feOffset dy=\"1\" />\r\n                                        <feGaussianBlur stdDeviation=\"1\" />\r\n                                        <feColorMatrix type=\"matrix\"\r\n                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                            result=\"effect1_dropShadow_887_4505\" />\r\n                                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                            result=\"shape\" />\r\n                                    </filter>\r\n                                </defs>\r\n                            </svg></span><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div *ngIf=\"!openTicketsList.length\" 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 *ngIf=\"!openTicketsList.length\" class=\"col-4 p-0 btn\">\r\n\r\n                        <div class=\"text-end text-nowrp ms-3 mt-2\">\r\n                            <button\r\n                                *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                                [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                (click)=\"getMultipleTicketClose()\">\r\n                                Close Ticket\r\n                            </button>\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                    <div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n                            <!-- LEFT: checkbox + text -->\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <input\r\n                                    *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                                    type=\"checkbox\" class=\"me-2\" [checked]=\"newallSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select <span\r\n                                        *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all\r\n                                        {{ storeCount }}</span> stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span 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\r\n                                        *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                                        type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n                                        (change)=\"toggleStoreSelection(store)\" />\r\n\r\n                                    <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                <div class=\"nodata-title my-3\">No Stores Found</div>\r\n                                <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        </div>\r\n        <div [ngClass]=\"isCollapsed ? '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                        \r\n                        <span *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || getHeaderStatus() === 'Open')\">\r\n     \r\n     <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n         Start Review\r\n        </button>\r\n    </span>\r\n<section\r\n  *ngIf=\"\r\n    (hasReviewerAccess && selectedRole === 'reviewer') ||\r\n    (hasApproverAccess && selectedRole === 'approver')\r\n  \"\r\n>\r\n  <span\r\n    *ngIf=\"\r\n      getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n      ticketData?.status?.toLowerCase() === 'in-progress'\r\n    \"\r\n  >\r\n    <button\r\n      *ngIf=\"closeBtn\"\r\n      [disabled]=\"closeDisabled\"\r\n      class=\"btn btn-sm btn-primary mx-2\"\r\n      (click)=\"stopReview()\"\r\n    >\r\n      Close Ticket\r\n    </button>\r\n  </span>\r\n</section>\r\n\r\n\r\n\r\n                        <span\r\n                            *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||usersDetails?.userType ==='tango'&&ticketData?.type === 'internal'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n                            <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n                                <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <path\r\n                                            d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n                                    <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n                                        Re-Assign Ticket\r\n                                    </div>\r\n                                    <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n                                        Export\r\n                                    </div> -->\r\n                                </div>\r\n                            </span>\r\n                        </span>\r\n                    </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\">{{footfallTicketsData[0]?._source?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{footfallTicketsData[0]?._source?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\">\r\n                            <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n                                {{ getHeaderStatus() | titlecase }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div 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\">06 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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91902)\">\r\n                                            <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                                            <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91902\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span (click)=\"openArrow()\">\r\n                                    <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n                                        viewBox=\"0 0 40 40\" fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n\r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n\r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n\r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span\r\n                                                class=\"footfall-label ms-3\">Actual\r\n                                                Footfall</span>\r\n                                        </div>\r\n                                        <div class=\"issue-date\">Issue date : {{source?.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 class=\"timeline\"></div>\r\n                                            <div class=\"user-info ms-4\">\r\n\r\n                                                <div class=\"avatar avatar-text light-primary p-3\">\r\n                                                    {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n                                                    source?.createdByEmail) }}\r\n                                                </div>\r\n\r\n                                                <div>\r\n                                                    <div class=\"user-name\">\r\n                                                        <span *ngIf=\"mapping?.type === 'tagging'\">\r\n                                                            Ticket created by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'review'\">\r\n                                                            Reviewed by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'approve'\">\r\n                                                            Approved by\r\n                                                        </span>\r\n\r\n                                                        <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n                                                            Tango\r\n                                                        </span>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"user-email\">\r\n                                                        {{ mapping?.createdByEmail || source?.createdByEmail }}\r\n                                                        {{(mapping?.createdAt ||\r\n                                                        source?.createdAt)\r\n                                                        | date:'HH:mm:ss \u2013dd MMM yyyy' }}\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                            </div>\r\n\r\n\r\n                                            <div class=\"timeline\"></div>\r\n\r\n                                            <!-- Show revision card only when NOT closed & type is tagging -->\r\n                                            <div class=\"revision-card\"\r\n                                                [ngClass]=\"{'revision-card-approve-closed':mapping?.status === 'Closed' && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n                                                <div class=\"values-row\">\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ mapping?.revicedFootfall === null ? '--' :\r\n                                                            mapping?.revicedFootfall }}\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold\">Revised Footfall</div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value accuracy down\">\r\n                                                            {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n                                                            <span class=\"ms-1\">\r\n                                                                <!-- arrow svg -->\r\n                                                            </span>\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"timeline-new my-2\"></div>\r\n\r\n                                                    <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ item?.value ?? '--' }}\r\n                                                        </div>\r\n                                                        <div class=\"label\">\r\n                                                            {{ item?.name }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\"\r\n                                                    [class.rotate-180]=\"showRevisedDetails\"><svg\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n\r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                                                    <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n                                                        <ng-container *ngFor=\"let type of revopsTypes\">\r\n                                                            <section *ngIf=\"type ==='duplicate'\">\r\n\r\n                                                                <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n                                                                    <!-- Header Section -->\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <h3 class=\"text-lg font-semibold mb-4\">\r\n                                                                            <span class=\"me-2\">\r\n                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_730_76157)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                                                            stroke=\"#475467\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_730_76157\">\r\n                                                                                            <rect width=\"18\" height=\"18\"\r\n                                                                                                fill=\"white\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg>\r\n                                                                            </span>\r\n                                                                            Duplicates\r\n                                                                        </h3>\r\n                                                                    </div>\r\n\r\n\r\n                                                                    <!-- Body Section -->\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                                                            <ng-container\r\n                                                                                *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                                                <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                                                    class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                                                    <div class=\"my-4\">\r\n                                                                                        <!-- Original Image -->\r\n                                                                                        <div\r\n                                                                                            class=\"duplicate-head px-5 my-3\">\r\n                                                                                            Original image\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <div\r\n                                                                                                class=\"col-md-4 relative\">\r\n                                                                                                <div\r\n                                                                                                    class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                                                    <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        class=\"w-100 rounded border\" />\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}</div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                        <div\r\n                                                                                            class=\"separator separator-dashed mt-3 mb-5\">\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <h5\r\n                                                                                                class=\"duplicate-head my-3 fs-6\">\r\n                                                                                                Tagged Duplicates</h5>\r\n                                                                                            <div *ngIf=\"isCheckboxEnable\"\r\n                                                                                                class=\"my-3\">\r\n                                                                                                <input type=\"checkbox\"\r\n                                                                                                    [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                                                    (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                                                                <label\r\n                                                                                                    class=\"ms-2\">Select\r\n                                                                                                    All</label>\r\n                                                                                            </div>\r\n                                                                                            <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                                                                class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                                <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                                    [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                                                                    <!-- Checkbox -->\r\n                                                                                                    <div\r\n                                                                                                        *ngIf=\"isCheckboxEnable\">\r\n                                                                                                        <input\r\n                                                                                                            type=\"checkbox\"\r\n                                                                                                            *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                                                                            style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                                                                            [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                                                                            (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                                                                            class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                                                                        <span\r\n                                                                                                            class=\"position-absolute absolute\"\r\n                                                                                                            *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                                                                            (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n                                                                                                            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                width=\"19\"\r\n                                                                                                                height=\"19\"\r\n                                                                                                                viewBox=\"0 0 19 19\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.11133\"\r\n                                                                                                                        y=\"0.555664\"\r\n                                                                                                                        width=\"16\"\r\n                                                                                                                        height=\"16\"\r\n                                                                                                                        rx=\"2\"\r\n                                                                                                                        fill=\"white\" />\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.38911\"\r\n                                                                                                                        y=\"0.833442\"\r\n                                                                                                                        width=\"15.4444\"\r\n                                                                                                                        height=\"15.4444\"\r\n                                                                                                                        rx=\"1.72222\"\r\n                                                                                                                        stroke=\"#D0D5DD\"\r\n                                                                                                                        stroke-width=\"0.555556\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                        stroke=\"#344054\"\r\n                                                                                                                        stroke-width=\"0.927778\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <filter\r\n                                                                                                                        id=\"filter0_d_2023_13718\"\r\n                                                                                                                        x=\"0.00021708\"\r\n                                                                                                                        y=\"0.00010854\"\r\n                                                                                                                        width=\"18.2222\"\r\n                                                                                                                        height=\"18.2222\"\r\n                                                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                                                        <feFlood\r\n                                                                                                                            flood-opacity=\"0\"\r\n                                                                                                                            result=\"BackgroundImageFix\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            in=\"SourceAlpha\"\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                            result=\"hardAlpha\" />\r\n                                                                                                                        <feOffset\r\n                                                                                                                            dy=\"0.555556\" />\r\n                                                                                                                        <feGaussianBlur\r\n                                                                                                                            stdDeviation=\"0.555556\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                                                            result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in=\"SourceGraphic\"\r\n                                                                                                                            in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                            result=\"shape\" />\r\n                                                                                                                    </filter>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg>\r\n\r\n                                                                                                        </span>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                                                    <!-- Duplicate Image -->\r\n                                                                                                    <img [src]=\"imageUrl + duplicate.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                                                        class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                                                                    <!-- Duplicate Info -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"row my-2\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-8\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-title ms-2 my-2\">\r\n                                                                                                                Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                duplicate.tempId\r\n                                                                                                                }}\r\n\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                        <rect\r\n                                                                                                                            y=\"0.5\"\r\n                                                                                                                            width=\"10\"\r\n                                                                                                                            height=\"10\"\r\n                                                                                                                            rx=\"5\"\r\n                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                        <path\r\n                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                    </svg>\r\n                                                                                                                </span>\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                        <g\r\n                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                        </g>\r\n                                                                                                                        <defs>\r\n                                                                                                                            <clipPath\r\n                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                <rect\r\n                                                                                                                                    width=\"12\"\r\n                                                                                                                                    height=\"12\"\r\n                                                                                                                                    fill=\"white\"\r\n                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                            </clipPath>\r\n                                                                                                                        </defs>\r\n                                                                                                                    </svg></span>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-value ms-2\">\r\n                                                                                                                Entry\r\n                                                                                                                Time: {{\r\n                                                                                                                getFormattedEntryTime(duplicate.entryTime)\r\n                                                                                                                }}\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-4\">\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#D1FADF\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                            stroke=\"#039855\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94051\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n\r\n                                                                                                            </span>\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                            stroke=\"#D92D20\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94090\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n                                                                                                            </span>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- Duplicate Reason -->\r\n                                                                                                    <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                    </div>\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\"\r\n                                                                                        (click)=\"toggleCommentsAccordion()\">\r\n                                                                                        <div\r\n                                                                                            class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                            <span\r\n                                                                                                class=\"comments-count\">{{\r\n                                                                                                comments?.length }}\r\n                                                                                                Comments</span>\r\n                                                                                            <div\r\n                                                                                                class=\"accordion-arrow ms-3\">\r\n                                                                                                <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                    width=\"16\"\r\n                                                                                                    height=\"16\"\r\n                                                                                                    viewBox=\"0 0 16 16\"\r\n                                                                                                    fill=\"none\">\r\n                                                                                                    <path\r\n                                                                                                        d=\"M4 6L8 10L12 6\"\r\n                                                                                                        stroke=\"#667085\"\r\n                                                                                                        stroke-width=\"2\"\r\n                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                </svg>\r\n                                                                                            </div>\r\n\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n\r\n                                                                                    <!-- Accordion Body -->\r\n                                                                                    <div class=\"accordion-body\"\r\n                                                                                        *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                        <!-- Loop each block: tagging / review / approve -->\r\n                                                                                        <ng-container\r\n                                                                                            *ngFor=\"let block of activityData\">\r\n\r\n                                                                                            <!-- Loop inside comments -->\r\n                                                                                            <div *ngFor=\"let c of block.comments\"\r\n                                                                                                class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                                <!-- avatar -->\r\n                                                                                                <div\r\n                                                                                                    class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                    {{\r\n                                                                                                    getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n                                                                                                <div class=\"w-100\">\r\n\r\n                                                                                                    <!-- email -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"fw-semibold\">\r\n                                                                                                        {{\r\n                                                                                                        c.createdByEmail\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n                                                                                                    <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n                                                                                                        {{ c.createdAt |date:'hh:mm:ss a\r\n                                                                                                        - dd MMM yyyy'\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- message text -->\r\n                                                                                                    <p class=\"mb-2 mt-2\"\r\n                                                                                                        *ngIf=\"c.message\">\r\n                                                                                                        {{ c.message }}\r\n                                                                                                    </p>\r\n\r\n                                                                                                    <!-- Review / Approve only -->\r\n                                                                                                    <ng-container\r\n                                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                                        <!-- Tagged images -->\r\n                                                                                                        <div\r\n                                                                                                            class=\"d-flex gap-2 flex-wrap\">\r\n\r\n                                                                                                            <div\r\n                                                                                                                *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n                                                                                                                <!-- Show only first 4 -->\r\n                                                                                                                <ng-container\r\n                                                                                                                    *ngIf=\"i < 3\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"tango-card\">\r\n                                                                                                                        <div class=\"tango-image\"\r\n                                                                                                                            [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                                                                                                                        </div>\r\n\r\n                                                                                                                        <div\r\n                                                                                                                            class=\"tango-meta small\">\r\n                                                                                                                            <div>\r\n                                                                                                                                Tango\r\n                                                                                                                                ID:\r\n                                                                                                                                {{\r\n                                                                                                                                img.tempId\r\n                                                                                                                                }}\r\n\r\n                                                                                                                                <!-- status dots -->\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'approved'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                                        <rect\r\n                                                                                                                                            y=\"0.5\"\r\n                                                                                                                                            width=\"10\"\r\n                                                                                                                                            height=\"10\"\r\n                                                                                                                                            rx=\"5\"\r\n                                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                                        <path\r\n                                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                                    </svg></span>\r\n\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'rejected'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                                        <g\r\n                                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                                        </g>\r\n                                                                                                                                        <defs>\r\n                                                                                                                                            <clipPath\r\n                                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                                <rect\r\n                                                                                                                                                    width=\"12\"\r\n                                                                                                                                                    height=\"12\"\r\n                                                                                                                                                    fill=\"white\"\r\n                                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                                            </clipPath>\r\n                                                                                                                                        </defs>\r\n                                                                                                                                    </svg></span>\r\n                                                                                                                            </div>\r\n\r\n                                                                                                                            <div\r\n                                                                                                                                class=\"text-muted\">\r\n                                                                                                                                Entry\r\n                                                                                                                                time:\r\n                                                                                                                                {{\r\n                                                                                                                                img.entryTime\r\n                                                                                                                                }}\r\n                                                                                                                            </div>\r\n                                                                                                                        </div>\r\n                                                                                                                    </div>\r\n                                                                                                                </ng-container>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <!-- +N more -->\r\n                                                                                                            <div class=\"tango-card more-card text-center\"\r\n                                                                                                                *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                                [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                                (click)=\"openImagesPopup(c)\">\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-overlay\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <!-- vertical container -->\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"more-text fw-semibold\">\r\n                                                                                                                        +{{\r\n                                                                                                                        c.taggedImages.length\r\n                                                                                                                        -\r\n                                                                                                                        3\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-primary text-dark text-decoration-underline small\">\r\n                                                                                                                        View\r\n                                                                                                                        all\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n\r\n\r\n\r\n                                                                                                        </div>\r\n\r\n                                                                                                    </ng-container>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </ng-container>\r\n                                                                                    </div>\r\n\r\n\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n\r\n                                                                    </ng-container>\r\n                                                                    <!-- Status Icons -->\r\n\r\n\r\n                                                                </div>\r\n                                                            </section>\r\n                                                            <section *ngIf=\"type !=='duplicate'\">\r\n                                                                <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <div class=\"duplicate-head text-lg my-3\"><span\r\n                                                                                class=\"me-2\"><svg\r\n                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <path fill-rule=\"evenodd\"\r\n                                                                                        clip-rule=\"evenodd\"\r\n                                                                                        d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                                                        fill=\"#475467\" />\r\n                                                                                </svg></span> {{type | titlecase}}\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                    <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                                                        <input type=\"checkbox\"\r\n                                                                            [(ngModel)]=\"selectAllByType[type]\"\r\n                                                                            (change)=\"onSelectAll(type, $event)\">\r\n                                                                        <label>Select All</label>\r\n                                                                    </div>\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <div *ngIf=\"mapping?.type ===viewMode\"\r\n                                                                            class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                                                            <div class=\"row\">\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n                                                                                    <div *ngIf=\"original?.revopsType ===type\"\r\n                                                                                        class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                        <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                            [ngClass]=\"{\r\n'layer-approved': isApproved(original),\r\n'layer-rejected': isRejected(original),\r\n'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                                                            <!-- Top-right Checkbox -->\r\n                                                                                            <div\r\n                                                                                                *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                                                                <input\r\n                                                                                                    *ngIf=\"!isLockedByReviewer(original)\"\r\n                                                                                                    type=\"checkbox\"\r\n                                                                                                    class=\"position-absolute absolute form-check-input\"\r\n                                                                                                    [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n                                                                                                    (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n                                                                                                <span\r\n                                                                                                    class=\"position-absolute absolute\"\r\n                                                                                                    *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                                                    (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                        width=\"19\"\r\n                                                                                                        height=\"19\"\r\n                                                                                                        viewBox=\"0 0 19 19\"\r\n                                                                                                        fill=\"none\">\r\n                                                                                                        <g\r\n                                                                                                            filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.11133\"\r\n                                                                                                                y=\"0.555664\"\r\n                                                                                                                width=\"16\"\r\n                                                                                                                height=\"16\"\r\n                                                                                                                rx=\"2\"\r\n                                                                                                                fill=\"white\" />\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.38911\"\r\n                                                                                                                y=\"0.833442\"\r\n                                                                                                                width=\"15.4444\"\r\n                                                                                                                height=\"15.4444\"\r\n                                                                                                                rx=\"1.72222\"\r\n                                                                                                                stroke=\"#D0D5DD\"\r\n                                                                                                                stroke-width=\"0.555556\" />\r\n                                                                                                            <path\r\n                                                                                                                d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                stroke=\"#344054\"\r\n                                                                                                                stroke-width=\"0.927778\"\r\n                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                        </g>\r\n                                                                                                        <defs>\r\n                                                                                                            <filter\r\n                                                                                                                id=\"filter0_d_2023_13718\"\r\n                                                                                                                x=\"0.00021708\"\r\n                                                                                                                y=\"0.00010854\"\r\n                                                                                                                width=\"18.2222\"\r\n                                                                                                                height=\"18.2222\"\r\n                                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                                <feFlood\r\n                                                                                                                    flood-opacity=\"0\"\r\n                                                                                                                    result=\"BackgroundImageFix\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                    result=\"hardAlpha\" />\r\n                                                                                                                <feOffset\r\n                                                                                                                    dy=\"0.555556\" />\r\n                                                                                                                <feGaussianBlur\r\n                                                                                                                    stdDeviation=\"0.555556\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                                    result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                                    in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                    result=\"shape\" />\r\n                                                                                                            </filter>\r\n                                                                                                        </defs>\r\n                                                                                                    </svg>\r\n                                                                                                </span>\r\n                                                                                            </div>\r\n\r\n\r\n                                                                                            <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                alt=\"\"\r\n                                                                                                (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                                                                                class=\"w-100 rounded border cursor-pointer\" />\r\n                                                                                            <div class=\"row my-2\">\r\n                                                                                                <div class=\"col-8\">\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                <rect\r\n                                                                                                                    y=\"0.5\"\r\n                                                                                                                    width=\"10\"\r\n                                                                                                                    height=\"10\"\r\n                                                                                                                    rx=\"5\"\r\n                                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                                <path\r\n                                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                    fill=\"#12B76A\" />\r\n                                                                                                            </svg>\r\n                                                                                                        </span>\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <clipPath\r\n                                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                                        <rect\r\n                                                                                                                            width=\"12\"\r\n                                                                                                                            height=\"12\"\r\n                                                                                                                            fill=\"white\"\r\n                                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                    </clipPath>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg></span>\r\n                                                                                                    </div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                                <div class=\"col-4\">\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#D1FADF\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                    stroke=\"#039855\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94051\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg>\r\n                                                                                                    </span>\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                    stroke=\"#D92D20\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94090\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg></span>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                    <div class=\"card-footer py-5\">\r\n                                                                        <div class=\"comments-accordion\">\r\n                                                                            <!-- Accordion Header -->\r\n                                                                            <div class=\"accordion-header\"\r\n                                                                                (click)=\"toggleCommentsAccordion()\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                    <div class=\"comments-title\">\r\n                                                                                        <span class=\"comments-count\">{{\r\n                                                                                            comments?.length }}\r\n                                                                                            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\"\r\n                                                                                            width=\"16\" height=\"16\"\r\n                                                                                            viewBox=\"0 0 16 16\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <path d=\"M4 6L8 10L12 6\"\r\n                                                                                                stroke=\"#667085\"\r\n                                                                                                stroke-width=\"2\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </svg>\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <!-- Accordion Content -->\r\n                                                                            <div class=\"accordion-body\"\r\n                                                                                *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                <!-- loop each block: tagging / review / approve -->\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let block of activityData1\">\r\n\r\n                                                                                    <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'tagging'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div>\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n                                                                                                <!-- single image card -->\r\n                                                                                                <div\r\n                                                                                                    class=\"d-flex gap-2 flex-wrap\">\r\n                                                                                                    <div class=\"tango-card\"\r\n                                                                                                        *ngIf=\"c.filePath\">\r\n                                                                                                        <div class=\"tango-image\"\r\n                                                                                                            [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"tango-meta small\">\r\n                                                                                                            <div>Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                c.tempId\r\n                                                                                                                }}</div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-muted\">\r\n                                                                                                                Entry\r\n                                                                                                                time: {{\r\n                                                                                                                c.entryTime\r\n                                                                                                                }}</div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                    <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div class=\"w-100\">\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <!-- main review/approve message -->\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n\r\n\r\n                                                                                                <!-- image list + +N View all -->\r\n                                                                                                <div class=\"d-flex gap-2 flex-wrap\"\r\n                                                                                                    *ngIf=\"c.taggedImages?.length\">\r\n\r\n                                                                                                    <!-- first 3 images -->\r\n                                                                                                    <div\r\n                                                                                                        *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                                                                                                        <ng-container\r\n                                                                                                            *ngIf=\"i < 3\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"tango-card\">\r\n                                                                                                                <div class=\"tango-image\"\r\n                                                                                                                    [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <div\r\n                                                                                                                    class=\"tango-meta small\">\r\n                                                                                                                    <div>\r\n                                                                                                                        Tango\r\n                                                                                                                        ID:\r\n                                                                                                                        {{\r\n                                                                                                                        img.tempId\r\n                                                                                                                        }}\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'approved'\"\r\n                                                                                                                            class=\"status-dot status-approve\"></span>\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'rejected'\"\r\n                                                                                                                            class=\"status-dot status-reject\"></span>\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-muted\">\r\n                                                                                                                        Entry\r\n                                                                                                                        time:\r\n                                                                                                                        {{\r\n                                                                                                                        img.entryTime\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n                                                                                                        </ng-container>\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- +N View all card -->\r\n                                                                                                    <div class=\"tango-card more-card text-center\"\r\n                                                                                                        *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                        [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                        (click)=\"openImagesPopup(c)\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-overlay\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"more-text fw-semibold\">\r\n                                                                                                                +{{\r\n                                                                                                                c.taggedImages.length\r\n                                                                                                                - 3 }}\r\n                                                                                                            </div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-primary text-decoration-underline small\">\r\n                                                                                                                View all\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </section>\r\n                                                        </ng-container>\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </div>\r\n\r\n\r\n                                            <div *ngIf=\"showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Hide in details\r\n                                                </span>\r\n\r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['tangoreview'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\"\r\n                                                    [class.rotate-180]=\"showRevisedDetails\"><svg\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n\r\n                                            </div>\r\n\r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                                                    <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n                                                        <ng-container *ngFor=\"let type of revopsTypes\">\r\n                                                            <section *ngIf=\"type ==='duplicate'\">\r\n\r\n                                                                <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n                                                                    <!-- Header Section -->\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <h3 class=\"text-lg font-semibold mb-4\">\r\n                                                                            <span class=\"me-2\">\r\n                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_730_76157)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                                                            stroke=\"#475467\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_730_76157\">\r\n                                                                                            <rect width=\"18\" height=\"18\"\r\n                                                                                                fill=\"white\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg>\r\n                                                                            </span>\r\n                                                                            Duplicates\r\n                                                                        </h3>\r\n                                                                    </div>\r\n\r\n\r\n                                                                    <!-- Body Section -->\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                                                            <ng-container\r\n                                                                                *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                                                <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                                                    class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                                                    <div class=\"my-4\">\r\n                                                                                        <!-- Original Image -->\r\n                                                                                        <div\r\n                                                                                            class=\"duplicate-head px-5 my-3\">\r\n                                                                                            Original image\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <div\r\n                                                                                                class=\"col-md-4 relative\">\r\n                                                                                                <div\r\n                                                                                                    class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                                                    <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        class=\"w-100 rounded border\" />\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}</div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                        <div\r\n                                                                                            class=\"separator separator-dashed mt-3 mb-5\">\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <h5\r\n                                                                                                class=\"duplicate-head my-3 fs-6\">\r\n                                                                                                Tagged Duplicates</h5>\r\n                                                                                            <div *ngIf=\"isCheckboxEnable\"\r\n                                                                                                class=\"my-3\">\r\n                                                                                                <input type=\"checkbox\"\r\n                                                                                                    [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                                                    (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                                                                <label\r\n                                                                                                    class=\"ms-2\">Select\r\n                                                                                                    All</label>\r\n                                                                                            </div>\r\n                                                                                            <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                                                                class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                                <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                                    [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                                                                    <!-- Checkbox -->\r\n                                                                                                    <div\r\n                                                                                                        *ngIf=\"isCheckboxEnable\">\r\n                                                                                                        <input\r\n                                                                                                            type=\"checkbox\"\r\n                                                                                                            *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                                                                            style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                                                                            [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                                                                            (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                                                                            class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                                                                        <span\r\n                                                                                                            class=\"position-absolute absolute\"\r\n                                                                                                            *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                                                                            (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n                                                                                                            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                width=\"19\"\r\n                                                                                                                height=\"19\"\r\n                                                                                                                viewBox=\"0 0 19 19\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.11133\"\r\n                                                                                                                        y=\"0.555664\"\r\n                                                                                                                        width=\"16\"\r\n                                                                                                                        height=\"16\"\r\n                                                                                                                        rx=\"2\"\r\n                                                                                                                        fill=\"white\" />\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.38911\"\r\n                                                                                                                        y=\"0.833442\"\r\n                                                                                                                        width=\"15.4444\"\r\n                                                                                                                        height=\"15.4444\"\r\n                                                                                                                        rx=\"1.72222\"\r\n                                                                                                                        stroke=\"#D0D5DD\"\r\n                                                                                                                        stroke-width=\"0.555556\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                        stroke=\"#344054\"\r\n                                                                                                                        stroke-width=\"0.927778\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <filter\r\n                                                                                                                        id=\"filter0_d_2023_13718\"\r\n                                                                                                                        x=\"0.00021708\"\r\n                                                                                                                        y=\"0.00010854\"\r\n                                                                                                                        width=\"18.2222\"\r\n                                                                                                                        height=\"18.2222\"\r\n                                                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                                                        <feFlood\r\n                                                                                                                            flood-opacity=\"0\"\r\n                                                                                                                            result=\"BackgroundImageFix\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            in=\"SourceAlpha\"\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                            result=\"hardAlpha\" />\r\n                                                                                                                        <feOffset\r\n                                                                                                                            dy=\"0.555556\" />\r\n                                                                                                                        <feGaussianBlur\r\n                                                                                                                            stdDeviation=\"0.555556\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                                                            result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in=\"SourceGraphic\"\r\n                                                                                                                            in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                            result=\"shape\" />\r\n                                                                                                                    </filter>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg>\r\n\r\n                                                                                                        </span>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                                                    <!-- Duplicate Image -->\r\n                                                                                                    <img [src]=\"imageUrl + duplicate.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                                                        class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                                                                    <!-- Duplicate Info -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"row my-2\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-8\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-title ms-2 my-2\">\r\n                                                                                                                Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                duplicate.tempId\r\n                                                                                                                }}\r\n\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                        <rect\r\n                                                                                                                            y=\"0.5\"\r\n                                                                                                                            width=\"10\"\r\n                                                                                                                            height=\"10\"\r\n                                                                                                                            rx=\"5\"\r\n                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                        <path\r\n                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                    </svg>\r\n                                                                                                                </span>\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                        <g\r\n                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                        </g>\r\n                                                                                                                        <defs>\r\n                                                                                                                            <clipPath\r\n                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                <rect\r\n                                                                                                                                    width=\"12\"\r\n                                                                                                                                    height=\"12\"\r\n                                                                                                                                    fill=\"white\"\r\n                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                            </clipPath>\r\n                                                                                                                        </defs>\r\n                                                                                                                    </svg></span>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-value ms-2\">\r\n                                                                                                                Entry\r\n                                                                                                                Time: {{\r\n                                                                                                                getFormattedEntryTime(duplicate.entryTime)\r\n                                                                                                                }}\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-4\">\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#D1FADF\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                            stroke=\"#039855\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94051\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n\r\n                                                                                                            </span>\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                            stroke=\"#D92D20\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94090\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n                                                                                                            </span>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- Duplicate Reason -->\r\n                                                                                                    <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                    </div>\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\"\r\n                                                                                        (click)=\"toggleCommentsAccordion()\">\r\n                                                                                        <div\r\n                                                                                            class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                            <span\r\n                                                                                                class=\"comments-count\">{{\r\n                                                                                                comments?.length }}\r\n                                                                                                Comments</span>\r\n                                                                                            <div\r\n                                                                                                class=\"accordion-arrow ms-3\">\r\n                                                                                                <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                    width=\"16\"\r\n                                                                                                    height=\"16\"\r\n                                                                                                    viewBox=\"0 0 16 16\"\r\n                                                                                                    fill=\"none\">\r\n                                                                                                    <path\r\n                                                                                                        d=\"M4 6L8 10L12 6\"\r\n                                                                                                        stroke=\"#667085\"\r\n                                                                                                        stroke-width=\"2\"\r\n                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                </svg>\r\n                                                                                            </div>\r\n\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n\r\n                                                                                    <!-- Accordion Body -->\r\n                                                                                    <div class=\"accordion-body\"\r\n                                                                                        *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                        <!-- Loop each block: tagging / review / approve -->\r\n                                                                                        <ng-container\r\n                                                                                            *ngFor=\"let block of activityData\">\r\n\r\n                                                                                            <!-- Loop inside comments -->\r\n                                                                                            <div *ngFor=\"let c of block.comments\"\r\n                                                                                                class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                                <!-- avatar -->\r\n                                                                                                <div\r\n                                                                                                    class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                    {{\r\n                                                                                                    getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n                                                                                                <div class=\"w-100\">\r\n\r\n                                                                                                    <!-- email -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"fw-semibold\">\r\n                                                                                                        {{\r\n                                                                                                        c.createdByEmail\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n                                                                                                    <div class=\"text-muted small\"\r\n                                                                                                        *ngIf=\"c.createdAt\">\r\n                                                                                                        {{ c.createdAt |\r\n                                                                                                        date:'hh:mm:ss a\r\n                                                                                                        - dd MMM yyyy'\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- message text -->\r\n                                                                                                    <p class=\"mb-2 mt-2\"\r\n                                                                                                        *ngIf=\"c.message\">\r\n                                                                                                        {{ c.message }}\r\n                                                                                                    </p>\r\n\r\n                                                                                                    <!-- Review / Approve only -->\r\n                                                                                                    <ng-container\r\n                                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                                        <!-- Tagged images -->\r\n                                                                                                        <div\r\n                                                                                                            class=\"d-flex gap-2 flex-wrap\">\r\n\r\n                                                                                                            <div\r\n                                                                                                                *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n                                                                                                                <!-- Show only first 4 -->\r\n                                                                                                                <ng-container\r\n                                                                                                                    *ngIf=\"i < 3\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"tango-card\">\r\n                                                                                                                        <div class=\"tango-image\"\r\n                                                                                                                            [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                                                                                                                        </div>\r\n\r\n                                                                                                                        <div\r\n                                                                                                                            class=\"tango-meta small\">\r\n                                                                                                                            <div>\r\n                                                                                                                                Tango\r\n                                                                                                                                ID:\r\n                                                                                                                                {{\r\n                                                                                                                                img.tempId\r\n                                                                                                                                }}\r\n\r\n                                                                                                                                <!-- status dots -->\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'approved'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                                        <rect\r\n                                                                                                                                            y=\"0.5\"\r\n                                                                                                                                            width=\"10\"\r\n                                                                                                                                            height=\"10\"\r\n                                                                                                                                            rx=\"5\"\r\n                                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                                        <path\r\n                                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                                    </svg></span>\r\n\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'rejected'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                                        <g\r\n                                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                                        </g>\r\n                                                                                                                                        <defs>\r\n                                                                                                                                            <clipPath\r\n                                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                                <rect\r\n                                                                                                                                                    width=\"12\"\r\n                                                                                                                                                    height=\"12\"\r\n                                                                                                                                                    fill=\"white\"\r\n                                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                                            </clipPath>\r\n                                                                                                                                        </defs>\r\n                                                                                                                                    </svg></span>\r\n                                                                                                                            </div>\r\n\r\n                                                                                                                            <div\r\n                                                                                                                                class=\"text-muted\">\r\n                                                                                                                                Entry\r\n                                                                                                                                time:\r\n                                                                                                                                {{\r\n                                                                                                                                img.entryTime\r\n                                                                                                                                }}\r\n                                                                                                                            </div>\r\n                                                                                                                        </div>\r\n                                                                                                                    </div>\r\n                                                                                                                </ng-container>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <!-- +N more -->\r\n                                                                                                            <div class=\"tango-card more-card text-center\"\r\n                                                                                                                *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                                [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                                (click)=\"openImagesPopup(c)\">\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-overlay\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <!-- vertical container -->\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"more-text fw-semibold\">\r\n                                                                                                                        +{{\r\n                                                                                                                        c.taggedImages.length\r\n                                                                                                                        -\r\n                                                                                                                        3\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-primary text-dark text-decoration-underline small\">\r\n                                                                                                                        View\r\n                                                                                                                        all\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n\r\n\r\n\r\n                                                                                                        </div>\r\n\r\n                                                                                                    </ng-container>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </ng-container>\r\n                                                                                    </div>\r\n\r\n\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n\r\n                                                                    </ng-container>\r\n                                                                    <!-- Status Icons -->\r\n\r\n\r\n                                                                </div>\r\n                                                            </section>\r\n                                                            <section *ngIf=\"type !=='duplicate'\">\r\n                                                                <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <div class=\"duplicate-head text-lg my-3\"><span\r\n                                                                                class=\"me-2\"><svg\r\n                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <path fill-rule=\"evenodd\"\r\n                                                                                        clip-rule=\"evenodd\"\r\n                                                                                        d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                                                        fill=\"#475467\" />\r\n                                                                                </svg></span> {{type}}\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                    <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                                                        <input type=\"checkbox\"\r\n                                                                            [(ngModel)]=\"selectAllByType[type]\"\r\n                                                                            (change)=\"onSelectAll(type, $event)\">\r\n                                                                        <label>Select All</label>\r\n                                                                    </div>\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <div *ngIf=\"mapping?.type ===viewMode\"\r\n                                                                            class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                                                            <div class=\"row\">\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n                                                                                    <div *ngIf=\"original?.revopsType ===type\"\r\n                                                                                        class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                        <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                            [ngClass]=\"{\r\n'layer-approved': isApproved(original),\r\n'layer-rejected': isRejected(original),\r\n'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                                                            <!-- Top-right Checkbox -->\r\n                                                                                            <div\r\n                                                                                                *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                                                                <input\r\n                                                                                                    *ngIf=\"!isLockedByReviewer(original)\"\r\n                                                                                                    type=\"checkbox\"\r\n                                                                                                    class=\"position-absolute absolute form-check-input\"\r\n                                                                                                    [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n                                                                                                    (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n                                                                                                <span\r\n                                                                                                    class=\"position-absolute absolute\"\r\n                                                                                                    *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                                                    (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                        width=\"19\"\r\n                                                                                                        height=\"19\"\r\n                                                                                                        viewBox=\"0 0 19 19\"\r\n                                                                                                        fill=\"none\">\r\n                                                                                                        <g\r\n                                                                                                            filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.11133\"\r\n                                                                                                                y=\"0.555664\"\r\n                                                                                                                width=\"16\"\r\n                                                                                                                height=\"16\"\r\n                                                                                                                rx=\"2\"\r\n                                                                                                                fill=\"white\" />\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.38911\"\r\n                                                                                                                y=\"0.833442\"\r\n                                                                                                                width=\"15.4444\"\r\n                                                                                                                height=\"15.4444\"\r\n                                                                                                                rx=\"1.72222\"\r\n                                                                                                                stroke=\"#D0D5DD\"\r\n                                                                                                                stroke-width=\"0.555556\" />\r\n                                                                                                            <path\r\n                                                                                                                d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                stroke=\"#344054\"\r\n                                                                                                                stroke-width=\"0.927778\"\r\n                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                        </g>\r\n                                                                                                        <defs>\r\n                                                                                                            <filter\r\n                                                                                                                id=\"filter0_d_2023_13718\"\r\n                                                                                                                x=\"0.00021708\"\r\n                                                                                                                y=\"0.00010854\"\r\n                                                                                                                width=\"18.2222\"\r\n                                                                                                                height=\"18.2222\"\r\n                                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                                <feFlood\r\n                                                                                                                    flood-opacity=\"0\"\r\n                                                                                                                    result=\"BackgroundImageFix\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                    result=\"hardAlpha\" />\r\n                                                                                                                <feOffset\r\n                                                                                                                    dy=\"0.555556\" />\r\n                                                                                                                <feGaussianBlur\r\n                                                                                                                    stdDeviation=\"0.555556\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                                    result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                                    in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                    result=\"shape\" />\r\n                                                                                                            </filter>\r\n                                                                                                        </defs>\r\n                                                                                                    </svg>\r\n                                                                                                </span>\r\n                                                                                            </div>\r\n\r\n\r\n                                                                                            <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                alt=\"\"\r\n                                                                                                (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                                                                                class=\"w-100 rounded border cursor-pointer\" />\r\n                                                                                            <div class=\"row my-2\">\r\n                                                                                                <div class=\"col-8\">\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                <rect\r\n                                                                                                                    y=\"0.5\"\r\n                                                                                                                    width=\"10\"\r\n                                                                                                                    height=\"10\"\r\n                                                                                                                    rx=\"5\"\r\n                                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                                <path\r\n                                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                    fill=\"#12B76A\" />\r\n                                                                                                            </svg>\r\n                                                                                                        </span>\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <clipPath\r\n                                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                                        <rect\r\n                                                                                                                            width=\"12\"\r\n                                                                                                                            height=\"12\"\r\n                                                                                                                            fill=\"white\"\r\n                                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                    </clipPath>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg></span>\r\n                                                                                                    </div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                                <div class=\"col-4\">\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#D1FADF\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                    stroke=\"#039855\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94051\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg>\r\n                                                                                                    </span>\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                    stroke=\"#D92D20\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94090\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg></span>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                    <div class=\"card-footer py-5\">\r\n                                                                        <div class=\"comments-accordion\">\r\n                                                                            <!-- Accordion Header -->\r\n                                                                            <div class=\"accordion-header\"\r\n                                                                                (click)=\"toggleCommentsAccordion()\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                    <div class=\"comments-title\">\r\n                                                                                        <span class=\"comments-count\">{{\r\n                                                                                            comments?.length }}\r\n                                                                                            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\"\r\n                                                                                            width=\"16\" height=\"16\"\r\n                                                                                            viewBox=\"0 0 16 16\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <path d=\"M4 6L8 10L12 6\"\r\n                                                                                                stroke=\"#667085\"\r\n                                                                                                stroke-width=\"2\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </svg>\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <!-- Accordion Content -->\r\n                                                                            <div class=\"accordion-body\"\r\n                                                                                *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                <!-- loop each block: tagging / review / approve -->\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let block of activityData1\">\r\n\r\n                                                                                    <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'tagging'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div>\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n                                                                                                <!-- single image card -->\r\n                                                                                                <div\r\n                                                                                                    class=\"d-flex gap-2 flex-wrap\">\r\n                                                                                                    <div class=\"tango-card\"\r\n                                                                                                        *ngIf=\"c.filePath\">\r\n                                                                                                        <div class=\"tango-image\"\r\n                                                                                                            [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"tango-meta small\">\r\n                                                                                                            <div>Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                c.tempId\r\n                                                                                                                }}</div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-muted\">\r\n                                                                                                                Entry\r\n                                                                                                                time: {{\r\n                                                                                                                c.entryTime\r\n                                                                                                                }}</div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                    <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div class=\"w-100\">\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <!-- main review/approve message -->\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n\r\n\r\n                                                                                                <!-- image list + +N View all -->\r\n                                                                                                <div class=\"d-flex gap-2 flex-wrap\"\r\n                                                                                                    *ngIf=\"c.taggedImages?.length\">\r\n\r\n                                                                                                    <!-- first 3 images -->\r\n                                                                                                    <div\r\n                                                                                                        *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                                                                                                        <ng-container\r\n                                                                                                            *ngIf=\"i < 3\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"tango-card\">\r\n                                                                                                                <div class=\"tango-image\"\r\n                                                                                                                    [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <div\r\n                                                                                                                    class=\"tango-meta small\">\r\n                                                                                                                    <div>\r\n                                                                                                                        Tango\r\n                                                                                                                        ID:\r\n                                                                                                                        {{\r\n                                                                                                                        img.tempId\r\n                                                                                                                        }}\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'approved'\"\r\n                                                                                                                            class=\"status-dot status-approve\"></span>\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'rejected'\"\r\n                                                                                                                            class=\"status-dot status-reject\"></span>\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-muted\">\r\n                                                                                                                        Entry\r\n                                                                                                                        time:\r\n                                                                                                                        {{\r\n                                                                                                                        img.entryTime\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n                                                                                                        </ng-container>\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- +N View all card -->\r\n                                                                                                    <div class=\"tango-card more-card text-center\"\r\n                                                                                                        *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                        [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                        (click)=\"openImagesPopup(c)\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-overlay\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"more-text fw-semibold\">\r\n                                                                                                                +{{\r\n                                                                                                                c.taggedImages.length\r\n                                                                                                                - 3 }}\r\n                                                                                                            </div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-primary text-decoration-underline small\">\r\n                                                                                                                View all\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </section>\r\n                                                        </ng-container>\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </div>\r\n                                            <div *ngIf=\"showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Hide in details\r\n                                                </span>\r\n\r\n                                                <span class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </ng-container>\r\n\r\n\r\n\r\n                                    <!-- <div class=\"timeline\"></div> -->\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </section>\r\n                    </div>\r\n\r\n                </div>\r\n                <section *ngIf=\"!footfallLoading && !footfallNoData\">\r\n\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-6 position-relative\">\r\n                            <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n                                <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\"\r\n                                    [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\">\r\n                                    Select\r\n                                    All</span>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n                            <div class=\"row\">\r\n                                <div class=\"col-md-4\">\r\n                                    <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\"\r\n                                        class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">\r\n\r\n                                        {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' :\r\n                                        'Reject'\r\n                                        }}\r\n\r\n                                    </button>\r\n                                </div>\r\n                                <div class=\"col-md-4\">\r\n                                    <button [disabled]=\"!overallSelectedIds?.length\"\r\n                                        class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('approved')\">\r\n\r\n                                        {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                                        'Accept' }}\r\n\r\n                                    </button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                    <div *ngIf=\"!approverClosed\" class=\"bg-white\">\r\n                        <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                            <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n                                <ng-container *ngFor=\"let type of revopsTypes\">\r\n                                    <section *ngIf=\"type ==='duplicate'\">\r\n\r\n                                        <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n                                            <!-- Header Section -->\r\n                                            <div class=\"card-header min-h-25px pt-3\">\r\n                                                <h3 class=\"text-lg font-semibold mb-4\">\r\n                                                    <span class=\"me-2\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                            viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                            <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                                <path\r\n                                                                    d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                                    stroke=\"#475467\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                            <defs>\r\n                                                                <clipPath id=\"clip0_730_76157\">\r\n                                                                    <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                </clipPath>\r\n                                                            </defs>\r\n                                                        </svg>\r\n                                                    </span>\r\n                                                    Duplicates\r\n                                                </h3>\r\n                                            </div>\r\n\r\n\r\n                                            <!-- Body Section -->\r\n                                            <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                <!-- Body Section -->\r\n                                                <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                                    <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                        <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                            class=\"card-body bg-white layers 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\"\r\n                                                                                alt=\"\" class=\"w-100 rounded border\" />\r\n                                                                            <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n                                                                                {{\r\n                                                                                original.tempId\r\n                                                                                }}</div>\r\n                                                                            <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                                getFormattedEntryTime(original?.entryTime)\r\n                                                                                }}</div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\r\n                                                                <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                                <div class=\"row px-5\">\r\n                                                                    <h5 class=\"duplicate-head my-3 fs-6\">Tagged\r\n                                                                        Duplicates</h5>\r\n                                                                    <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                                        <input type=\"checkbox\"\r\n                                                                            [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                            (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                                        <label class=\"ms-2\">Select All</label>\r\n                                                                    </div>\r\n                                                                    <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                                        class=\"col-md-3 mb-3 position-relative\">\r\n                                                                        <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                            [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                                            <!-- Checkbox -->\r\n                                                                            <div *ngIf=\"isCheckboxEnable\">\r\n                                                                                <input type=\"checkbox\"\r\n                                                                                    *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                                                    style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                                                    [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                                                    (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                                                    class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                                                <span class=\"position-absolute absolute\"\r\n                                                                                    *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                                                    (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n                                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"19\" height=\"19\"\r\n                                                                                        viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                            <rect x=\"1.11133\"\r\n                                                                                                y=\"0.555664\" width=\"16\"\r\n                                                                                                height=\"16\" rx=\"2\"\r\n                                                                                                fill=\"white\" />\r\n                                                                                            <rect x=\"1.38911\"\r\n                                                                                                y=\"0.833442\"\r\n                                                                                                width=\"15.4444\"\r\n                                                                                                height=\"15.4444\"\r\n                                                                                                rx=\"1.72222\"\r\n                                                                                                stroke=\"#D0D5DD\"\r\n                                                                                                stroke-width=\"0.555556\" />\r\n                                                                                            <path\r\n                                                                                                d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"0.927778\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_2023_13718\"\r\n                                                                                                x=\"0.00021708\"\r\n                                                                                                y=\"0.00010854\"\r\n                                                                                                width=\"18.2222\"\r\n                                                                                                height=\"18.2222\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\" />\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\" />\r\n                                                                                                <feOffset\r\n                                                                                                    dy=\"0.555556\" />\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"0.555556\" />\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                    result=\"shape\" />\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                            <!-- Duplicate Image -->\r\n                                                                            <img [src]=\"imageUrl + duplicate.filePath\"\r\n                                                                                alt=\"\"\r\n                                                                                (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                                class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                                            <!-- Duplicate Info -->\r\n                                                                            <div class=\"row my-2\">\r\n                                                                                <div class=\"col-9\">\r\n                                                                                    <div class=\"desc-title ms-2 my-2\">\r\n                                                                                        Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                                                        <span\r\n                                                                                            *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                            class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                <rect y=\"0.5\" width=\"10\"\r\n                                                                                                    height=\"10\" rx=\"5\"\r\n                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                <path\r\n                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                    fill=\"#12B76A\" />\r\n                                                                                            </svg>\r\n                                                                                        </span>\r\n                                                                                        <span\r\n                                                                                            *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                            class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                <g\r\n                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                    <path\r\n                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                    <path\r\n                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                </g>\r\n                                                                                                <defs>\r\n                                                                                                    <clipPath\r\n                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                        <rect width=\"12\"\r\n                                                                                                            height=\"12\"\r\n                                                                                                            fill=\"white\"\r\n                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                    </clipPath>\r\n                                                                                                </defs>\r\n                                                                                            </svg></span>\r\n\r\n                                                                                    </div>\r\n\r\n                                                                                    <div class=\"desc-value ms-2\">Entry\r\n                                                                                        Time: {{\r\n                                                                                        getFormattedEntryTime(duplicate.entryTime)\r\n                                                                                        }}\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                                <div class=\"col-3\">\r\n                                                                                    <span\r\n                                                                                        *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                            width=\"37\" height=\"37\"\r\n                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <rect width=\"24\" height=\"24\"\r\n                                                                                                rx=\"12\"\r\n                                                                                                fill=\"#D1FADF\" />\r\n                                                                                            <g\r\n                                                                                                clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                <path\r\n                                                                                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                    stroke=\"#039855\"\r\n                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                            </g>\r\n                                                                                            <defs>\r\n                                                                                                <clipPath\r\n                                                                                                    id=\"clip0_486_94051\">\r\n                                                                                                    <rect width=\"12\"\r\n                                                                                                        height=\"12\"\r\n                                                                                                        fill=\"white\"\r\n                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                </clipPath>\r\n                                                                                            </defs>\r\n                                                                                        </svg>\r\n\r\n                                                                                    </span>\r\n                                                                                    <span\r\n                                                                                        *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                            width=\"37\" height=\"37\"\r\n                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <rect width=\"24\" height=\"24\"\r\n                                                                                                rx=\"12\"\r\n                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                            <g\r\n                                                                                                clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                <path\r\n                                                                                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                    stroke=\"#D92D20\"\r\n                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                            </g>\r\n                                                                                            <defs>\r\n                                                                                                <clipPath\r\n                                                                                                    id=\"clip0_486_94090\">\r\n                                                                                                    <rect width=\"12\"\r\n                                                                                                        height=\"12\"\r\n                                                                                                        fill=\"white\"\r\n                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                </clipPath>\r\n                                                                                            </defs>\r\n                                                                                        </svg> </span>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                            <!-- Duplicate Reason -->\r\n                                                                            <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\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\"\r\n                                                                (click)=\"toggleCommentsAccordion()\">\r\n                                                                <div\r\n                                                                    class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                    <span class=\"comments-count\">{{ comments?.length }}\r\n                                                                        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\"\r\n                                                                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n\r\n                                                                </div>\r\n                                                            </div>\r\n\r\n                                                            <!-- Accordion Body -->\r\n                                                            <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                <!-- Loop each block: tagging / review / approve -->\r\n                                                                <ng-container *ngFor=\"let block of activityData\">\r\n\r\n                                                                    <!-- Loop inside comments -->\r\n                                                                    <div *ngFor=\"let c of block.comments\"\r\n                                                                        class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                        <!-- avatar -->\r\n                                                                        <div\r\n                                                                            class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                            {{ getInitialsFromEmail(c.createdByEmail) }}\r\n                                                                        </div>\r\n                                                                        <div class=\"w-100\">\r\n\r\n                                                                            <!-- email -->\r\n                                                                            <div class=\"fw-semibold\">\r\n                                                                                {{ c.createdByEmail }}\r\n                                                                            </div>\r\n                                                                            <div class=\"text-muted small\"\r\n                                                                                *ngIf=\"c.createdAt\">\r\n                                                                                {{ c.createdAt | date:'hh:mm:ss a - dd\r\n                                                                                MMM yyyy' }}\r\n                                                                            </div>\r\n\r\n                                                                            <!-- message text -->\r\n                                                                            <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                                                                                {{ c.message }}\r\n                                                                            </p>\r\n\r\n                                                                            <!-- Review / Approve only -->\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                <!-- Tagged images -->\r\n                                                                                <div class=\"d-flex gap-2 flex-wrap\">\r\n\r\n                                                                                    <div\r\n                                                                                        *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n                                                                                        <!-- Show only first 4 -->\r\n                                                                                        <ng-container *ngIf=\"i < 3\">\r\n                                                                                            <div class=\"tango-card\">\r\n                                                                                                <div class=\"tango-image\"\r\n                                                                                                    [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                                                                                                </div>\r\n\r\n                                                                                                <div\r\n                                                                                                    class=\"tango-meta small\">\r\n                                                                                                    <div>\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        img.tempId }}\r\n\r\n                                                                                                        <!-- status dots -->\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"c.status === 'approved'\"><svg\r\n                                                                                                                style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <rect\r\n                                                                                                                    y=\"0.5\"\r\n                                                                                                                    width=\"10\"\r\n                                                                                                                    height=\"10\"\r\n                                                                                                                    rx=\"5\"\r\n                                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                                <path\r\n                                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                    fill=\"#12B76A\" />\r\n                                                                                                            </svg></span>\r\n\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"c.status === 'rejected'\"><svg\r\n                                                                                                                style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <clipPath\r\n                                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                                        <rect\r\n                                                                                                                            width=\"12\"\r\n                                                                                                                            height=\"12\"\r\n                                                                                                                            fill=\"white\"\r\n                                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                    </clipPath>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg></span>\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <div\r\n                                                                                                        class=\"text-muted\">\r\n                                                                                                        Entry time: {{\r\n                                                                                                        img.entryTime }}\r\n                                                                                                    </div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </ng-container>\r\n\r\n                                                                                    </div>\r\n\r\n                                                                                    <!-- +N more -->\r\n                                                                                    <div class=\"tango-card more-card text-center\"\r\n                                                                                        *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                        [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                        (click)=\"openImagesPopup(c)\">\r\n                                                                                        <div class=\"more-overlay\"></div>\r\n\r\n                                                                                        <!-- vertical container -->\r\n                                                                                        <div\r\n                                                                                            class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                            <div\r\n                                                                                                class=\"more-text fw-semibold\">\r\n                                                                                                +{{\r\n                                                                                                c.taggedImages.length -\r\n                                                                                                3 }}</div>\r\n                                                                                            <div\r\n                                                                                                class=\"text-primary text-dark text-decoration-underline small\">\r\n                                                                                                View all\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n\r\n\r\n\r\n                                                                                </div>\r\n\r\n                                                                            </ng-container>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                            </ng-container>\r\n                                            <!-- Status Icons -->\r\n\r\n\r\n                                        </div>\r\n                                    </section>\r\n                                    <section *ngIf=\"type !=='duplicate'\">\r\n                                        <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n                                            <div class=\"card-header min-h-25px pt-3\">\r\n                                                <div class=\"duplicate-head text-lg my-3\"><span 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> {{type}}\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[type]\"\r\n                                                    (change)=\"onSelectAll(type, $event)\">\r\n                                                <label>Select All</label>\r\n                                            </div>\r\n                                            <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                <!-- Body Section -->\r\n                                                <div *ngIf=\"mapping?.type ===viewMode\"\r\n                                                    class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                                    <div class=\"row\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n                                                            <div *ngIf=\"original?.revopsType ===type\"\r\n                                                                class=\"col-md-3 mb-3 position-relative\">\r\n                                                                <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                    [ngClass]=\"{\r\n'layer-approved': isApproved(original),\r\n'layer-rejected': isRejected(original),\r\n'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                                    <!-- Top-right Checkbox -->\r\n                                                                    <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                                        <input *ngIf=\"!isLockedByReviewer(original)\"\r\n                                                                            type=\"checkbox\"\r\n                                                                            class=\"position-absolute absolute form-check-input\"\r\n                                                                            [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n                                                                            (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n                                                                        <span class=\"position-absolute absolute\"\r\n                                                                            *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                            (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                                                            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                width=\"19\" height=\"19\"\r\n                                                                                viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                                <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                    <rect x=\"1.11133\" y=\"0.555664\"\r\n                                                                                        width=\"16\" height=\"16\" rx=\"2\"\r\n                                                                                        fill=\"white\" />\r\n                                                                                    <rect x=\"1.38911\" y=\"0.833442\"\r\n                                                                                        width=\"15.4444\" height=\"15.4444\"\r\n                                                                                        rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                                                                                        stroke-width=\"0.555556\" />\r\n                                                                                    <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"0.927778\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_2023_13718\"\r\n                                                                                        x=\"0.00021708\" y=\"0.00010854\"\r\n                                                                                        width=\"18.2222\" height=\"18.2222\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\" />\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\" />\r\n                                                                                        <feOffset dy=\"0.555556\" />\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"0.555556\" />\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                            result=\"shape\" />\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n\r\n\r\n                                                                    <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                        (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                                                        class=\"w-100 rounded border cursor-pointer\" />\r\n                                                                    <div class=\"row my-2\">\r\n                                                                        <div class=\"col-8\">\r\n                                                                            <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n                                                                                {{\r\n                                                                                original.tempId\r\n                                                                                }}\r\n                                                                                <span\r\n                                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                        <rect y=\"0.5\" width=\"10\"\r\n                                                                                            height=\"10\" rx=\"5\"\r\n                                                                                            fill=\"#D1FADF\" />\r\n                                                                                        <path fill-rule=\"evenodd\"\r\n                                                                                            clip-rule=\"evenodd\"\r\n                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                            fill=\"#12B76A\" />\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                                <span\r\n                                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                        <g\r\n                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                            <path\r\n                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                            <path\r\n                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                stroke=\"#D92D20\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <clipPath\r\n                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                <rect width=\"12\"\r\n                                                                                                    height=\"12\"\r\n                                                                                                    fill=\"white\"\r\n                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                            </clipPath>\r\n                                                                                        </defs>\r\n                                                                                    </svg></span>\r\n                                                                            </div>\r\n                                                                            <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                                getFormattedEntryTime(original?.entryTime)\r\n                                                                                }}</div>\r\n                                                                        </div>\r\n                                                                        <div class=\"col-4\">\r\n                                                                            <span\r\n                                                                                *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"37\" height=\"37\"\r\n                                                                                    viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                                    <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                                        fill=\"#D1FADF\" />\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                            stroke=\"#039855\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_486_94051\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\r\n                                                                                                fill=\"white\"\r\n                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg>\r\n                                                                            </span>\r\n                                                                            <span\r\n                                                                                *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"37\" height=\"37\"\r\n                                                                                    viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                                    <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_486_94090\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\r\n                                                                                                fill=\"white\"\r\n                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg></span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                            <div class=\"card-footer py-5\">\r\n                                                <div class=\"comments-accordion\">\r\n                                                    <!-- Accordion Header -->\r\n                                                    <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                                        <div\r\n                                                            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 }}\r\n                                                                    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\"\r\n                                                                    height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                                    <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n                                                                        stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                        stroke-linejoin=\"round\" />\r\n                                                                </svg>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                    <!-- Accordion Content -->\r\n                                                    <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                        <!-- loop each block: tagging / review / approve -->\r\n                                                        <ng-container *ngFor=\"let block of activityData1\">\r\n\r\n                                                            <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n                                                            <ng-container *ngIf=\"block.type === 'tagging'\">\r\n                                                                <div *ngFor=\"let c of block.comments\"\r\n                                                                    class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                    <!-- avatar -->\r\n                                                                    <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                        {{ getInitialsFromEmail(c.createdByEmail) }}\r\n                                                                    </div>\r\n\r\n                                                                    <!-- content -->\r\n                                                                    <div>\r\n                                                                        <div class=\"fw-semibold\">\r\n                                                                            {{ c.createdByEmail }}\r\n                                                                        </div>\r\n\r\n                                                                        <div class=\"text-muted small\"\r\n                                                                            *ngIf=\"c.createdAt\">\r\n                                                                            {{ c.createdAt | date:'hh:mm:ss a - dd MMM\r\n                                                                            yyyy' }}\r\n                                                                        </div>\r\n\r\n                                                                        <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                                                                            {{ c.message }}\r\n                                                                        </p>\r\n\r\n                                                                        <!-- single image card -->\r\n                                                                        <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                                            <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n                                                                                <div class=\"tango-image\"\r\n                                                                                    [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n                                                                                </div>\r\n\r\n                                                                                <div class=\"tango-meta small\">\r\n                                                                                    <div>Tango ID: {{ c.tempId }}</div>\r\n                                                                                    <div class=\"text-muted\">Entry time:\r\n                                                                                        {{ c.entryTime }}</div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                <div *ngFor=\"let c of block.comments\"\r\n                                                                    class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                    <!-- avatar -->\r\n                                                                    <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                        {{ getInitialsFromEmail(c.createdByEmail) }}\r\n                                                                    </div>\r\n\r\n                                                                    <!-- content -->\r\n                                                                    <div class=\"w-100\">\r\n                                                                        <div class=\"fw-semibold\">\r\n                                                                            {{ c.createdByEmail }}\r\n                                                                        </div>\r\n\r\n                                                                        <div class=\"text-muted small\"\r\n                                                                            *ngIf=\"c.createdAt\">\r\n                                                                            {{ c.createdAt | date:'hh:mm:ss a - dd MMM\r\n                                                                            yyyy' }}\r\n                                                                        </div>\r\n\r\n                                                                        <!-- main review/approve message -->\r\n                                                                        <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                                                                            {{ c.message }}\r\n                                                                        </p>\r\n\r\n\r\n\r\n                                                                        <!-- image list + +N View all -->\r\n                                                                        <div class=\"d-flex gap-2 flex-wrap\"\r\n                                                                            *ngIf=\"c.taggedImages?.length\">\r\n\r\n                                                                            <!-- first 3 images -->\r\n                                                                            <div\r\n                                                                                *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                                                                                <ng-container *ngIf=\"i < 3\">\r\n                                                                                    <div class=\"tango-card\">\r\n                                                                                        <div class=\"tango-image\"\r\n                                                                                            [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n                                                                                        </div>\r\n\r\n                                                                                        <div class=\"tango-meta small\">\r\n                                                                                            <div>\r\n                                                                                                Tango ID: {{ img.tempId\r\n                                                                                                }}\r\n                                                                                                <span\r\n                                                                                                    *ngIf=\"c.status === 'approved'\"\r\n                                                                                                    class=\"status-dot status-approve\"></span>\r\n                                                                                                <span\r\n                                                                                                    *ngIf=\"c.status === 'rejected'\"\r\n                                                                                                    class=\"status-dot status-reject\"></span>\r\n                                                                                            </div>\r\n                                                                                            <div class=\"text-muted\">\r\n                                                                                                Entry time: {{\r\n                                                                                                img.entryTime }}\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n\r\n                                                                            <!-- +N View all card -->\r\n                                                                            <div class=\"tango-card more-card text-center\"\r\n                                                                                *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                (click)=\"openImagesPopup(c)\">\r\n                                                                                <div class=\"more-overlay\"></div>\r\n\r\n                                                                                <div\r\n                                                                                    class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                    <div class=\"more-text fw-semibold\">\r\n                                                                                        +{{ c.taggedImages.length - 3 }}\r\n                                                                                    </div>\r\n                                                                                    <div\r\n                                                                                        class=\"text-primary text-decoration-underline small\">\r\n                                                                                        View all\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                        </ng-container>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </section>\r\n                                </ng-container>\r\n\r\n\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </section>\r\n                <div *ngIf=\"footfallLoading\" class=\"card mt-5\">\r\n                    <div class=\"card-body h-500px\">\r\n                        <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"footfallNoData\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length\r\n                ? this.overallSelectedIds?.length : this.popupValue ?\r\n                this.popupValue:'--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n            <!-- Count Box -->\r\n            <div *ngIf=\"selectedCategories?.length === 1\" class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                Re-Assign Ticket\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                Transfer the ticket to another user\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n            <div class=\"row w-100 my-3\">\r\n                <div class=\"col-md-12 mb-4\">\r\n                    <label class=\"label mb-2\">Choose User</label>\r\n                    <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n                        (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n                </div>\r\n            </div>\r\n            `\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancelassign()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n                    Re-Assign\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n            <h5 class=\"modal-title mb-2 m-0\">{{ previewTitle }}</h5>\r\n\r\n            <!-- Close Button -->\r\n            <button type=\"button\" class=\"btn-close fs-4\" aria-label=\"Close\" (click)=\"model.close()\">\r\n\r\n            </button>\r\n\r\n        </div>\r\n\r\n        <div class=\"w-100 position-relative mb-4\">\r\n\r\n            <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n                (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n                    <path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n            <div class=\"row my-2\">\r\n                <div class=\"col-10\">\r\n                    <div class=\"desc-title ms-2 my-2\">\r\n                        Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\" class=\"ms-2\"><svg\r\n                                style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                    fill=\"#12B76A\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'rejected'\" class=\"ms-2\"><svg\r\n                                style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                    <path\r\n                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        fill=\"#FEE4E2\" />\r\n                                    <path\r\n                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_1428_59484\">\r\n                                        <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(0.599609 0.5)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>\r\n\r\n                    </div>\r\n\r\n                    <div class=\"desc-value ms-2\">Entry Time: {{\r\n                        getFormattedEntryTime(currentPreviewItem.entryTime) }}</div>\r\n                </div>\r\n                <div class=\"col-2 mt-2 text-end\">\r\n                    <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                            <g clip-path=\"url(#clip0_486_94051)\">\r\n                                <path\r\n                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                    stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_486_94051\">\r\n                                    <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                    <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'rejected'\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                            <g clip-path=\"url(#clip0_486_94090)\">\r\n                                <path\r\n                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                    stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_486_94090\">\r\n                                    <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg></span>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- 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 me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                [disabled]=\"previewList.length <= 1\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n                    <path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </button>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n            <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected',currentPreviewItem)\">\r\n\r\n                {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                }}</button>\r\n            <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved',currentPreviewItem)\">\r\n\r\n                {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                'Accept' }}</button>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n    <div class=\"h-auto p-10\">\r\n        <div class=\"card-header border-0\">\r\n            <div class=\"card-title\">Start audit</div>\r\n            <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n        </div>\r\n        <div class=\"row my-3\">\r\n            <div class=\"col-md-7 mb-4\">\r\n                <label class=\"label\">Store</label>\r\n                <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n                    (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n            </div>\r\n            <div class=\"col-md-5 mt-7\">\r\n\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                    </span>\r\n                    <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n                        ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n                        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                        autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                        (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-3\" *ngIf=\"footfallcount>0\">\r\n            <div>{{footfallcount}}</div>\r\n            <div class=\"mt-2\">Total footfall</div>\r\n        </div>\r\n        <div class=\"card-body mt-5\">\r\n            <div class=\"w-100 d-flex mt-5\">\r\n\r\n                <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button [disabled]=\"disableAudit&&footfallcount>0\" class=\"btn btn-primary w-50 ms-2\"\r\n                    (click)=\"modal.close('isConfirmed')\">start</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n    <div class=\"images-modal\">\r\n        <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n            <div>\r\n                <h6 class=\"mb-1\">All Images</h6>\r\n\r\n                <!-- email -->\r\n                <div class=\"small fw-semibold\">\r\n                    {{ selectedComment?.createdByEmail }}\r\n                </div>\r\n\r\n                <!-- time -->\r\n                <div class=\"small text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n                    {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n                </div>\r\n\r\n                <!-- optional comment text under time -->\r\n                <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n                    {{ selectedComment?.message }}\r\n                </p>\r\n            </div>\r\n\r\n            <button type=\"button\" class=\"btn-close ms-3\" (click)=\"closeImagesPopup()\">\r\n            </button>\r\n        </div>\r\n\r\n\r\n        <div class=\"modal-body d-flex flex-wrap gap-3\">\r\n            <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card\">\r\n                <div class=\"tango-image\" [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                </div>\r\n                <div class=\"tango-meta small\">\r\n                    <div>\r\n                        Tango ID: {{ img.tempId }}\r\n\r\n                        <!-- status dots -->\r\n                        <span *ngIf=\"img.status === 'approved'\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                    fill=\"#12B76A\" />\r\n                            </svg></span>\r\n\r\n                        <span *ngIf=\"img.status === 'rejected'\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                    <path\r\n                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        fill=\"#FEE4E2\" />\r\n                                    <path\r\n                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_1428_59484\">\r\n                                        <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(0.599609 0.5)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>\r\n                    </div>\r\n\r\n                    <div class=\"text-muted\">\r\n                        Entry time: {{ img.entryTime }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", 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}.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}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:900px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}\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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i10.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "component", type: CustomSelectComponent, selector: "team-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "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 *ngIf=\"usersDetails?.userType === 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\">\r\n                    Tickets\r\n                </a>\r\n            </li>\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <!-- Approver tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n                <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n                    Approver\r\n                </a>\r\n            </li>\r\n\r\n            <!-- Reviewer tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n                <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n                    Reviewer\r\n                </a>\r\n            </li>\r\n        </ul>\r\n\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"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\" *ngIf=\"tangoType==='store'\"><span *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below 85% </span><span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\r\n                    {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search by store\"\r\n                            autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\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                        <button\r\n                            class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n                            *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n                                <button *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n                                     (click)=\"getMultipleTicketClose()\">\r\n                                     Close Ticket\r\n                                 </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\" *ngIf=\"!loading && !noData\">\r\n               <table class=\"table custom-table bottom-border text-nowrap\">\r\n  <thead>\r\n    <tr>\r\n      <!-- NEW: checkbox column for approver only -->\r\n      <th *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n        <input\r\n          type=\"checkbox\"\r\n          [checked]=\"areAllSelectableRowsSelected()\"\r\n          (change)=\"toggleSelectAllRows($event)\"\r\n        />\r\n      </th>\r\n\r\n      <th\r\n        *ngFor=\"let col of tableColumns\"\r\n        [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n        (click)=\"col.sortable && col.type !== 'store' && onSort(col.key)\"\r\n      >\r\n        {{ col.label }}\r\n\r\n        <!-- Sorting Icon -->\r\n        <svg\r\n          *ngIf=\"col.sortable && col.type !== 'store'\"\r\n          [ngClass]=\"sortedColumn === col.key && sortDirection === 1 ? 'rotate' : ''\"\r\n          width=\"16\"\r\n          height=\"16\"\r\n          viewBox=\"0 0 16 16\"\r\n          fill=\"none\"\r\n        >\r\n          <path\r\n            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\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n\r\n  <tbody>\r\n    <tr *ngFor=\"let row of footfallListData\">\r\n      <!-- NEW: per-row checkbox (approver only) -->\r\n      <td *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n        <input \r\n          type=\"checkbox\"\r\n          [disabled]=\"!isRowSelectable(row)\"     \r\n          [checked]=\"isRowSelected(row)\"\r\n          [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n          (change)=\"toggleRowSelection(row, $event)\"\r\n        />\r\n      </td>\r\n\r\n      <td *ngFor=\"let col of tableColumns\">\r\n        <!-- Store + ticket clickable -->\r\n        <ng-container *ngIf=\"col.type === 'store'\">\r\n          <div\r\n            class=\"text-primary ellipsis-underline\"\r\n            (click)=\"ticketView(row)\"\r\n          >\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\r\n          class=\"pt-5\"\r\n          *ngIf=\"col.type === 'date' || col.type === 'ticketRaised'\"\r\n        >\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\r\n            class=\"badge mx-2\"\r\n            [ngClass]=\"getStatusBadgeClass(row[col.key])\"\r\n          >\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      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n                <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                    [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n                    (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"loading\" class=\"card mt-5\">\r\n            <div class=\"card-body h-500px\">\r\n                <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"noData\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12 mb-3\">\r\n                    <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_d_887_4505)\">\r\n                                <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feOffset dy=\"1\" />\r\n                                    <feGaussianBlur stdDeviation=\"1\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_887_4505\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg></span><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div class=\"col-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                        </div>\r\n                        <div class=\"text-end text-nowrp ms-3 mt-2\">\r\n                            <button *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                        (click)=\"getMultipleTicketClose()\">\r\n                                        Close Ticket\r\n                                    </button>\r\n                        </div>\r\n                     \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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" type=\"checkbox\" class=\"me-2\" [checked]=\"allSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select <span *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all {{ storeCount }}</span> stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span 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 *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\" type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n                                        (change)=\"toggleStoreSelection(store)\" />\r\n\r\n                                    <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" 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                        \r\n                        <span *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || getHeaderStatus() === 'Open')\">\r\n     \r\n     <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n         Start Review\r\n        </button>\r\n    </span>\r\n    <section *ngIf=\"ticketData?.ReviewedBy === usersDetails?.email \r\n    || ticketData?.approvedBy === usersDetails?.email\">\r\n     \r\n                             <!-- Close Ticket -->\r\n                             <span *ngIf=\"ticketData?.status === 'In-Progress'\">\r\n     \r\n                                 <button *ngIf=\"closeBtn\" [disabled]=\"closeDisabled\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                     (click)=\"stopReview()\">\r\n                                     Close Ticket\r\n                                 </button>\r\n                             </span>\r\n                         </section>\r\n\r\n\r\n                        <span\r\n                            *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||usersDetails?.userType ==='tango'&&ticketData?.type === 'internal'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n                            <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n                                <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <path\r\n                                            d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n                                    <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n                                        Re-Assign Ticket\r\n                                    </div>\r\n                                    <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n                                        Export\r\n                                    </div> -->\r\n                                </div>\r\n                            </span>\r\n                        </span>\r\n                    </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\">{{footfallTicketsData[0]?._source?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{footfallTicketsData[0]?._source?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\"> <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\">06 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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91902)\">\r\n                                            <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                                            <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91902\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span (click)=\"openArrow()\">\r\n                                    <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\"\r\n                                        fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n                        \r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                        \r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n                        \r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span class=\"footfall-label ms-3\">Actual\r\n                                                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 *ngIf=\"mapping?.status === 'Closed' \r\n                                                                   && ['tagging','review','approve','tangoreview'].includes(mapping?.type)\">\r\n                        \r\n                                            <div class=\"timeline\"></div>\r\n                                            <div class=\"user-info ms-4\">\r\n                        \r\n                                                <div class=\"avatar avatar-text light-primary p-3\">\r\n                                                    {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n                                                    source?.createdByEmail) }}\r\n                                                </div>\r\n                        \r\n                                                <div>\r\n                                                    <div class=\"user-name\">\r\n                                                        <span *ngIf=\"mapping?.type === 'tagging'\">\r\n                                                            Ticket created by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'review'\">\r\n                                                            Reviewed by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'approve'\">\r\n                                                            Approved by\r\n                                                        </span>\r\n                        \r\n                                                        <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n                                                            Tango\r\n                                                        </span>\r\n                                                    </div>\r\n                        \r\n                                                    <div class=\"user-email\">\r\n                                                        {{ mapping?.createdByEmail || source?.createdByEmail }} {{(mapping?.createdAt ||\r\n                                                        source?.createdAt)\r\n                                                        | date:'HH:mm:ss \u2013dd MMM yyyy' }}\r\n                                                    </div>\r\n                                                </div>\r\n                        \r\n                                            </div>\r\n                        \r\n                        \r\n                                            <div class=\"timeline\"></div>\r\n                        \r\n                                            <!-- Show revision card only when NOT closed & type is tagging -->\r\n                                            <div class=\"revision-card\"\r\n                                                [ngClass]=\"{'revision-card-approve-closed':mapping?.status === 'Closed' && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n                                                <div class=\"values-row\">\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ mapping?.revicedFootfall === null ? '--' :\r\n                                                            mapping?.revicedFootfall }}\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold\">Revised Footfall</div>\r\n                                                    </div>\r\n                        \r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value accuracy down\">\r\n                                                            {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n                                                            <span class=\"ms-1\">\r\n                                                                <!-- arrow svg -->\r\n                                                            </span>\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n                                                    </div>\r\n                        \r\n                                                    <div class=\"timeline-new my-2\"></div>\r\n                        \r\n                                                    <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ item?.value ?? '--' }}\r\n                                                        </div>\r\n                                                        <div class=\"label\">\r\n                                                            {{ item?.name }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n                        \r\n                        \r\n                                        </ng-container>\r\n                        \r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\" [class.rotate-180]=\"showRevisedDetails\"><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                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                                        fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                        \r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n<ng-container *ngFor=\"let type of revopsTypes\">\r\n<section *ngIf=\"type ==='duplicate'\">\r\n\r\n    <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n        <!-- Header Section -->\r\n        <div class=\"card-header min-h-25px pt-3\">\r\n            <h3 class=\"text-lg font-semibold mb-4\">\r\n                <span class=\"me-2\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                        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\r\n                <!-- Body Section -->\r\n                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                    <!-- Body Section -->\r\n                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                <div class=\"my-4\">\r\n                                    <!-- Original Image -->\r\n                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                    </div>\r\n                                    <div class=\"row px-5\">\r\n                                        <div class=\"col-md-4 relative\">\r\n                                            <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                    class=\"w-100 rounded border\" />\r\n                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                    original.tempId\r\n                                                    }}</div>\r\n                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n\r\n                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                    <div class=\"row px-5\">\r\n                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                            <input type=\"checkbox\" [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\" [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                <!-- Checkbox -->\r\n                                                <div *ngIf=\"isCheckboxEnable\">\r\n                                                    <input type=\"checkbox\" *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                        style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                        [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                        (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                        class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                    <span class=\"position-absolute absolute\" \r\n                                                        *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                        (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n    <svg   xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n        viewBox=\"0 0 19 19\" fill=\"none\">\r\n        <g filter=\"url(#filter0_d_2023_13718)\">\r\n            <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\"\r\n                rx=\"2\" fill=\"white\" />\r\n            <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                stroke-width=\"0.555556\" />\r\n            <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                stroke-width=\"0.927778\" 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\" 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\" 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\" 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\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(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                    class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                <!-- Duplicate Info -->\r\n                                                <div class=\"row my-2\">\r\n                                                    <div class=\"col-9\">\r\n                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                            Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                            <span\r\n                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n\r\n                                                        </div>\r\n\r\n                                                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                            getFormattedEntryTime(duplicate.entryTime)\r\n                                                            }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-3\">\r\n                                                        <span\r\n                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                                                <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                                    <path\r\n                                                                        d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                        stroke=\"#039855\" stroke-linecap=\"round\"\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\" 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\" 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\" 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                        <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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                width=\"16\" height=\"16\" 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        \r\n          <!-- Loop each block: tagging / review / approve -->\r\n          <ng-container *ngFor=\"let block of activityData\">\r\n        \r\n            <!-- Loop inside comments -->\r\n            <div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n        \r\n              <!-- avatar -->\r\n               <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                   {{ getInitialsFromEmail(c.createdByEmail) }}\r\n               </div>\r\n              <div class=\"w-100\">\r\n        \r\n                <!-- email -->\r\n                <div class=\"fw-semibold\">\r\n                  {{ c.createdByEmail }}\r\n                </div>\r\n                 <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n            {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n          </div>\r\n       \r\n                <!-- message text -->\r\n                <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                  {{ c.message }}\r\n                </p>\r\n        \r\n                <!-- Review / Approve only -->\r\n                <ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                  <!-- Tagged images -->\r\n                  <div class=\"d-flex gap-2 flex-wrap\">\r\n        \r\n                    <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                      \r\n                      <!-- Show only first 4 -->\r\n                      <ng-container *ngIf=\"i < 3\">\r\n                        <div class=\"tango-card\">\r\n                          <div class=\"tango-image\"\r\n                               [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\"></div>\r\n        \r\n                          <div class=\"tango-meta small\">\r\n                            <div>\r\n                              Tango ID: {{ img.tempId }}\r\n        \r\n                              <!-- status dots -->\r\n                              <span *ngIf=\"c.status === 'approved'\"><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                            <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n        \r\n                              <span *ngIf=\"c.status === 'rejected'\"\r\n                                    ><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                            <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                <path\r\n                                                                                    d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    fill=\"#FEE4E2\" />\r\n                                                                                <path\r\n                                                                                    d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                    stroke-linejoin=\"round\" />\r\n                                                                            </g>\r\n                                                                            <defs>\r\n                                                                                <clipPath id=\"clip0_1428_59484\">\r\n                                                                                    <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                        transform=\"translate(0.599609 0.5)\" />\r\n                                                                                </clipPath>\r\n                                                                            </defs>\r\n                                                                        </svg></span>\r\n                            </div>\r\n        \r\n                            <div class=\"text-muted\">\r\n                              Entry time: {{ img.entryTime }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </ng-container>\r\n        \r\n                    </div>\r\n        \r\n                    <!-- +N more -->\r\n        <div\r\n          class=\"tango-card more-card text-center\"\r\n          *ngIf=\"c.taggedImages.length > 3\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n          (click)=\"openImagesPopup(c)\"\r\n        >\r\n          <div class=\"more-overlay\"></div>\r\n        \r\n          <!-- vertical container -->\r\n          <div class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n            <div class=\"more-text fw-semibold\">+{{ c.taggedImages.length - 3 }}</div>\r\n            <div class=\"text-primary text-dark text-decoration-underline small\">\r\n              View all\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        \r\n        \r\n                  </div>\r\n        \r\n                </ng-container>\r\n        \r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        \r\n        \r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                    \r\n                </ng-container>\r\n                <!-- Status Icons -->\r\n\r\n\r\n            </div>\r\n</section>\r\n<section *ngIf=\"type !=='duplicate'\">\r\n    <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n       <div class=\"card-header min-h-25px pt-3\">\r\n           <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                       width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                       <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                           d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                           fill=\"#475467\" />\r\n                   </svg></span> {{type}}\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[type]\"\r\n    (change)=\"onSelectAll(type, $event)\">\r\n           <label>Select All</label>\r\n       </div>\r\n       <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n           <!-- Body Section -->\r\n           <div *ngIf=\"mapping?.type ===viewMode\" 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;let i=index\">\r\n                       <div *ngIf=\"original?.revopsType ===type\"\r\n                           class=\"col-md-3 mb-3 position-relative\">\r\n                           <div class=\"pb-3 h-100 rounded-3 position-relative\" [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[type] || []).includes(original?.tempId)\"\r\n                                       (change)=\"onImageCheckboxChange(type, original.tempId)\" />\r\n                                   <span class=\"position-absolute absolute\" \r\n                                       *ngIf=\"isLockedByReviewer(original)\"\r\n                                       (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                       <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n                                           viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                           <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                               <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\"\r\n                                                   fill=\"white\" />\r\n                                               <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\"\r\n                                                   rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                               <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                                                   stroke-width=\"0.927778\" 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\" 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\" 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=\"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\" in2=\"BackgroundImageFix\"\r\n                                                       result=\"effect1_dropShadow_2023_13718\" />\r\n                                                   <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                       in2=\"effect1_dropShadow_2023_13718\" result=\"shape\" />\r\n                                               </filter>\r\n                                           </defs>\r\n                                       </svg>\r\n                                   </span>\r\n                               </div>\r\n\r\n\r\n                               <img [src]=\"imageUrl + original?.filePath\" alt=\"\" (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                   class=\"w-100 rounded border cursor-pointer\" />\r\n                               <div class=\"row my-2\">\r\n                                   <div class=\"col-9\">\r\n                                       <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                           original.tempId\r\n                                           }}\r\n                                           <span *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                               class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                   <rect y=\"0.5\" width=\"10\" 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                   <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                       <path\r\n                                                           d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           fill=\"#FEE4E2\" />\r\n                                                       <path\r\n                                                           d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                           stroke-linejoin=\"round\" />\r\n                                                   </g>\r\n                                                   <defs>\r\n                                                       <clipPath id=\"clip0_1428_59484\">\r\n                                                           <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                               transform=\"translate(0.599609 0.5)\" />\r\n                                                       </clipPath>\r\n                                                   </defs>\r\n                                               </svg></span>\r\n                                       </div>\r\n                                       <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                           getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                   </div>\r\n                                   <div class=\"col-3 ms-3\">\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                               <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                   <path\r\n                                                       d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                       stroke=\"#039855\" stroke-linecap=\"round\"\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\" fill=\"white\"\r\n                                                           transform=\"translate(6 6)\" />\r\n                                                   </clipPath>\r\n                                               </defs>\r\n                                           </svg>\r\n                                       </span>\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                               xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                                               <g clip-path=\"url(#clip0_486_94090)\">\r\n                                                   <path\r\n                                                       d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                       stroke=\"#D92D20\" stroke-linecap=\"round\"\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\" 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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                               width=\"16\" height=\"16\" 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\r\n<!-- loop each block: tagging / review / approve -->\r\n<ng-container *ngFor=\"let block of activityData1\">\r\n\r\n<!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n<ng-container *ngIf=\"block.type === 'tagging'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div>\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n   <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n     <div class=\"tango-image\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n     </div>\r\n\r\n     <div class=\"tango-meta small\">\r\n       <div>Tango ID: {{ c.tempId }}</div>\r\n       <div class=\"text-muted\">Entry time: {{ c.entryTime }}</div>\r\n     </div>\r\n   </div>\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n<!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n<ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n \r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex gap-2 flex-wrap\" *ngIf=\"c.taggedImages?.length\">\r\n\r\n   <!-- first 3 images -->\r\n   <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n     <ng-container *ngIf=\"i < 3\">\r\n       <div class=\"tango-card\">\r\n         <div class=\"tango-image\"\r\n              [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n         </div>\r\n\r\n         <div class=\"tango-meta small\">\r\n           <div>\r\n             Tango ID: {{ img.tempId }}\r\n             <span *ngIf=\"c.status === 'approved'\"\r\n                   class=\"status-dot status-approve\"></span>\r\n             <span *ngIf=\"c.status === 'rejected'\"\r\n                   class=\"status-dot status-reject\"></span>\r\n           </div>\r\n           <div class=\"text-muted\">\r\n             Entry time: {{ img.entryTime }}\r\n           </div>\r\n         </div>\r\n       </div>\r\n     </ng-container>\r\n   </div>\r\n\r\n   <!-- +N View all card -->\r\n   <div\r\n     class=\"tango-card more-card text-center\"\r\n     *ngIf=\"c.taggedImages.length > 3\"\r\n     [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n     (click)=\"openImagesPopup(c)\"\r\n   >\r\n     <div class=\"more-overlay\"></div>\r\n\r\n     <div class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n       <div class=\"more-text fw-semibold\">\r\n         +{{ c.taggedImages.length - 3 }}\r\n       </div>\r\n       <div class=\"text-primary text-decoration-underline small\">\r\n         View all\r\n       </div>\r\n     </div>\r\n   </div>\r\n\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n</ng-container>\r\n</div>\r\n\r\n           </div>\r\n       </div>\r\n   </div>\r\n</section>\r\n</ng-container>\r\n         \r\n\r\n\r\n        </div>\r\n    </ng-container>\r\n                                            </div>\r\n                        \r\n                        \r\n                                            <div *ngIf=\"showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                        \r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                                        fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                        \r\n                        \r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['tangoreview'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\" [class.rotate-180]=\"showRevisedDetails\"><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                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n                        \r\n                                            </div>\r\n                        \r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n<ng-container *ngFor=\"let type of revopsTypes\">\r\n<section *ngIf=\"type ==='duplicate'\">\r\n\r\n    <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n        <!-- Header Section -->\r\n        <div class=\"card-header min-h-25px pt-3\">\r\n            <h3 class=\"text-lg font-semibold mb-4\">\r\n                <span class=\"me-2\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                        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\r\n                <!-- Body Section -->\r\n                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                    <!-- Body Section -->\r\n                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                <div class=\"my-4\">\r\n                                    <!-- Original Image -->\r\n                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                    </div>\r\n                                    <div class=\"row px-5\">\r\n                                        <div class=\"col-md-4 relative\">\r\n                                            <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                    class=\"w-100 rounded border\" />\r\n                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                    original.tempId\r\n                                                    }}</div>\r\n                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n\r\n                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                    <div class=\"row px-5\">\r\n                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                            <input type=\"checkbox\" [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\" [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                <!-- Checkbox -->\r\n                                                <div *ngIf=\"isCheckboxEnable\">\r\n                                                    <input type=\"checkbox\" *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                        style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                        [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                        (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                        class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                    <span class=\"position-absolute absolute\" \r\n                                                        *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                        (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n    <svg   xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n        viewBox=\"0 0 19 19\" fill=\"none\">\r\n        <g filter=\"url(#filter0_d_2023_13718)\">\r\n            <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\"\r\n                rx=\"2\" fill=\"white\" />\r\n            <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                stroke-width=\"0.555556\" />\r\n            <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                stroke-width=\"0.927778\" 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\" 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\" 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\" 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\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(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                    class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                <!-- Duplicate Info -->\r\n                                                <div class=\"row my-2\">\r\n                                                    <div class=\"col-9\">\r\n                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                            Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                            <span\r\n                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n\r\n                                                        </div>\r\n\r\n                                                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                            getFormattedEntryTime(duplicate.entryTime)\r\n                                                            }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-3\">\r\n                                                        <span\r\n                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                                                <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                                    <path\r\n                                                                        d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                        stroke=\"#039855\" stroke-linecap=\"round\"\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\" 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\" 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\" 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                        <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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                width=\"16\" height=\"16\" 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        \r\n          <!-- Loop each block: tagging / review / approve -->\r\n          <ng-container *ngFor=\"let block of activityData\">\r\n        \r\n            <!-- Loop inside comments -->\r\n            <div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n        \r\n              <!-- avatar -->\r\n               <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                   {{ getInitialsFromEmail(c.createdByEmail) }}\r\n               </div>\r\n              <div class=\"w-100\">\r\n        \r\n                <!-- email -->\r\n                <div class=\"fw-semibold\">\r\n                  {{ c.createdByEmail }}\r\n                </div>\r\n                 <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n            {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n          </div>\r\n       \r\n                <!-- message text -->\r\n                <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                  {{ c.message }}\r\n                </p>\r\n        \r\n                <!-- Review / Approve only -->\r\n                <ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                  <!-- Tagged images -->\r\n                  <div class=\"d-flex gap-2 flex-wrap\">\r\n        \r\n                    <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                      \r\n                      <!-- Show only first 4 -->\r\n                      <ng-container *ngIf=\"i < 3\">\r\n                        <div class=\"tango-card\">\r\n                          <div class=\"tango-image\"\r\n                               [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\"></div>\r\n        \r\n                          <div class=\"tango-meta small\">\r\n                            <div>\r\n                              Tango ID: {{ img.tempId }}\r\n        \r\n                              <!-- status dots -->\r\n                              <span *ngIf=\"c.status === 'approved'\"><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                            <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n        \r\n                              <span *ngIf=\"c.status === 'rejected'\"\r\n                                    ><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                            <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                <path\r\n                                                                                    d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    fill=\"#FEE4E2\" />\r\n                                                                                <path\r\n                                                                                    d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                    stroke-linejoin=\"round\" />\r\n                                                                            </g>\r\n                                                                            <defs>\r\n                                                                                <clipPath id=\"clip0_1428_59484\">\r\n                                                                                    <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                        transform=\"translate(0.599609 0.5)\" />\r\n                                                                                </clipPath>\r\n                                                                            </defs>\r\n                                                                        </svg></span>\r\n                            </div>\r\n        \r\n                            <div class=\"text-muted\">\r\n                              Entry time: {{ img.entryTime }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </ng-container>\r\n        \r\n                    </div>\r\n        \r\n                    <!-- +N more -->\r\n        <div\r\n          class=\"tango-card more-card text-center\"\r\n          *ngIf=\"c.taggedImages.length > 3\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n          (click)=\"openImagesPopup(c)\"\r\n        >\r\n          <div class=\"more-overlay\"></div>\r\n        \r\n          <!-- vertical container -->\r\n          <div class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n            <div class=\"more-text fw-semibold\">+{{ c.taggedImages.length - 3 }}</div>\r\n            <div class=\"text-primary text-dark text-decoration-underline small\">\r\n              View all\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        \r\n        \r\n                  </div>\r\n        \r\n                </ng-container>\r\n        \r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        \r\n        \r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                    \r\n                </ng-container>\r\n                <!-- Status Icons -->\r\n\r\n\r\n            </div>\r\n</section>\r\n<section *ngIf=\"type !=='duplicate'\">\r\n    <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n       <div class=\"card-header min-h-25px pt-3\">\r\n           <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                       width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                       <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                           d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                           fill=\"#475467\" />\r\n                   </svg></span> {{type}}\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[type]\"\r\n    (change)=\"onSelectAll(type, $event)\">\r\n           <label>Select All</label>\r\n       </div>\r\n       <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n           <!-- Body Section -->\r\n           <div *ngIf=\"mapping?.type ===viewMode\" 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;let i=index\">\r\n                       <div *ngIf=\"original?.revopsType ===type\"\r\n                           class=\"col-md-3 mb-3 position-relative\">\r\n                           <div class=\"pb-3 h-100 rounded-3 position-relative\" [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[type] || []).includes(original?.tempId)\"\r\n                                       (change)=\"onImageCheckboxChange(type, original.tempId)\" />\r\n                                   <span class=\"position-absolute absolute\" \r\n                                       *ngIf=\"isLockedByReviewer(original)\"\r\n                                       (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                       <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n                                           viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                           <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                               <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\"\r\n                                                   fill=\"white\" />\r\n                                               <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\"\r\n                                                   rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                               <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                                                   stroke-width=\"0.927778\" 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\" 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\" 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=\"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\" in2=\"BackgroundImageFix\"\r\n                                                       result=\"effect1_dropShadow_2023_13718\" />\r\n                                                   <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                       in2=\"effect1_dropShadow_2023_13718\" result=\"shape\" />\r\n                                               </filter>\r\n                                           </defs>\r\n                                       </svg>\r\n                                   </span>\r\n                               </div>\r\n\r\n\r\n                               <img [src]=\"imageUrl + original?.filePath\" alt=\"\" (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                   class=\"w-100 rounded border cursor-pointer\" />\r\n                               <div class=\"row my-2\">\r\n                                   <div class=\"col-9\">\r\n                                       <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                           original.tempId\r\n                                           }}\r\n                                           <span *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                               class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                   <rect y=\"0.5\" width=\"10\" 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                   <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                       <path\r\n                                                           d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           fill=\"#FEE4E2\" />\r\n                                                       <path\r\n                                                           d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                           stroke-linejoin=\"round\" />\r\n                                                   </g>\r\n                                                   <defs>\r\n                                                       <clipPath id=\"clip0_1428_59484\">\r\n                                                           <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                               transform=\"translate(0.599609 0.5)\" />\r\n                                                       </clipPath>\r\n                                                   </defs>\r\n                                               </svg></span>\r\n                                       </div>\r\n                                       <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                           getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                   </div>\r\n                                   <div class=\"col-3 ms-3\">\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                               <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                   <path\r\n                                                       d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                       stroke=\"#039855\" stroke-linecap=\"round\"\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\" fill=\"white\"\r\n                                                           transform=\"translate(6 6)\" />\r\n                                                   </clipPath>\r\n                                               </defs>\r\n                                           </svg>\r\n                                       </span>\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                               xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                                               <g clip-path=\"url(#clip0_486_94090)\">\r\n                                                   <path\r\n                                                       d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                       stroke=\"#D92D20\" stroke-linecap=\"round\"\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\" 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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                               width=\"16\" height=\"16\" 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\r\n<!-- loop each block: tagging / review / approve -->\r\n<ng-container *ngFor=\"let block of activityData1\">\r\n\r\n<!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n<ng-container *ngIf=\"block.type === 'tagging'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div>\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n   <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n     <div class=\"tango-image\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n     </div>\r\n\r\n     <div class=\"tango-meta small\">\r\n       <div>Tango ID: {{ c.tempId }}</div>\r\n       <div class=\"text-muted\">Entry time: {{ c.entryTime }}</div>\r\n     </div>\r\n   </div>\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n<!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n<ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n \r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex gap-2 flex-wrap\" *ngIf=\"c.taggedImages?.length\">\r\n\r\n   <!-- first 3 images -->\r\n   <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n     <ng-container *ngIf=\"i < 3\">\r\n       <div class=\"tango-card\">\r\n         <div class=\"tango-image\"\r\n              [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n         </div>\r\n\r\n         <div class=\"tango-meta small\">\r\n           <div>\r\n             Tango ID: {{ img.tempId }}\r\n             <span *ngIf=\"c.status === 'approved'\"\r\n                   class=\"status-dot status-approve\"></span>\r\n             <span *ngIf=\"c.status === 'rejected'\"\r\n                   class=\"status-dot status-reject\"></span>\r\n           </div>\r\n           <div class=\"text-muted\">\r\n             Entry time: {{ img.entryTime }}\r\n           </div>\r\n         </div>\r\n       </div>\r\n     </ng-container>\r\n   </div>\r\n\r\n   <!-- +N View all card -->\r\n   <div\r\n     class=\"tango-card more-card text-center\"\r\n     *ngIf=\"c.taggedImages.length > 3\"\r\n     [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n     (click)=\"openImagesPopup(c)\"\r\n   >\r\n     <div class=\"more-overlay\"></div>\r\n\r\n     <div class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n       <div class=\"more-text fw-semibold\">\r\n         +{{ c.taggedImages.length - 3 }}\r\n       </div>\r\n       <div class=\"text-primary text-decoration-underline small\">\r\n         View all\r\n       </div>\r\n     </div>\r\n   </div>\r\n\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n</ng-container>\r\n</div>\r\n\r\n           </div>\r\n       </div>\r\n   </div>\r\n</section>\r\n</ng-container>\r\n         \r\n\r\n\r\n        </div>\r\n    </ng-container>\r\n                                            </div>\r\n                                            <div *ngIf=\"showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                        \r\n                                                <span class=\"chevron ms-3 cursor-pointer\">\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 d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                            stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n                        \r\n                        \r\n                                    </ng-container>\r\n                        \r\n                        \r\n                        \r\n                                    <!-- <div class=\"timeline\"></div> -->\r\n                        \r\n                                </div>\r\n                            </ng-container>\r\n                        </section>\r\n                        </div>\r\n\r\n                        </div>\r\n<div class=\"row\">\r\n    <div class=\"col-md-6 position-relative\">\r\n        <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n            <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\" [(ngModel)]=\"allSelected\"\r\n                (change)=\"overallSelect($event)\" /><span class=\"ms-12\"> Select\r\n                All</span>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n        <div class=\"row\">\r\n            <div class=\"col-md-4\">\r\n                <select class=\"form-select\" aria-placeholder=\"show all\">\r\n                    <option value=\"all\">Show all</option>\r\n                    <option value=\"accept\">Accept</option>\r\n                    <option value=\"reject\">Reject</option>\r\n                    <option value=\"pending\">Pending</option>\r\n                </select>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n                <button [disabled]=\"!overallSelectedIds?.length\" class=\"btn btn-outline bg-white w-100\"\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\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"!approverClosed\" class=\"bg-white\">\r\n    <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n        <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n<ng-container *ngFor=\"let type of revopsTypes\">\r\n<section *ngIf=\"type ==='duplicate'\">\r\n\r\n    <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n        <!-- Header Section -->\r\n        <div class=\"card-header min-h-25px pt-3\">\r\n            <h3 class=\"text-lg font-semibold mb-4\">\r\n                <span class=\"me-2\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n                        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\r\n                <!-- Body Section -->\r\n                <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                    <!-- Body Section -->\r\n                    <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                        <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                            <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                <div class=\"my-4\">\r\n                                    <!-- Original Image -->\r\n                                    <div class=\"duplicate-head px-5 my-3\">Original image\r\n                                    </div>\r\n                                    <div class=\"row px-5\">\r\n                                        <div class=\"col-md-4 relative\">\r\n                                            <div class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                    class=\"w-100 rounded border\" />\r\n                                                <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                                    original.tempId\r\n                                                    }}</div>\r\n                                                <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                    getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </div>\r\n\r\n\r\n                                    <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                    <div class=\"row px-5\">\r\n                                        <h5 class=\"duplicate-head my-3 fs-6\">Tagged Duplicates</h5>\r\n                                        <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                            <input type=\"checkbox\" [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\" [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                <!-- Checkbox -->\r\n                                                <div *ngIf=\"isCheckboxEnable\">\r\n                                                    <input type=\"checkbox\" *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                        style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                        [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                        (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                        class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                    <span class=\"position-absolute absolute\" \r\n                                                        *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                        (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n    <svg   xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n        viewBox=\"0 0 19 19\" fill=\"none\">\r\n        <g filter=\"url(#filter0_d_2023_13718)\">\r\n            <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\"\r\n                rx=\"2\" fill=\"white\" />\r\n            <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\"\r\n                height=\"15.4444\" rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                stroke-width=\"0.555556\" />\r\n            <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                stroke-width=\"0.927778\" 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\" 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\" 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\" 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\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(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                    class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                <!-- Duplicate Info -->\r\n                                                <div class=\"row my-2\">\r\n                                                    <div class=\"col-9\">\r\n                                                        <div class=\"desc-title ms-2 my-2\">\r\n                                                            Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                            <span\r\n                                                                *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" 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(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n\r\n                                                        </div>\r\n\r\n                                                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                            getFormattedEntryTime(duplicate.entryTime)\r\n                                                            }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                    <div class=\"col-3\">\r\n                                                        <span\r\n                                                            *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\"\r\n                                                                height=\"37\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                                                <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                                    <path\r\n                                                                        d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                        stroke=\"#039855\" stroke-linecap=\"round\"\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\" 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\" 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\" 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                        <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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                width=\"16\" height=\"16\" 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        \r\n          <!-- Loop each block: tagging / review / approve -->\r\n          <ng-container *ngFor=\"let block of activityData\">\r\n        \r\n            <!-- Loop inside comments -->\r\n            <div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n        \r\n              <!-- avatar -->\r\n               <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                   {{ getInitialsFromEmail(c.createdByEmail) }}\r\n               </div>\r\n              <div class=\"w-100\">\r\n        \r\n                <!-- email -->\r\n                <div class=\"fw-semibold\">\r\n                  {{ c.createdByEmail }}\r\n                </div>\r\n                 <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n            {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n          </div>\r\n       \r\n                <!-- message text -->\r\n                <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                  {{ c.message }}\r\n                </p>\r\n        \r\n                <!-- Review / Approve only -->\r\n                <ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                  <!-- Tagged images -->\r\n                  <div class=\"d-flex gap-2 flex-wrap\">\r\n        \r\n                    <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                      \r\n                      <!-- Show only first 4 -->\r\n                      <ng-container *ngIf=\"i < 3\">\r\n                        <div class=\"tango-card\">\r\n                          <div class=\"tango-image\"\r\n                               [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\"></div>\r\n        \r\n                          <div class=\"tango-meta small\">\r\n                            <div>\r\n                              Tango ID: {{ img.tempId }}\r\n        \r\n                              <!-- status dots -->\r\n                              <span *ngIf=\"c.status === 'approved'\"><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                            <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n        \r\n                              <span *ngIf=\"c.status === 'rejected'\"\r\n                                    ><svg style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                            <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                <path\r\n                                                                                    d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    fill=\"#FEE4E2\" />\r\n                                                                                <path\r\n                                                                                    d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                    stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                                    stroke-linejoin=\"round\" />\r\n                                                                            </g>\r\n                                                                            <defs>\r\n                                                                                <clipPath id=\"clip0_1428_59484\">\r\n                                                                                    <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                        transform=\"translate(0.599609 0.5)\" />\r\n                                                                                </clipPath>\r\n                                                                            </defs>\r\n                                                                        </svg></span>\r\n                            </div>\r\n        \r\n                            <div class=\"text-muted\">\r\n                              Entry time: {{ img.entryTime }}\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </ng-container>\r\n        \r\n                    </div>\r\n        \r\n                    <!-- +N more -->\r\n        <div\r\n          class=\"tango-card more-card text-center\"\r\n          *ngIf=\"c.taggedImages.length > 3\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n          (click)=\"openImagesPopup(c)\"\r\n        >\r\n          <div class=\"more-overlay\"></div>\r\n        \r\n          <!-- vertical container -->\r\n          <div class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n            <div class=\"more-text fw-semibold\">+{{ c.taggedImages.length - 3 }}</div>\r\n            <div class=\"text-primary text-dark text-decoration-underline small\">\r\n              View all\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        \r\n        \r\n                  </div>\r\n        \r\n                </ng-container>\r\n        \r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n        \r\n        \r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                    \r\n                </ng-container>\r\n                <!-- Status Icons -->\r\n\r\n\r\n            </div>\r\n</section>\r\n<section *ngIf=\"type !=='duplicate'\">\r\n    <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n       <div class=\"card-header min-h-25px pt-3\">\r\n           <div class=\"duplicate-head text-lg my-3\"><span class=\"me-2\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                       width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n                       <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                           d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                           fill=\"#475467\" />\r\n                   </svg></span> {{type}}\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[type]\"\r\n    (change)=\"onSelectAll(type, $event)\">\r\n           <label>Select All</label>\r\n       </div>\r\n       <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n           <!-- Body Section -->\r\n           <div *ngIf=\"mapping?.type ===viewMode\" 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;let i=index\">\r\n                       <div *ngIf=\"original?.revopsType ===type\"\r\n                           class=\"col-md-3 mb-3 position-relative\">\r\n                           <div class=\"pb-3 h-100 rounded-3 position-relative\" [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[type] || []).includes(original?.tempId)\"\r\n                                       (change)=\"onImageCheckboxChange(type, original.tempId)\" />\r\n                                   <span class=\"position-absolute absolute\" \r\n                                       *ngIf=\"isLockedByReviewer(original)\"\r\n                                       (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                       <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\"\r\n                                           viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                           <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                               <rect x=\"1.11133\" y=\"0.555664\" width=\"16\" height=\"16\" rx=\"2\"\r\n                                                   fill=\"white\" />\r\n                                               <rect x=\"1.38911\" y=\"0.833442\" width=\"15.4444\" height=\"15.4444\"\r\n                                                   rx=\"1.72222\" stroke=\"#D0D5DD\" stroke-width=\"0.555556\" />\r\n                                               <path d=\"M5.87109 8.55566H12.3526\" stroke=\"#344054\"\r\n                                                   stroke-width=\"0.927778\" 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\" 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\" 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=\"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\" in2=\"BackgroundImageFix\"\r\n                                                       result=\"effect1_dropShadow_2023_13718\" />\r\n                                                   <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                       in2=\"effect1_dropShadow_2023_13718\" result=\"shape\" />\r\n                                               </filter>\r\n                                           </defs>\r\n                                       </svg>\r\n                                   </span>\r\n                               </div>\r\n\r\n\r\n                               <img [src]=\"imageUrl + original?.filePath\" alt=\"\" (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                   class=\"w-100 rounded border cursor-pointer\" />\r\n                               <div class=\"row my-2\">\r\n                                   <div class=\"col-9\">\r\n                                       <div class=\"desc-title ms-2 my-2\">Tango ID: {{\r\n                                           original.tempId\r\n                                           }}\r\n                                           <span *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                               class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                   <rect y=\"0.5\" width=\"10\" 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\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                   <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                       <path\r\n                                                           d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           fill=\"#FEE4E2\" />\r\n                                                       <path\r\n                                                           d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                           stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                           stroke-linejoin=\"round\" />\r\n                                                   </g>\r\n                                                   <defs>\r\n                                                       <clipPath id=\"clip0_1428_59484\">\r\n                                                           <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                               transform=\"translate(0.599609 0.5)\" />\r\n                                                       </clipPath>\r\n                                                   </defs>\r\n                                               </svg></span>\r\n                                       </div>\r\n                                       <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                           getFormattedEntryTime(original?.entryTime) }}</div>\r\n                                   </div>\r\n                                   <div class=\"col-3 ms-3\">\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                           <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                                               <g clip-path=\"url(#clip0_486_94051)\">\r\n                                                   <path\r\n                                                       d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                       stroke=\"#039855\" stroke-linecap=\"round\"\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\" fill=\"white\"\r\n                                                           transform=\"translate(6 6)\" />\r\n                                                   </clipPath>\r\n                                               </defs>\r\n                                           </svg>\r\n                                       </span>\r\n                                       <span *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                               xmlns=\"http://www.w3.org/2000/svg\" width=\"37\" height=\"37\"\r\n                                               viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                               <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                                               <g clip-path=\"url(#clip0_486_94090)\">\r\n                                                   <path\r\n                                                       d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                       stroke=\"#D92D20\" stroke-linecap=\"round\"\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\" 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\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                               width=\"16\" height=\"16\" 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\r\n<!-- loop each block: tagging / review / approve -->\r\n<ng-container *ngFor=\"let block of activityData1\">\r\n\r\n<!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n<ng-container *ngIf=\"block.type === 'tagging'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div>\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n <!-- single image card -->\r\n <div class=\"d-flex gap-2 flex-wrap\">\r\n   <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n     <div class=\"tango-image\"\r\n          [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n     </div>\r\n\r\n     <div class=\"tango-meta small\">\r\n       <div>Tango ID: {{ c.tempId }}</div>\r\n       <div class=\"text-muted\">Entry time: {{ c.entryTime }}</div>\r\n     </div>\r\n   </div>\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n<!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n<ng-container *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n<div *ngFor=\"let c of block.comments\" class=\"comment-thread d-flex mb-4\">\r\n\r\n<!-- avatar -->\r\n<div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n          {{ getInitialsFromEmail(c.createdByEmail) }}\r\n      </div>\r\n\r\n<!-- content -->\r\n<div class=\"w-100\">\r\n <div class=\"fw-semibold\">\r\n   {{ c.createdByEmail }}\r\n </div>\r\n\r\n <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n   {{ c.createdAt | date:'hh:mm:ss a - dd MMM yyyy' }}\r\n </div>\r\n\r\n <!-- main review/approve message -->\r\n <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n   {{ c.message }}\r\n </p>\r\n\r\n \r\n\r\n <!-- image list + +N View all -->\r\n <div class=\"d-flex gap-2 flex-wrap\" *ngIf=\"c.taggedImages?.length\">\r\n\r\n   <!-- first 3 images -->\r\n   <div *ngFor=\"let img of c.taggedImages; let i = index\">\r\n     <ng-container *ngIf=\"i < 3\">\r\n       <div class=\"tango-card\">\r\n         <div class=\"tango-image\"\r\n              [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n         </div>\r\n\r\n         <div class=\"tango-meta small\">\r\n           <div>\r\n             Tango ID: {{ img.tempId }}\r\n             <span *ngIf=\"c.status === 'approved'\"\r\n                   class=\"status-dot status-approve\"></span>\r\n             <span *ngIf=\"c.status === 'rejected'\"\r\n                   class=\"status-dot status-reject\"></span>\r\n           </div>\r\n           <div class=\"text-muted\">\r\n             Entry time: {{ img.entryTime }}\r\n           </div>\r\n         </div>\r\n       </div>\r\n     </ng-container>\r\n   </div>\r\n\r\n   <!-- +N View all card -->\r\n   <div\r\n     class=\"tango-card more-card text-center\"\r\n     *ngIf=\"c.taggedImages.length > 3\"\r\n     [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n     (click)=\"openImagesPopup(c)\"\r\n   >\r\n     <div class=\"more-overlay\"></div>\r\n\r\n     <div class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n       <div class=\"more-text fw-semibold\">\r\n         +{{ c.taggedImages.length - 3 }}\r\n       </div>\r\n       <div class=\"text-primary text-decoration-underline small\">\r\n         View all\r\n       </div>\r\n     </div>\r\n   </div>\r\n\r\n </div>\r\n</div>\r\n</div>\r\n</ng-container>\r\n\r\n</ng-container>\r\n</div>\r\n\r\n           </div>\r\n       </div>\r\n   </div>\r\n</section>\r\n</ng-container>\r\n         \r\n\r\n\r\n        </div>\r\n    </ng-container>\r\n</div>\r\n</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 ?  this.overallSelectedIds?.length : this.popupValue ?\r\n               this.popupValue:'--'  }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n            <!-- Count Box -->\r\n            <div *ngIf=\"selectedCategories?.length === 1\" class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                Re-Assign Ticket\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                Transfer the ticket to another user\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n          <div class=\"row w-100 my-3\">\r\n            <div class=\"col-md-12 mb-4\">\r\n                <label class=\"label mb-2\">Choose User</label>\r\n                <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n                    (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n            </div>\r\n            </div>\r\n`\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancelassign()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n                   Re-Assign\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n         <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n            <h5 class=\"modal-title mb-2 m-0\">{{ previewTitle }}</h5>\r\n\r\n            <!-- Close Button -->\r\n            <button type=\"button\"\r\n                    class=\"btn-close fs-4\"\r\n                    aria-label=\"Close\"\r\n                    (click)=\"model.close()\">\r\n                    \r\n            </button>\r\n\r\n        </div>\r\n\r\n            <div class=\"w-100 position-relative mb-4\">\r\n\r\n                <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n                    (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                   <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n<path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n                </button>\r\n\r\n                <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n                <div class=\"row my-2\">\r\n                    <div class=\"col-10\">\r\n                        <div class=\"desc-title ms-2 my-2\">\r\n                            Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n                            <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\"\r\n                                class=\"ms-2\"><svg style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                    <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n                                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                        d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                        fill=\"#12B76A\" />\r\n                                </svg>\r\n                            </span>\r\n                            <span *ngIf=\"getAction(currentPreviewItem, '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\" stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_1428_59484\">\r\n                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                transform=\"translate(0.599609 0.5)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg></span>\r\n\r\n                        </div>\r\n\r\n                        <div class=\"desc-value ms-2\">Entry Time: {{\r\n                            getFormattedEntryTime(currentPreviewItem.entryTime) }}</div>\r\n                    </div>\r\n                    <div class=\"col-2 mt-2 text-end\">\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\"\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=\"42\" height=\"42\" 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 me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                    [disabled]=\"previewList.length <= 1\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n<path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n                </button>\r\n\r\n            </div>\r\n\r\n            <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected',currentPreviewItem)\">\r\n\r\n                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                    }}</button>\r\n                <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved',currentPreviewItem)\">\r\n\r\n                    {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                    'Accept' }}</button>\r\n            </div>\r\n\r\n        </div>\r\n    \r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n    <div class=\"h-auto p-10\">\r\n        <div class=\"card-header border-0\">\r\n            <div class=\"card-title\">Start audit</div>\r\n            <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n        </div>\r\n        <div class=\"row my-3\">\r\n            <div class=\"col-md-7 mb-4\">\r\n                <label class=\"label\">Store</label>\r\n                <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n                    (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n            </div>\r\n            <div class=\"col-md-5 mt-7\">\r\n\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                    </span>\r\n                    <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n                        ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n                        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                        autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                        (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-3\" *ngIf=\"footfallcount>0\">\r\n            <div>{{footfallcount}}</div>\r\n            <div class=\"mt-2\">Total footfall</div>\r\n        </div>\r\n        <div class=\"card-body mt-5\">\r\n            <div class=\"w-100 d-flex mt-5\">\r\n\r\n                <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button [disabled]=\"disableAudit&&footfallcount>0\" class=\"btn btn-primary w-50 ms-2\"\r\n                    (click)=\"modal.close('isConfirmed')\">start</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n  <div class=\"images-modal\">\r\n    <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n  <div>\r\n    <h6 class=\"mb-1\">All Images</h6>\r\n\r\n    <!-- email -->\r\n    <div class=\"small fw-semibold\">\r\n      {{ selectedComment?.createdByEmail }}\r\n    </div>\r\n\r\n    <!-- time -->\r\n    <div class=\"small text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n      {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n    </div>\r\n\r\n    <!-- optional comment text under time -->\r\n    <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n      {{ selectedComment?.message }}\r\n    </p>\r\n  </div>\r\n\r\n  <button\r\n    type=\"button\"\r\n    class=\"btn-close ms-3\"\r\n    (click)=\"closeImagesPopup()\">\r\n  </button>\r\n</div>\r\n\r\n\r\n    <div class=\"modal-body d-flex flex-wrap gap-3\">\r\n      <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card\">\r\n        <div class=\"tango-image\"\r\n             [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n        </div>\r\n          <div class=\"tango-meta small\">\r\n                    <div>\r\n                      Tango ID: {{ img.tempId }}\r\n\r\n                      <!-- status dots -->\r\n                      <span *ngIf=\"img.status === 'approved'\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                    <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\"\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></span>\r\n\r\n                      <span *ngIf=\"img.status === 'rejected'\"\r\n                            ><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                    <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                        <path\r\n                                                                            d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            fill=\"#FEE4E2\" />\r\n                                                                        <path\r\n                                                                            d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                            stroke=\"#D92D20\" stroke-linecap=\"round\"\r\n                                                                            stroke-linejoin=\"round\" />\r\n                                                                    </g>\r\n                                                                    <defs>\r\n                                                                        <clipPath id=\"clip0_1428_59484\">\r\n                                                                            <rect width=\"12\" height=\"12\" fill=\"white\"\r\n                                                                                transform=\"translate(0.599609 0.5)\" />\r\n                                                                        </clipPath>\r\n                                                                    </defs>\r\n                                                                </svg></span>\r\n                    </div>\r\n\r\n                    <div class=\"text-muted\">\r\n                      Entry time: {{ img.entryTime }}\r\n                    </div>\r\n                  </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", 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}.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}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:900px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}\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'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'store' ? 'active' : ''\" (click)=\"viewTicket('store')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\">\r\n                    Tickets\r\n                </a>\r\n            </li>\r\n            <li class=\"nav-item\">\r\n                <a [ngClass]=\"tangoType === 'internal' ? 'active' : ''\" (click)=\"viewTicket('internal')\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\"> Internal audit\r\n                </a>\r\n            </li>\r\n        </ul>\r\n        <ul *ngIf=\"hasApproverAccess && hasReviewerAccess && usersDetails?.userType !== 'tango'\"\r\n            class=\"nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap\">\r\n            <!-- Approver tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasApproverAccess\">\r\n                <a [ngClass]=\"selectedRole === 'approver' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('approver')\">\r\n                    Approver\r\n                </a>\r\n            </li>\r\n\r\n            <!-- Reviewer tab -->\r\n            <li class=\"nav-item\" *ngIf=\"hasReviewerAccess\">\r\n                <a [ngClass]=\"selectedRole === 'reviewer' ? 'active' : ''\"\r\n                    class=\"nav-link cursor-pointer no-border me-3\" (click)=\"SelectedRole('reviewer')\">\r\n                    Reviewer\r\n                </a>\r\n            </li>\r\n        </ul>\r\n\r\n    </div>\r\n    <div class=\"row\">\r\n        <div class=\"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\" *ngIf=\"tangoType==='store'\"><span\r\n                        *ngIf=\"usersDetails?.userType !== 'tango'\">Ticket Info</span> <span\r\n                        *ngIf=\"usersDetails?.userType === 'tango'\">Showing tickets with Accuracy Below 85% </span><span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"card-label mb-2\" *ngIf=\"tangoType==='internal'\">Internal Tickets <span\r\n                        class=\"ms-2 px-3 badge badge-light-primary\">{{totalItems}} Total</span></span>\r\n                <span class=\"text-sub mb-2\">Based on {{headerFilters?.date?.startDate | date:'dd MMM, yyyy'}} \u2013\r\n                    {{headerFilters?.date?.endDate | date:'dd MMM, yyyy'}} </span>\r\n            </h3>\r\n            <div class=\"card-toolbar\">\r\n                <div class=\"d-flex\">\r\n                    <div class=\"d-flex align-items-center position-relative my-1\">\r\n                        <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                fill=\"none\">\r\n                                <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n                                    transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\"></rect>\r\n                                <path\r\n                                    d=\"M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z\"\r\n                                    fill=\"currentColor\"></path>\r\n                            </svg>\r\n                        </span>\r\n                        <input type=\"text\" class=\"form-control ps-14 me-2\" placeholder=\"Search by store\"\r\n                            autocomplete=\"off\" (change)=\"searchData()\" [(ngModel)]=\"searchValue\" />\r\n\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                        <button\r\n                            class=\"btn btn-default btn-primary btn-outline btn-outline-default rounded-3 text-nowrap border-val\"\r\n                            *ngIf=\"tangoType==='internal'\" (click)=\"createInternalticket()\">Start Audit</button>\r\n                        <button\r\n                            *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                            [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2 text-nowrap\"\r\n                            (click)=\"getMultipleTicketClose()\">\r\n                            Close Ticket\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <div class=\"card-body\">\r\n            <div class=\"table-responsive\" *ngIf=\"!loading && !noData\">\r\n                <table class=\"table custom-table bottom-border text-nowrap\">\r\n                    <thead>\r\n                        <tr>\r\n                            <!-- NEW: checkbox column for approver only -->\r\n                            <th\r\n                                *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n                                <input type=\"checkbox\" [checked]=\"areAllSelectableRowsSelected()\"\r\n                                    (change)=\"toggleSelectAllRows($event)\" />\r\n                            </th>\r\n\r\n                            <th *ngFor=\"let col of tableColumns\"\r\n                                [class.cursor-pointer]=\"col.sortable && col.type !== 'store'\"\r\n                                (click)=\"col.sortable && col.type !== 'store' && onSort(col.key)\">\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                            </th>\r\n                        </tr>\r\n                    </thead>\r\n\r\n                    <tbody>\r\n                        <tr *ngFor=\"let row of footfallListData\">\r\n                            <!-- NEW: per-row checkbox (approver only) -->\r\n                            <td\r\n                                *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">\r\n                                <input type=\"checkbox\" [disabled]=\"!isRowSelectable(row)\" [checked]=\"isRowSelected(row)\"\r\n                                    [style.cursor]=\"isRowSelectable(row) ? 'pointer' : 'not-allowed text-muted'\"\r\n                                    (change)=\"toggleRowSelection(row, $event)\" />\r\n                            </td>\r\n\r\n                            <td *ngFor=\"let col of tableColumns\">\r\n                                <!-- Store + ticket clickable -->\r\n                                <ng-container *ngIf=\"col.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                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n\r\n            </div>\r\n            <div *ngIf=\"!loading && !noData\" class=\"my-3\">\r\n                <lib-pagination [itemsPerPage]=\"pageSize\" [currentPage]=\"currentPage\" [totalItems]=\"totalItems\"\r\n                    [paginationSizes]=\"paginationSizes\" [pageSize]=\"setpageSize()\" (pageChange)=\"onPageChange($event)\"\r\n                    (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n            </div>\r\n        </div>\r\n        <div *ngIf=\"loading\" class=\"card mt-5\">\r\n            <div class=\"card-body h-500px\">\r\n                <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"shimmer\">\r\n                        <div class=\"wrapper\">\r\n                            <div class=\"stroke animate title\"></div>\r\n                            <div class=\"stroke animate link\"></div>\r\n                            <div class=\"stroke animate description\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n        <ng-container *ngIf=\"noData\">\r\n            <div class=\"row\">\r\n                <div class=\"col-lg-12 mb-3\">\r\n                    <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</section>\r\n<!--  -->\r\n<section *ngIf=\"select ==='ticketMethod'\">\r\n    <div class=\"row my-2\">\r\n        <div class=\"position-relative\" [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\"><span class=\"cursor-pointer\" (click)=\"backToNavigation()\"><svg\r\n                                xmlns=\"http://www.w3.org/2000/svg\" width=\"56\" height=\"44\" viewBox=\"0 0 56 44\"\r\n                                fill=\"none\">\r\n                                <g filter=\"url(#filter0_d_887_4505)\">\r\n                                    <rect x=\"2\" y=\"1\" width=\"52\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n                                    <rect x=\"2.5\" y=\"1.5\" width=\"51\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                    <path d=\"M30.5 26L25.5 21L30.5 16\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <filter id=\"filter0_d_887_4505\" x=\"0\" y=\"0\" width=\"56\" height=\"44\"\r\n                                        filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                        <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                        <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                        <feOffset dy=\"1\" />\r\n                                        <feGaussianBlur stdDeviation=\"1\" />\r\n                                        <feColorMatrix type=\"matrix\"\r\n                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                        <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                            result=\"effect1_dropShadow_887_4505\" />\r\n                                        <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_887_4505\"\r\n                                            result=\"shape\" />\r\n                                    </filter>\r\n                                </defs>\r\n                            </svg></span><span class=\"card-title-foot pt-15 ms-3\">Tickets</span></span>\r\n                    <span class=\"cursor-pointer\" (click)=\"toggleSidebar()\"\r\n                        style=\"position: absolute; top: 15px; right: -25px;\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"68\" height=\"68\" viewBox=\"0 0 68 68\" fill=\"none\">\r\n                            <g filter=\"url(#filter0_dd_778_34282)\">\r\n                                <rect x=\"12\" width=\"44\" height=\"44\" rx=\"22\" fill=\"white\" />\r\n                                <path d=\"M33 27L28 22L33 17M40 27L35 22L40 17\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <filter id=\"filter0_dd_778_34282\" x=\"0\" y=\"0\" width=\"68\" height=\"68\"\r\n                                    filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"2\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"4\" />\r\n                                    <feGaussianBlur stdDeviation=\"3\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                        result=\"effect1_dropShadow_778_34282\" />\r\n                                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feOffset dy=\"12\" />\r\n                                    <feGaussianBlur stdDeviation=\"8\" />\r\n                                    <feColorMatrix type=\"matrix\"\r\n                                        values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_778_34282\"\r\n                                        result=\"effect2_dropShadow_778_34282\" />\r\n                                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_778_34282\"\r\n                                        result=\"shape\" />\r\n                                </filter>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n                <div class=\"p-4 w-100 overflow-auto\">\r\n                    <div class=\"row my-1\">\r\n                        <div *ngIf=\"!openTicketsList.length\" 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 *ngIf=\"!openTicketsList.length\" class=\"col-4 p-0 btn\">\r\n\r\n                        <div class=\"text-end text-nowrp ms-3 mt-2\">\r\n                            <button\r\n                                *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                                [disabled]=\"closeMultiple\" class=\"btn btn-sm btn-primary mx-2\"\r\n                                (click)=\"getMultipleTicketClose()\">\r\n                                Close Ticket\r\n                            </button>\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                    <div *ngIf=\"openTicketsList.length\" class=\"mb-2 border-selectall\">\r\n                        <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n\r\n                            <!-- LEFT: checkbox + text -->\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <input\r\n                                    *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                                    type=\"checkbox\" class=\"me-2\" [checked]=\"newallSelected\"\r\n                                    (change)=\"toggleSelectAll()\" />\r\n                                <label class=\"m-0 font-semibold\">\r\n                                    Select <span\r\n                                        *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\">all\r\n                                        {{ storeCount }}</span> stores\r\n                                </label>\r\n                            </div>\r\n\r\n                            <!-- RIGHT: Reviewer(%) + optional sort icon -->\r\n                            <div class=\"d-flex align-items-center reviewer-label\">\r\n                                <span 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\r\n                                        *ngIf=\"usersDetails.userType !=='tango' && (hasApproverAccess && selectedRole ==='approver')\"\r\n                                        type=\"checkbox\" class=\"me-2 my-3\" [checked]=\"isSelected(store)\"\r\n                                        (change)=\"toggleStoreSelection(store)\" />\r\n\r\n                                    <div class=\"store-text ms-1 cursor-pointer\" (click)=\"ticketViewChanges(store)\">\r\n                                        <div class=\"ticket-id\" [ngClass]=\"{ 'active-text': isSelected(store) }\">\r\n                                            {{ store?.ticketId }}\r\n                                        </div>\r\n                                        <div class=\"store-name mt-1\">\r\n                                            {{ store?.storeName }}\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n\r\n                                <!-- RIGHT: pill badge -->\r\n                                <span\r\n                                    class=\"ms-2 px-3 py-1 rounded-pill d-inline-flex align-items-center justify-content-center perc-badge\"\r\n                                    [ngClass]=\"{\r\n        'perc-badge-active': isSelected(store),\r\n        'perc-badge-normal': !isSelected(store)\r\n      }\">\r\n                                    {{ store?.revicedPerc }}\r\n                                </span>\r\n                            </div>\r\n                        </li>\r\n\r\n                    </ul>\r\n\r\n\r\n\r\n                    <div *ngIf=\"!openTicketsList.length\" class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n\r\n                            <div class=\"card-body mx-0 d-flex justify-content-center align-items-center flex-column \"\r\n                                style=\"margin: 64px;border-radius: 8px;\r\n    background: var(--Gray-50, #F9FAFB);\">\r\n                                <svg class=\"my-5\" xmlns=\"http://www.w3.org/2000/svg\" width=\"94\" height=\"94\"\r\n                                    viewBox=\"0 0 94 94\" fill=\"none\">\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" fill=\"#DAF1FF\" />\r\n                                    <rect x=\"7\" y=\"7\" width=\"80\" height=\"80\" rx=\"40\" stroke=\"#EAF8FF\"\r\n                                        stroke-width=\"13.3333\" />\r\n                                    <g clip-path=\"url(#clip0_730_75095)\">\r\n                                        <path\r\n                                            d=\"M55.3327 62V58.6667C55.3327 56.8986 54.6303 55.2029 53.3801 53.9526C52.1298 52.7024 50.4341 52 48.666 52H35.3327C33.5646 52 31.8689 52.7024 30.6186 53.9526C29.3684 55.2029 28.666 56.8986 28.666 58.6667V62M65.3327 62V58.6667C65.3316 57.1895 64.8399 55.7546 63.935 54.5872C63.03 53.4198 61.7629 52.5859 60.3327 52.2167M53.666 32.2167C55.1 32.5838 56.3711 33.4178 57.2787 34.5872C58.1864 35.7565 58.6791 37.1947 58.6791 38.675C58.6791 40.1553 58.1864 41.5935 57.2787 42.7628C56.3711 43.9322 55.1 44.7662 53.666 45.1333M48.666 38.6667C48.666 42.3486 45.6812 45.3333 41.9993 45.3333C38.3174 45.3333 35.3327 42.3486 35.3327 38.6667C35.3327 34.9848 38.3174 32 41.9993 32C45.6812 32 48.666 34.9848 48.666 38.6667Z\"\r\n                                            stroke=\"#00A3FF\" stroke-width=\"4\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </g>\r\n                                    <defs>\r\n                                        <clipPath id=\"clip0_730_75095\">\r\n                                            <rect width=\"40\" height=\"40\" fill=\"white\" transform=\"translate(27 27)\" />\r\n                                        </clipPath>\r\n                                    </defs>\r\n                                </svg>\r\n                                <div class=\"nodata-title my-3\">No Stores Found</div>\r\n                                <div class=\"nodata-sub mb-3\">Looks like there is no stores </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n        </div>\r\n        <div [ngClass]=\"isCollapsed ? '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                        \r\n                        <span *ngIf=\"statusVal?.type !== 'tangoreview' && (ticketData?.status === 'Raised' || getHeaderStatus() === 'Open')\">\r\n     \r\n     <button *ngIf=\"!closeBtn\" class=\"btn btn-sm btn-primary mx-2\" (click)=\"startReview()\">\r\n         Start Review\r\n        </button>\r\n    </span>\r\n<section\r\n  *ngIf=\"\r\n    (hasReviewerAccess && selectedRole === 'reviewer') ||\r\n    (hasApproverAccess && selectedRole === 'approver')\r\n  \"\r\n>\r\n  <span\r\n    *ngIf=\"\r\n      getHeaderStatus()?.toLowerCase() === 'in-progress' ||\r\n      ticketData?.status?.toLowerCase() === 'in-progress'\r\n    \"\r\n  >\r\n    <button\r\n      *ngIf=\"closeBtn\"\r\n      [disabled]=\"closeDisabled\"\r\n      class=\"btn btn-sm btn-primary mx-2\"\r\n      (click)=\"stopReview()\"\r\n    >\r\n      Close Ticket\r\n    </button>\r\n  </span>\r\n</section>\r\n\r\n\r\n\r\n                        <span\r\n                            *ngIf=\"usersDetails?.userType ==='tango' && statusVal?.type === 'tangoreview' && statusVal?.status ==='Open'||usersDetails?.userType ==='tango'&&ticketData?.type === 'internal'\"><button\r\n                                class=\"btn btn-sm btn-primary mx-2\" (click)=\"startAudit()\">Start\r\n                                Audit</button></span>\r\n                        <span>\r\n                            <span class=\"ticket-actions-wrapper\" (click)=\"$event.stopPropagation()\">\r\n\r\n                                <span class=\"icon-btn\" (click)=\"toggleTicketMenu($event)\">\r\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\">\r\n                                        <path\r\n                                            d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                        <path\r\n                                            d=\"M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z\"\r\n                                            stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                            stroke-linejoin=\"round\" />\r\n                                    </svg>\r\n                                </span>\r\n                                <div class=\"ticket-menu\" *ngIf=\"isTicketMenuOpen\">\r\n                                    <div class=\"ticket-menu-item\" (click)=\"onReassignClick()\">\r\n                                        Re-Assign Ticket\r\n                                    </div>\r\n                                    <!-- <div class=\"ticket-menu-item\" (click)=\"onExportClick()\">\r\n                                        Export\r\n                                    </div> -->\r\n                                </div>\r\n                            </span>\r\n                        </span>\r\n                    </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\">{{footfallTicketsData[0]?._source?.storeName}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Ticket ID</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n                        <div class=\"col-3 card-title-value my-2\">{{footfallTicketsData[0]?._source?.ticketId}}</div>\r\n                        <div class=\"col-2 card-title-label my-2\">Status</div>\r\n                        <div class=\"col-1 font-bold my-2\">:</div>\r\n\r\n                        <div class=\"col-3 my-2\">\r\n                            <span class=\"badge mx-2\" [ngClass]=\"getStatusBadgeClass(getHeaderStatus())\">\r\n                                {{ getHeaderStatus() | titlecase }}\r\n                            </span>\r\n                        </div>\r\n\r\n                        <div 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\">06 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 (click)=\"openArrow()\"> <svg *ngIf=\"arrowshow\" xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91902)\">\r\n                                            <rect x=\"2\" y=\"1\" width=\"36\" height=\"36\" rx=\"8\" fill=\"white\" />\r\n                                            <rect x=\"2.5\" y=\"1.5\" width=\"35\" height=\"35\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M15 16.5L20 21.5L25 16.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91902\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91902\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91902\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg></span>\r\n                                <span (click)=\"openArrow()\">\r\n                                    <svg *ngIf=\"!arrowshow\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\"\r\n                                        viewBox=\"0 0 40 40\" fill=\"none\">\r\n                                        <g filter=\"url(#filter0_d_486_91893)\">\r\n                                            <rect x=\"38\" y=\"37\" width=\"36\" height=\"36\" rx=\"8\"\r\n                                                transform=\"rotate(180 38 37)\" fill=\"white\" />\r\n                                            <rect x=\"37.5\" y=\"36.5\" width=\"35\" height=\"35\" rx=\"7.5\"\r\n                                                transform=\"rotate(180 37.5 36.5)\" stroke=\"#D0D5DD\" />\r\n                                            <path d=\"M25 21.5L20 16.5L15 21.5\" stroke=\"#344054\" stroke-width=\"1.67\"\r\n                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                        </g>\r\n                                        <defs>\r\n                                            <filter id=\"filter0_d_486_91893\" x=\"0\" y=\"0\" width=\"40\" height=\"40\"\r\n                                                filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                                                <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                                                <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                    result=\"hardAlpha\" />\r\n                                                <feOffset dy=\"1\" />\r\n                                                <feGaussianBlur stdDeviation=\"1\" />\r\n                                                <feColorMatrix type=\"matrix\"\r\n                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n                                                    result=\"effect1_dropShadow_486_91893\" />\r\n                                                <feBlend mode=\"normal\" in=\"SourceGraphic\"\r\n                                                    in2=\"effect1_dropShadow_486_91893\" result=\"shape\" />\r\n                                            </filter>\r\n                                        </defs>\r\n                                    </svg>\r\n                                </span>\r\n                            </div>\r\n\r\n                        </div>\r\n\r\n\r\n                        <section *ngIf=\"!arrowshow\">\r\n\r\n                            <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n\r\n                                <div *ngIf=\"ticket?._source as source\" class=\"ticket-container\">\r\n\r\n                                    <!-- Actual Footfall Header -->\r\n                                    <div class=\"ticket-header\">\r\n                                        <div class=\"footfall-value\">{{source?.footfallCount}} <span\r\n                                                class=\"footfall-label ms-3\">Actual\r\n                                                Footfall</span>\r\n                                        </div>\r\n                                        <div class=\"issue-date\">Issue date : {{source?.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 class=\"timeline\"></div>\r\n                                            <div class=\"user-info ms-4\">\r\n\r\n                                                <div class=\"avatar avatar-text light-primary p-3\">\r\n                                                    {{ getInitialsFromEmail(mapping?.createdByEmail ||\r\n                                                    source?.createdByEmail) }}\r\n                                                </div>\r\n\r\n                                                <div>\r\n                                                    <div class=\"user-name\">\r\n                                                        <span *ngIf=\"mapping?.type === 'tagging'\">\r\n                                                            Ticket created by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'review'\">\r\n                                                            Reviewed by\r\n                                                        </span>\r\n                                                        <span *ngIf=\"mapping?.type === 'approve'\">\r\n                                                            Approved by\r\n                                                        </span>\r\n\r\n                                                        <span *ngIf=\"mapping?.type === 'tangoreview'\">\r\n                                                            Tango\r\n                                                        </span>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"user-email\">\r\n                                                        {{ mapping?.createdByEmail || source?.createdByEmail }}\r\n                                                        {{(mapping?.createdAt ||\r\n                                                        source?.createdAt)\r\n                                                        | date:'HH:mm:ss \u2013dd MMM yyyy' }}\r\n                                                    </div>\r\n                                                </div>\r\n\r\n                                            </div>\r\n\r\n\r\n                                            <div class=\"timeline\"></div>\r\n\r\n                                            <!-- Show revision card only when NOT closed & type is tagging -->\r\n                                            <div class=\"revision-card\"\r\n                                                [ngClass]=\"{'revision-card-approve-closed':mapping?.status === 'Closed' && (mapping?.type === 'approve' || mapping?.type === 'tangoreview'),}\">\r\n                                                <div class=\"values-row\">\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ mapping?.revicedFootfall === null ? '--' :\r\n                                                            mapping?.revicedFootfall }}\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold\">Revised Footfall</div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"value-block\">\r\n                                                        <div class=\"value accuracy down\">\r\n                                                            {{ mapping?.revicedPerc || source?.revicedPerc || '--' }}\r\n                                                            <span class=\"ms-1\">\r\n                                                                <!-- arrow svg -->\r\n                                                            </span>\r\n                                                        </div>\r\n                                                        <div class=\"label fw-bold pt-1\">Accuracy</div>\r\n                                                    </div>\r\n\r\n                                                    <div class=\"timeline-new my-2\"></div>\r\n\r\n                                                    <div class=\"value-block\" *ngFor=\"let item of mapping?.count\">\r\n                                                        <div class=\"value\">\r\n                                                            {{ item?.value ?? '--' }}\r\n                                                        </div>\r\n                                                        <div class=\"label\">\r\n                                                            {{ item?.name }}\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </div>\r\n\r\n\r\n                                        </ng-container>\r\n\r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['approve'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\"\r\n                                                    [class.rotate-180]=\"showRevisedDetails\"><svg\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n\r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showApproveDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                                                    <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n                                                        <ng-container *ngFor=\"let type of revopsTypes\">\r\n                                                            <section *ngIf=\"type ==='duplicate'\">\r\n\r\n                                                                <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n                                                                    <!-- Header Section -->\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <h3 class=\"text-lg font-semibold mb-4\">\r\n                                                                            <span class=\"me-2\">\r\n                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_730_76157)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                                                            stroke=\"#475467\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_730_76157\">\r\n                                                                                            <rect width=\"18\" height=\"18\"\r\n                                                                                                fill=\"white\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg>\r\n                                                                            </span>\r\n                                                                            Duplicates\r\n                                                                        </h3>\r\n                                                                    </div>\r\n\r\n\r\n                                                                    <!-- Body Section -->\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                                                            <ng-container\r\n                                                                                *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                                                <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                                                    class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                                                    <div class=\"my-4\">\r\n                                                                                        <!-- Original Image -->\r\n                                                                                        <div\r\n                                                                                            class=\"duplicate-head px-5 my-3\">\r\n                                                                                            Original image\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <div\r\n                                                                                                class=\"col-md-4 relative\">\r\n                                                                                                <div\r\n                                                                                                    class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                                                    <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        class=\"w-100 rounded border\" />\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}</div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                        <div\r\n                                                                                            class=\"separator separator-dashed mt-3 mb-5\">\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <h5\r\n                                                                                                class=\"duplicate-head my-3 fs-6\">\r\n                                                                                                Tagged Duplicates</h5>\r\n                                                                                            <div *ngIf=\"isCheckboxEnable\"\r\n                                                                                                class=\"my-3\">\r\n                                                                                                <input type=\"checkbox\"\r\n                                                                                                    [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                                                    (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                                                                <label\r\n                                                                                                    class=\"ms-2\">Select\r\n                                                                                                    All</label>\r\n                                                                                            </div>\r\n                                                                                            <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                                                                class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                                <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                                    [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                                                                    <!-- Checkbox -->\r\n                                                                                                    <div\r\n                                                                                                        *ngIf=\"isCheckboxEnable\">\r\n                                                                                                        <input\r\n                                                                                                            type=\"checkbox\"\r\n                                                                                                            *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                                                                            style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                                                                            [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                                                                            (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                                                                            class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                                                                        <span\r\n                                                                                                            class=\"position-absolute absolute\"\r\n                                                                                                            *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                                                                            (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n                                                                                                            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                width=\"19\"\r\n                                                                                                                height=\"19\"\r\n                                                                                                                viewBox=\"0 0 19 19\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.11133\"\r\n                                                                                                                        y=\"0.555664\"\r\n                                                                                                                        width=\"16\"\r\n                                                                                                                        height=\"16\"\r\n                                                                                                                        rx=\"2\"\r\n                                                                                                                        fill=\"white\" />\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.38911\"\r\n                                                                                                                        y=\"0.833442\"\r\n                                                                                                                        width=\"15.4444\"\r\n                                                                                                                        height=\"15.4444\"\r\n                                                                                                                        rx=\"1.72222\"\r\n                                                                                                                        stroke=\"#D0D5DD\"\r\n                                                                                                                        stroke-width=\"0.555556\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                        stroke=\"#344054\"\r\n                                                                                                                        stroke-width=\"0.927778\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <filter\r\n                                                                                                                        id=\"filter0_d_2023_13718\"\r\n                                                                                                                        x=\"0.00021708\"\r\n                                                                                                                        y=\"0.00010854\"\r\n                                                                                                                        width=\"18.2222\"\r\n                                                                                                                        height=\"18.2222\"\r\n                                                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                                                        <feFlood\r\n                                                                                                                            flood-opacity=\"0\"\r\n                                                                                                                            result=\"BackgroundImageFix\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            in=\"SourceAlpha\"\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                            result=\"hardAlpha\" />\r\n                                                                                                                        <feOffset\r\n                                                                                                                            dy=\"0.555556\" />\r\n                                                                                                                        <feGaussianBlur\r\n                                                                                                                            stdDeviation=\"0.555556\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                                                            result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in=\"SourceGraphic\"\r\n                                                                                                                            in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                            result=\"shape\" />\r\n                                                                                                                    </filter>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg>\r\n\r\n                                                                                                        </span>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                                                    <!-- Duplicate Image -->\r\n                                                                                                    <img [src]=\"imageUrl + duplicate.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                                                        class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                                                                    <!-- Duplicate Info -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"row my-2\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-8\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-title ms-2 my-2\">\r\n                                                                                                                Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                duplicate.tempId\r\n                                                                                                                }}\r\n\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                        <rect\r\n                                                                                                                            y=\"0.5\"\r\n                                                                                                                            width=\"10\"\r\n                                                                                                                            height=\"10\"\r\n                                                                                                                            rx=\"5\"\r\n                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                        <path\r\n                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                    </svg>\r\n                                                                                                                </span>\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                        <g\r\n                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                        </g>\r\n                                                                                                                        <defs>\r\n                                                                                                                            <clipPath\r\n                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                <rect\r\n                                                                                                                                    width=\"12\"\r\n                                                                                                                                    height=\"12\"\r\n                                                                                                                                    fill=\"white\"\r\n                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                            </clipPath>\r\n                                                                                                                        </defs>\r\n                                                                                                                    </svg></span>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-value ms-2\">\r\n                                                                                                                Entry\r\n                                                                                                                Time: {{\r\n                                                                                                                getFormattedEntryTime(duplicate.entryTime)\r\n                                                                                                                }}\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-4\">\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#D1FADF\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                            stroke=\"#039855\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94051\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n\r\n                                                                                                            </span>\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                            stroke=\"#D92D20\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94090\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n                                                                                                            </span>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- Duplicate Reason -->\r\n                                                                                                    <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                    </div>\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\"\r\n                                                                                        (click)=\"toggleCommentsAccordion()\">\r\n                                                                                        <div\r\n                                                                                            class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                            <span\r\n                                                                                                class=\"comments-count\">{{\r\n                                                                                                comments?.length }}\r\n                                                                                                Comments</span>\r\n                                                                                            <div\r\n                                                                                                class=\"accordion-arrow ms-3\">\r\n                                                                                                <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                    width=\"16\"\r\n                                                                                                    height=\"16\"\r\n                                                                                                    viewBox=\"0 0 16 16\"\r\n                                                                                                    fill=\"none\">\r\n                                                                                                    <path\r\n                                                                                                        d=\"M4 6L8 10L12 6\"\r\n                                                                                                        stroke=\"#667085\"\r\n                                                                                                        stroke-width=\"2\"\r\n                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                </svg>\r\n                                                                                            </div>\r\n\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n\r\n                                                                                    <!-- Accordion Body -->\r\n                                                                                    <div class=\"accordion-body\"\r\n                                                                                        *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                        <!-- Loop each block: tagging / review / approve -->\r\n                                                                                        <ng-container\r\n                                                                                            *ngFor=\"let block of activityData\">\r\n\r\n                                                                                            <!-- Loop inside comments -->\r\n                                                                                            <div *ngFor=\"let c of block.comments\"\r\n                                                                                                class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                                <!-- avatar -->\r\n                                                                                                <div\r\n                                                                                                    class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                    {{\r\n                                                                                                    getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n                                                                                                <div class=\"w-100\">\r\n\r\n                                                                                                    <!-- email -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"fw-semibold\">\r\n                                                                                                        {{\r\n                                                                                                        c.createdByEmail\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n                                                                                                    <div class=\"text-muted small\" *ngIf=\"c.createdAt\">\r\n                                                                                                        {{ c.createdAt |date:'hh:mm:ss a\r\n                                                                                                        - dd MMM yyyy'\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- message text -->\r\n                                                                                                    <p class=\"mb-2 mt-2\"\r\n                                                                                                        *ngIf=\"c.message\">\r\n                                                                                                        {{ c.message }}\r\n                                                                                                    </p>\r\n\r\n                                                                                                    <!-- Review / Approve only -->\r\n                                                                                                    <ng-container\r\n                                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                                        <!-- Tagged images -->\r\n                                                                                                        <div\r\n                                                                                                            class=\"d-flex gap-2 flex-wrap\">\r\n\r\n                                                                                                            <div\r\n                                                                                                                *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n                                                                                                                <!-- Show only first 4 -->\r\n                                                                                                                <ng-container\r\n                                                                                                                    *ngIf=\"i < 3\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"tango-card\">\r\n                                                                                                                        <div class=\"tango-image\"\r\n                                                                                                                            [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                                                                                                                        </div>\r\n\r\n                                                                                                                        <div\r\n                                                                                                                            class=\"tango-meta small\">\r\n                                                                                                                            <div>\r\n                                                                                                                                Tango\r\n                                                                                                                                ID:\r\n                                                                                                                                {{\r\n                                                                                                                                img.tempId\r\n                                                                                                                                }}\r\n\r\n                                                                                                                                <!-- status dots -->\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'approved'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                                        <rect\r\n                                                                                                                                            y=\"0.5\"\r\n                                                                                                                                            width=\"10\"\r\n                                                                                                                                            height=\"10\"\r\n                                                                                                                                            rx=\"5\"\r\n                                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                                        <path\r\n                                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                                    </svg></span>\r\n\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'rejected'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                                        <g\r\n                                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                                        </g>\r\n                                                                                                                                        <defs>\r\n                                                                                                                                            <clipPath\r\n                                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                                <rect\r\n                                                                                                                                                    width=\"12\"\r\n                                                                                                                                                    height=\"12\"\r\n                                                                                                                                                    fill=\"white\"\r\n                                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                                            </clipPath>\r\n                                                                                                                                        </defs>\r\n                                                                                                                                    </svg></span>\r\n                                                                                                                            </div>\r\n\r\n                                                                                                                            <div\r\n                                                                                                                                class=\"text-muted\">\r\n                                                                                                                                Entry\r\n                                                                                                                                time:\r\n                                                                                                                                {{\r\n                                                                                                                                img.entryTime\r\n                                                                                                                                }}\r\n                                                                                                                            </div>\r\n                                                                                                                        </div>\r\n                                                                                                                    </div>\r\n                                                                                                                </ng-container>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <!-- +N more -->\r\n                                                                                                            <div class=\"tango-card more-card text-center\"\r\n                                                                                                                *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                                [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                                (click)=\"openImagesPopup(c)\">\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-overlay\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <!-- vertical container -->\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"more-text fw-semibold\">\r\n                                                                                                                        +{{\r\n                                                                                                                        c.taggedImages.length\r\n                                                                                                                        -\r\n                                                                                                                        3\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-primary text-dark text-decoration-underline small\">\r\n                                                                                                                        View\r\n                                                                                                                        all\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n\r\n\r\n\r\n                                                                                                        </div>\r\n\r\n                                                                                                    </ng-container>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </ng-container>\r\n                                                                                    </div>\r\n\r\n\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n\r\n                                                                    </ng-container>\r\n                                                                    <!-- Status Icons -->\r\n\r\n\r\n                                                                </div>\r\n                                                            </section>\r\n                                                            <section *ngIf=\"type !=='duplicate'\">\r\n                                                                <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <div class=\"duplicate-head text-lg my-3\"><span\r\n                                                                                class=\"me-2\"><svg\r\n                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <path fill-rule=\"evenodd\"\r\n                                                                                        clip-rule=\"evenodd\"\r\n                                                                                        d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                                                        fill=\"#475467\" />\r\n                                                                                </svg></span> {{type | titlecase}}\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                    <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                                                        <input type=\"checkbox\"\r\n                                                                            [(ngModel)]=\"selectAllByType[type]\"\r\n                                                                            (change)=\"onSelectAll(type, $event)\">\r\n                                                                        <label>Select All</label>\r\n                                                                    </div>\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <div *ngIf=\"mapping?.type ===viewMode\"\r\n                                                                            class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                                                            <div class=\"row\">\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n                                                                                    <div *ngIf=\"original?.revopsType ===type\"\r\n                                                                                        class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                        <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                            [ngClass]=\"{\r\n'layer-approved': isApproved(original),\r\n'layer-rejected': isRejected(original),\r\n'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                                                            <!-- Top-right Checkbox -->\r\n                                                                                            <div\r\n                                                                                                *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                                                                <input\r\n                                                                                                    *ngIf=\"!isLockedByReviewer(original)\"\r\n                                                                                                    type=\"checkbox\"\r\n                                                                                                    class=\"position-absolute absolute form-check-input\"\r\n                                                                                                    [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n                                                                                                    (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n                                                                                                <span\r\n                                                                                                    class=\"position-absolute absolute\"\r\n                                                                                                    *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                                                    (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                        width=\"19\"\r\n                                                                                                        height=\"19\"\r\n                                                                                                        viewBox=\"0 0 19 19\"\r\n                                                                                                        fill=\"none\">\r\n                                                                                                        <g\r\n                                                                                                            filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.11133\"\r\n                                                                                                                y=\"0.555664\"\r\n                                                                                                                width=\"16\"\r\n                                                                                                                height=\"16\"\r\n                                                                                                                rx=\"2\"\r\n                                                                                                                fill=\"white\" />\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.38911\"\r\n                                                                                                                y=\"0.833442\"\r\n                                                                                                                width=\"15.4444\"\r\n                                                                                                                height=\"15.4444\"\r\n                                                                                                                rx=\"1.72222\"\r\n                                                                                                                stroke=\"#D0D5DD\"\r\n                                                                                                                stroke-width=\"0.555556\" />\r\n                                                                                                            <path\r\n                                                                                                                d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                stroke=\"#344054\"\r\n                                                                                                                stroke-width=\"0.927778\"\r\n                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                        </g>\r\n                                                                                                        <defs>\r\n                                                                                                            <filter\r\n                                                                                                                id=\"filter0_d_2023_13718\"\r\n                                                                                                                x=\"0.00021708\"\r\n                                                                                                                y=\"0.00010854\"\r\n                                                                                                                width=\"18.2222\"\r\n                                                                                                                height=\"18.2222\"\r\n                                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                                <feFlood\r\n                                                                                                                    flood-opacity=\"0\"\r\n                                                                                                                    result=\"BackgroundImageFix\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                    result=\"hardAlpha\" />\r\n                                                                                                                <feOffset\r\n                                                                                                                    dy=\"0.555556\" />\r\n                                                                                                                <feGaussianBlur\r\n                                                                                                                    stdDeviation=\"0.555556\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                                    result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                                    in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                    result=\"shape\" />\r\n                                                                                                            </filter>\r\n                                                                                                        </defs>\r\n                                                                                                    </svg>\r\n                                                                                                </span>\r\n                                                                                            </div>\r\n\r\n\r\n                                                                                            <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                alt=\"\"\r\n                                                                                                (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                                                                                class=\"w-100 rounded border cursor-pointer\" />\r\n                                                                                            <div class=\"row my-2\">\r\n                                                                                                <div class=\"col-8\">\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                <rect\r\n                                                                                                                    y=\"0.5\"\r\n                                                                                                                    width=\"10\"\r\n                                                                                                                    height=\"10\"\r\n                                                                                                                    rx=\"5\"\r\n                                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                                <path\r\n                                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                    fill=\"#12B76A\" />\r\n                                                                                                            </svg>\r\n                                                                                                        </span>\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <clipPath\r\n                                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                                        <rect\r\n                                                                                                                            width=\"12\"\r\n                                                                                                                            height=\"12\"\r\n                                                                                                                            fill=\"white\"\r\n                                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                    </clipPath>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg></span>\r\n                                                                                                    </div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                                <div class=\"col-4\">\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#D1FADF\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                    stroke=\"#039855\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94051\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg>\r\n                                                                                                    </span>\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                    stroke=\"#D92D20\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94090\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg></span>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                    <div class=\"card-footer py-5\">\r\n                                                                        <div class=\"comments-accordion\">\r\n                                                                            <!-- Accordion Header -->\r\n                                                                            <div class=\"accordion-header\"\r\n                                                                                (click)=\"toggleCommentsAccordion()\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                    <div class=\"comments-title\">\r\n                                                                                        <span class=\"comments-count\">{{\r\n                                                                                            comments?.length }}\r\n                                                                                            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\"\r\n                                                                                            width=\"16\" height=\"16\"\r\n                                                                                            viewBox=\"0 0 16 16\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <path d=\"M4 6L8 10L12 6\"\r\n                                                                                                stroke=\"#667085\"\r\n                                                                                                stroke-width=\"2\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </svg>\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <!-- Accordion Content -->\r\n                                                                            <div class=\"accordion-body\"\r\n                                                                                *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                <!-- loop each block: tagging / review / approve -->\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let block of activityData1\">\r\n\r\n                                                                                    <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'tagging'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div>\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n                                                                                                <!-- single image card -->\r\n                                                                                                <div\r\n                                                                                                    class=\"d-flex gap-2 flex-wrap\">\r\n                                                                                                    <div class=\"tango-card\"\r\n                                                                                                        *ngIf=\"c.filePath\">\r\n                                                                                                        <div class=\"tango-image\"\r\n                                                                                                            [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"tango-meta small\">\r\n                                                                                                            <div>Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                c.tempId\r\n                                                                                                                }}</div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-muted\">\r\n                                                                                                                Entry\r\n                                                                                                                time: {{\r\n                                                                                                                c.entryTime\r\n                                                                                                                }}</div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                    <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div class=\"w-100\">\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <!-- main review/approve message -->\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n\r\n\r\n                                                                                                <!-- image list + +N View all -->\r\n                                                                                                <div class=\"d-flex gap-2 flex-wrap\"\r\n                                                                                                    *ngIf=\"c.taggedImages?.length\">\r\n\r\n                                                                                                    <!-- first 3 images -->\r\n                                                                                                    <div\r\n                                                                                                        *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                                                                                                        <ng-container\r\n                                                                                                            *ngIf=\"i < 3\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"tango-card\">\r\n                                                                                                                <div class=\"tango-image\"\r\n                                                                                                                    [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <div\r\n                                                                                                                    class=\"tango-meta small\">\r\n                                                                                                                    <div>\r\n                                                                                                                        Tango\r\n                                                                                                                        ID:\r\n                                                                                                                        {{\r\n                                                                                                                        img.tempId\r\n                                                                                                                        }}\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'approved'\"\r\n                                                                                                                            class=\"status-dot status-approve\"></span>\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'rejected'\"\r\n                                                                                                                            class=\"status-dot status-reject\"></span>\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-muted\">\r\n                                                                                                                        Entry\r\n                                                                                                                        time:\r\n                                                                                                                        {{\r\n                                                                                                                        img.entryTime\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n                                                                                                        </ng-container>\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- +N View all card -->\r\n                                                                                                    <div class=\"tango-card more-card text-center\"\r\n                                                                                                        *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                        [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                        (click)=\"openImagesPopup(c)\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-overlay\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"more-text fw-semibold\">\r\n                                                                                                                +{{\r\n                                                                                                                c.taggedImages.length\r\n                                                                                                                - 3 }}\r\n                                                                                                            </div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-primary text-decoration-underline small\">\r\n                                                                                                                View all\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </section>\r\n                                                        </ng-container>\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </div>\r\n\r\n\r\n                                            <div *ngIf=\"showApproveDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Hide in details\r\n                                                </span>\r\n\r\n                                                <span *ngIf=\"showApproveDetails\" class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                        <div *ngIf=\"mapping?.status === 'Closed' && ['tangoreview'].includes(mapping?.type)\"\r\n                                            class=\"card-footer revision-card-approve py-1 bg-light-primary\">\r\n                                            <div *ngIf=\"!showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Show in details\r\n                                                </span>\r\n                                                <span class=\"chevron ms-3 cursor-pointer\"\r\n                                                    [class.rotate-180]=\"showRevisedDetails\"><svg\r\n                                                        xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M18 9L12 15L6 9\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg></span>\r\n\r\n                                            </div>\r\n\r\n                                            <div class=\"details-body mt-2\" *ngIf=\"showTangoDetails\">\r\n                                                <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                                                    <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n                                                        <ng-container *ngFor=\"let type of revopsTypes\">\r\n                                                            <section *ngIf=\"type ==='duplicate'\">\r\n\r\n                                                                <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n                                                                    <!-- Header Section -->\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <h3 class=\"text-lg font-semibold mb-4\">\r\n                                                                            <span class=\"me-2\">\r\n                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_730_76157)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                                                            stroke=\"#475467\"\r\n                                                                                            stroke-width=\"2\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_730_76157\">\r\n                                                                                            <rect width=\"18\" height=\"18\"\r\n                                                                                                fill=\"white\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg>\r\n                                                                            </span>\r\n                                                                            Duplicates\r\n                                                                        </h3>\r\n                                                                    </div>\r\n\r\n\r\n                                                                    <!-- Body Section -->\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                                                            <ng-container\r\n                                                                                *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                                                <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                                                    class=\"card-body bg-white layers py-5 px-0 m-3\">\r\n                                                                                    <div class=\"my-4\">\r\n                                                                                        <!-- Original Image -->\r\n                                                                                        <div\r\n                                                                                            class=\"duplicate-head px-5 my-3\">\r\n                                                                                            Original image\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <div\r\n                                                                                                class=\"col-md-4 relative\">\r\n                                                                                                <div\r\n                                                                                                    class=\"pb-3 img-border border border-1 h-100 rounded-3\">\r\n\r\n                                                                                                    <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        class=\"w-100 rounded border\" />\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}</div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                        <div\r\n                                                                                            class=\"separator separator-dashed mt-3 mb-5\">\r\n                                                                                        </div>\r\n                                                                                        <div class=\"row px-5\">\r\n                                                                                            <h5\r\n                                                                                                class=\"duplicate-head my-3 fs-6\">\r\n                                                                                                Tagged Duplicates</h5>\r\n                                                                                            <div *ngIf=\"isCheckboxEnable\"\r\n                                                                                                class=\"my-3\">\r\n                                                                                                <input type=\"checkbox\"\r\n                                                                                                    [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                                                    (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                                                                <label\r\n                                                                                                    class=\"ms-2\">Select\r\n                                                                                                    All</label>\r\n                                                                                            </div>\r\n                                                                                            <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                                                                class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                                <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                                    [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                                                                    <!-- Checkbox -->\r\n                                                                                                    <div\r\n                                                                                                        *ngIf=\"isCheckboxEnable\">\r\n                                                                                                        <input\r\n                                                                                                            type=\"checkbox\"\r\n                                                                                                            *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                                                                            style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                                                                            [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                                                                            (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                                                                            class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                                                                        <span\r\n                                                                                                            class=\"position-absolute absolute\"\r\n                                                                                                            *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                                                                            (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n                                                                                                            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                width=\"19\"\r\n                                                                                                                height=\"19\"\r\n                                                                                                                viewBox=\"0 0 19 19\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.11133\"\r\n                                                                                                                        y=\"0.555664\"\r\n                                                                                                                        width=\"16\"\r\n                                                                                                                        height=\"16\"\r\n                                                                                                                        rx=\"2\"\r\n                                                                                                                        fill=\"white\" />\r\n                                                                                                                    <rect\r\n                                                                                                                        x=\"1.38911\"\r\n                                                                                                                        y=\"0.833442\"\r\n                                                                                                                        width=\"15.4444\"\r\n                                                                                                                        height=\"15.4444\"\r\n                                                                                                                        rx=\"1.72222\"\r\n                                                                                                                        stroke=\"#D0D5DD\"\r\n                                                                                                                        stroke-width=\"0.555556\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                        stroke=\"#344054\"\r\n                                                                                                                        stroke-width=\"0.927778\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <filter\r\n                                                                                                                        id=\"filter0_d_2023_13718\"\r\n                                                                                                                        x=\"0.00021708\"\r\n                                                                                                                        y=\"0.00010854\"\r\n                                                                                                                        width=\"18.2222\"\r\n                                                                                                                        height=\"18.2222\"\r\n                                                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                                                        <feFlood\r\n                                                                                                                            flood-opacity=\"0\"\r\n                                                                                                                            result=\"BackgroundImageFix\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            in=\"SourceAlpha\"\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                            result=\"hardAlpha\" />\r\n                                                                                                                        <feOffset\r\n                                                                                                                            dy=\"0.555556\" />\r\n                                                                                                                        <feGaussianBlur\r\n                                                                                                                            stdDeviation=\"0.555556\" />\r\n                                                                                                                        <feColorMatrix\r\n                                                                                                                            type=\"matrix\"\r\n                                                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                                                            result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                        <feBlend\r\n                                                                                                                            mode=\"normal\"\r\n                                                                                                                            in=\"SourceGraphic\"\r\n                                                                                                                            in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                            result=\"shape\" />\r\n                                                                                                                    </filter>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg>\r\n\r\n                                                                                                        </span>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                                                    <!-- Duplicate Image -->\r\n                                                                                                    <img [src]=\"imageUrl + duplicate.filePath\"\r\n                                                                                                        alt=\"\"\r\n                                                                                                        (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                                                        class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                                                                    <!-- Duplicate Info -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"row my-2\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-8\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-title ms-2 my-2\">\r\n                                                                                                                Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                duplicate.tempId\r\n                                                                                                                }}\r\n\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                        <rect\r\n                                                                                                                            y=\"0.5\"\r\n                                                                                                                            width=\"10\"\r\n                                                                                                                            height=\"10\"\r\n                                                                                                                            rx=\"5\"\r\n                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                        <path\r\n                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                    </svg>\r\n                                                                                                                </span>\r\n                                                                                                                <span\r\n                                                                                                                    *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                                                    class=\"ms-2\"><svg\r\n                                                                                                                        style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                        <g\r\n                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                            <path\r\n                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                        </g>\r\n                                                                                                                        <defs>\r\n                                                                                                                            <clipPath\r\n                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                <rect\r\n                                                                                                                                    width=\"12\"\r\n                                                                                                                                    height=\"12\"\r\n                                                                                                                                    fill=\"white\"\r\n                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                            </clipPath>\r\n                                                                                                                        </defs>\r\n                                                                                                                    </svg></span>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <div\r\n                                                                                                                class=\"desc-value ms-2\">\r\n                                                                                                                Entry\r\n                                                                                                                Time: {{\r\n                                                                                                                getFormattedEntryTime(duplicate.entryTime)\r\n                                                                                                                }}\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                        <div\r\n                                                                                                            class=\"col-4\">\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#D1FADF\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                            stroke=\"#039855\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94051\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n\r\n                                                                                                            </span>\r\n                                                                                                            <span\r\n                                                                                                                *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                                    width=\"37\"\r\n                                                                                                                    height=\"37\"\r\n                                                                                                                    viewBox=\"0 0 24 24\"\r\n                                                                                                                    fill=\"none\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"24\"\r\n                                                                                                                        height=\"24\"\r\n                                                                                                                        rx=\"12\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <g\r\n                                                                                                                        clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                        <path\r\n                                                                                                                            d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                            stroke=\"#D92D20\"\r\n                                                                                                                            stroke-linecap=\"round\"\r\n                                                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                                                    </g>\r\n                                                                                                                    <defs>\r\n                                                                                                                        <clipPath\r\n                                                                                                                            id=\"clip0_486_94090\">\r\n                                                                                                                            <rect\r\n                                                                                                                                width=\"12\"\r\n                                                                                                                                height=\"12\"\r\n                                                                                                                                fill=\"white\"\r\n                                                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                                                        </clipPath>\r\n                                                                                                                    </defs>\r\n                                                                                                                </svg>\r\n                                                                                                            </span>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                    <!-- Duplicate Reason -->\r\n                                                                                                    <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n\r\n\r\n                                                                                    </div>\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\"\r\n                                                                                        (click)=\"toggleCommentsAccordion()\">\r\n                                                                                        <div\r\n                                                                                            class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                            <span\r\n                                                                                                class=\"comments-count\">{{\r\n                                                                                                comments?.length }}\r\n                                                                                                Comments</span>\r\n                                                                                            <div\r\n                                                                                                class=\"accordion-arrow ms-3\">\r\n                                                                                                <svg [class.rotated]=\"commentsAccordionOpen\"\r\n                                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                    width=\"16\"\r\n                                                                                                    height=\"16\"\r\n                                                                                                    viewBox=\"0 0 16 16\"\r\n                                                                                                    fill=\"none\">\r\n                                                                                                    <path\r\n                                                                                                        d=\"M4 6L8 10L12 6\"\r\n                                                                                                        stroke=\"#667085\"\r\n                                                                                                        stroke-width=\"2\"\r\n                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                </svg>\r\n                                                                                            </div>\r\n\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n\r\n                                                                                    <!-- Accordion Body -->\r\n                                                                                    <div class=\"accordion-body\"\r\n                                                                                        *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                        <!-- Loop each block: tagging / review / approve -->\r\n                                                                                        <ng-container\r\n                                                                                            *ngFor=\"let block of activityData\">\r\n\r\n                                                                                            <!-- Loop inside comments -->\r\n                                                                                            <div *ngFor=\"let c of block.comments\"\r\n                                                                                                class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                                <!-- avatar -->\r\n                                                                                                <div\r\n                                                                                                    class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                    {{\r\n                                                                                                    getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n                                                                                                <div class=\"w-100\">\r\n\r\n                                                                                                    <!-- email -->\r\n                                                                                                    <div\r\n                                                                                                        class=\"fw-semibold\">\r\n                                                                                                        {{\r\n                                                                                                        c.createdByEmail\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n                                                                                                    <div class=\"text-muted small\"\r\n                                                                                                        *ngIf=\"c.createdAt\">\r\n                                                                                                        {{ c.createdAt |\r\n                                                                                                        date:'hh:mm:ss a\r\n                                                                                                        - dd MMM yyyy'\r\n                                                                                                        }}\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- message text -->\r\n                                                                                                    <p class=\"mb-2 mt-2\"\r\n                                                                                                        *ngIf=\"c.message\">\r\n                                                                                                        {{ c.message }}\r\n                                                                                                    </p>\r\n\r\n                                                                                                    <!-- Review / Approve only -->\r\n                                                                                                    <ng-container\r\n                                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                                        <!-- Tagged images -->\r\n                                                                                                        <div\r\n                                                                                                            class=\"d-flex gap-2 flex-wrap\">\r\n\r\n                                                                                                            <div\r\n                                                                                                                *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n                                                                                                                <!-- Show only first 4 -->\r\n                                                                                                                <ng-container\r\n                                                                                                                    *ngIf=\"i < 3\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"tango-card\">\r\n                                                                                                                        <div class=\"tango-image\"\r\n                                                                                                                            [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                                                                                                                        </div>\r\n\r\n                                                                                                                        <div\r\n                                                                                                                            class=\"tango-meta small\">\r\n                                                                                                                            <div>\r\n                                                                                                                                Tango\r\n                                                                                                                                ID:\r\n                                                                                                                                {{\r\n                                                                                                                                img.tempId\r\n                                                                                                                                }}\r\n\r\n                                                                                                                                <!-- status dots -->\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'approved'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                                        <rect\r\n                                                                                                                                            y=\"0.5\"\r\n                                                                                                                                            width=\"10\"\r\n                                                                                                                                            height=\"10\"\r\n                                                                                                                                            rx=\"5\"\r\n                                                                                                                                            fill=\"#D1FADF\" />\r\n                                                                                                                                        <path\r\n                                                                                                                                            fill-rule=\"evenodd\"\r\n                                                                                                                                            clip-rule=\"evenodd\"\r\n                                                                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                                            fill=\"#12B76A\" />\r\n                                                                                                                                    </svg></span>\r\n\r\n                                                                                                                                <span\r\n                                                                                                                                    *ngIf=\"c.status === 'rejected'\"><svg\r\n                                                                                                                                        style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                                        <g\r\n                                                                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                                                            <path\r\n                                                                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                                                stroke=\"#D92D20\"\r\n                                                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                                                        </g>\r\n                                                                                                                                        <defs>\r\n                                                                                                                                            <clipPath\r\n                                                                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                                                                <rect\r\n                                                                                                                                                    width=\"12\"\r\n                                                                                                                                                    height=\"12\"\r\n                                                                                                                                                    fill=\"white\"\r\n                                                                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                                            </clipPath>\r\n                                                                                                                                        </defs>\r\n                                                                                                                                    </svg></span>\r\n                                                                                                                            </div>\r\n\r\n                                                                                                                            <div\r\n                                                                                                                                class=\"text-muted\">\r\n                                                                                                                                Entry\r\n                                                                                                                                time:\r\n                                                                                                                                {{\r\n                                                                                                                                img.entryTime\r\n                                                                                                                                }}\r\n                                                                                                                            </div>\r\n                                                                                                                        </div>\r\n                                                                                                                    </div>\r\n                                                                                                                </ng-container>\r\n\r\n                                                                                                            </div>\r\n\r\n                                                                                                            <!-- +N more -->\r\n                                                                                                            <div class=\"tango-card more-card text-center\"\r\n                                                                                                                *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                                [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                                (click)=\"openImagesPopup(c)\">\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-overlay\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <!-- vertical container -->\r\n                                                                                                                <div\r\n                                                                                                                    class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"more-text fw-semibold\">\r\n                                                                                                                        +{{\r\n                                                                                                                        c.taggedImages.length\r\n                                                                                                                        -\r\n                                                                                                                        3\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-primary text-dark text-decoration-underline small\">\r\n                                                                                                                        View\r\n                                                                                                                        all\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n\r\n\r\n\r\n                                                                                                        </div>\r\n\r\n                                                                                                    </ng-container>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </ng-container>\r\n                                                                                    </div>\r\n\r\n\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </ng-container>\r\n\r\n                                                                    </ng-container>\r\n                                                                    <!-- Status Icons -->\r\n\r\n\r\n                                                                </div>\r\n                                                            </section>\r\n                                                            <section *ngIf=\"type !=='duplicate'\">\r\n                                                                <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n                                                                    <div class=\"card-header min-h-25px pt-3\">\r\n                                                                        <div class=\"duplicate-head text-lg my-3\"><span\r\n                                                                                class=\"me-2\"><svg\r\n                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"18\" height=\"18\"\r\n                                                                                    viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                                                    <path fill-rule=\"evenodd\"\r\n                                                                                        clip-rule=\"evenodd\"\r\n                                                                                        d=\"M7.51995 0.613065C8.33739 -0.204355 9.66267 -0.204355 10.4801 0.613065L17.387 7.51995C18.2043 8.33739 18.2043 9.66267 17.387 10.4801L10.4801 17.387C9.66267 18.2043 8.33739 18.2043 7.51995 17.387L5.54626 15.4133L3.73708 17.2224C2.91966 18.0399 1.59436 18.0399 0.776944 17.2224C-0.0404767 16.4051 -0.0404767 15.0797 0.776944 14.2624L2.58612 12.4531L0.613065 10.4801C-0.204355 9.66267 -0.204355 8.33739 0.613065 7.51995L7.51995 0.613065ZM9.49336 1.59978C9.22088 1.32731 8.77909 1.32731 8.50661 1.59978L3.57286 6.53357L11.4665 14.4272L16.4002 9.49336C16.6727 9.22088 16.6727 8.77909 16.4002 8.5067L12.9465 5.05286L11.7952 6.20403C11.5228 6.4765 11.0811 6.4765 10.8086 6.20403C10.5361 5.93155 10.5361 5.48978 10.8086 5.21731L11.9597 4.06614L10.9732 3.07964L8.17757 5.87533C7.90509 6.1478 7.46329 6.1478 7.19081 5.87533C6.91833 5.60286 6.91833 5.16109 7.19081 4.88862L9.9865 2.09293L9.49336 1.59978ZM10.4797 15.4139L2.58615 7.52028L1.59978 8.5067C1.3273 8.77909 1.3273 9.22088 1.59978 9.49336L8.50661 16.4002C8.77909 16.6727 9.22088 16.6727 9.49336 16.4002L10.4797 15.4139ZM3.57275 13.4399L1.76366 15.249C1.49119 15.5215 1.49119 15.9633 1.76366 16.2358C2.03613 16.5082 2.4779 16.5082 2.75037 16.2358L4.55946 14.4266L3.57275 13.4399Z\"\r\n                                                                                        fill=\"#475467\" />\r\n                                                                                </svg></span> {{type}}\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                    <div *ngIf=\"isCheckboxEnable\" class=\"ms-3 my-3\">\r\n                                                                        <input type=\"checkbox\"\r\n                                                                            [(ngModel)]=\"selectAllByType[type]\"\r\n                                                                            (change)=\"onSelectAll(type, $event)\">\r\n                                                                        <label>Select All</label>\r\n                                                                    </div>\r\n                                                                    <ng-container\r\n                                                                        *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                                        <!-- Body Section -->\r\n                                                                        <div *ngIf=\"mapping?.type ===viewMode\"\r\n                                                                            class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                                                            <div class=\"row\">\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n                                                                                    <div *ngIf=\"original?.revopsType ===type\"\r\n                                                                                        class=\"col-md-3 mb-3 position-relative\">\r\n                                                                                        <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                                            [ngClass]=\"{\r\n'layer-approved': isApproved(original),\r\n'layer-rejected': isRejected(original),\r\n'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                                                            <!-- Top-right Checkbox -->\r\n                                                                                            <div\r\n                                                                                                *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                                                                <input\r\n                                                                                                    *ngIf=\"!isLockedByReviewer(original)\"\r\n                                                                                                    type=\"checkbox\"\r\n                                                                                                    class=\"position-absolute absolute form-check-input\"\r\n                                                                                                    [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n                                                                                                    (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n                                                                                                <span\r\n                                                                                                    class=\"position-absolute absolute\"\r\n                                                                                                    *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                                                    (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                        width=\"19\"\r\n                                                                                                        height=\"19\"\r\n                                                                                                        viewBox=\"0 0 19 19\"\r\n                                                                                                        fill=\"none\">\r\n                                                                                                        <g\r\n                                                                                                            filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.11133\"\r\n                                                                                                                y=\"0.555664\"\r\n                                                                                                                width=\"16\"\r\n                                                                                                                height=\"16\"\r\n                                                                                                                rx=\"2\"\r\n                                                                                                                fill=\"white\" />\r\n                                                                                                            <rect\r\n                                                                                                                x=\"1.38911\"\r\n                                                                                                                y=\"0.833442\"\r\n                                                                                                                width=\"15.4444\"\r\n                                                                                                                height=\"15.4444\"\r\n                                                                                                                rx=\"1.72222\"\r\n                                                                                                                stroke=\"#D0D5DD\"\r\n                                                                                                                stroke-width=\"0.555556\" />\r\n                                                                                                            <path\r\n                                                                                                                d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                                stroke=\"#344054\"\r\n                                                                                                                stroke-width=\"0.927778\"\r\n                                                                                                                stroke-linecap=\"round\"\r\n                                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                                        </g>\r\n                                                                                                        <defs>\r\n                                                                                                            <filter\r\n                                                                                                                id=\"filter0_d_2023_13718\"\r\n                                                                                                                x=\"0.00021708\"\r\n                                                                                                                y=\"0.00010854\"\r\n                                                                                                                width=\"18.2222\"\r\n                                                                                                                height=\"18.2222\"\r\n                                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                                <feFlood\r\n                                                                                                                    flood-opacity=\"0\"\r\n                                                                                                                    result=\"BackgroundImageFix\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                                    result=\"hardAlpha\" />\r\n                                                                                                                <feOffset\r\n                                                                                                                    dy=\"0.555556\" />\r\n                                                                                                                <feGaussianBlur\r\n                                                                                                                    stdDeviation=\"0.555556\" />\r\n                                                                                                                <feColorMatrix\r\n                                                                                                                    type=\"matrix\"\r\n                                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                                    result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                                <feBlend\r\n                                                                                                                    mode=\"normal\"\r\n                                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                                    in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                                    result=\"shape\" />\r\n                                                                                                            </filter>\r\n                                                                                                        </defs>\r\n                                                                                                    </svg>\r\n                                                                                                </span>\r\n                                                                                            </div>\r\n\r\n\r\n                                                                                            <img [src]=\"imageUrl + original?.filePath\"\r\n                                                                                                alt=\"\"\r\n                                                                                                (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                                                                                class=\"w-100 rounded border cursor-pointer\" />\r\n                                                                                            <div class=\"row my-2\">\r\n                                                                                                <div class=\"col-8\">\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-title ms-2 my-2\">\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        original.tempId\r\n                                                                                                        }}\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                                <rect\r\n                                                                                                                    y=\"0.5\"\r\n                                                                                                                    width=\"10\"\r\n                                                                                                                    height=\"10\"\r\n                                                                                                                    rx=\"5\"\r\n                                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                                <path\r\n                                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                    fill=\"#12B76A\" />\r\n                                                                                                            </svg>\r\n                                                                                                        </span>\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                                                            class=\"ms-2\"><svg\r\n                                                                                                                style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <clipPath\r\n                                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                                        <rect\r\n                                                                                                                            width=\"12\"\r\n                                                                                                                            height=\"12\"\r\n                                                                                                                            fill=\"white\"\r\n                                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                    </clipPath>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg></span>\r\n                                                                                                    </div>\r\n                                                                                                    <div\r\n                                                                                                        class=\"desc-value ms-2\">\r\n                                                                                                        Entry Time: {{\r\n                                                                                                        getFormattedEntryTime(original?.entryTime)\r\n                                                                                                        }}</div>\r\n                                                                                                </div>\r\n                                                                                                <div class=\"col-4\">\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#D1FADF\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                                    stroke=\"#039855\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94051\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg>\r\n                                                                                                    </span>\r\n                                                                                                    <span\r\n                                                                                                        *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                                            width=\"37\"\r\n                                                                                                            height=\"37\"\r\n                                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                                            fill=\"none\">\r\n                                                                                                            <rect\r\n                                                                                                                width=\"24\"\r\n                                                                                                                height=\"24\"\r\n                                                                                                                rx=\"12\"\r\n                                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                                            <g\r\n                                                                                                                clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                                <path\r\n                                                                                                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                                    stroke=\"#D92D20\"\r\n                                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                                            </g>\r\n                                                                                                            <defs>\r\n                                                                                                                <clipPath\r\n                                                                                                                    id=\"clip0_486_94090\">\r\n                                                                                                                    <rect\r\n                                                                                                                        width=\"12\"\r\n                                                                                                                        height=\"12\"\r\n                                                                                                                        fill=\"white\"\r\n                                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                                </clipPath>\r\n                                                                                                            </defs>\r\n                                                                                                        </svg></span>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </ng-container>\r\n                                                                    <div class=\"card-footer py-5\">\r\n                                                                        <div class=\"comments-accordion\">\r\n                                                                            <!-- Accordion Header -->\r\n                                                                            <div class=\"accordion-header\"\r\n                                                                                (click)=\"toggleCommentsAccordion()\">\r\n                                                                                <div\r\n                                                                                    class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                                    <div class=\"comments-title\">\r\n                                                                                        <span class=\"comments-count\">{{\r\n                                                                                            comments?.length }}\r\n                                                                                            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\"\r\n                                                                                            width=\"16\" height=\"16\"\r\n                                                                                            viewBox=\"0 0 16 16\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <path d=\"M4 6L8 10L12 6\"\r\n                                                                                                stroke=\"#667085\"\r\n                                                                                                stroke-width=\"2\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </svg>\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                            <!-- Accordion Content -->\r\n                                                                            <div class=\"accordion-body\"\r\n                                                                                *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                                <!-- loop each block: tagging / review / approve -->\r\n                                                                                <ng-container\r\n                                                                                    *ngFor=\"let block of activityData1\">\r\n\r\n                                                                                    <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'tagging'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div>\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n                                                                                                <!-- single image card -->\r\n                                                                                                <div\r\n                                                                                                    class=\"d-flex gap-2 flex-wrap\">\r\n                                                                                                    <div class=\"tango-card\"\r\n                                                                                                        *ngIf=\"c.filePath\">\r\n                                                                                                        <div class=\"tango-image\"\r\n                                                                                                            [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"tango-meta small\">\r\n                                                                                                            <div>Tango\r\n                                                                                                                ID: {{\r\n                                                                                                                c.tempId\r\n                                                                                                                }}</div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-muted\">\r\n                                                                                                                Entry\r\n                                                                                                                time: {{\r\n                                                                                                                c.entryTime\r\n                                                                                                                }}</div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                    <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n                                                                                    <ng-container\r\n                                                                                        *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                        <div *ngFor=\"let c of block.comments\"\r\n                                                                                            class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                                            <!-- avatar -->\r\n                                                                                            <div\r\n                                                                                                class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                                                {{\r\n                                                                                                getInitialsFromEmail(c.createdByEmail)\r\n                                                                                                }}\r\n                                                                                            </div>\r\n\r\n                                                                                            <!-- content -->\r\n                                                                                            <div class=\"w-100\">\r\n                                                                                                <div\r\n                                                                                                    class=\"fw-semibold\">\r\n                                                                                                    {{ c.createdByEmail\r\n                                                                                                    }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <div class=\"text-muted small\"\r\n                                                                                                    *ngIf=\"c.createdAt\">\r\n                                                                                                    {{ c.createdAt |\r\n                                                                                                    date:'hh:mm:ss a -\r\n                                                                                                    dd MMM yyyy' }}\r\n                                                                                                </div>\r\n\r\n                                                                                                <!-- main review/approve message -->\r\n                                                                                                <p class=\"mb-2 mt-2\"\r\n                                                                                                    *ngIf=\"c.message\">\r\n                                                                                                    {{ c.message }}\r\n                                                                                                </p>\r\n\r\n\r\n\r\n                                                                                                <!-- image list + +N View all -->\r\n                                                                                                <div class=\"d-flex gap-2 flex-wrap\"\r\n                                                                                                    *ngIf=\"c.taggedImages?.length\">\r\n\r\n                                                                                                    <!-- first 3 images -->\r\n                                                                                                    <div\r\n                                                                                                        *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                                                                                                        <ng-container\r\n                                                                                                            *ngIf=\"i < 3\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"tango-card\">\r\n                                                                                                                <div class=\"tango-image\"\r\n                                                                                                                    [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n                                                                                                                </div>\r\n\r\n                                                                                                                <div\r\n                                                                                                                    class=\"tango-meta small\">\r\n                                                                                                                    <div>\r\n                                                                                                                        Tango\r\n                                                                                                                        ID:\r\n                                                                                                                        {{\r\n                                                                                                                        img.tempId\r\n                                                                                                                        }}\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'approved'\"\r\n                                                                                                                            class=\"status-dot status-approve\"></span>\r\n                                                                                                                        <span\r\n                                                                                                                            *ngIf=\"c.status === 'rejected'\"\r\n                                                                                                                            class=\"status-dot status-reject\"></span>\r\n                                                                                                                    </div>\r\n                                                                                                                    <div\r\n                                                                                                                        class=\"text-muted\">\r\n                                                                                                                        Entry\r\n                                                                                                                        time:\r\n                                                                                                                        {{\r\n                                                                                                                        img.entryTime\r\n                                                                                                                        }}\r\n                                                                                                                    </div>\r\n                                                                                                                </div>\r\n                                                                                                            </div>\r\n                                                                                                        </ng-container>\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <!-- +N View all card -->\r\n                                                                                                    <div class=\"tango-card more-card text-center\"\r\n                                                                                                        *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                                        [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                                        (click)=\"openImagesPopup(c)\">\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-overlay\">\r\n                                                                                                        </div>\r\n\r\n                                                                                                        <div\r\n                                                                                                            class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                                            <div\r\n                                                                                                                class=\"more-text fw-semibold\">\r\n                                                                                                                +{{\r\n                                                                                                                c.taggedImages.length\r\n                                                                                                                - 3 }}\r\n                                                                                                            </div>\r\n                                                                                                            <div\r\n                                                                                                                class=\"text-primary text-decoration-underline small\">\r\n                                                                                                                View all\r\n                                                                                                            </div>\r\n                                                                                                        </div>\r\n                                                                                                    </div>\r\n\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </ng-container>\r\n\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </section>\r\n                                                        </ng-container>\r\n\r\n\r\n\r\n                                                    </div>\r\n                                                </ng-container>\r\n                                            </div>\r\n                                            <div *ngIf=\"showTangoDetails\"\r\n                                                class=\"details-toggle d-flex justify-content-start bg-light-primary align-items-start mt-2\"\r\n                                                (click)=\"toggleRevisedDetails(mapping)\">\r\n                                                <span class=\"text-primary \">\r\n                                                    Hide in details\r\n                                                </span>\r\n\r\n                                                <span class=\"chevron ms-3 cursor-pointer\">\r\n                                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"\r\n                                                        viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                        <path d=\"M6 15L12 9L18 15\" stroke=\"#101828\" stroke-width=\"2\"\r\n                                                            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                    </svg>\r\n                                                </span>\r\n                                            </div>\r\n                                        </div>\r\n\r\n\r\n                                    </ng-container>\r\n\r\n\r\n\r\n                                    <!-- <div class=\"timeline\"></div> -->\r\n\r\n                                </div>\r\n                            </ng-container>\r\n                        </section>\r\n                    </div>\r\n\r\n                </div>\r\n                <section *ngIf=\"!footfallLoading && !footfallNoData\">\r\n\r\n\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-6 position-relative\">\r\n                            <div *ngIf=\"isCheckboxEnable\" class=\"pb-3 my-3 h-100 rounded-3 position-relative\">\r\n\r\n                                <input type=\"checkbox\" class=\"position-absolute absolute1 form-check-input\"\r\n                                    [(ngModel)]=\"allSelected\" (change)=\"overallSelect($event)\" /><span class=\"ms-12\">\r\n                                    Select\r\n                                    All</span>\r\n                            </div>\r\n                        </div>\r\n                        <div *ngIf=\"isCheckboxEnable\" class=\"col-md-6 pe-8\">\r\n\r\n                            <div class=\"row\">\r\n                                <div class=\"col-md-4\">\r\n                                    <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\"\r\n                                        class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('rejected')\">\r\n\r\n                                        {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' :\r\n                                        'Reject'\r\n                                        }}\r\n\r\n                                    </button>\r\n                                </div>\r\n                                <div class=\"col-md-4\">\r\n                                    <button [disabled]=\"!overallSelectedIds?.length\"\r\n                                        class=\"btn btn-outline bg-white w-100\" (click)=\"popupOpen('approved')\">\r\n\r\n                                        {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                                        'Accept' }}\r\n\r\n                                    </button>\r\n                                </div>\r\n\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n\r\n                    <div *ngIf=\"!approverClosed\" class=\"bg-white\">\r\n                        <ng-container *ngFor=\"let ticket of footfallTicketsData\">\r\n                            <div *ngIf=\"ticket?._source as source\" class=\"my-5\">\r\n                                <ng-container *ngFor=\"let type of revopsTypes\">\r\n                                    <section *ngIf=\"type ==='duplicate'\">\r\n\r\n                                        <div *ngIf=\"hasRevopsType(type)\" class=\"layers\">\r\n                                            <!-- Header Section -->\r\n                                            <div class=\"card-header min-h-25px pt-3\">\r\n                                                <h3 class=\"text-lg font-semibold mb-4\">\r\n                                                    <span class=\"me-2\">\r\n                                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n                                                            viewBox=\"0 0 18 18\" fill=\"none\">\r\n                                                            <g clip-path=\"url(#clip0_730_76157)\">\r\n                                                                <path\r\n                                                                    d=\"M3.75 11.25H3C2.60218 11.25 2.22064 11.092 1.93934 10.8107C1.65804 10.5294 1.5 10.1478 1.5 9.75V3C1.5 2.60218 1.65804 2.22064 1.93934 1.93934C2.22064 1.65804 2.60218 1.5 3 1.5H9.75C10.1478 1.5 10.5294 1.65804 10.8107 1.93934C11.092 2.22064 11.25 2.60218 11.25 3V3.75M8.25 6.75H15C15.8284 6.75 16.5 7.42157 16.5 8.25V15C16.5 15.8284 15.8284 16.5 15 16.5H8.25C7.42157 16.5 6.75 15.8284 6.75 15V8.25C6.75 7.42157 7.42157 6.75 8.25 6.75Z\"\r\n                                                                    stroke=\"#475467\" stroke-width=\"2\"\r\n                                                                    stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                                            </g>\r\n                                                            <defs>\r\n                                                                <clipPath id=\"clip0_730_76157\">\r\n                                                                    <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                                                                </clipPath>\r\n                                                            </defs>\r\n                                                        </svg>\r\n                                                    </span>\r\n                                                    Duplicates\r\n                                                </h3>\r\n                                            </div>\r\n\r\n\r\n                                            <!-- Body Section -->\r\n                                            <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                <!-- Body Section -->\r\n                                                <ng-container *ngIf=\"mapping?.type ===viewMode\">\r\n                                                    <ng-container *ngFor=\"let original of mapping?.revisedDetail\">\r\n                                                        <div *ngIf=\"original?.isParent && original?.revopsType ==='duplicate'\"\r\n                                                            class=\"card-body bg-white layers 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\"\r\n                                                                                alt=\"\" class=\"w-100 rounded border\" />\r\n                                                                            <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n                                                                                {{\r\n                                                                                original.tempId\r\n                                                                                }}</div>\r\n                                                                            <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                                getFormattedEntryTime(original?.entryTime)\r\n                                                                                }}</div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\r\n                                                                <div class=\"separator separator-dashed mt-3 mb-5\"></div>\r\n                                                                <div class=\"row px-5\">\r\n                                                                    <h5 class=\"duplicate-head my-3 fs-6\">Tagged\r\n                                                                        Duplicates</h5>\r\n                                                                    <div *ngIf=\"isCheckboxEnable\" class=\"my-3\">\r\n                                                                        <input type=\"checkbox\"\r\n                                                                            [checked]=\"areAllDuplicatesSelected(original)\"\r\n                                                                            (change)=\"onToggleSelectAllDuplicates(original, $event)\" />\r\n                                                                        <label class=\"ms-2\">Select All</label>\r\n                                                                    </div>\r\n                                                                    <div *ngFor=\"let duplicate of original?.duplicateImage; let i = index\"\r\n                                                                        class=\"col-md-3 mb-3 position-relative\">\r\n                                                                        <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                            [ngClass]=\"{\r\n    'layer-approved': isApproved(duplicate),\r\n    'layer-rejected': isRejected(duplicate),\r\n    'img-border border border-1': !isApproved(duplicate) && !isRejected(duplicate)}\">\r\n                                                                            <!-- Checkbox -->\r\n                                                                            <div *ngIf=\"isCheckboxEnable\">\r\n                                                                                <input type=\"checkbox\"\r\n                                                                                    *ngIf=\"!isLockedByReviewer(duplicate)\"\r\n                                                                                    style=\"right: 5px ; margin: 10px 5px 4px !important;\"\r\n                                                                                    [checked]=\"isDuplicateSelected(original.tempId, duplicate.tempId)\"\r\n                                                                                    (change)=\"onDuplicateCheckboxChange(original.tempId, duplicate.tempId, $event)\"\r\n                                                                                    class=\"position-absolute form-check-input duplicate-checkbox\" />\r\n                                                                                <span class=\"position-absolute absolute\"\r\n                                                                                    *ngIf=\"isLockedByReviewer(duplicate)\"\r\n                                                                                    (click)=\"resetCheckbox('duplicate', duplicate)\">\r\n\r\n\r\n                                                                                    <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                        width=\"19\" height=\"19\"\r\n                                                                                        viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                                        <g\r\n                                                                                            filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                            <rect x=\"1.11133\"\r\n                                                                                                y=\"0.555664\" width=\"16\"\r\n                                                                                                height=\"16\" rx=\"2\"\r\n                                                                                                fill=\"white\" />\r\n                                                                                            <rect x=\"1.38911\"\r\n                                                                                                y=\"0.833442\"\r\n                                                                                                width=\"15.4444\"\r\n                                                                                                height=\"15.4444\"\r\n                                                                                                rx=\"1.72222\"\r\n                                                                                                stroke=\"#D0D5DD\"\r\n                                                                                                stroke-width=\"0.555556\" />\r\n                                                                                            <path\r\n                                                                                                d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                                stroke=\"#344054\"\r\n                                                                                                stroke-width=\"0.927778\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <filter\r\n                                                                                                id=\"filter0_d_2023_13718\"\r\n                                                                                                x=\"0.00021708\"\r\n                                                                                                y=\"0.00010854\"\r\n                                                                                                width=\"18.2222\"\r\n                                                                                                height=\"18.2222\"\r\n                                                                                                filterUnits=\"userSpaceOnUse\"\r\n                                                                                                color-interpolation-filters=\"sRGB\">\r\n                                                                                                <feFlood\r\n                                                                                                    flood-opacity=\"0\"\r\n                                                                                                    result=\"BackgroundImageFix\" />\r\n                                                                                                <feColorMatrix\r\n                                                                                                    in=\"SourceAlpha\"\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                                    result=\"hardAlpha\" />\r\n                                                                                                <feOffset\r\n                                                                                                    dy=\"0.555556\" />\r\n                                                                                                <feGaussianBlur\r\n                                                                                                    stdDeviation=\"0.555556\" />\r\n                                                                                                <feColorMatrix\r\n                                                                                                    type=\"matrix\"\r\n                                                                                                    values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in2=\"BackgroundImageFix\"\r\n                                                                                                    result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                                <feBlend mode=\"normal\"\r\n                                                                                                    in=\"SourceGraphic\"\r\n                                                                                                    in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                                    result=\"shape\" />\r\n                                                                                            </filter>\r\n                                                                                        </defs>\r\n                                                                                    </svg>\r\n\r\n                                                                                </span>\r\n                                                                            </div>\r\n                                                                            <!-- (change)=\"onImageCheckboxChange(duplicate.tempId, 'duplicate', 'original')\" -->\r\n                                                                            <!-- Duplicate Image -->\r\n                                                                            <img [src]=\"imageUrl + duplicate.filePath\"\r\n                                                                                alt=\"\"\r\n                                                                                (click)=\"openImagePreview(mapping,original.duplicateImage, i, 'Tagged Duplicates')\"\r\n                                                                                class=\"w-100 rounded border duplicate-image cursor-pointer\" />\r\n\r\n                                                                            <!-- Duplicate Info -->\r\n                                                                            <div class=\"row my-2\">\r\n                                                                                <div class=\"col-9\">\r\n                                                                                    <div class=\"desc-title ms-2 my-2\">\r\n                                                                                        Tango ID: {{ duplicate.tempId }}\r\n\r\n                                                                                        <span\r\n                                                                                            *ngIf=\"getAction(duplicate, 'review')?.action === 'approved'\"\r\n                                                                                            class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                                <rect y=\"0.5\" width=\"10\"\r\n                                                                                                    height=\"10\" rx=\"5\"\r\n                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                <path\r\n                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                    fill=\"#12B76A\" />\r\n                                                                                            </svg>\r\n                                                                                        </span>\r\n                                                                                        <span\r\n                                                                                            *ngIf=\"getAction(duplicate, 'review')?.action === 'rejected'\"\r\n                                                                                            class=\"ms-2\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                                <g\r\n                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                    <path\r\n                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                    <path\r\n                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                </g>\r\n                                                                                                <defs>\r\n                                                                                                    <clipPath\r\n                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                        <rect width=\"12\"\r\n                                                                                                            height=\"12\"\r\n                                                                                                            fill=\"white\"\r\n                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                    </clipPath>\r\n                                                                                                </defs>\r\n                                                                                            </svg></span>\r\n\r\n                                                                                    </div>\r\n\r\n                                                                                    <div class=\"desc-value ms-2\">Entry\r\n                                                                                        Time: {{\r\n                                                                                        getFormattedEntryTime(duplicate.entryTime)\r\n                                                                                        }}\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                                <div class=\"col-3\">\r\n                                                                                    <span\r\n                                                                                        *ngIf=\"getAction(duplicate, 'approve')?.action === 'approved'\">\r\n\r\n                                                                                        <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                            width=\"37\" height=\"37\"\r\n                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <rect width=\"24\" height=\"24\"\r\n                                                                                                rx=\"12\"\r\n                                                                                                fill=\"#D1FADF\" />\r\n                                                                                            <g\r\n                                                                                                clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                                <path\r\n                                                                                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                                    stroke=\"#039855\"\r\n                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                            </g>\r\n                                                                                            <defs>\r\n                                                                                                <clipPath\r\n                                                                                                    id=\"clip0_486_94051\">\r\n                                                                                                    <rect width=\"12\"\r\n                                                                                                        height=\"12\"\r\n                                                                                                        fill=\"white\"\r\n                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                </clipPath>\r\n                                                                                            </defs>\r\n                                                                                        </svg>\r\n\r\n                                                                                    </span>\r\n                                                                                    <span\r\n                                                                                        *ngIf=\"getAction(duplicate, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                            width=\"37\" height=\"37\"\r\n                                                                                            viewBox=\"0 0 24 24\"\r\n                                                                                            fill=\"none\">\r\n                                                                                            <rect width=\"24\" height=\"24\"\r\n                                                                                                rx=\"12\"\r\n                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                            <g\r\n                                                                                                clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                                <path\r\n                                                                                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                                    stroke=\"#D92D20\"\r\n                                                                                                    stroke-linecap=\"round\"\r\n                                                                                                    stroke-linejoin=\"round\" />\r\n                                                                                            </g>\r\n                                                                                            <defs>\r\n                                                                                                <clipPath\r\n                                                                                                    id=\"clip0_486_94090\">\r\n                                                                                                    <rect width=\"12\"\r\n                                                                                                        height=\"12\"\r\n                                                                                                        fill=\"white\"\r\n                                                                                                        transform=\"translate(6 6)\" />\r\n                                                                                                </clipPath>\r\n                                                                                            </defs>\r\n                                                                                        </svg> </span>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                            <!-- Duplicate Reason -->\r\n                                                                            <!-- <div class=\"duplicate-reason ms-2 mt-2\">\r\n                                                            <small class=\"text-muted\">{{ duplicate.reason }}</small>\r\n                                                        </div> -->\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n\r\n\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\"\r\n                                                                (click)=\"toggleCommentsAccordion()\">\r\n                                                                <div\r\n                                                                    class=\"d-flex justify-content-start align-items-center w-100\">\r\n                                                                    <span class=\"comments-count\">{{ comments?.length }}\r\n                                                                        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\"\r\n                                                                            width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                                                            fill=\"none\">\r\n                                                                            <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n                                                                                stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                                stroke-linejoin=\"round\" />\r\n                                                                        </svg>\r\n                                                                    </div>\r\n\r\n                                                                </div>\r\n                                                            </div>\r\n\r\n                                                            <!-- Accordion Body -->\r\n                                                            <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                                <!-- Loop each block: tagging / review / approve -->\r\n                                                                <ng-container *ngFor=\"let block of activityData\">\r\n\r\n                                                                    <!-- Loop inside comments -->\r\n                                                                    <div *ngFor=\"let c of block.comments\"\r\n                                                                        class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                        <!-- avatar -->\r\n                                                                        <div\r\n                                                                            class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                            {{ getInitialsFromEmail(c.createdByEmail) }}\r\n                                                                        </div>\r\n                                                                        <div class=\"w-100\">\r\n\r\n                                                                            <!-- email -->\r\n                                                                            <div class=\"fw-semibold\">\r\n                                                                                {{ c.createdByEmail }}\r\n                                                                            </div>\r\n                                                                            <div class=\"text-muted small\"\r\n                                                                                *ngIf=\"c.createdAt\">\r\n                                                                                {{ c.createdAt | date:'hh:mm:ss a - dd\r\n                                                                                MMM yyyy' }}\r\n                                                                            </div>\r\n\r\n                                                                            <!-- message text -->\r\n                                                                            <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                                                                                {{ c.message }}\r\n                                                                            </p>\r\n\r\n                                                                            <!-- Review / Approve only -->\r\n                                                                            <ng-container\r\n                                                                                *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                                <!-- Tagged images -->\r\n                                                                                <div class=\"d-flex gap-2 flex-wrap\">\r\n\r\n                                                                                    <div\r\n                                                                                        *ngFor=\"let img of c.taggedImages; let i = index\">\r\n\r\n                                                                                        <!-- Show only first 4 -->\r\n                                                                                        <ng-container *ngIf=\"i < 3\">\r\n                                                                                            <div class=\"tango-card\">\r\n                                                                                                <div class=\"tango-image\"\r\n                                                                                                    [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                                                                                                </div>\r\n\r\n                                                                                                <div\r\n                                                                                                    class=\"tango-meta small\">\r\n                                                                                                    <div>\r\n                                                                                                        Tango ID: {{\r\n                                                                                                        img.tempId }}\r\n\r\n                                                                                                        <!-- status dots -->\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"c.status === 'approved'\"><svg\r\n                                                                                                                style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <rect\r\n                                                                                                                    y=\"0.5\"\r\n                                                                                                                    width=\"10\"\r\n                                                                                                                    height=\"10\"\r\n                                                                                                                    rx=\"5\"\r\n                                                                                                                    fill=\"#D1FADF\" />\r\n                                                                                                                <path\r\n                                                                                                                    fill-rule=\"evenodd\"\r\n                                                                                                                    clip-rule=\"evenodd\"\r\n                                                                                                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                                                    fill=\"#12B76A\" />\r\n                                                                                                            </svg></span>\r\n\r\n                                                                                                        <span\r\n                                                                                                            *ngIf=\"c.status === 'rejected'\"><svg\r\n                                                                                                                style=\"width: 20px;\r\n                height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\"\r\n                                                                                                                fill=\"none\">\r\n                                                                                                                <g\r\n                                                                                                                    clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                                                    <path\r\n                                                                                                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                                        stroke=\"#D92D20\"\r\n                                                                                                                        stroke-linecap=\"round\"\r\n                                                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                                                </g>\r\n                                                                                                                <defs>\r\n                                                                                                                    <clipPath\r\n                                                                                                                        id=\"clip0_1428_59484\">\r\n                                                                                                                        <rect\r\n                                                                                                                            width=\"12\"\r\n                                                                                                                            height=\"12\"\r\n                                                                                                                            fill=\"white\"\r\n                                                                                                                            transform=\"translate(0.599609 0.5)\" />\r\n                                                                                                                    </clipPath>\r\n                                                                                                                </defs>\r\n                                                                                                            </svg></span>\r\n                                                                                                    </div>\r\n\r\n                                                                                                    <div\r\n                                                                                                        class=\"text-muted\">\r\n                                                                                                        Entry time: {{\r\n                                                                                                        img.entryTime }}\r\n                                                                                                    </div>\r\n                                                                                                </div>\r\n                                                                                            </div>\r\n                                                                                        </ng-container>\r\n\r\n                                                                                    </div>\r\n\r\n                                                                                    <!-- +N more -->\r\n                                                                                    <div class=\"tango-card more-card text-center\"\r\n                                                                                        *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                        [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                        (click)=\"openImagesPopup(c)\">\r\n                                                                                        <div class=\"more-overlay\"></div>\r\n\r\n                                                                                        <!-- vertical container -->\r\n                                                                                        <div\r\n                                                                                            class=\"more-wrapper my-10 d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                            <div\r\n                                                                                                class=\"more-text fw-semibold\">\r\n                                                                                                +{{\r\n                                                                                                c.taggedImages.length -\r\n                                                                                                3 }}</div>\r\n                                                                                            <div\r\n                                                                                                class=\"text-primary text-dark text-decoration-underline small\">\r\n                                                                                                View all\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n\r\n\r\n\r\n                                                                                </div>\r\n\r\n                                                                            </ng-container>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </ng-container>\r\n                                                            </div>\r\n\r\n\r\n                                                        </div>\r\n                                                    </div>\r\n                                                </ng-container>\r\n\r\n                                            </ng-container>\r\n                                            <!-- Status Icons -->\r\n\r\n\r\n                                        </div>\r\n                                    </section>\r\n                                    <section *ngIf=\"type !=='duplicate'\">\r\n                                        <div class=\"layers my-2\" *ngIf=\"hasRevopsType(type)\">\r\n                                            <div class=\"card-header min-h-25px pt-3\">\r\n                                                <div class=\"duplicate-head text-lg my-3\"><span 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> {{type}}\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[type]\"\r\n                                                    (change)=\"onSelectAll(type, $event)\">\r\n                                                <label>Select All</label>\r\n                                            </div>\r\n                                            <ng-container *ngFor=\"let mapping of source?.mappingInfo\">\r\n                                                <!-- Body Section -->\r\n                                                <div *ngIf=\"mapping?.type ===viewMode\"\r\n                                                    class=\"card-body bg-white layers p-5 m-3\">\r\n\r\n                                                    <div class=\"row\">\r\n                                                        <ng-container\r\n                                                            *ngFor=\"let original of mapping?.revisedDetail;let i=index\">\r\n                                                            <div *ngIf=\"original?.revopsType ===type\"\r\n                                                                class=\"col-md-3 mb-3 position-relative\">\r\n                                                                <div class=\"pb-3 h-100 rounded-3 position-relative\"\r\n                                                                    [ngClass]=\"{\r\n'layer-approved': isApproved(original),\r\n'layer-rejected': isRejected(original),\r\n'img-border border border-1': !isApproved(original) && !isRejected(original)}\">\r\n\r\n\r\n                                                                    <!-- Top-right Checkbox -->\r\n                                                                    <div *ngIf=\"isCheckboxEnable\">\r\n\r\n                                                                        <input *ngIf=\"!isLockedByReviewer(original)\"\r\n                                                                            type=\"checkbox\"\r\n                                                                            class=\"position-absolute absolute form-check-input\"\r\n                                                                            [checked]=\"(selectedByType[type] || []).includes(original?.tempId)\"\r\n                                                                            (change)=\"onImageCheckboxChange(type, original.tempId,$event)\" />\r\n                                                                        <span class=\"position-absolute absolute\"\r\n                                                                            *ngIf=\"isLockedByReviewer(original)\"\r\n                                                                            (click)=\"resetCheckbox(type, original)\">\r\n\r\n                                                                            <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                width=\"19\" height=\"19\"\r\n                                                                                viewBox=\"0 0 19 19\" fill=\"none\">\r\n                                                                                <g filter=\"url(#filter0_d_2023_13718)\">\r\n                                                                                    <rect x=\"1.11133\" y=\"0.555664\"\r\n                                                                                        width=\"16\" height=\"16\" rx=\"2\"\r\n                                                                                        fill=\"white\" />\r\n                                                                                    <rect x=\"1.38911\" y=\"0.833442\"\r\n                                                                                        width=\"15.4444\" height=\"15.4444\"\r\n                                                                                        rx=\"1.72222\" stroke=\"#D0D5DD\"\r\n                                                                                        stroke-width=\"0.555556\" />\r\n                                                                                    <path d=\"M5.87109 8.55566H12.3526\"\r\n                                                                                        stroke=\"#344054\"\r\n                                                                                        stroke-width=\"0.927778\"\r\n                                                                                        stroke-linecap=\"round\"\r\n                                                                                        stroke-linejoin=\"round\" />\r\n                                                                                </g>\r\n                                                                                <defs>\r\n                                                                                    <filter id=\"filter0_d_2023_13718\"\r\n                                                                                        x=\"0.00021708\" y=\"0.00010854\"\r\n                                                                                        width=\"18.2222\" height=\"18.2222\"\r\n                                                                                        filterUnits=\"userSpaceOnUse\"\r\n                                                                                        color-interpolation-filters=\"sRGB\">\r\n                                                                                        <feFlood flood-opacity=\"0\"\r\n                                                                                            result=\"BackgroundImageFix\" />\r\n                                                                                        <feColorMatrix in=\"SourceAlpha\"\r\n                                                                                            type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\r\n                                                                                            result=\"hardAlpha\" />\r\n                                                                                        <feOffset dy=\"0.555556\" />\r\n                                                                                        <feGaussianBlur\r\n                                                                                            stdDeviation=\"0.555556\" />\r\n                                                                                        <feColorMatrix type=\"matrix\"\r\n                                                                                            values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in2=\"BackgroundImageFix\"\r\n                                                                                            result=\"effect1_dropShadow_2023_13718\" />\r\n                                                                                        <feBlend mode=\"normal\"\r\n                                                                                            in=\"SourceGraphic\"\r\n                                                                                            in2=\"effect1_dropShadow_2023_13718\"\r\n                                                                                            result=\"shape\" />\r\n                                                                                    </filter>\r\n                                                                                </defs>\r\n                                                                            </svg>\r\n                                                                        </span>\r\n                                                                    </div>\r\n\r\n\r\n                                                                    <img [src]=\"imageUrl + original?.filePath\" alt=\"\"\r\n                                                                        (click)=\"openImagePreview(mapping,original, i, selectedByType[type])\"\r\n                                                                        class=\"w-100 rounded border cursor-pointer\" />\r\n                                                                    <div class=\"row my-2\">\r\n                                                                        <div class=\"col-8\">\r\n                                                                            <div class=\"desc-title ms-2 my-2\">Tango ID:\r\n                                                                                {{\r\n                                                                                original.tempId\r\n                                                                                }}\r\n                                                                                <span\r\n                                                                                    *ngIf=\"getAction(original, 'review')?.action === 'approved'\"\r\n                                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                                                                        <rect y=\"0.5\" width=\"10\"\r\n                                                                                            height=\"10\" rx=\"5\"\r\n                                                                                            fill=\"#D1FADF\" />\r\n                                                                                        <path fill-rule=\"evenodd\"\r\n                                                                                            clip-rule=\"evenodd\"\r\n                                                                                            d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                                                                            fill=\"#12B76A\" />\r\n                                                                                    </svg>\r\n                                                                                </span>\r\n                                                                                <span\r\n                                                                                    *ngIf=\"getAction(original, 'review')?.action === 'rejected'\"\r\n                                                                                    class=\"ms-2\"><svg style=\"width: 20px;\r\nheight: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                                                                        <g\r\n                                                                                            clip-path=\"url(#clip0_1428_59484)\">\r\n                                                                                            <path\r\n                                                                                                d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                fill=\"#FEE4E2\" />\r\n                                                                                            <path\r\n                                                                                                d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                                                                                stroke=\"#D92D20\"\r\n                                                                                                stroke-linecap=\"round\"\r\n                                                                                                stroke-linejoin=\"round\" />\r\n                                                                                        </g>\r\n                                                                                        <defs>\r\n                                                                                            <clipPath\r\n                                                                                                id=\"clip0_1428_59484\">\r\n                                                                                                <rect width=\"12\"\r\n                                                                                                    height=\"12\"\r\n                                                                                                    fill=\"white\"\r\n                                                                                                    transform=\"translate(0.599609 0.5)\" />\r\n                                                                                            </clipPath>\r\n                                                                                        </defs>\r\n                                                                                    </svg></span>\r\n                                                                            </div>\r\n                                                                            <div class=\"desc-value ms-2\">Entry Time: {{\r\n                                                                                getFormattedEntryTime(original?.entryTime)\r\n                                                                                }}</div>\r\n                                                                        </div>\r\n                                                                        <div class=\"col-4\">\r\n                                                                            <span\r\n                                                                                *ngIf=\"getAction(original, 'approve')?.action === 'approved'\">\r\n                                                                                <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"37\" height=\"37\"\r\n                                                                                    viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                                    <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                                        fill=\"#D1FADF\" />\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_486_94051)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                                                                            stroke=\"#039855\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_486_94051\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\r\n                                                                                                fill=\"white\"\r\n                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg>\r\n                                                                            </span>\r\n                                                                            <span\r\n                                                                                *ngIf=\"getAction(original, 'approve')?.action === 'rejected'\"><svg\r\n                                                                                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                                                                                    width=\"37\" height=\"37\"\r\n                                                                                    viewBox=\"0 0 24 24\" fill=\"none\">\r\n                                                                                    <rect width=\"24\" height=\"24\" rx=\"12\"\r\n                                                                                        fill=\"#FEE4E2\" />\r\n                                                                                    <g\r\n                                                                                        clip-path=\"url(#clip0_486_94090)\">\r\n                                                                                        <path\r\n                                                                                            d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                                                                            stroke=\"#D92D20\"\r\n                                                                                            stroke-linecap=\"round\"\r\n                                                                                            stroke-linejoin=\"round\" />\r\n                                                                                    </g>\r\n                                                                                    <defs>\r\n                                                                                        <clipPath id=\"clip0_486_94090\">\r\n                                                                                            <rect width=\"12\" height=\"12\"\r\n                                                                                                fill=\"white\"\r\n                                                                                                transform=\"translate(6 6)\" />\r\n                                                                                        </clipPath>\r\n                                                                                    </defs>\r\n                                                                                </svg></span>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </div>\r\n                                                        </ng-container>\r\n                                                    </div>\r\n                                                </div>\r\n                                            </ng-container>\r\n                                            <div class=\"card-footer py-5\">\r\n                                                <div class=\"comments-accordion\">\r\n                                                    <!-- Accordion Header -->\r\n                                                    <div class=\"accordion-header\" (click)=\"toggleCommentsAccordion()\">\r\n                                                        <div\r\n                                                            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 }}\r\n                                                                    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\"\r\n                                                                    height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                                                                    <path d=\"M4 6L8 10L12 6\" stroke=\"#667085\"\r\n                                                                        stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                                                        stroke-linejoin=\"round\" />\r\n                                                                </svg>\r\n                                                            </div>\r\n                                                        </div>\r\n                                                    </div>\r\n\r\n                                                    <!-- Accordion Content -->\r\n                                                    <div class=\"accordion-body\" *ngIf=\"commentsAccordionOpen\">\r\n\r\n                                                        <!-- loop each block: tagging / review / approve -->\r\n                                                        <ng-container *ngFor=\"let block of activityData1\">\r\n\r\n                                                            <!-- TAGGING COMMENTS (each comment = one image + message) -->\r\n                                                            <ng-container *ngIf=\"block.type === 'tagging'\">\r\n                                                                <div *ngFor=\"let c of block.comments\"\r\n                                                                    class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                    <!-- avatar -->\r\n                                                                    <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                        {{ getInitialsFromEmail(c.createdByEmail) }}\r\n                                                                    </div>\r\n\r\n                                                                    <!-- content -->\r\n                                                                    <div>\r\n                                                                        <div class=\"fw-semibold\">\r\n                                                                            {{ c.createdByEmail }}\r\n                                                                        </div>\r\n\r\n                                                                        <div class=\"text-muted small\"\r\n                                                                            *ngIf=\"c.createdAt\">\r\n                                                                            {{ c.createdAt | date:'hh:mm:ss a - dd MMM\r\n                                                                            yyyy' }}\r\n                                                                        </div>\r\n\r\n                                                                        <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                                                                            {{ c.message }}\r\n                                                                        </p>\r\n\r\n                                                                        <!-- single image card -->\r\n                                                                        <div class=\"d-flex gap-2 flex-wrap\">\r\n                                                                            <div class=\"tango-card\" *ngIf=\"c.filePath\">\r\n                                                                                <div class=\"tango-image\"\r\n                                                                                    [style.backgroundImage]=\"'url(' + imageUrl + c.filePath + ')'\">\r\n                                                                                </div>\r\n\r\n                                                                                <div class=\"tango-meta small\">\r\n                                                                                    <div>Tango ID: {{ c.tempId }}</div>\r\n                                                                                    <div class=\"text-muted\">Entry time:\r\n                                                                                        {{ c.entryTime }}</div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                            <!-- REVIEW / APPROVE COMMENTS (with taggedImages + +N View all) -->\r\n                                                            <ng-container\r\n                                                                *ngIf=\"block.type === 'review' || block.type === 'approve'\">\r\n                                                                <div *ngFor=\"let c of block.comments\"\r\n                                                                    class=\"comment-thread d-flex mb-4\">\r\n\r\n                                                                    <!-- avatar -->\r\n                                                                    <div class=\"avatar avatar-text light-primary p-3\">\r\n\r\n                                                                        {{ getInitialsFromEmail(c.createdByEmail) }}\r\n                                                                    </div>\r\n\r\n                                                                    <!-- content -->\r\n                                                                    <div class=\"w-100\">\r\n                                                                        <div class=\"fw-semibold\">\r\n                                                                            {{ c.createdByEmail }}\r\n                                                                        </div>\r\n\r\n                                                                        <div class=\"text-muted small\"\r\n                                                                            *ngIf=\"c.createdAt\">\r\n                                                                            {{ c.createdAt | date:'hh:mm:ss a - dd MMM\r\n                                                                            yyyy' }}\r\n                                                                        </div>\r\n\r\n                                                                        <!-- main review/approve message -->\r\n                                                                        <p class=\"mb-2 mt-2\" *ngIf=\"c.message\">\r\n                                                                            {{ c.message }}\r\n                                                                        </p>\r\n\r\n\r\n\r\n                                                                        <!-- image list + +N View all -->\r\n                                                                        <div class=\"d-flex gap-2 flex-wrap\"\r\n                                                                            *ngIf=\"c.taggedImages?.length\">\r\n\r\n                                                                            <!-- first 3 images -->\r\n                                                                            <div\r\n                                                                                *ngFor=\"let img of c.taggedImages; let i = index\">\r\n                                                                                <ng-container *ngIf=\"i < 3\">\r\n                                                                                    <div class=\"tango-card\">\r\n                                                                                        <div class=\"tango-image\"\r\n                                                                                            [style.backgroundImage]=\"'url(' + imageUrl + img.filePath + ')'\">\r\n                                                                                        </div>\r\n\r\n                                                                                        <div class=\"tango-meta small\">\r\n                                                                                            <div>\r\n                                                                                                Tango ID: {{ img.tempId\r\n                                                                                                }}\r\n                                                                                                <span\r\n                                                                                                    *ngIf=\"c.status === 'approved'\"\r\n                                                                                                    class=\"status-dot status-approve\"></span>\r\n                                                                                                <span\r\n                                                                                                    *ngIf=\"c.status === 'rejected'\"\r\n                                                                                                    class=\"status-dot status-reject\"></span>\r\n                                                                                            </div>\r\n                                                                                            <div class=\"text-muted\">\r\n                                                                                                Entry time: {{\r\n                                                                                                img.entryTime }}\r\n                                                                                            </div>\r\n                                                                                        </div>\r\n                                                                                    </div>\r\n                                                                                </ng-container>\r\n                                                                            </div>\r\n\r\n                                                                            <!-- +N View all card -->\r\n                                                                            <div class=\"tango-card more-card text-center\"\r\n                                                                                *ngIf=\"c.taggedImages.length > 3\"\r\n                                                                                [style.backgroundImage]=\"'url(' + imageUrl + c.taggedImages[3].filePath + ')'\"\r\n                                                                                (click)=\"openImagesPopup(c)\">\r\n                                                                                <div class=\"more-overlay\"></div>\r\n\r\n                                                                                <div\r\n                                                                                    class=\"more-wrapper d-flex flex-column align-items-center justify-content-center\">\r\n                                                                                    <div class=\"more-text fw-semibold\">\r\n                                                                                        +{{ c.taggedImages.length - 3 }}\r\n                                                                                    </div>\r\n                                                                                    <div\r\n                                                                                        class=\"text-primary text-decoration-underline small\">\r\n                                                                                        View all\r\n                                                                                    </div>\r\n                                                                                </div>\r\n                                                                            </div>\r\n\r\n                                                                        </div>\r\n                                                                    </div>\r\n                                                                </div>\r\n                                                            </ng-container>\r\n\r\n                                                        </ng-container>\r\n                                                    </div>\r\n\r\n                                                </div>\r\n                                            </div>\r\n                                        </div>\r\n                                    </section>\r\n                                </ng-container>\r\n\r\n\r\n\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </section>\r\n                <div *ngIf=\"footfallLoading\" class=\"card mt-5\">\r\n                    <div class=\"card-body h-500px\">\r\n                        <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"shimmer\">\r\n                                <div class=\"wrapper\">\r\n                                    <div class=\"stroke animate title\"></div>\r\n                                    <div class=\"stroke animate link\"></div>\r\n                                    <div class=\"stroke animate description\"></div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                    </div>\r\n                </div>\r\n                <ng-container *ngIf=\"footfallNoData\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-lg-12 mb-3\">\r\n                            <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n                                <img class=\"img-nodata\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                                <div class=\"nodata-title\">No data found</div>\r\n                                <div class=\"nodata-sub\">There is no result for this conversion funnel</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #zoomPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                {{ popupType === 'approved' ? 'Approve' : 'Reject' }} Selected Images\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You're about to {{ popupType === 'approved' ? 'Approve' : 'Reject' }} {{ this.overallSelectedIds?.length\r\n                ? this.overallSelectedIds?.length : this.popupValue ?\r\n                this.popupValue:'--' }} <span class=\"fw-bold\">{{ selectedCategoriesLabel | titlecase }}</span>\r\n            </p>\r\n            <!-- Count Box -->\r\n            <div *ngIf=\"selectedCategories?.length === 1\" class=\"w-100 mb-4\">\r\n                <label class=\"mb-2\">Remarks (Optional)</label>\r\n                <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"remarks\"></textarea>\r\n\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"submitValue(popupType, popupvalue)\">\r\n                    {{ popupType === 'approved' ? 'Approve' : 'Reject' }}\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #closePopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n            <h5 class=\"modal-title mb-2\">\r\n                Close ticket\r\n            </h5>\r\n            <p class=\"mb-3 test-appvalue\">\r\n                You are about to close the ticket, Are you sure want to continue?\r\n            </p>\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"confirmCloseCancel()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"confirmCloseTicket()\">\r\n                    Close ticket\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #ReassignTicketPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 p-0 w-100 flex-column align-items-start\">\r\n\r\n            <!-- Heading -->\r\n            <h5 class=\"modal-title mb-2\">\r\n                Re-Assign Ticket\r\n            </h5>\r\n\r\n            <!-- Description -->\r\n            <p class=\"mb-3 test-appvalue\">\r\n                Transfer the ticket to another user\r\n            </p>\r\n\r\n            <!-- Count Box -->\r\n            <div class=\"row w-100 my-3\">\r\n                <div class=\"col-md-12 mb-4\">\r\n                    <label class=\"label mb-2\">Choose User</label>\r\n                    <team-select [items]=\"reviwerList\" [multi]=\"false\" [searchField]=\"'userName'\" [idField]=\"'email'\"\r\n                        (selected)=\"reviewerChange($event)\" [selectedValues]=\"[selectedReviewer]\"></team-select>\r\n                </div>\r\n            </div>\r\n            `\r\n            <!-- Action Buttons -->\r\n            <div class=\"w-100 d-flex justify-content-end\">\r\n                <button class=\"btn btn-outline me-2\" (click)=\"cancelassign()\">Cancel</button>\r\n                <button class=\"btn btn-primary\" (click)=\"assignTicketView()\">\r\n                    Re-Assign\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<ng-template #imagePreviewPopup let-model>\r\n    <div class=\"p-4 m-4\">\r\n        <div class=\"modal-header border-0 my-2 p-0 w-100 d-flex justify-content-between align-items-center\">\r\n\r\n            <h5 class=\"modal-title mb-2 m-0\">{{ previewTitle }}</h5>\r\n\r\n            <!-- Close Button -->\r\n            <button type=\"button\" class=\"btn-close fs-4\" aria-label=\"Close\" (click)=\"model.close()\">\r\n\r\n            </button>\r\n\r\n        </div>\r\n\r\n        <div class=\"w-100 position-relative mb-4\">\r\n\r\n            <button class=\"btn btn-light position-absolute ms-3 start-0 top-50 translate-middle-y\"\r\n                (click)=\"prevPreview()\" [disabled]=\"previewList.length <= 1\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n                    <path d=\"M15.5615 6.22429L9.33724 12.4486L15.5615 18.6729\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <img [src]=\"getPreviewImageUrl()\" class=\"w-100 rounded border\" />\r\n            <div class=\"row my-2\">\r\n                <div class=\"col-10\">\r\n                    <div class=\"desc-title ms-2 my-2\">\r\n                        Tango ID: {{ currentPreviewItem.tempId }}\r\n\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'approved'\" class=\"ms-2\"><svg\r\n                                style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                    fill=\"#12B76A\" />\r\n                            </svg>\r\n                        </span>\r\n                        <span *ngIf=\"getAction(currentPreviewItem, 'review')?.action === 'rejected'\" class=\"ms-2\"><svg\r\n                                style=\"width: 20px;\r\n    height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                    <path\r\n                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        fill=\"#FEE4E2\" />\r\n                                    <path\r\n                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_1428_59484\">\r\n                                        <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(0.599609 0.5)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>\r\n\r\n                    </div>\r\n\r\n                    <div class=\"desc-value ms-2\">Entry Time: {{\r\n                        getFormattedEntryTime(currentPreviewItem.entryTime) }}</div>\r\n                </div>\r\n                <div class=\"col-2 mt-2 text-end\">\r\n                    <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'approved'\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#D1FADF\" />\r\n                            <g clip-path=\"url(#clip0_486_94051)\">\r\n                                <path\r\n                                    d=\"M9.5 17H8C7.73478 17 7.48043 16.8946 7.29289 16.7071C7.10536 16.5196 7 16.2652 7 16V12.5C7 12.2348 7.10536 11.9804 7.29289 11.7929C7.48043 11.6054 7.73478 11.5 8 11.5H9.5M13 10.5V8.5C13 8.10218 12.842 7.72064 12.5607 7.43934C12.2794 7.15804 11.8978 7 11.5 7L9.5 11.5V17H15.14C15.3812 17.0027 15.6152 16.9182 15.799 16.762C15.9827 16.6058 16.1038 16.3885 16.14 16.15L16.83 11.65C16.8518 11.5067 16.8421 11.3603 16.8017 11.2211C16.7613 11.0819 16.6911 10.9531 16.5959 10.8438C16.5008 10.7344 16.383 10.647 16.2508 10.5876C16.1185 10.5283 15.975 10.4984 15.83 10.5H13Z\"\r\n                                    stroke=\"#039855\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_486_94051\">\r\n                                    <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg>\r\n                    </span>\r\n                    <span *ngIf=\"getAction(currentPreviewItem, 'approve')?.action === 'rejected'\"><svg\r\n                            xmlns=\"http://www.w3.org/2000/svg\" width=\"42\" height=\"42\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                            <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#FEE4E2\" />\r\n                            <g clip-path=\"url(#clip0_486_94090)\">\r\n                                <path\r\n                                    d=\"M14.5015 7.00006H15.8365C16.1195 6.99505 16.3944 7.09413 16.6092 7.27847C16.8239 7.46281 16.9635 7.71959 17.0015 8.00006V11.5001C16.9635 11.7805 16.8239 12.0373 16.6092 12.2216C16.3944 12.406 16.1195 12.5051 15.8365 12.5001H14.5015M11.0015 13.5001V15.5001C11.0015 15.8979 11.1595 16.2794 11.4408 16.5607C11.7221 16.842 12.1037 17.0001 12.5015 17.0001L14.5015 12.5001V7.00006H8.86148C8.62032 6.99733 8.38629 7.08186 8.20253 7.23806C8.01876 7.39426 7.89764 7.61161 7.86148 7.85006L7.17148 12.3501C7.14973 12.4934 7.15939 12.6397 7.19981 12.7789C7.24023 12.9181 7.31043 13.0469 7.40555 13.1563C7.50067 13.2657 7.61844 13.3531 7.75069 13.4124C7.88295 13.4718 8.02653 13.5017 8.17148 13.5001H11.0015Z\"\r\n                                    stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                            </g>\r\n                            <defs>\r\n                                <clipPath id=\"clip0_486_94090\">\r\n                                    <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(6 6)\" />\r\n                                </clipPath>\r\n                            </defs>\r\n                        </svg></span>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- 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 me-3 end-0 top-50 translate-middle-y\" (click)=\"nextPreview()\"\r\n                [disabled]=\"previewList.length <= 1\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"25\" height=\"25\" viewBox=\"0 0 25 25\" fill=\"none\">\r\n                    <path d=\"M9.33594 18.6732L15.5602 12.4489L9.33594 6.22461\" stroke=\"#344054\" stroke-width=\"2.07891\"\r\n                        stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                </svg>\r\n            </button>\r\n\r\n        </div>\r\n\r\n        <div *ngIf=\"canShowPreviewActions(currentPreviewItem)\" class=\"w-100 d-flex justify-content-end\">\r\n            <button class=\"btn btn-outline me-2\" (click)=\"rejectedPopup('rejected',currentPreviewItem)\">\r\n\r\n                {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Deny' : 'Reject'\r\n                }}</button>\r\n            <button class=\"btn btn-primary\" (click)=\"approvedPopup('approved',currentPreviewItem)\">\r\n\r\n                {{ (selectedRole === 'approver' || selectedRole === 'reviewer') ? 'Approve' :\r\n                'Accept' }}</button>\r\n        </div>\r\n\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n\r\n<ng-template #internalticket let-modal>\r\n    <div class=\"h-auto p-10\">\r\n        <div class=\"card-header border-0\">\r\n            <div class=\"card-title\">Start audit</div>\r\n            <div class=\"card-sub\">Please select a store and date range to start audit</div>\r\n        </div>\r\n        <div class=\"row my-3\">\r\n            <div class=\"col-md-7 mb-4\">\r\n                <label class=\"label\">Store</label>\r\n                <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [idField]=\"'storeId'\"\r\n                    (selected)=\"storeChange($event)\" [selectedValues]=\"[selectedStore]\"></lib-select>\r\n            </div>\r\n            <div class=\"col-md-5 mt-7\">\r\n\r\n                <div class=\"d-flex align-items-center position-relative my-1\">\r\n                    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                            <path\r\n                                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                        </svg>\r\n                    </span>\r\n                    <input class=\"fx-date-range form-control ps-14\" style=\"width:165px !important\" type=\"text\" matInput\r\n                        ngxDaterangepickerMd [singleDatePicker]=\"true\" [drops]=\"'down'\" [opens]=\"'left'\"\r\n                        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\"\r\n                        autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\"\r\n                        (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n                        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n                        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" [autoApply]=\"true\" />\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-3\" *ngIf=\"footfallcount>0\">\r\n            <div>{{footfallcount}}</div>\r\n            <div class=\"mt-2\">Total footfall</div>\r\n        </div>\r\n        <div class=\"card-body mt-5\">\r\n            <div class=\"w-100 d-flex mt-5\">\r\n\r\n                <button class=\"btn btn-outline w-50 me-2\" (click)=\"modal.close('isDenied')\">Cancel</button>\r\n                <button [disabled]=\"disableAudit&&footfallcount>0\" class=\"btn btn-primary w-50 ms-2\"\r\n                    (click)=\"modal.close('isConfirmed')\">start</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Simple overlay modal -->\r\n<div class=\"images-modal-backdrop\" *ngIf=\"showImagesModal\">\r\n    <div class=\"images-modal\">\r\n        <div class=\"modal-header d-flex justify-content-between align-items-start mb-3\">\r\n            <div>\r\n                <h6 class=\"mb-1\">All Images</h6>\r\n\r\n                <!-- email -->\r\n                <div class=\"small fw-semibold\">\r\n                    {{ selectedComment?.createdByEmail }}\r\n                </div>\r\n\r\n                <!-- time -->\r\n                <div class=\"small text-muted\" *ngIf=\"selectedComment?.createdAt\">\r\n                    {{ selectedComment?.createdAt | date: 'hh:mm:ss a - dd MMM yyyy' }}\r\n                </div>\r\n\r\n                <!-- optional comment text under time -->\r\n                <p class=\"mb-0 mt-2\" *ngIf=\"selectedComment?.message\">\r\n                    {{ selectedComment?.message }}\r\n                </p>\r\n            </div>\r\n\r\n            <button type=\"button\" class=\"btn-close ms-3\" (click)=\"closeImagesPopup()\">\r\n            </button>\r\n        </div>\r\n\r\n\r\n        <div class=\"modal-body d-flex flex-wrap gap-3\">\r\n            <div *ngFor=\"let img of selectedImagesForPopup\" class=\"tango-card\">\r\n                <div class=\"tango-image\" [style.backgroundImage]=\"'url('+ imageUrl + img.filePath + ')'\">\r\n                </div>\r\n                <div class=\"tango-meta small\">\r\n                    <div>\r\n                        Tango ID: {{ img.tempId }}\r\n\r\n                        <!-- status dots -->\r\n                        <span *ngIf=\"img.status === 'approved'\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"11\" viewBox=\"0 0 10 11\" fill=\"none\">\r\n                                <rect y=\"0.5\" width=\"10\" height=\"10\" rx=\"5\" fill=\"#D1FADF\" />\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M7.1222 3.57919L4.13887 6.45836L3.3472 5.61253C3.20137 5.47503 2.9722 5.46669 2.80553 5.58336C2.64303 5.70419 2.5972 5.91669 2.6972 6.08753L3.6347 7.61253C3.72637 7.75419 3.8847 7.84169 4.06387 7.84169C4.2347 7.84169 4.3972 7.75419 4.48887 7.61253C4.63887 7.41669 7.50137 4.00419 7.50137 4.00419C7.87637 3.62086 7.4222 3.28336 7.1222 3.57503V3.57919Z\"\r\n                                    fill=\"#12B76A\" />\r\n                            </svg></span>\r\n\r\n                        <span *ngIf=\"img.status === 'rejected'\"><svg style=\"width: 20px;\r\n        height: 20px;\" xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 13 13\" fill=\"none\">\r\n                                <g clip-path=\"url(#clip0_1428_59484)\">\r\n                                    <path\r\n                                        d=\"M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        fill=\"#FEE4E2\" />\r\n                                    <path\r\n                                        d=\"M8.09961 5L5.09961 8M5.09961 5L8.09961 8M4.52961 1.5H8.66961L11.5996 4.43V8.57L8.66961 11.5H4.52961L1.59961 8.57V4.43L4.52961 1.5Z\"\r\n                                        stroke=\"#D92D20\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_1428_59484\">\r\n                                        <rect width=\"12\" height=\"12\" fill=\"white\" transform=\"translate(0.599609 0.5)\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg></span>\r\n                    </div>\r\n\r\n                    <div class=\"text-muted\">\r\n                        Entry time: {{ img.entryTime }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", 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}.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}.ticket-actions-wrapper{position:relative;display:inline-block}.icon-btn{border:none;background:transparent;cursor:pointer;padding:4px 6px;border-radius:999px}.ticket-menu{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border-radius:10px;box-shadow:0 8px 20px #0f172a26;min-width:160px;overflow:hidden;z-index:1000}.ticket-menu-item{padding:8px 16px;font-size:13px;color:#111827;border-bottom:1px solid #f3f4f6;cursor:pointer}.ticket-menu-item:last-child{border-bottom:none}.revision-card-approve{border-top:none!important;border:1px solid #eaeaea!important;border-radius:0 0 12px 12px!important}input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6;outline:1px solid var(--primary-600, #dddddd)!important;background-color:var(--primary-50, #e9e9ea)}.card-title{font-weight:600;font-size:18px;line-height:28px;letter-spacing:0%;color:#1d2939}.card-sub{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#475467}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}::ng-deep .md-drppicker .btn{line-height:10px!important}::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}::ng-deep .md-drppicker td.active,::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}::ng-deep .md-drppicker table th,::ng-deep .md-drppicker table td{width:40px!important;height:40px!important;padding:10px 8px!important}::ng-deep .md-drppicker td.available.prev,::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker td.available.next,::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}::ng-deep .md-drppicker table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px;font-weight:500!important;line-height:24px}::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.custom-table thead tr{background:var(--Gray-50, #F9FAFB)!important;font-size:12px!important;text-align:start!important}.more-overlay{position:absolute;inset:0;background:#ffffffbf;z-index:1}.more-wrapper{position:relative;z-index:2;color:#000}.tango-card.more-card{position:relative;background-size:cover;background-position:center;cursor:pointer;overflow:hidden}.tango-card.more-card .more-overlay{position:absolute;inset:0;background:#ffffffbf}.tango-card.more-card .more-text{position:relative;font-weight:600;font-size:14px}.images-modal-backdrop{position:fixed;inset:0;background:#0f172a59;display:flex;align-items:center;justify-content:center;z-index:1050}.images-modal{background:#fff;border-radius:12px;padding:16px 20px;max-width:900px;max-height:80vh;overflow-y:auto}.text-underline{text-decoration:underline}\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 }, { type: AuditService }], propDecorators: { tooltip: [{
                 type: ViewChild,
                 args: ['tooltip']
@@ -7163,6 +7262,13 @@ class StartAuditComponent {
                 if (res && res?.code == 200) {
                     console.log(res.data.footfallDirectoryConfigs.taggingLimitation);
                     this.category = res.data.footfallDirectoryConfigs.taggingLimitation;
+                    this.category.map((data) => {
+                        if (data?.type in sessionStorage) {
+                        }
+                        else {
+                            sessionStorage.setItem(data.type, JSON.stringify([]));
+                        }
+                    });
                     this.initial_data_loading();
                 }
             }
@@ -7477,6 +7583,7 @@ class StartAuditComponent {
                 centered: true, size: 'md'
             });
             modalRef.result.then((result) => {
+                console.log("🚀 ~ StartAuditComponent ~ savedraft ~ result:", result);
                 if (result === 'isDenied') {
                     var totalfile = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
                     let stringifydata = sessionStorage.getItem('audit') || '{}';
@@ -7492,7 +7599,7 @@ class StartAuditComponent {
                         let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '[]');
                         storedData.push({
                             type: data.type,
-                            value: sessionvalue ? sessionvalue : []
+                            value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
                         });
                     });
                     var inserobj = {
@@ -7596,7 +7703,7 @@ class StartAuditComponent {
     }
     backtotickets() {
         this.savedraft();
-        this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } });
+        // this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
     }
     cameraPreview() {
         // const ModalRef = this.modalService.open(CameraPreviewComponent,{
@@ -7627,6 +7734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 class AuditReportPopupComponent {
     modalService;
     activeModal;
+    service;
     router;
     timerService;
     cd;
@@ -7651,9 +7759,12 @@ class AuditReportPopupComponent {
     subscription = null;
     formattedTime = '00:00:00';
     category = [];
-    constructor(modalService, activeModal, router, timerService, cd, apiservice, route, toast) {
+    centralOpsData;
+    tangoData;
+    constructor(modalService, activeModal, service, router, timerService, cd, apiservice, route, toast) {
         this.modalService = modalService;
         this.activeModal = activeModal;
+        this.service = service;
         this.router = router;
         this.timerService = timerService;
         this.cd = cd;
@@ -7678,6 +7789,30 @@ class AuditReportPopupComponent {
                     const decompressedData = LZString.decompress(stringifydata);
                     var customer = JSON.parse(decompressedData || '{}');
                     this.Retagcustomercount = customer.length;
+                    console.log("🚀 ~ AuditReportPopupComponent ~ ngOnInit ~ this.totalfiles:", this.totalfiles);
+                    let input = {
+                        storeId: this.totalfiles?.filedetails?.storeId,
+                        dateString: this.totalfiles?.filedetails?.Date,
+                    };
+                    this.service
+                        .checkTicketExists(input).pipe(takeUntil(this.destroy$))
+                        .subscribe({
+                        next: (res) => {
+                            if (res && res?.code === 200) {
+                                console.log(res.data);
+                                let ticketList = res?.data;
+                                let findstoreticket = ticketList.filter((data) => data?._source?.type === 'store' && data?._source?.status != "Closed")[0]?._source;
+                                if (findstoreticket && findstoreticket?.mappingInfo.length > 0) {
+                                    this.centralOpsData = findstoreticket.mappingInfo.filter((data) => data.type != "tangoreview")[0];
+                                    console.log("🚀 ~ TicketclosepopupComponent ~ ngOnInit ~ this.centralOpsData:", this.centralOpsData);
+                                }
+                                this.tangoData = {
+                                    revicedFootfall: this.Retagcustomercount,
+                                    revicedPerc: Math.round((this.Retagcustomercount / this.totalfiles?.totalfiles) * 100) + "%"
+                                };
+                            }
+                        }
+                    });
                 }
             }
         });
@@ -7959,13 +8094,13 @@ class AuditReportPopupComponent {
         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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditReportPopupComponent, deps: [{ token: i1$2.NgbModal }, { token: i1$2.NgbActiveModal }, { token: TicketService }, { token: i2.Router }, { token: TimerService }, { token: i0.ChangeDetectorRef }, { token: AuditService }, { token: i2.ActivatedRoute }, { token: i4.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditReportPopupComponent, selector: "lib-audit-report-popup", inputs: { selectedType: "selectedType" }, viewQueries: [{ propertyName: "confirmerror", first: true, predicate: ["confirmerror"], descendants: true }], ngImport: i0, template: "<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\r\n        <div class=\"modal-content merge-ticket-modal\">\r\n\r\n            <!-- Header -->\r\n            <div class=\"modal-header border-0 pb-0\">\r\n                <h5 class=\"modal-title\">Merge ticket</h5>\r\n                <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closepopup()\"></button>\r\n            </div>\r\n\r\n            <!-- Body -->\r\n            <div class=\"modal-body\">\r\n\r\n                <!-- Info banner -->\r\n                <div class=\"alert merge-info d-flex\">\r\n                    <div class=\"me-3 mt-1\">\r\n                        <i class=\"bi bi-info-circle\"></i>\r\n                    </div>\r\n                    <div>\r\n                        \r\n                        <p class=\"mb-0\">\r\n                             The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.\r\n                           Since accuracy is below 85%, it will be marked as an <b>\u201COpen-Accuracy Issue\u201D</b> in Tango. \r\n                           Please add the cause for the low accuracy.\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Cards -->\r\n                <div class=\"row g-3 mt-2\">\r\n                    <!-- Central Ops -->\r\n                    <div class=\"col-12 col-md-6\" *ngIf=\"centralOpsData?.revicedFootfall\">\r\n                        <div class=\"card h-100\">\r\n                            <div class=\"card-body\" >\r\n                                <div class=\"card-title mb-3 fw-semibold\">Central Ops</div>\r\n                                <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n                                    <div>\r\n                                        <div class=\"value\">{{centralOpsData?.revicedFootfall}}</div>\r\n                                        <div class=\"label\">Footfall</div>\r\n                                    </div>\r\n                                    <div class=\"text-end\">\r\n                                        <div class=\"value text-primary\">\r\n                                           {{centralOpsData?.revicedPerc}}\r\n                                            <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\" >\r\n                                                \u2193\r\n                                            </span>\r\n                                             <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n                                                \u2191\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"label\">Accuracy</div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Tango -->\r\n                    <div class=\"col-12 col-md-6\" *ngIf=\"tangoData?.revicedFootfall\">\r\n                        <div class=\"card h-100\">\r\n                            <div class=\"card-body\" >\r\n                                <div class=\"card-title mb-3 fw-semibold\">Tango</div>\r\n                                <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n                                    <div>\r\n                                        <div class=\"value\">{{tangoData?.revicedFootfall}}</div>\r\n                                        <div class=\"label\">Footfall</div>\r\n                                    </div>\r\n                                    <div class=\"text-end\">\r\n                                        <div class=\"value text-primary\">\r\n                                           {{tangoData?.revicedPerc}}\r\n                                            <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\" >\r\n                                                \u2193\r\n                                            </span>\r\n                                             <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n                                                \u2191\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"label\">Accuracy</div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Footer -->\r\n            <div class=\"modal-footer border-0 pt-0\">\r\n                <!-- <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"submit('start')\">\r\n                    Start Audit\r\n                </button> -->\r\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n                    submit\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.audit-test{font-family:Inter;font-style:normal;font-weight:600!important;font-size:22px!important;line-height:27px;color:#000}.text-gray-500{font-family:Inter;font-style:normal;font-weight:500!important;font-size:14px!important;line-height:17px;color:#5e6278}.ms-25{margin-left:16rem}.text-gray-400{font-family:Inter;font-style:normal;font-weight:500;font-size:14px!important;line-height:17px;letter-spacing:-.02em;color:#676e76}::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px!important}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.merge-ticket-modal{border-radius:16px}.merge-info{border:1px dashed #a9c4ff;background:#f5f9ff;border-radius:10px;font-size:13px;color:#008edf}.merge-info i{font-size:18px}.card{border-radius:12px}.card .value{font-size:24px;font-weight:600}.card .label{font-size:12px;color:#6c757d}.arrow{font-size:16px;margin-left:4px}\n"], dependencies: [{ kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 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: [{
+            args: [{ selector: 'lib-audit-report-popup', template: "<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n    <div class=\"modal-dialog modal-dialog-centered\" role=\"document\">\r\n        <div class=\"modal-content merge-ticket-modal\">\r\n\r\n            <!-- Header -->\r\n            <div class=\"modal-header border-0 pb-0\">\r\n                <h5 class=\"modal-title\">Merge ticket</h5>\r\n                <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"closepopup()\"></button>\r\n            </div>\r\n\r\n            <!-- Body -->\r\n            <div class=\"modal-body\">\r\n\r\n                <!-- Info banner -->\r\n                <div class=\"alert merge-info d-flex\">\r\n                    <div class=\"me-3 mt-1\">\r\n                        <i class=\"bi bi-info-circle\"></i>\r\n                    </div>\r\n                    <div>\r\n                        \r\n                        <p class=\"mb-0\">\r\n                             The ticket will be <b>\u201Cclosed\u201D</b> and updated in the store as a final revision.\r\n                           Since accuracy is below 85%, it will be marked as an <b>\u201COpen-Accuracy Issue\u201D</b> in Tango. \r\n                           Please add the cause for the low accuracy.\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Cards -->\r\n                <div class=\"row g-3 mt-2\">\r\n                    <!-- Central Ops -->\r\n                    <div class=\"col-12 col-md-6\" *ngIf=\"centralOpsData?.revicedFootfall\">\r\n                        <div class=\"card h-100\">\r\n                            <div class=\"card-body\" >\r\n                                <div class=\"card-title mb-3 fw-semibold\">Central Ops</div>\r\n                                <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n                                    <div>\r\n                                        <div class=\"value\">{{centralOpsData?.revicedFootfall}}</div>\r\n                                        <div class=\"label\">Footfall</div>\r\n                                    </div>\r\n                                    <div class=\"text-end\">\r\n                                        <div class=\"value text-primary\">\r\n                                           {{centralOpsData?.revicedPerc}}\r\n                                            <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\" >\r\n                                                \u2193\r\n                                            </span>\r\n                                             <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\">\r\n                                                \u2191\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"label\">Accuracy</div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Tango -->\r\n                    <div class=\"col-12 col-md-6\" *ngIf=\"tangoData?.revicedFootfall\">\r\n                        <div class=\"card h-100\">\r\n                            <div class=\"card-body\" >\r\n                                <div class=\"card-title mb-3 fw-semibold\">Tango</div>\r\n                                <div class=\"d-flex justify-content-between align-items-end mb-1\">\r\n                                    <div>\r\n                                        <div class=\"value\">{{tangoData?.revicedFootfall}}</div>\r\n                                        <div class=\"label\">Footfall</div>\r\n                                    </div>\r\n                                    <div class=\"text-end\">\r\n                                        <div class=\"value text-primary\">\r\n                                           {{tangoData?.revicedPerc}}\r\n                                            <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall>tangoData?.revicedFootfall\" >\r\n                                                \u2193\r\n                                            </span>\r\n                                             <span class=\"arrow\" *ngIf=\"centralOpsData?.revicedFootfall<tangoData?.revicedFootfall\">\r\n                                                \u2191\r\n                                            </span>\r\n                                        </div>\r\n                                        <div class=\"label\">Accuracy</div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Footer -->\r\n            <div class=\"modal-footer border-0 pt-0\">\r\n                <!-- <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"submit('start')\">\r\n                    Start Audit\r\n                </button> -->\r\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"nextfile()\">\r\n                    submit\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".btn.btn-light-primary:hover:not(.btn-active){background-color:#fff!important}.audit-test{font-family:Inter;font-style:normal;font-weight:600!important;font-size:22px!important;line-height:27px;color:#000}.text-gray-500{font-family:Inter;font-style:normal;font-weight:500!important;font-size:14px!important;line-height:17px;color:#5e6278}.ms-25{margin-left:16rem}.text-gray-400{font-family:Inter;font-style:normal;font-weight:500;font-size:14px!important;line-height:17px;letter-spacing:-.02em;color:#676e76}::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px!important}.svg-icon.svg-icon-2x svg{width:20px!important;height:20px!important}.btn-outline{border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:24px}.merge-ticket-modal{border-radius:16px}.merge-info{border:1px dashed #a9c4ff;background:#f5f9ff;border-radius:10px;font-size:13px;color:#008edf}.merge-info i{font-size:18px}.card{border-radius:12px}.card .value{font-size:24px;font-weight:600}.card .label{font-size:12px;color:#6c757d}.arrow{font-size:16px;margin-left:4px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.NgbModal }, { type: i1$2.NgbActiveModal }, { type: TicketService }, { type: i2.Router }, { type: TimerService }, { type: i0.ChangeDetectorRef }, { type: AuditService }, { type: i2.ActivatedRoute }, { type: i4.ToastService }], propDecorators: { selectedType: [{
                 type: Input
             }], confirmerror: [{
                 type: ViewChild,
@@ -8844,9 +8979,20 @@ class AuditRetagComponent {
                     }
                     this.retagimage = this.retagimage.filter((imgData) => imgData.img_id !== draggedImageId);
                     sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
+                    console.log("🚀 ~ AuditRetagComponent ~ dropImage ~ findone:", findone);
                     if (findone.length > 0) {
                         data.count += findone[0].count;
                         data.mappedid = [...data.mappedid, ...findone[0].mappedid];
+                        if ('duplicate' in sessionStorage) {
+                            let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
+                            filedata = [...filedata, ...findone];
+                            sessionStorage.setItem('duplicate', JSON.stringify(filedata));
+                        }
+                        else {
+                            sessionStorage.setItem('duplicate', JSON.stringify(findone));
+                            let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}');
+                            console.log("🚀 ~ StartAuditComponent ~ dropImage ~ filedata:", filedata);
+                        }
                     }
                     else {
                         data.count += 1;
@@ -8867,6 +9013,10 @@ class AuditRetagComponent {
             if (this.retagimage.length == 0) {
                 this.submitvalue = false;
             }
+            this.category.map((data) => {
+                var count = JSON.parse(sessionStorage.getItem(data.type) || '{}');
+                data.count = count?.length;
+            });
         }
         function getTagNameFromHTML(html) {
             var tempElement = document.createElement('div');