tango-app-ui-manage-tickets 3.7.0-beta.69 → 3.7.0-beta.70

package/src/lib/components/ticket-footfall-new/ticket-footfall-new.component.ts

@@ -0,0 +1,2863 @@
+import {
+  Component,
+  AfterViewInit,
+  OnDestroy,
+  OnInit,
+  ChangeDetectorRef,
+  EventEmitter,
+  Output,
+  HostListener,
+  ElementRef,
+  ViewChild,
+  OnChanges,
+} from "@angular/core";
+import { FootfallPopupComponent } from "../footfall-popup/footfall-popup.component";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { GlobalStateService } from "tango-app-ui-global";
+import { Subject, takeUntil } from "rxjs";
+import { TicketService } from "../../services/ticket.service";
+import { ExcelService } from "../../services/excel.service";
+import { ToastService } from "tango-app-ui-shared";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { Router } from "@angular/router";
+import 'dayjs/locale/en';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+dayjs.extend(utc);
+dayjs.extend(timezone)
+import { MatTooltip } from '@angular/material/tooltip';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { TicketclosepopupComponent } from "../ticketclosepopup/ticketclosepopup.component";
+import { AuditService } from "../../services/audit.service";
+dayjs.extend(customParseFormat)
+
+@Component({
+  selector: "lib-ticket-footfall-new",
+  templateUrl: "./ticket-footfall-new.component.html",
+  styleUrl: "./ticket-footfall-new.component.scss",
+})
+export class TicketFootfallNewComponent implements OnInit, OnDestroy {
+  searchValue: any = "";
+  sortedColumn: string = "";
+  sortDirection: number = 1;
+  private readonly destroy$ = new Subject();
+  constructor(
+    private modalService: NgbModal,
+    public gs: GlobalStateService,
+    private service: TicketService,
+    private cd: ChangeDetectorRef,
+    private excelService: ExcelService,
+    private ts: ToastService,
+    private fb: FormBuilder,
+    private router: Router,
+    private auditservice: AuditService,
+  ) { }
+  headerFilters: any;
+  footfallList_req: any;
+  usersDetails: any;
+  selectedStore: any;
+  selectedReviewer: any;
+  storeList: any = []
+  dayjs = dayjs
+  selectedDateRange: any = {};
+  arrowshow = true;
+  accuracyList: any = []
+  selectedIssue: any = ''
+  selectedsubIssue: any = ''
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+    return isValidDate ? 'invalid-date' : false;
+  }
+  @ViewChild('tooltip') tooltip: MatTooltip;
+  footfallcount: any = 0
+  @ViewChild('internalticket') internalticket: any;
+  @ViewChild('closeacuuracyissue') closeacuuracyissue: any;
+  clientData: any;
+  ngOnInit(): void {
+    let tickettype = sessionStorage.getItem('ticketType')
+    this.tangoType = tickettype
+    sessionStorage.clear();
+    this.imageUrl = this.service?.footfallCDN;
+    let clientdata: any = localStorage.getItem("footfall-config");
+    this.clientData = JSON.parse(clientdata)
+    let userData: any = localStorage.getItem("user-info");
+    this.usersDetails = JSON.parse(userData);
+
+    this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (data: any) => {
+        if (data) {
+          this.headerFilters = data;
+          this.footfallList_req = {
+            client: this.headerFilters.clients.toString(),
+            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
+          }
+          const yesterday = this.dayjs().subtract(1, "days");
+          const formattedDate = {
+            startDate: yesterday.format("YYYY-MM-DD"),
+            endDate: yesterday.format("YYYY-MM-DD"),
+          };
+          this.selectedDateRange = {
+            startDate: yesterday.format("DD-MM-YYYY"),
+            endDate: yesterday.format("DD-MM-YYYY"),
+          };
+          this.service.getstoreList(payload).subscribe({
+            next: (e: any) => {
+              if (e) {
+                this.storeList = e.data.result;
+              }
+            }
+          })
+        }
+      },
+    });
+  }
+  viewTicket(type: any) {
+
+    this.offset = 1;
+    this.limit = 10;
+    this.tangoType = type;
+    this.getTicketSummary(type);
+    this.select = "ticketList";
+    if (this.usersDetails?.userType !== 'tango') {
+      if (this.hasApproverAccess && this.selectedRole === 'approver') {
+        this.SelectedRole('approver');
+        return;
+      }
+
+      if (this.hasReviewerAccess && this.selectedRole === 'reviewer') {
+        this.SelectedRole('reviewer');
+        return;
+      }
+    }
+    this.getTicketList(type);
+
+
+  }
+
+  private areAllItemsReviewed(mapping: any): boolean {
+    const revised = mapping?.revisedDetail || [];
+    if (!revised.length) return false;
+
+    const itemsToCheck: any[] = [];
+
+    revised.forEach((detail: any) => {
+      // If duplicate parent → check its duplicateImage children
+      if (
+        detail?.revopsType === 'duplicate' &&
+        detail?.isParent &&
+        Array.isArray(detail?.duplicateImage) &&
+        detail.duplicateImage.length
+      ) {
+        itemsToCheck.push(...detail.duplicateImage);
+      } else {
+        // Normal item or non-parent duplicate
+        itemsToCheck.push(detail);
+      }
+    });
+
+    // All must have review approved/rejected
+    return itemsToCheck.length > 0 && itemsToCheck.every(item => this.hasReviewDecision(item));
+  }
+  private hasReviewDecision(item: any): boolean {
+    const actions = item?.actions || [];
+    return actions.some(
+      (a: any) =>
+        a.actionType === 'review' &&
+        (a.action === 'approved' || a.action === 'rejected')
+    );
+  }
+
+  selectedRole: 'approver' | 'reviewer' | '' = '';
+  statusVal: any;
+  dueDate: any;
+  reviewStatus =false;
+  getHeaderStatus(): any {
+    // Default: ticket-level status
+    let headerStatus = this.ticketData?.status || '--';
+  //   if(headerStatus === 'Open'){
+  //     this.isCheckboxEnable =false;
+  //   } else if(headerStatus === 'In-Progress'){
+  // this.isCheckboxEnable =true;
+  //   }
+    if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
+      return headerStatus;
+    }
+
+    // 🔹 1) Collect latest mapping by type (only those with a status)
+    let tangoMapping: any = null;
+    let approverMapping: any = null;
+    let reviewerMapping: any = null;
+
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket?._source;
+      const mappingList = source?.mappingInfo || [];
+
+      for (const m of mappingList) {
+        this.dueDate = m.dueDate ? m.dueDate : ''
+        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
+
+        }
+      }
+    }
+
+    // 🔹 2) Compute permissionType same as your API
+    let permissionType: 'approve' | 'review' | null = null;
+
+    if (this.usersDetails?.userType !== 'tango') {
+      if (this.hasApproverAccess && this.selectedRole === 'approver') {
+        permissionType = 'approve';
+      } else if (this.hasReviewerAccess && this.selectedRole === 'reviewer') {
+        permissionType = 'review';
+      }
+    }
+
+    let roleMapping: any = 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
+    }
+
+    // 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: any = false;
+  getCurrentRoleMapping(): any {
+    if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
+      return null;
+    }
+
+    let approverMapping: any = null;
+    let reviewerMapping: any = null;
+    let tangoMapping: any = null;
+    let hasClosedApprove = false;   // 👈 track overall condition
+
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket?._source;
+      const mappingList = source?.mappingInfo || [];
+
+      for (const m of mappingList) {
+
+        // 👇 overall check for arrowshow (approve + Closed)
+        if (
+          m?.type === 'approve' &&
+          m?.status === '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
+        }
+
+        if (m?.type === 'review' && m?.revisedDetail?.length) {
+          reviewerMapping = m;       // last review wins
+
+        }
+      }
+    }
+    if (tangoMapping) {
+      return tangoMapping;
+    }
+
+    // 🔹 2) Then approver / reviewer based on access
+    if (this.hasApproverAccess && approverMapping) {
+      return approverMapping;
+    }
+
+    if (this.hasReviewerAccess && reviewerMapping) {
+      return reviewerMapping;
+    }
+
+    // 🔹 3) Fallback if nothing found
+    return null;
+  }
+
+
+  disableToday = (date: any): boolean => {
+    const today = dayjs().format("YYYY-MM-DD");
+    return dayjs(date).format("YYYY-MM-DD") === today;
+  };
+
+
+  datechange(event: any) {
+    if (event && event.startDate && event.endDate) {
+      if (
+        this.dayjs(event.startDate).isValid() &&
+        this.dayjs(event.endDate).isValid()
+      ) {
+        this.selectedDateRange.startDate = event.startDate
+        this.selectedDateRange.endDate = event.endDate
+        var datetime = {
+          startDate: this.dayjs(event.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+          endDate: this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+        };
+        if (this.selectedStore?.storeId) {
+
+          this.service
+            .getfootfallcount({
+              "storeId": this.selectedStore?.storeId,
+              "Date": this.dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+            })
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+              next: (res: any) => {
+                if (res && res.code === 200) {
+                  // console.log(res.data)
+                  this.footfallcount = res?.data[0]?.footfallCount
+
+
+                }
+              }
+            })
+        }
+      }
+    }
+  }
+
+  getStatusBadgeClass(status: string): string {
+    const map: any = {
+      'Open': 'badge-light-warning',
+      'open': 'badge-light-warning',
+      'In-Progress': 'badge-light-primary',
+      'tangoreview': 'badge-light-primary',
+      'Closed': 'badge-secondary',
+      'Pending': 'badge-light-warning',
+      'Reviewer-Closed': 'badge-light-warning',
+      'Rejected': 'badge-light-danger',
+      'Open - Accuracy Issue': 'badge-light-danger',
+      'Raised': 'badge-light-info'
+    };
+
+    return map[status] || 'badge-light-dark'; // fallback
+  }
+
+  getFootfallSummaryData: any;
+  getTicketSummary(type: any) {
+    this.setPermissionType();
+    this.service
+      .getTicketSummaryApi(
+        this.footfallList_req.client,
+        this.footfallList_req.fromDate,
+        this.footfallList_req.toDate,
+        type,
+        this.permissionType,
+      )
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.data && res?.data?.result) {
+            this.getFootfallSummaryData = res?.data?.result;
+          } else {
+            this.getFootfallSummaryData = [];
+          }
+        },
+        error: (err: any) => {
+          this.getFootfallSummaryData = [];
+        },
+        complete: () => {
+          this.getFootfallSummaryData.length === 0;
+        },
+      });
+    this.cd.detectChanges();
+  }
+  offset = 1;
+  limit = 10;
+  isExport: any = false;
+  footfallListData: any;
+  totalItems: any;
+  paginationSizes = [10, 20, 30];
+  loading = true;
+  noData = false;
+  tangoType: any = "store";
+  filterPayload: any = null;
+  permissionType: string | null = null;
+  setPermissionType() {
+    if (this.usersDetails?.userType !== 'tango') {
+      this.permissionType =
+        this.hasApproverAccess && this.selectedRole === 'approver'
+          ? 'approve'
+          : this.hasReviewerAccess && this.selectedRole === 'reviewer'
+            ? 'review'
+            : null;
+    } else {
+      // tango -> can see all flows
+      this.permissionType = '';
+    }
+  }
+  private buildFiltersForApi(): any {
+    const p = this.filterPayload || {};
+
+    // Always send all keys
+    const filters: any = {
+      filterByStatus: [],
+      filterByTango: null,
+      filterByReviewer: null,
+      filterByApprover: null,
+      filterByReviewedBy: [],
+      fileterByApprovedBy: []
+    };
+
+    // Status
+    if (p.filterByStatus?.length) {
+      filters.filterByStatus = p.filterByStatus;
+    }
+
+    // Role-based Accuracy Blocks
+    if (this.usersDetails?.userType === 'tango') {
+      filters.filterByTango = p.filterByTango?.length ? p.filterByTango : null;
+      filters.filterByReviewer = p.filterByReviewer?.length ? p.filterByReviewer : null;
+      filters.filterByApprover = p.filterByApprover?.length ? p.filterByApprover : null;
+
+    } else if (this.permissionType === 'review') {
+      filters.filterByReviewer = p.filterByReviewer?.length ? p.filterByReviewer : null;
+
+    } else if (this.permissionType === 'approve') {
+      filters.filterByApprover = p.filterByApprover?.length ? p.filterByApprover : null;
+    }
+
+    // ReviewedBy
+    if (p.filterByReviewedBy?.length) {
+      filters.filterByReviewedBy = p.filterByReviewedBy;
+    }
+
+    // ApprovedBy
+    if (p.fileterByApprovedBy?.length) {
+      filters.fileterByApprovedBy = p.fileterByApprovedBy;  // keep spelling
+    }
+
+    return filters;
+  }
+
+
+
+  getTicketList(type: any) {
+    this.currentPage = 1;
+    this.offset = 1;
+    this.limit = 10
+    this.loading = true;
+    this.noData = false
+    this.searchValue = this.searchValue?.trim() || "";
+    this.isExport = false;
+    this.footfallListData =[];
+    this.setPermissionType(); // make sure it’s up-to-date
+
+    const filters = this.buildFiltersForApi();
+
+    this.service
+      .getTicketListApi(
+        this.footfallList_req?.client,
+        this.footfallList_req?.fromDate,
+        this.footfallList_req?.toDate,
+        this.searchValue,
+        10,
+        1,
+        this.isExport,
+        this.sortedColumn,
+        this.sortDirection,
+        type,
+        this.permissionType,
+        filters
+      ).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.noData = false;
+            this.loading = false;
+            this.footfallListData = res?.data?.result;
+
+            if (this.footfallListData.length > 0) {
+              this.generateColumns(this.footfallListData[0]);
+            }
+            this.totalItems = res?.data?.count;
+            if (this.totalItems < 10) {
+              this.paginationSizes = [this.totalItems];
+            } else {
+              this.paginationSizes = [10, 20, 30];
+            }
+          } else {
+            this.totalItems = 0
+            this.noData = true;
+            this.loading = false;
+            this.footfallListData = [];
+          }
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          this.noData = true;
+          this.loading = false;
+        },
+        complete: () => {
+          this.loading = false;
+        },
+      });
+  }
+  tableColumns: any[] = [];
+  labelOverrides: Record<string, string> = {
+    ticketId: 'Ticket ID',
+    storeName: 'Store Name',
+    storeId: 'Store ID',                   // or just 'Store'
+    storeRevisedAccuracy: 'Store (Accuracy%)',
+    reviewerRevisedAccuracy: 'Reviewer (Accuracy%)',
+    approverRevisedAccuracy: 'Approver (Accuracy%)',
+    tangoRevisedAccuracy: 'Tango (Accuracy%)',
+    ticketRaised: 'Ticket Raised On',
+    issueDate: 'Issue Date',
+    footfall: 'Actual FF',
+  };
+  hiddenColumns: string[] = [
+    'storeName',  // uncomment if you want to REMOVE the extra "Store Name" column
+    'type',
+  ];
+  sortableColumns: string[] = ['issueDate', 'storeId', 'footfall'];
+
+  generateColumns(firstRow: any) {
+    const keys = Object.keys(firstRow)
+      .filter(key => !this.hiddenColumns.includes(key));  // remove unwanted columns
+
+    this.tableColumns = keys.map(key => ({
+      key,
+      label: this.labelOverrides[key] ?? this.formatColumnName(key),
+      sortable: this.sortableColumns.includes(key),   // ✅ only 3 columns sortable
+      type: this.detectColumnType ? this.detectColumnType(key) : null
+    }));
+  }
+
+  formatColumnName(key: string): string {
+    return key
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, c => c.toUpperCase());
+  }
+
+  detectColumnType(key: string) {
+    if (key === 'storeName' || key === 'ticketId') return 'store';
+    if (key.toLowerCase().includes('date') || key === 'ticketRaised') return 'date';
+    if (key.toLowerCase().includes('status')) return 'status';
+    return 'text';
+  }
+  currentPage: any = 1;
+  pageSize: any = 10;
+  onPageChange(pageOffset: number) {
+    this.currentPage = Number(pageOffset);
+    this.offset = Number(pageOffset);
+    // this.limit = 10;
+    this.loading = true;
+    this.noData = false
+    this.searchValue = this.searchValue?.trim() || "";
+    this.isExport = false;
+    this.setPermissionType(); // make sure it’s up-to-date
+
+    const filters = this.buildFiltersForApi();
+
+    this.service
+      .getTicketListApi(
+        this.footfallList_req?.client,
+        this.footfallList_req?.fromDate,
+        this.footfallList_req?.toDate,
+        this.searchValue,
+        this.limit,
+        this.offset,
+        this.isExport,
+        this.sortedColumn,
+        this.sortDirection,
+        this.tangoType,
+        this.permissionType,
+        filters
+      ).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.noData = false;
+            this.loading = false;
+            this.footfallListData = res?.data?.result;
+            if (this.footfallListData.length > 0) {
+              this.generateColumns(this.footfallListData[0]);
+            }
+            this.totalItems = res?.data?.count;
+            if (this.totalItems < 10) {
+              this.paginationSizes = [this.totalItems];
+            } else {
+              this.paginationSizes = [10, 20, 30];
+            }
+          } else {
+            this.totalItems = 0
+            this.noData = true;
+            this.loading = false;
+            this.footfallListData = [];
+          }
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          this.noData = true;
+          this.loading = false;
+        },
+        complete: () => {
+          this.loading = false;
+        },
+      });
+  }
+
+  onPageSizeChange(pageSize: number) {
+    this.pageSize = Number(pageSize);
+    this.limit = Number(pageSize);
+    this.currentPage = 1;
+    this.offset = 1;
+    this.loading = true;
+    this.noData = false
+    this.searchValue = this.searchValue?.trim() || "";
+    this.isExport = false;
+    this.setPermissionType(); // make sure it’s up-to-date
+
+    const filters = this.buildFiltersForApi();
+
+    this.service
+      .getTicketListApi(
+        this.footfallList_req?.client,
+        this.footfallList_req?.fromDate,
+        this.footfallList_req?.toDate,
+        this.searchValue,
+        this.limit,
+        this.offset,
+        this.isExport,
+        this.sortedColumn,
+        this.sortDirection,
+        this.tangoType,
+        this.permissionType,
+        filters
+      ).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.noData = false;
+            this.loading = false;
+            this.footfallListData = res?.data?.result;
+            if (this.footfallListData.length > 0) {
+              this.generateColumns(this.footfallListData[0]);
+            }
+            this.totalItems = res?.data?.count;
+            if (this.totalItems < 10) {
+              this.paginationSizes = [this.totalItems];
+            } else {
+              this.paginationSizes = [10, 20, 30];
+            }
+          } else {
+            this.totalItems = 0
+            this.noData = true;
+            this.loading = false;
+            this.footfallListData = [];
+          }
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          this.noData = true;
+          this.loading = false;
+        },
+        complete: () => {
+          this.loading = false;
+        },
+      });
+  }
+
+  setpageSize() {
+    if (this.totalItems < 10) {
+      return this.totalItems;
+    } else {
+      return this.pageSize;
+    }
+  }
+  searchData() {
+    this.currentPage = 1;
+    this.offset = 1;
+    this.limit = 10;
+    this.getTicketList(this.tangoType);
+  }
+  storeChange(event: any) {
+    this.selectedStore = { storeId: event.storeId, storeName: event.storeName }
+     this.service
+      .getfootfallcount({
+        "storeId": this.selectedStore?.storeId,
+        "Date": this.dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+      })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            // console.log(res.data)
+            this.footfallcount = res?.data[0]?.footfallCount
+
+
+          }
+        }
+      })
+
+  }
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, 'days'));
+        return isValidDate ? 'invalid-date' : false;
+      }
+    }
+  }
+
+
+
+  createInternalticket() {
+    this.selectedStore = {}
+    this.footfallcount = 0
+    const modalRef = this.modalService.open(this.internalticket)
+    modalRef.result.then((result) => {
+      if (result === 'isConfirmed') {
+        let obj = {
+          "storeId": this.selectedStore?.storeId,
+          "dateString": dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+          "storeName": this.selectedStore?.storeName,
+          "ticketName": "footfall-directory",
+          "footfallCount": this.footfallcount,
+          "clientId": this.headerFilters?.client,
+          "status": "Raised",
+          "comments": ""
+        }
+        this.service
+          .CreateinternalTicketApi(obj)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe({
+            next: (res: any) => {
+              if (res && res?.code === 200) {
+                this.ts.getSuccessToast("Ticket created successfully");
+                this.modalService.dismissAll();
+                const data = {
+                  totalfiles: this.footfallcount,
+                  filedetails: {
+                    clientId: this.headerFilters?.client,
+                    storeId: this.selectedStore?.storeId,
+                    Date: dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+                    auditId: "",
+                    userId: "",
+                    nextToken: "",
+                  },
+                  auditId: "",
+                  storedetails: {
+                    storeName: this.selectedStore?.storeName
+                  }
+                };
+                sessionStorage.setItem("totalfiles", JSON.stringify(data));
+                sessionStorage.setItem("ticketType", "internal");
+                this.select = 'ticketMethod';
+                this.router.navigateByUrl('/manage/tickets/audit')
+
+              } else {
+                this.ts.getErrorToast("Error closing ticket");
+              }
+              this.cd.detectChanges();
+            },
+            error: (err: any) => {
+              const errorMsg =
+                err?.error?.message ||
+                err?.error?.error ||
+                err?.error ||
+                err?.message ||
+                "Error closing ticket";
+              this.ts.getErrorToast(errorMsg);
+              this.isCheckboxEnable = true;
+              this.closeBtn = true;
+              this.closeDisabled = false;
+            }
+          });
+
+
+
+      }
+    })
+
+
+
+
+  }
+  exportXLSX() {
+    this.searchValue = this.searchValue?.trim() || "";
+    this.offset = 1;
+    this.limit = 10000;
+    this.isExport = true;
+    this.service
+      .getTicketListExportApi(
+        this.footfallList_req.client,
+        this.footfallList_req.fromDate,
+        this.footfallList_req.toDate,
+        this.searchValue,
+        this.limit,
+        this.offset,
+        this.isExport,
+        this.sortedColumn,
+        this.sortDirection,
+        this.tangoType
+      )
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          this.excelService.saveAsExcelFile(res, "footfall directory ticket ");
+        },
+        error: (err: any) => {
+          this.ts.getErrorToast(
+            "Error exporting data:" + err.error ? err.error : err.message
+          );
+        },
+      });
+  }
+
+  onSort(column: string) {
+    if (this.sortedColumn === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortedColumn = column;
+      this.sortDirection = 1;
+    }
+    this.getTicketList(this.tangoType);
+  }
+  select = "ticketList";
+  ticketData: any;
+
+  startAudit() {
+    let input = {
+      storeId: this.ticketData?.storeId,
+      dateString: this.ticketData?.issueDate,
+    }
+    this.service
+      .checkTicketExists(input).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            // console.log(res.data)
+            let ticketList = res?.data
+            let findTangoticket = ticketList.filter((data: any) => data?._source?.type === 'internal' && data?._source?.status === "Closed")
+            let findstoreticket = ticketList.filter((data: any) => data?._source?.type === 'store' && data?._source?.status != "Closed")
+
+            if (findTangoticket.length > 0) {
+              const modalRef = this.modalService.open(TicketclosepopupComponent, {
+                centered: true,
+                size: "md",
+                scrollable: true,
+                backdrop: "static",
+              });
+              modalRef.componentInstance.tangoTicket = findTangoticket[0]._source;
+              modalRef.componentInstance.storeTicket = findstoreticket[0]._source;
+              modalRef.result.then((result) => {
+
+                if (result.type === 'merge') {
+               
+                  let obj = findTangoticket[0]?._source
+                  if (obj && obj?.mappingInfo.length > 0) {
+                    let mapData = obj.mappingInfo.filter((data: any) => data.type === "tangoreview")[0]
+                 
+                    let payload = {
+                      storeId: this.ticketData?.storeId,
+                      "dateString": this.ticketData?.issueDate,
+                      ticketType: 'store',
+                      mappingInfo: mapData
+                    }
+                     this.auditservice
+                      .saveaudit(payload).pipe(takeUntil(this.destroy$))
+                      .subscribe({
+                        next: (res: any) => {
+                          if (res && res?.code === 200) {
+                            this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
+                          }
+                        }
+                      })
+                  }
+                } else if (result.type == '') {
+                  const data = {
+                    totalfiles: this.ticketData?.footfall,
+                    filedetails: {
+                      clientId: this.headerFilters?.client,
+                      storeId: this.ticketData?.storeId,
+                      Date: this.ticketData?.issueDate,
+                      auditId: "",
+                      userId: "",
+                      nextToken: "",
+                    },
+                    auditId: "",
+                    storedetails: {
+                      storeName: this.ticketData?.storeName
+                    }
+                  };
+                  sessionStorage.setItem("totalfiles", JSON.stringify(data));
+                  sessionStorage.setItem("ticketType", this.tangoType);
+
+                  this.select = 'ticketMethod';
+                  this.router.navigateByUrl('/manage/tickets/audit')
+                }
+              });
+            } else {
+              const data = {
+                totalfiles: this.ticketData?.footfall,
+                filedetails: {
+                  clientId: this.headerFilters?.client,
+                  storeId: this.ticketData?.storeId,
+                  Date: this.ticketData?.issueDate,
+                  auditId: "",
+                  userId: "",
+                  nextToken: "",
+                },
+                auditId: "",
+                storedetails: {
+                  storeName: this.ticketData?.storeName
+                }
+              };
+              sessionStorage.setItem("totalfiles", JSON.stringify(data));
+              sessionStorage.setItem("ticketType", this.tangoType);
+
+              this.select = 'ticketMethod';
+              this.router.navigateByUrl('/manage/tickets/audit')
+            }
+
+
+
+
+          }
+        }
+      })
+
+
+    return
+
+
+  }
+
+  backToNavigation() {
+    this.select = "ticketList";
+    this.footfallTicketsData = [];
+    this.getTicketSummary(this.tangoType);
+    this.getTicketList(this.tangoType);
+    this.closeBtn = false;
+    this.isCheckboxEnable = false;
+    this.arrowshow = !this.arrowshow;
+    this.commentsAccordionOpen = false;
+    this.selectedCommentCategory = null;
+    this.resetSelections();
+    this.allSelected = false;
+  }
+  isCollapsed = false;
+  toggleSidebar() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+
+  toggleFilter() {
+    this.isFilterOpen = !this.isFilterOpen;
+  }
+  isFilterOpen = false; // controls show/hide panel
+  filterForm: FormGroup;
+  @Output() filterChange = new EventEmitter<any>();
+  newForm() {
+    this.filterForm = this.fb.group({
+      status: [""],
+      reviewerCondition: [""],
+      reviewerValue: [""],
+      approverCondition: [""],
+      approverValue: [""],
+      tangoCondition: [""],
+      tangoValue: [""],
+    });
+  }
+
+  applyFilter() {
+    this.filterChange.emit(this.filterForm.value);
+    this.isFilterOpen = false; // close after apply
+  }
+
+  resetFilter() {
+    this.filterForm.reset();
+    this.filterChange.emit(this.filterForm.value);
+  }
+
+  close() {
+    this.isFilterOpen = false;
+  }
+  StoresSearchValue: any = "";
+  sortedColumn1: string = "";
+  sortDirection1: number = 1;
+
+  openTicketsList: any[] = [];
+  selectedStores: any[] = []; // holds selected rows
+  allSelected = false; // top "Select All" checkbox
+
+  get storeCount(): number {
+    return this.openTicketsList?.length || 0;
+  }
+
+  // check if a row is selected (used in template)
+  isSelected(store: any): boolean {
+    return this.selectedStores.includes(store);
+  }
+
+
+
+  toggleStoreSelection(store: any): void {
+
+    if (this.isSelected(store)) {
+
+      this.selectedStores = this.selectedStores.filter((s) => s !== store);
+    } else {
+
+      this.selectedStores = [...this.selectedStores, store];
+    }
+    this.closeMultiple = (this.selectedStores.length > 1) ? false : true;
+
+
+    this.allSelected =
+      this.selectedStores.length === this.openTicketsList.length &&
+      this.openTicketsList.length > 0;
+  }
+
+  newallSelected = false;
+  toggleSelectAll(): void {
+    if (this.newallSelected) {
+      this.selectedStores = [];
+      this.newallSelected = false;
+    } else {
+      this.selectedStores = [...this.openTicketsList];
+      this.newallSelected = true;
+    }
+  }
+  ticketViewChanges(store: any) {
+    this.selectedStores = [store];
+    this.dataStoreView(store);
+    this.newallSelected =
+    this.selectedStores.length === this.openTicketsList.length &&
+      this.openTicketsList.length > 0;
+  }
+
+  originalImage: any = {
+    id: 4,
+    entryTime: "10:00 AM",
+  };
+  ticket: any = [];
+  imageUrl: any;
+  getFormattedEntryTime(entryTime: any) {
+    if (!entryTime) return "-";
+    const [hours, minutes, seconds] = entryTime.split(":").map(Number);
+    const date = new Date();
+    date.setHours(hours, minutes, seconds);
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      // second: '2-digit',
+      hour12: true,
+    });
+  }
+  duplicates: any;
+
+  // key = parent original.tempId, value = array of selected duplicate tempIds
+  selectedDuplicatesByParent: { [parentId: number]: number[] } = {};
+
+  // is one duplicate selected?
+  isDuplicateSelected(parentId: number, duplicateId: number): boolean {
+    return (
+      this.selectedDuplicatesByParent[parentId]?.includes(duplicateId) || false
+    );
+  }
+
+  // select / unselect single duplicate
+  onDuplicateCheckboxChange(
+    parentId: number,
+    duplicateId: number,
+    event: Event
+  ): void {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    if (!this.selectedDuplicatesByParent[parentId]) {
+      this.selectedDuplicatesByParent[parentId] = [];
+    }
+
+    const list = this.selectedDuplicatesByParent[parentId];
+
+    if (checked) {
+      if (!list.includes(duplicateId)) {
+        list.push(duplicateId);
+      }
+    } else {
+      this.selectedDuplicatesByParent[parentId] = list.filter(
+        (id) => id !== duplicateId
+      );
+    }
+    this.updateOverallSelectedIds();
+  }
+
+  // are *all* duplicates under this parent selected?
+  areAllDuplicatesSelected(original: any): boolean {
+    const parentId = original.tempId;
+    const duplicates = original?.duplicateImage || [];
+    const selected = this.selectedDuplicatesByParent[parentId] || [];
+
+    return duplicates.length > 0 && selected.length === duplicates.length;
+  }
+
+  // handle "Select All" toggle for this original
+  onToggleSelectAllDuplicates(original: any, event: Event): void {
+    const checked = (event.target as HTMLInputElement).checked;
+    const parentId = original.tempId;
+
+    const duplicates = (original?.duplicateImage || []).filter(
+      (d: any) => !this.isFinalStatus(d)    // ⛔ skip approved/rejected
+    );
+
+    if (checked) {
+      this.selectedDuplicatesByParent[parentId] = duplicates.map(
+        (d: any) => d.tempId
+      );
+    } else {
+      this.selectedDuplicatesByParent[parentId] = [];
+    }
+
+    this.updateOverallSelectedIds();
+  }
+
+
+  // comments: any;
+
+  commentModal(obj: any) {
+    const modalRef = this.modalService.open(FootfallPopupComponent, {
+      centered: true,
+      size: "md",
+      scrollable: true,
+      backdrop: "static",
+    });
+    modalRef.componentInstance.ticketId = obj.ticketId;
+    modalRef.result.then((result) => { });
+  }
+
+  commentsAccordionOpen = false;
+  selectedCommentCategory: string | null = null;
+  getCategoryCommentCountForSource(
+    source: any,
+    category: string,
+
+  ): number {
+    if (!source?.commentsDetails || !category) return 0;
+
+    let count = 0;
+
+    for (const block of source.commentsDetails) {
+      // 🔹 DUPLICATE: no block.comments, use block itself
+      // if (category === 'duplicate') {
+      //   if (
+      //     block.category === 'duplicate' &&
+      //     (parentId == null || String(block.parent) === String(parentId))
+      //   ) {
+      //     count += 1;     // each block = one comment thread
+      //   }
+      //   continue;
+      // }
+
+      // 🔹 NON-DUPLICATE: old shapes
+      const comments = block?.comments || [];
+      if (!comments.length) continue;
+
+      if (block.category) {
+        // New shape: category at block level
+        if (block.category === category) {
+          count += comments.length;
+        }
+      } else {
+        // Old shape: category on each comment
+        count += comments.filter((c: any) => c.category === category).length;
+      }
+    }
+
+    return count;
+  }
+
+
+
+
+
+  toggleCommentsAccordion(type: string) {
+    // console.log(id)
+    // If you click the same type again → close accordion
+    if (this.commentsAccordionOpen && this.selectedCommentCategory === type) {
+      this.commentsAccordionOpen = false;
+      this.selectedCommentCategory = null;
+    } else {
+      // Clicked a new type → open accordion for that type
+      this.commentsAccordionOpen = true;
+      this.selectedCommentCategory = type;
+    }
+    // console.log(this.selectedCommentCategory)
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  comments: any = [];
+
+  showRevisedDetails = false;
+  footfallNoData: boolean = false;
+  footfallLoading: boolean = false;
+  footfalloffset = 1;
+  footfalllimit = 1;
+  totalItemsFootfall: any = 0;
+  dataIndexId: string = "";
+  dateString: string = "";
+  storeIdValue: any = [];
+  lastSelectedTicket: any;
+  selecteValues: any = "";
+  hasInitialStoreSynced: boolean = false;
+
+  pageSizeFootfall: number = 10;
+  paginationSizesFootfall: number[] = [10, 20, 30];
+  addStoreIfNotExists(store: any) {
+    if (this.hasInitialStoreSynced) return;
+
+    const storeId = store?.storeId;
+    if (storeId && !this.selectedStores.includes(storeId)) {
+      this.selectedStores.push(storeId);
+    }
+
+    this.hasInitialStoreSynced = true;
+    // this.allSelected =
+    //   this.selectedStores.length === this.openTicketsList.length;
+  }
+  revopsTypes: string[] = [];
+  countData: any;
+  filterList: any;
+  buildRevopsTypes(tickets: any[]) {
+
+    const types = new Set<string>();
+
+    (tickets || []).forEach((ticket: any) => {
+      const mappingInfo = ticket?._source?.mappingInfo || [];
+      mappingInfo.forEach((mapping: any) => {
+        if (mapping?.status === 'In-Progress' && ['review', 'approve'].includes(mapping.type)) {
+          this.ticketStatus = mapping?.createdByEmail
+        }
+        if (mapping.status === 'Closed' && ['review'].includes(mapping.type)) {
+          this.isCheckboxEnable = false;
+          return
+        }
+        // 🔹 ONE function handles review + approve
+        if (mapping.status === 'Closed' && ['approve', 'tangoreview'].includes(mapping.type)) {
+          this.openArrow();
+          this.approverClosed = true;
+
+        }
+        if ((mapping?.status === 'Closed - Accuracy Issue' || mapping?.status === 'Open - Accuracy Issue') && ['tangoreview'].includes(mapping.type)) {
+          this.openArrow();
+          this.approverClosed = true;
+        }
+
+        this.updateCloseStateFromMapping(mapping);
+        // 🔹 Existing revopsTypes logic
+        (mapping?.revisedDetail || []).forEach((item: any) => {
+          // inside your component (e.g., ngOnChanges or wherever you process mapping)
+
+          if (
+            (mapping?.status === 'Closed' ||
+              mapping?.status === 'Closed - Accuracy Issue' ||
+              mapping?.status === 'Open - Accuracy Issue') &&
+            mapping?.type === 'tangoreview'
+          ) {
+            this.filterList = mapping?.revisedDetail || [];
+             // initialize counts
+            
+
+            let Data =  this.filterList.filter((data:any)=>data.isParent===false)
+            this.countData = Object.entries(
+              Data.reduce((acc:any, it:any) => {
+               const k = it.revopsType || 'unknown';
+                acc[k] = (acc[k] || 0) + 1;
+                return acc;
+              }, {})
+            ).map(([type, count]) => ({ type, count }));
+
+
+            this.applyFilter1(this.filterList);
+            
+          }
+
+          if (item?.revopsType) {
+            types.add(item.revopsType);
+          } else if (item?.type && item?.name) {
+            types.add(item.type); // e.g. 'vendor', 'technician', 'houseKeeping'
+          }
+        });
+      });
+    });
+
+    this.revopsTypes = Array.from(types);
+    this.cd.detectChanges();
+  }
+  ticketStatus: any
+  // Handles both: review & approve in ONE place
+  private updateCloseStateFromMapping(mapping: any): void {
+    if (!mapping || mapping.status !== 'In-Progress') {
+      return;
+    }
+    // Decide which stage this mapping belongs to
+    const stage: 'review' | 'approve' | null =
+      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;
+    } else {
+
+      this.isCheckboxEnable = true;
+      this.closeBtn = true;
+      this.closeDisabled = !fullyDone;
+    }
+    this.cd.detectChanges();
+
+    const hasCorrectRole =
+      (this.hasReviewerAccess && this.selectedRole === "reviewer") ||
+      (this.hasApproverAccess && this.selectedRole === "approver");
+
+    const isOwner =
+      this.usersDetails?.email === this.ticketStatus ||
+      this.usersDetails?.email === this.ticketStatus;
+    if (hasCorrectRole === isOwner) {
+      this.isCheckboxEnable = true;
+    } else {
+      this.isCheckboxEnable = false;
+    }
+  }
+
+  private getActionCompletion(mapping: any, actionType: 'review' | 'approve') {
+    const details = mapping?.revisedDetail || [];
+    const allItems: any[] = [];
+
+    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: any) => {
+      const actions = item.actions || [];
+      const act = actions.find((a: any) => 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: any) {
+    return this.revopsTypes.includes(type);
+  }
+
+  private isFinalStatus(item: any): boolean {
+    if (this.permissionType === 'review' && this.selectedRole === 'reviewer') {
+      return this.isApproved(item) || this.isRejected(item);
+    }
+
+    if (this.permissionType === 'approve' && this.selectedRole === 'approver') {
+      return this.isApproved1(item) || this.isRejected1(item);
+    }
+
+    return false;
+  }
+
+
+
+  overallSelectedIds: any;
+  overallSelect(event: any) {
+    const checked = (event.target as HTMLInputElement).checked;
+
+    this.allSelected = checked;
+
+    const parents = this.getAllParentItems() || [];
+
+    if (checked) {
+      // non-duplicate types
+      (this.revopsTypes || []).forEach((type: string) => {
+        if (type === 'duplicate') return;
+
+        const list = (this.getListByType(type) || []).filter(
+          (i: any) => !this.isFinalStatus(i)
+        );
+
+        this.selectedByType[type] = list.map((i: any) => i.tempId);
+        this.selectAllByType[type] = list.length > 0;
+      });
+
+      // duplicate type
+      this.selectedDuplicatesByParent = {};
+
+      parents
+        .filter((p: any) => p.revopsType === 'duplicate')
+        .forEach((p: any) => {
+          const parentId = p.tempId;
+
+          const duplicates = (p.duplicateImage || []).filter(
+            (d: any) => !this.isFinalStatus(d)
+          );
+
+          this.selectedDuplicatesByParent[parentId] = duplicates.map(
+            (d: any) => d.tempId
+          );
+        });
+    } else {
+      // clear everything
+      (this.revopsTypes || []).forEach((type: string) => {
+        if (type === 'duplicate') return;
+        this.selectedByType[type] = [];
+        this.selectAllByType[type] = false;
+      });
+
+      this.selectedDuplicatesByParent = {};
+      this.selectAllByType.duplicate = false;
+      this.overallSelectedIds = [];
+    }
+
+    // 🔥 always recalc after change
+    this.updateOverallSelectedIds();
+  }
+
+
+
+  getAllParentItems() {
+    if (!this.footfallTicketsData) {
+      return [];
+    }
+
+    const allMappings: any[] = [];
+    const allRevised: any[] = [];
+
+    // first level: collect all mappingInfo arrays
+    this.footfallTicketsData.forEach((ticket: any) => {
+      const mappings = ticket?._source?.mappingInfo || [];
+      allMappings.push.apply(allMappings, mappings); // concat
+    });
+
+    // second level: collect all revisedDetail arrays
+    allMappings.forEach((mapping: any) => {
+      const details = mapping?.revisedDetail || [];
+      allRevised.push.apply(allRevised, details); // concat
+    });
+
+    return allRevised;
+  }
+
+  isCheckboxEnable = false;
+  closeBtn = false;
+  closeDisabled = false;
+  startReview() {
+    let obj = {
+      "storeId": this.ticketData?.storeId,
+      "dateString": this.ticketData?.issueDate,
+      "mode": "web"
+    }
+    // return
+    this.service.getUpdateTicketStatusApi(obj).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.isCheckboxEnable = true; // call this on your "Review" button click
+          this.closeBtn = true;
+          this.closeDisabled = true;
+          this.getTicketList(this.tangoType)
+
+          this.dataStoreView(this.ticketData);
+        }
+      },
+      error: (err: any) => {
+      },
+      complete: () => {
+        this.cd.detectChanges();
+      }
+    })
+  }
+  @ViewChild("closePopup") closePopup: ElementRef;
+  stopReview() {
+    const modalRef = this.modalService.open(this.closePopup, {
+      centered: true,
+      size: "md",
+      backdrop: "static",
+      keyboard: false,
+    });
+    this.isCheckboxEnable = false;
+    this.closeBtn = true;
+  }
+
+  ticketView(data?: any) {
+    this.ticketData = data;
+    this.allSelected = false;
+    if (!data) {
+      this.getOpenTicketList(data);
+      this.select = 'ticketMethod';
+      return;
+    }
+
+    const status = (data.status || '').trim();
+    if (this.usersDetails.userType === 'tango') {
+      this.dataStoreView(data);
+    } else {
+      if (status === 'Open') {
+        // when ticket status is Open → use open-ticket API
+        this.getOpenTicketList(data);
+      } else {
+        // otherwise → use store view API
+        this.dataStoreView(data);
+      }
+    }
+    if (data.status === 'Open - Accuracy Issue') {
+      this.accuracyReasons()
+    }
+    this.select = 'ticketMethod'; // keep your existing tab; change if you use a different view key
+  }
+  accuracyReasons() {
+    this.service
+      .accuracyReasons(this.headerFilters?.client)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.accuracyList = res.data.result
+          }
+        }
+      })
+
+  }
+  oncloseSubmit() {
+    const modalRef = this.modalService.open(this.closeacuuracyissue)
+    modalRef.result.then((result) => {
+   
+      if (result === 'isConfirmed') {
+      
+        let payload = {
+          storeId: this.footfallTicketsData[0]?._source?.storeId,
+          dateString: this.footfallTicketsData[0]?._source?.dateString,
+          comments: this.selectedIssue,
+          subComment: this.selectedsubIssue,
+        }
+      
+        this.service
+          .accuracyReasonsupdate(payload)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe({
+            next: (res: any) => {
+              if (res && res.code === 200) {
+                this.ts.getSuccessToast('updated Sucessfully'),
+                  this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
+              }
+            }
+          })
+
+
+      }
+    })
+  }
+  dataStoreView(data?: any) {
+    this.footfallTicketsData = [];
+    this.footfallNoData = false;
+    this.footfallLoading = true;
+    this.allSelected = false;
+    const ticket = data?.ticketId;
+
+    this.lastSelectedTicket = ticket;
+    this.addStoreIfNotExists(ticket);
+    this.imageUrl = this.service?.footfallCDN;
+    this.storeIdValue = this.selectedStores;
+
+    this.service
+      .getTicketsNewApi(ticket)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.getIconType();
+            if (res?.data?.result?.length === 0) {
+              this.footfallTicketsData = [];
+              this.footfallNoData = true;
+              this.footfallLoading = false;
+              this.ts.getErrorToast("No data found for the selected filters");
+            } else {
+              this.footfallTicketsData = res?.data?.result ?? [];
+          
+              this.buildRevopsTypes(this.footfallTicketsData);
+              this.totalItemsFootfall = res?.data?.count;
+              this.cd.detectChanges();
+              if (this.footfalllimit === 1) {
+                this.paginationSizes = [1];
+                this.pageSizeFootfall = 1;
+              } else {
+                const limit =
+                  this.totalItemsFootfall < 10 ? this.totalItemsFootfall : 10;
+                this.paginationSizes = [limit];
+                this.pageSizeFootfall = limit;
+              }
+              this.footfallNoData = false;
+              this.footfallLoading = false;
+              this.cd.detectChanges();
+              // this.getCurrentReviewMapping();
+            }
+          } else {
+            this.footfallTicketsData = [];
+            this.footfallNoData = true;
+            this.footfallLoading = false;
+          }
+        },
+        error: (err: any) => {
+          if (err?.error?.code === 400)
+            this.ts.getErrorToast(
+              err?.error?.message ? err?.error?.message : err?.error?.error
+            );
+          this.footfallTicketsData = [];
+          this.footfallNoData = true;
+          this.footfallLoading = false;
+        },
+        complete: () => {
+          this.cd.detectChanges();
+        },
+      });
+  }
+  footfallTicketsData: any[] = [];
+  // ---- SELECTION STATE ----
+
+  selectedByType: any = {};
+  selectAllByType: any = {};
+
+  // ---- HELPERS ----
+
+  // Get all revisedDetail items of a given type from footfallTicketsData
+  // Get all revisedDetail items of a given type from footfallTicketsData
+  getListByType(type: any) {
+    if (!this.footfallTicketsData) {
+      return [];
+    }
+
+    const allRevised: any[] = [];
+
+    // collect revisedDetail ONLY from mappingInfo with type === 'review'
+    this.footfallTicketsData.forEach((ticket: any) => {
+      const mappings = ticket?._source?.mappingInfo || [];
+
+      mappings
+        .filter((m: any) => m?.type === 'review') // 🔹 IMPORTANT
+        .forEach((mapping: any) => {
+          const details = mapping?.revisedDetail || [];
+          allRevised.push(...details);
+        });
+    });
+
+    // filter by type (junk / employee / houseKeeping)
+    const filtered = allRevised.filter(
+      (original: any) => original?.revopsType === type
+    );
+
+    // 🔹 DEDUPE by tempId (or id) so we don't count same image twice
+    const uniqueByTempId = Array.from(
+      new Map(filtered.map((item: any) => [item.tempId, item])).values()
+    );
+
+    return uniqueByTempId;
+  }
+
+
+
+  private updateOverallSelectedIds(): void {
+    const ids: string[] = [];
+    const parents = this.getAllParentItems() || [];
+    const selectedTypesSet = new Set<string>();
+
+    // Non-duplicate
+    (this.revopsTypes || [])
+      .filter((type) => type !== 'duplicate')
+      .forEach((type: string) => {
+        const list = this.getListByType(type) || [];
+        const selectedTemps = this.selectedByType[type] || [];
+
+        if (selectedTemps.length > 0) selectedTypesSet.add(type);
+
+        list.forEach((item: any) => {
+          if (
+            selectedTemps.includes(item.tempId) &&
+            item.id &&
+            !this.isFinalStatus(item)   // ⛔ safeguard
+          ) {
+            ids.push(item.id);
+          } else if (selectedTemps.includes(item.tempId) &&
+            item.id &&
+            this.isFinalStatus(item)) {
+            ids.push(item.id);
+          }
+        });
+      });
+
+    // Duplicate
+    parents
+      .filter((p: any) => p.revopsType === 'duplicate')
+      .forEach((parent: any) => {
+        const parentId = parent.tempId;
+        const selectedChildTemps =
+          this.selectedDuplicatesByParent[parentId] || [];
+
+        if (selectedChildTemps.length > 0) {
+          selectedTypesSet.add('duplicate');
+        }
+
+        (parent.duplicateImage || []).forEach((child: any) => {
+          if (
+            selectedChildTemps.includes(child.tempId) &&
+            !this.isFinalStatus(child)   // ⛔ safeguard
+          ) {
+            if (child.id) {
+              ids.push(child.id);
+            } else if (parent.id) {
+              ids.push(parent.id);
+            }
+          }
+        });
+      });
+
+    this.overallSelectedIds = Array.from(new Set(ids));
+    this.selectedCategories = Array.from(selectedTypesSet);
+  }
+
+
+
+  selectedCategories: any = [];
+  labelMap: Record<string, string> = {};
+  toTitleCase(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  buildLabelMap(tickets: any[]) {
+    tickets.forEach((ticket: any) => {
+      const mappingInfo = ticket?._source?.mappingInfo || [];
+
+      mappingInfo.forEach((mapping: any) => {
+        (mapping?.revisedDetail || []).forEach((item: any) => {
+
+          // CASE 1: normal entries (employee, vendor, technician, etc.)
+          if (item?.revopsType) {
+            const key = item.revopsType;
+            if (!this.labelMap[key]) {
+              this.labelMap[key] = this.toTitleCase(key);
+            }
+          }
+
+          // CASE 2: summary rows with { name, type }
+          if (item?.type && item?.name) {
+            this.labelMap[item.type] = item.name;
+          }
+
+        });
+      });
+    });
+  }
+  get selectedCategoriesLabel(): string {
+    if (!this.selectedCategories?.length) return "";
+
+    if (this.selectedCategories.length === 1) {
+      const type = this.selectedCategories[0];
+      return this.labelMap[type] || this.toTitleCase(type);
+    }
+
+    return this.selectedCategories
+      .map((t: any) => this.labelMap[t] || this.toTitleCase(t))
+      .join(", ");
+  }
+  type: any = 'footfall';
+  // "Select all" / "Unselect all" for a type
+  popupvalue: any;
+  // or just: popupvalue: string = '';
+
+  onSelectAll(type: any, event: any) {
+    const checked = event?.target?.checked;
+
+    this.selectAllByType[type] = checked;
+    this.type = type;
+    this.popupvalue = type;
+
+    const list = this.getListByType(type) || [];
+
+    // ⛔ skip items that are already approved / rejected
+    const selectable = list.filter((x: any) => !this.isFinalStatus(x));
+
+    this.selectedByType[type] = checked
+      ? selectable.map((x: any) => x.tempId)
+      : [];
+
+    this.updateOverallSelectedIds();
+  }
+
+
+  // Single checkbox change for one image
+  onImageCheckboxChange(type: string, id: any, event: any) {
+    const checked = event?.target?.checked;
+    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 {
+      // remove if present
+      const idx = arr.indexOf(id);
+      if (idx > -1) {
+        arr.splice(idx, 1);
+      }
+    }
+
+    // total items for this type
+    const total = this.getListByType(type).length;
+
+    // auto-update "Select All" for that type
+    this.selectAllByType[type] = total > 0 && arr.length === total;
+
+    this.updateOverallSelectedIds();
+    this.popupvalue = type;
+  }
+
+
+
+  remarks: any;
+  @ViewChild("zoomPopup") zoomPopup: ElementRef;
+  popupType: any;
+  popupIds: any[] = [];
+  popupOpen(
+    type: any,
+    value?: any
+  ) {
+    // store type
+    this.popupType = type;
+    this.popupIds = this.overallSelectedIds || [];
+    const modalRef = this.modalService.open(this.zoomPopup, {
+      centered: true,
+      size: "md",
+      backdrop: "static",
+      keyboard: false,
+    });
+  }
+
+  houseKeepingACCount: any;
+  employeeACCount: any;
+  duplicateACCount: any;
+  junkACCount: any;
+
+  selectedDuplicateImagesList: any[] = [];
+  selectedHousekeepingImagesList: any[] = [];
+  selectedEmployeeImagesList: any[] = [];
+  selectedJunkImagesList: any[] = [];
+  submitValue(status: string = "approved", category: string = "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,
+      status: status,
+      type: this.hasApproverAccess && this.selectedRole == 'approver' ? "approve" : "review",
+      ...(this.remarks?.trim() && { comments: this.remarks.trim() })
+    };
+    this.service
+      .getUpdateTempStatusApi(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.ts.getSuccessToast(`${this.overallSelectedIds?.length ? this.overallSelectedIds?.length : this.popupValue ?
+              this.popupValue : '--'} ${this.selectedCategoriesLabel.charAt(0).toUpperCase() + this.selectedCategoriesLabel.slice(1)} ${status}`);
+
+            this.cancel();
+
+            this.dataStoreView(this.ticketData);
+
+            this.remarks = "";
+          } else {
+            this.ts.getErrorToast("Error updating status");
+          }
+        },
+        error: (err: any) => {
+          const errorMsg =
+            err?.error?.message ||
+            err?.error?.error ||
+            err?.error ||
+            err?.message ||
+            "Error updating status";
+          this.ts.getErrorToast(errorMsg);
+        },
+        complete: () => {
+          this.cd.detectChanges();
+        },
+      });
+  }
+  resetSelections() {
+    this.selectedByType = {};
+    this.selectAllByType = {};
+    this.selectedDuplicatesByParent = {};
+    this.overallSelectedIds = [];
+    this.popupIds = [];
+  }
+
+  cancel() {
+    this.modalService.dismissAll();
+    this.resetSelections();
+    this.allSelected = false;
+    this.selectedCategories = [];
+  }
+  openArrow() {
+    this.arrowshow = !this.arrowshow;
+  }
+
+  sortOpen: 1 | -1 = 1; // default ascending
+
+  onSortClick() {
+    this.sortOpen = this.sortOpen === 1 ? -1 : 1;  // 👈 toggle and SAVE
+    this.getOpenTicketList();
+  }
+  searchStoresData() {
+    this.StoresSearchValue = this.StoresSearchValue
+    this.getOpenTicketList();
+  }
+  getOpenTicketList(data?: any) {
+    this.footfallLoading = true;
+    const selectedTicketId = data?.ticketId ?? data;
+
+    const obj = {
+      clientId: [this.headerFilters?.client],
+      fromDate: this.headerFilters?.date?.startDate,
+      toDate: this.headerFilters?.date?.endDate,
+      type: this.hasApproverAccess && this.selectedRole == 'approver' ? "approve" : "review",
+      sortOrder: this.sortOpen,
+      searchValue: this.StoresSearchValue
+    };
+
+    this.service
+      .getOpenTicketListApi(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.openTicketsList = res?.data ?? [];
+            this.selectedStores = [];
+            this.allSelected = false;
+
+            if (!this.openTicketsList.length) {
+              this.footfallNoData = true;
+              this.footfallLoading = false
+              this.allSelected = false;
+              return;
+            }
+
+            let storeToSelect: any | undefined;
+            if (selectedTicketId) {
+              storeToSelect = this.openTicketsList.find(
+                (s: any) => s.ticketId === selectedTicketId
+              );
+            }
+
+            if (!storeToSelect) {
+              storeToSelect = this.openTicketsList[0];
+            }
+
+            this.selectedStores = [storeToSelect];
+            this.dataStoreView(storeToSelect);
+          } else {
+            this.openTicketsList = [];
+            this.selectedStores = [];
+            this.footfallNoData = true;
+            this.allSelected = false;
+          }
+        },
+        error: () => {
+          this.openTicketsList = [];
+          this.selectedStores = [];
+          this.allSelected = false;
+        },
+        complete: () => {
+          this.cd.detectChanges();
+        },
+      });
+  }
+  isLockedByReviewer(original: any): boolean {
+    if (this.hasApproverAccess && this.selectedRole === 'approver') {
+      this.getCurrentRoleMapping();
+      return this.isApproved1(original) || this.isRejected1(original);
+    }
+    this.getCurrentReviewMapping();
+
+    return this.isApproved(original) || this.isRejected(original);
+  }
+
+  isApproved1(original: any): boolean {
+    const actions = original?.actions || [];
+    return actions.some(
+      (a: any) => a.actionType === "approve" && a.action === "approved"
+    );
+  }
+
+  isRejected1(original: any): boolean {
+    const actions = original?.actions || [];
+    return actions.some(
+      (a: any) => a.actionType === "approve" && a.action === "rejected"
+    );
+  }
+
+  isApproved(original: any): boolean {
+    const actions = original?.actions || [];
+    return actions.some(
+      (a: any) => a.actionType === "review" && a.action === "approved"
+    );
+  }
+
+  isRejected(original: any): boolean {
+    const actions = original?.actions || [];
+    return actions.some(
+      (a: any) => a.actionType === "review" && a.action === "rejected"
+    );
+  }
+
+
+  resetCheckbox(
+    type: any,
+    original: any
+  ) {
+    if (!original?.actions || !Array.isArray(original.actions)) {
+      return;
+    }
+    const actions = original.actions;
+
+    // 1) Check if there is a decision (review/approve → approved/rejected)
+    const hasDecision = actions.some((a: any) =>
+    (
+      (a.actionType === "review" || a.actionType === "approve") &&
+      (a.action === "approved" || a.action === "rejected")
+    )
+    );
+
+    // If NO approved/rejected → do nothing
+    if (!hasDecision) {
+      return;
+    }
+
+    // 2) Remove only decision actions
+    original.actions = actions.filter(
+      (a: any) =>
+        !(
+          (a.actionType === "review" || a.actionType === "approve") &&
+          (a.action === "approved" || a.action === "rejected")
+        )
+    );
+
+    // 3) Remove from selected array
+    const tempId = original.tempId;
+    const arr = this.selectedByType[type] || [];
+    const i = arr.indexOf(tempId);
+    if (i > -1) arr.splice(i, 1);
+
+    // 4) Uncheck select all for that type
+    this.selectAllByType[type] = false;
+  }
+
+
+  viewMode: "tangoreview" | "approve" | "review" | "tagging" = "tagging";
+  getAction(original: any, type: "tagging" | "review" | "tangoreview" | "approve") {
+    return original?.actions?.find((a: any) => a.actionType === type) || null;
+  }
+
+
+  getCurrentReviewMapping(): any {
+    if (!this.footfallTicketsData || !this.footfallTicketsData.length) {
+      return null;
+    }
+
+    // Go through all tickets and mappingInfo
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket?._source;
+      const mappingList = source?.mappingInfo || [];
+
+      // pick the first mapping with type 'review' that has revisedDetail
+      const found = mappingList.find(
+        (m: any) => m?.type === 'review' && m?.revisedDetail?.length
+      );
+
+      if (found) {
+        return found;
+      }
+    }
+
+    return null;
+  }
+
+
+  // Decide if ticket is fully reviewed based on ALL mappingInfo[type='review']
+  isTicketFullyReviewed(mapping: any): boolean {
+    if (!mapping?.revisedDetail) return false;
+
+    const details = mapping.revisedDetail as any[];
+
+    const nonDupTypes: any = [];
+
+    const nonDupItems = details.filter(d =>
+      nonDupTypes.includes(d.revopsType)
+    );
+
+    const nonDupReviewedCount = nonDupItems.filter(d => {
+      const review = this.getAction(d, "review");
+      return review && (review.action === "approved" || review.action === "rejected");
+    }).length;
+
+    const parentItems = details.filter(d => d.isParent);
+
+    const dupChildren = parentItems.reduce((acc: any[], p: any) => {
+      return acc.concat(p.duplicateImage || []);
+    }, []);
+
+    const dupReviewedCount = dupChildren.filter(d => {
+      const review = this.getAction(d, "review");
+      return review && (review.action === "approved" || review.action === "rejected");
+    }).length;
+
+    const totalToReview = nonDupItems.length + dupChildren.length;
+    const totalReviewed = nonDupReviewedCount + dupReviewedCount;
+
+    return totalToReview > 0 && totalReviewed === totalToReview;
+  }
+
+
+  getInitialsFromEmail(email?: string): string {
+    if (!email) return "";
+
+    // take text before @
+    const namePart = email.split("@")[0];
+
+    // split by . or space (e.g. "sandeep.pal" -> ["sandeep", "pal"])
+    const parts = namePart.split(/[.\s_-]+/).filter(Boolean);
+
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[1][0]).toUpperCase(); // S + P = SP
+    }
+
+    // fallback: first two chars of whole namePart
+    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,
+      dateString: this.footfallTicketsData[0]?._source?.dateString,
+      type: this.hasApproverAccess && this.selectedRole == 'approver' ? "approve" : "review",
+      mode: "web",
+    };
+    this.service
+      .getCreateTicketListApi(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.ts.getSuccessToast("Ticket closed successfully");
+            this.modalService.dismissAll();
+            this.closeBtn = false;
+            this.closeDisabled = true;
+            this.dataStoreView(this.ticketData);
+          } else {
+            this.closeBtn = true;
+            this.closeDisabled = false;
+            this.ts.getErrorToast(res.error ? res.error : '');
+          }
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          const errorMsg =
+            err?.error?.message ||
+            err?.error?.error ||
+            err?.error ||
+            err?.message ||
+            "Error closing ticket";
+          this.ts.getErrorToast(errorMsg);
+          // this.isCheckboxEnable = true;
+          this.closeBtn = true;
+          this.closeDisabled = false;
+        }
+      });
+  }
+
+  confirmCloseCancel() {
+    this.modalService.dismissAll();
+    this.closeBtn = false;
+    this.closeDisabled = true;
+    this.dataStoreView(this.ticketData);
+  }
+  @ViewChild("imagePreviewPopup") imagePreviewPopup: ElementRef;
+  previewList: any[] = [];
+  currentPreviewIndex = 0;
+  previewTitle = 'Tagged Duplicates';
+  get currentPreviewItem() {
+    if (!this.previewList || !this.previewList.length) {
+      return null;
+    }
+
+    if (
+      this.currentPreviewIndex == null ||
+      this.currentPreviewIndex < 0 ||
+      this.currentPreviewIndex >= this.previewList.length
+    ) {
+      return null;
+    }
+
+    return this.previewList[this.currentPreviewIndex];
+  }
+
+
+
+  getPreviewImageUrl() {
+    const item = this.currentPreviewItem;
+    return item ? this.imageUrl + item.filePath : '';
+  }
+  overallMapping: any;
+  openImagePreview(list: any, target: any, startIndex: number, title: string) {
+
+    this.overallMapping = list;
+    this.previewTitle = title;
+
+    // Decide preview list
+    if (Array.isArray(target) && target.length) {
+      this.previewList = target;
+    } else if (Array.isArray(list) && list.length) {
+      this.previewList = list;                               // Case 2
+    } else if (Array.isArray(list?.revisedDetail)) {
+      this.previewList = list.revisedDetail;                 // Case 3
+    } else {
+      this.previewList = [];                                 // fallback
+    }
+
+    // Set correct preview index
+    this.setPreviewIndex(startIndex, target);
+
+    // Open popup
+    this.modalService.open(this.imagePreviewPopup, {
+      centered: true,
+      size: 'lg',
+      backdrop: 'static',
+    });
+  }
+
+  private setPreviewIndex(startIndex: number | null | undefined, target: any) {
+
+    let index = -1;
+
+    // 1️⃣ Always try to find the clicked item by ID/tempId FIRST
+    if (target) {
+      index = this.previewList.findIndex((item: any) =>
+        (target.tempId && item.tempId === target.tempId) ||
+        (target.id && item.id === target.id)
+      );
+    }
+
+    // 2️⃣ If not found by ID, fallback to startIndex (ONLY if valid)
+    if (
+      index < 0 &&
+      startIndex != null &&
+      startIndex >= 0 &&
+      startIndex < this.previewList.length
+    ) {
+      index = startIndex;
+    }
+
+    // 3️⃣ Final fallback: use first image
+    if (index < 0) {
+      index = 0;
+    }
+
+    // Save final index
+    this.currentPreviewIndex = index;
+  }
+
+
+
+  // 1) Check if there is an APPROVE mapping with status Closed in overall mapping
+  overallApproveClosed(): boolean {
+    const list = this.overallMapping || [];
+
+    return Array.isArray(list) && list.some((m: any) =>
+      m?.type === 'approve' &&
+      m?.status?.toLowerCase() === 'closed'
+    );
+  }
+
+  // 2) Get approve action for a single image
+  getApproveActionForItem(item: any): any | null {
+    const actions = item?.actions || [];
+    return actions.find(
+      (a: any) =>
+        a.actionType === 'approve' &&
+        (a.action === 'approved' || a.action === 'rejected')
+    ) || null;
+  }
+
+  // 3) Final function: can we show Accept / Reject for this image?
+  canShowPreviewActions(item: any): boolean {
+    // if overall approve is closed -> no buttons
+    if (this.overallApproveClosed()) {
+      return false;
+    }
+
+    // if this image already has approve approved/rejected -> no buttons
+    const approveAction = this.getApproveActionForItem(item);
+    if (approveAction) {
+      return false;
+    }
+
+    // otherwise -> show buttons
+    return true;
+  }
+
+  prevPreview() {
+    if (this.previewList.length <= 1) return;
+    this.currentPreviewIndex =
+      this.currentPreviewIndex === 0
+        ? this.previewList.length - 1
+        : this.currentPreviewIndex - 1;
+  }
+
+  nextPreview() {
+    if (this.previewList.length <= 1) return;
+    this.currentPreviewIndex =
+      this.currentPreviewIndex === this.previewList.length - 1
+        ? 0
+        : this.currentPreviewIndex + 1;
+  }
+  popupValue: any;
+  rejectedPopup(type: any, value: any) {
+    this.overallSelectedIds = [value?.id];
+    this.popupValue = 1;
+    this.popupOpen(type)
+  }
+  approvedPopup(type: any, value: any) {
+    this.overallSelectedIds = [value?.id]
+    this.popupValue = 1;
+    this.popupOpen(type)
+  }
+  get hasApproverAccess(): boolean {
+    const perm = this.usersDetails?.permission;
+    return !!(
+      perm?.FootfallDirectory_approver_isAdd ||
+      perm?.FootfallDirectory_approver_isEdit
+    );
+  }
+
+  get hasReviewerAccess(): boolean {
+    const perm = this.usersDetails?.permission;
+    return !!(
+      perm?.FootfallDirectory_reviewer_isAdd ||
+      perm?.FootfallDirectory_reviewer_isEdit
+    );
+  }
+
+  // call this in ngOnInit or after usersDetails is loaded
+  setDefaultRole() {
+    if (this.hasApproverAccess) {
+      this.selectedRole = 'approver';
+    } else if (this.hasReviewerAccess) {
+      this.selectedRole = 'reviewer';
+    } else {
+      this.selectedRole = '';
+    }
+  }
+
+  SelectedRole(role: 'approver' | 'reviewer') {
+    if (role === 'approver' && !this.hasApproverAccess) return;
+    if (role === 'reviewer' && !this.hasReviewerAccess) return;
+
+    this.selectedRole = role;
+    this.getTicketList(this.tangoType);
+    this.getTicketSummary(this.tangoType);
+    // 🔹 put your role-based logic here:
+    // e.g. filter mappingInfo, change API call, etc.
+    // this.loadRoleData(role);
+  }
+
+
+  showApproveDetails = false;
+  showTangoDetails = false;
+
+  toggleRevisedDetails(mapping: any) {
+    if (mapping?.type === 'approve') {
+      this.showApproveDetails = !this.showApproveDetails;
+    } else if (mapping?.type === 'tangoreview') {
+      this.showTangoDetails = !this.showTangoDetails;
+    }
+  }
+
+  reviwerList: any;
+  reviewrReassignApi() {
+    this.service.getReviewerApi(this.headerFilters?.client, 'approve',this.usersDetails?.userType).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.reviwerList = res?.data;
+
+          } else {
+            this.reviwerList = [];
+          }
+        }, error: (err) => {
+
+        },
+      })
+
+  }
+  reviewrApi() {
+    this.service.getReviewerApi(this.headerFilters?.client, 'approve', this.tangoType).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.reviwerList = res?.data;
+            this.viewTicket('store');
+          } else {
+            this.reviwerList = [];
+          }
+        }, error: (err) => {
+
+        },
+      })
+
+  }
+  reviewerChange(event: any) {
+    this.selectedReviewer = event;
+  }
+  assignTicketView() {
+
+    if (this.usersDetails?.userType==='tango') {
+      let obj = {
+        email: this.selectedReviewer?.email,
+        userName: this.selectedReviewer?.userName,
+        storeId: this.ticketData?.storeId,
+        dateString: this.ticketData?.issueDate,
+        tickettype:this.tangoType
+      }
+      this.service.reAssignAudit(obj).pipe(takeUntil(this.destroy$))
+        .subscribe({
+          next: (res: any) => {
+            if (res && res?.code === 200) {
+              this.ts.getSuccessToast(res?.data?.message ? res?.data?.message : 'Ticket assigned successfully');
+              this.backToNavigation();
+              this.cancelassign();
+            }
+          }
+        })
+      return
+    }
+
+
+    let obj = {
+      email: this.selectedReviewer?.email,
+      userName: this.selectedReviewer?.userName,
+      actionType: this.hasApproverAccess && this.selectedRole === 'approver' ? "approve" : "review",
+      storeId: this.ticketData?.storeId,
+      dateString: this.ticketData?.issueDate
+    }
+    this.service.getTicketAssignApi(obj).pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.ts.getSuccessToast(res?.data?.message ? res?.data?.message : 'Ticket assigned successfully');
+            this.backToNavigation();
+            this.cancelassign();
+          }
+          else {
+            this.ts.getErrorToast("Error updating status");
+          }
+        }, error: (err) => {
+          const errorMsg =
+            err?.error?.message ||
+            err?.error?.error ||
+            err?.error ||
+            err?.message ||
+            "Error closing ticket";
+          this.ts.getErrorToast(errorMsg);
+        },
+      })
+  }
+  cancelassign() {
+    this.modalService.dismissAll();
+    this.reviwerList = [];
+    this.selectedReviewer = [];
+  }
+  isTicketMenuOpen = false;
+
+  toggleTicketMenu(event: MouseEvent) {
+    event.stopPropagation();
+    this.isTicketMenuOpen = !this.isTicketMenuOpen;
+  }
+
+  // close when clicking outside
+  @HostListener('document:click')
+  onDocumentClick() {
+    this.isTicketMenuOpen = false;
+  }
+
+  onReassignClick() {
+    this.isTicketMenuOpen = false;
+    // 🔹 open your popup here
+    this.openReassignPopup();   // implement this
+  }
+  @ViewChild("ReassignTicketPopup") ReassignTicketPopup: ElementRef;
+  openReassignPopup() {
+    const modalRef = this.modalService.open(this.ReassignTicketPopup, {
+      centered: true,
+      size: "md",
+      scrollable: true,
+      backdrop: "static",
+    });
+    this.reviewrReassignApi();
+  }
+  onExportClick() {
+    this.isTicketMenuOpen = false;
+    // 🔹 call your export API / logic here
+    // this.exportTicket();
+  }
+
+  getMultipleTicketClose() {
+    // if (!this.selectedStores || !this.selectedStores.length) {
+    //   this.ts.getErrorToast('Please select at least one ticket');
+    //   return;
+    // }
+    let ticketList: any;
+
+    if (this.selectedStores?.length) {
+      // When multiple stores are selected
+      ticketList = this.selectedStores.map((store: any) => ({
+        storeId: store.storeId,
+        dateString: store.dateString || store.issueDate,
+      }));
+    } else {
+      // When ticket rows are selected instead
+      ticketList = this.selectedTicketRows.map((store: any) => ({
+        storeId: store.storeId,
+        dateString: store.dateString || store.issueDate,
+      }));
+    }
+
+    const obj = {
+      ticketList,
+      mode: 'web',
+    };
+
+    this.service.getMultiCloseTicketApi(obj).subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          // success
+          this.ts.getSuccessToast('Tickets closed successfully');
+          this.viewTicket(this.tangoType);
+          this.selectedStores = [];
+          this.allSelected = false;
+        } else {
+          // this.toastService.getErrorToast('Failed to close tickets');
+        }
+      },
+      error: (err) => {
+        console.error('Failed to close tickets', err);
+        this.ts.getErrorToast('Failed to close tickets');
+      },
+    });
+  }
+  isRowSelectable(row: any): boolean {
+    return row?.status?.toLowerCase() === 'open' || row?.status === 'Reviewed-Closed';
+  }
+  selectedTicketRows: any = [];
+  // check if a row is currently selected
+  isRowSelected(row: any): boolean {
+    return this.selectedTicketRows.includes(row);
+  }
+
+  // rows that CAN be selected (status open)
+  getSelectableRows(): any[] {
+    return (this.footfallListData || []).filter((r: any) => this.isRowSelectable(r));
+  }
+
+  // header "select all" checkbox state
+  areAllSelectableRowsSelected(): boolean {
+    const selectable = this.getSelectableRows();
+    return (
+      selectable.length > 0 &&
+      selectable.every(r => this.selectedTicketRows.includes(r))
+    );
+  }
+  closeMultiple = true;
+
+
+
+  private updateCloseDisabled() {
+    this.closeMultiple = this.selectedTicketRows.length === 0;
+  }
+  // single row checkbox toggle
+  toggleRowSelection(row: any, event: Event): void {
+    if (!this.isRowSelectable(row)) return;
+
+    const target = event.target as HTMLInputElement;
+    const checked = target.checked;
+
+    if (checked) {
+      if (!this.isRowSelected(row)) {
+        this.selectedTicketRows = [...this.selectedTicketRows, row];
+      }
+    } else {
+      this.selectedTicketRows = this.selectedTicketRows.filter((r: any) => r !== row);
+    }
+    this.updateCloseDisabled();
+  }
+
+  // header "Select All" toggle
+  toggleSelectAllRows(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const checked = target.checked;
+
+    if (checked) {
+      this.selectedTicketRows = this.getSelectableRows().slice();
+    } else {
+      this.selectedTicketRows = [];
+    }
+    this.updateCloseDisabled();
+  }
+  showImagesModal = false;
+  selectedImagesForPopup: any[] = [];
+  selectedComment: any | null = null;
+
+  openImagesPopup(comment: any): void {
+    // return
+    this.selectedComment = comment;
+    this.selectedImagesForPopup = comment?.taggedImages || [];
+    this.showImagesModal = true;
+  }
+
+  closeImagesPopup(): void {
+    this.showImagesModal = false;
+    this.selectedImagesForPopup = [];
+    this.selectedComment = null;
+  }
+
+  getIconTypeList: any;
+  tagIconMap: Record<string, string> = {};  // type -> iconName
+
+  getIconType() {
+    this.service
+      .getTypeFunction(this.headerFilters?.client)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code === 200) {
+            this.getIconTypeList = res?.data?.footfallDirectoryConfigs || {};
+
+            const taggingLimitation = this.getIconTypeList?.taggingLimitation || [];
+
+            this.tagIconMap = {};
+            taggingLimitation.forEach((item: any) => {
+              if (item?.type && item?.iconName) {
+                this.tagIconMap[item.type] = item.iconName;
+              }
+            });
+          } else {
+            this.getIconTypeList = {};
+            this.tagIconMap = {};
+          }
+        },
+        error: (err) => {
+          this.getIconTypeList = {};
+          this.tagIconMap = {};
+        },
+      });
+  }
+  onFilterPanelClosed() {
+    // nothing required, but you can do logging here
+  }
+
+  onFilterApply(filters: any) {
+    this.filterPayload = filters;
+    this.offset = 0;
+    this.getTicketList(this.tangoType);
+  }
+  revFilter: 'all' | 'accept' | 'reject' | 'pending' = 'all';
+  // private getActionStatus(item: any): 'accept' | 'reject' | 'pending' | null {
+  //   const actions = item?.actions || [];
+
+  //   const approveAction = actions.find(
+  //     (a: any) => a?.actionType === 'approve' || a?.actionType === 'review'
+  //   );
+
+  //   if (!approveAction) return 'pending';
+
+  //   const act = (approveAction.action || '').toLowerCase();
+
+  //   if (act === 'approved' || act === 'accept' || act === 'accepted') {
+  //     return 'accept';
+  //   }
+
+  //   if (act === 'rejected' || act === 'reject') {
+  //     return 'reject';
+  //   }
+
+  //   return 'pending';
+  // }
+  onFilterChange(): any {
+    if (this.revFilter === 'all') return true;
+   
+    this.footfallTicketsData.map((mapdata: any) => {
+      mapdata._source.mappingInfo.map((data: any) => {
+        if (data.status === this.footfallTicketsData[0]._source.status) {
+          if (data.revisedDetail.revopsType === 'duplicate') {
+        
+          }
+        }
+
+
+
+      })
+
+    })
+
+
+  }
+  private getItemStatus(item: any): 'accept' | 'reject' | 'pending' {
+    const actions = item?.actions || [];
+
+    const act = actions.find(
+      (a: any) => a.actionType === 'approve' || a.actionType === 'review'
+    );
+
+    if (!act) return 'pending';
+
+    const s = (act.action || '').toLowerCase();
+
+    if (s === 'approved' || s === 'accept' || s === 'accepted') return 'accept';
+    if (s === 'rejected' || s === 'reject') return 'reject';
+
+    return 'pending';
+  }
+  matchesStatusFilter(item: any): boolean {
+    if (!item) return false;
+    const status = this.getItemStatus(item);
+
+    if (this.revFilter === 'all') return true;
+    if (this.revFilter === 'accept') return status === 'accept';
+    if (this.revFilter === 'reject') return status === 'reject';
+    if (this.revFilter === 'pending') return status === 'pending';
+
+    return true;
+  }
+
+  // onFilterChange() {
+  //   console.log("Filter changed:", this.revFilter);
+  // }
+
+  selectPlanTrends(type: string) {
+    this.type = type;
+    this.applyFilter1(this.filterList);
+  }
+
+  filteredList: any[] = [];
+
+
+  applyFilter1(mapping: any) {
+    const list = Array.isArray(mapping) ? mapping : [];
+
+    if (!this.type || this.type === 'footfall') {
+      this.filteredList = list.slice(); // copy
+      return;
+    }
+
+    // simple filter by revopsType (change to 'processType' or other field if you need)
+    this.filteredList = list.filter((item: any) => {
+      // handle undefined safely
+      const t = (item?.revopsType || '').toString().toLowerCase();
+
+      // if you pass special types like 'non-tag' vs 'non-tagging', normalize:
+      const sel = this.type.toString().toLowerCase();
+
+      // Example rules:
+      if (sel === 'non-tags') return t === 'non-tag' || t === 'non-tagging';
+      if (sel === 'footfall') return (item?.processType || '').toString().toLowerCase() === 'footfall';
+      if (sel === 'duplicated') return t === 'duplicate' || (item?.duplicateImage?.length > 0);
+      if (sel === 'footfall') return true;
+
+      // default: exact match on revopsType
+      return t === sel;
+    });
+  }
+
+}