tango-app-ui-manage-tickets 3.7.0-beta.58 → 3.7.0-beta.60

package/src/lib/components/footfall-dicview/footfall-dicview.component.ts

@@ -0,0 +1,1168 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnInit,
+  ViewChild,
+} from "@angular/core";
+import { FormBuilder, FormControl } from "@angular/forms";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { GlobalStateService, PageInfoService } from "tango-app-ui-global";
+import { TicketService } from "../../services/ticket.service";
+import { ToastService } from "tango-app-ui-shared";
+import { ExcelService } from "../../services/excel.service";
+import { Subject, takeUntil } from "rxjs";
+import { ActivatedRoute, Router } from "@angular/router";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+@Component({
+  selector: "lib-footfall-dicview",
+  templateUrl: "./footfall-dicview.component.html",
+  styleUrl: "./footfall-dicview.component.scss",
+})
+export class FootfallDicviewComponent implements OnInit {
+  dayjs = dayjs;
+  filterForm: any;
+  form: any;
+  paginationSizes = [10, 20, 30];
+  selectedRevopsType: any;
+  revopsTypeArray: any = [
+    { value: "", label: "All" },
+    { value: "duplicateImages", label: "Duplicates" },
+    { value: "employee", label: "Employee/Staff" },
+    { value: "houseKeeping", label: "House Keeping" },
+        { value: "junk", label: "Junk" },
+  ];
+  type: any = [
+    { value: "open", label: "Open" },
+    { value: "closed", label: "Closed" },
+  ];
+  // selectedStatus: FormControl;
+
+  pendingArray: any = [
+    //  { value: "", label: "All" },
+    { value: "pending", label: "Pending" },
+    { value: "approved", label: "Approved" },
+    { value: "rejected", label: "Rejected" },
+  ];
+
+  storeCount: any;
+  constructor(
+    private gs: GlobalStateService,
+    private ticketService: TicketService,
+    private pageInfo: PageInfoService,
+    private cd: ChangeDetectorRef,
+    private router: Router,
+    private route: ActivatedRoute,
+    private toast: ToastService,
+    private modalService: NgbModal,
+    private fb: FormBuilder
+  ) {}
+
+  selectedStores: any[] = [];
+  allSelected: boolean = false;
+  stores: any[] = [];
+  selectedDateRange: any = {};
+  selectedDate: any;
+  isCustomDate: any;
+  private readonly destroy$ = new Subject();
+  ticketDataList: any;
+
+  setPageData() {
+    this.pageInfo.setTitle("Tickets");
+    this.pageInfo.setDescription(
+      "Summary of queries raised,addresed & resolved"
+    );
+    let breadcrumbs: any[] = [];
+    if (this.gs.userAccess.value?.userType === "tango") {
+      breadcrumbs = [
+        {
+          title: "Manage",
+          path: "/manage/brands",
+          isActive: false,
+          isSeparator: false,
+        },
+        {
+          title: "Manage",
+          path: "/manage/brands",
+          isActive: false,
+          isSeparator: true,
+        },
+      ];
+    } else if (this.gs.userAccess.value?.userType === "client") {
+      breadcrumbs = [
+        {
+          title: "Manage",
+          path: "/manage/summary",
+          isActive: false,
+          isSeparator: false,
+        },
+        {
+          title: "Manage",
+          path: "/manage/summary",
+          isActive: false,
+          isSeparator: true,
+        },
+      ];
+    }
+    this.pageInfo.setBreadcrumbs(breadcrumbs);
+  }
+  users:any;
+  ngOnInit(): void {
+    this.setPageData();
+      const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+    // console.log(this.users)
+    // 1️⃣ Try from service
+    const serviceData = this.ticketService.getFootfallData();
+
+    if (serviceData && Object.keys(serviceData).length > 0) {
+      this.ticketDataList = serviceData;
+    } else {
+      // 2️⃣ Try from localStorage
+      const saved = localStorage.getItem("ticketDataList");
+      if (saved) {
+        this.ticketDataList = JSON.parse(saved);
+      }
+    }
+
+    // 3️⃣ If still nothing, set default
+    if (!this.ticketDataList) {
+      this.ticketDataList = {};
+    }
+
+    // 4️⃣ Always ensure dates exist
+    const defaultDate = this.dayjs().subtract(1, "day");
+    const fromDate =
+      this.ticketDataList._source?.dateString ||
+      defaultDate.format("YYYY-MM-DD");
+    const toDate =
+      this.ticketDataList._source?.dateString ||
+      defaultDate.format("YYYY-MM-DD");
+
+    this.ticketDataList.fromDate = fromDate;
+    this.ticketDataList.toDate = toDate;
+
+    // 5️⃣ Save back to localStorage
+    localStorage.setItem("ticketDataList", JSON.stringify(this.ticketDataList));
+
+    // ✅ client from route
+    this.route.queryParams.subscribe((params) => {
+      this.client = params["client"];
+    });
+
+    this.selectedRevopsType = new FormControl("");
+    this.filterForm = this.fb.group({
+      selectedStatus: new FormControl("open"),
+      actionStatus: new FormControl("pending"),
+      ClusterList: new FormControl([]),
+      fromDate: new FormControl(fromDate),
+      toDate: new FormControl(toDate),
+    });
+
+    this.isCustomDate = (m: dayjs.Dayjs) => {
+      const isValidDate = m > this.dayjs();
+      return isValidDate ? "invalid-date" : false;
+    };
+
+    // 6️⃣ Selected range (always DD-MM-YYYY for display)
+    this.selectedDateRange = {
+      startDate: this.dayjs(fromDate).format("DD-MM-YYYY"),
+      endDate: this.dayjs(toDate).format("DD-MM-YYYY"),
+    };
+
+    this.form = this.fb.group({
+      selectedRevopsType: this.selectedRevopsType,
+    });
+
+    // 7️⃣ Call your rendering function
+    this.dataStoreView(this.ticketDataList);
+  }
+
+  headDate: any;
+  headDateEnd: any;
+  datechange(event: any) {
+    if (event && event.startDate && event.endDate) {
+      if (
+        this.dayjs(event.startDate).isValid() &&
+        this.dayjs(event.endDate).isValid()
+      ) {
+        this.selectedDateRange.startDate = this.dayjs(
+          event.startDate,
+          "DD-MM-YYYY"
+        ).format("YYYY-MM-DD");
+        this.selectedDateRange.endDate = this.dayjs(
+          event.endDate,
+          "DD-MM-YYYY"
+        ).format("YYYY-MM-DD");
+
+        this.filterForm
+          .get("fromDate")
+          ?.setValue(this.selectedDateRange.startDate);
+        this.filterForm.get("toDate")?.setValue(this.selectedDateRange.endDate);
+        this.ticketDataList.fromDate = this.selectedDateRange.startDate;
+        this.ticketDataList.toDate = this.selectedDateRange.endDate;
+        if (this.dayjs(this.selectedDateRange.startDate).isValid()) {
+          this.headDate = this.dayjs(this.selectedDateRange.startDate).format(
+            "MMM, DD"
+          );
+        }
+        if (this.dayjs(this.selectedDateRange.endDate).isValid()) {
+          this.headDateEnd = this.dayjs(this.selectedDateRange.endDate).format(
+            "MMM DD, YYYY"
+          );
+        }
+
+        // ✅ Update ticketDataList without losing other keys
+      }
+    }
+  }
+
+  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(60, "days"));
+        return isValidDate ? "invalid-date" : false;
+      };
+    }
+  }
+
+  resetValidation() {
+    this.isCustomDate = (m: dayjs.Dayjs) => {
+      // Check if the given date is before yesterday
+      return m.isAfter(this.dayjs(), "day") ? "invalid-date" : false;
+    };
+  }
+
+  ClusterList: any = [];
+  client: any;
+  getAllGroups() {
+    this.ClusterList = [];
+    // this.groups =[];
+
+    this.ticketService
+      .getclusters({ clientId: this.client, group: [], city: [] })
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.ClusterList = res?.data?.groupData;
+            this.getStores();
+          } else {
+            this.ClusterList = [];
+          }
+        },
+      });
+  }
+  groups: any = [];
+  ongroupSelect(event: any) {
+    this.selectedStores = [];
+    this.allSelected = false;
+    this.allSelectValue = false;
+    this.filterForm.get("ClusterList")?.setValue(event);
+    this.groups = event.map((el: any) => el.groupName);
+  }
+  searchStoresData() {
+    this.getStores();
+  }
+  StoresSearchValue: any = "";
+  sortOrderStores: any;
+  sortedColumn1: any = "";
+  sortDirection1: any = 1;
+  sortValue(column: string) {
+    if (this.sortedColumn1 === column) {
+      this.sortedColumn1 = this.sortDirection1 === 1 ? -1 : 1;
+    } else {
+      this.sortedColumn1 = column;
+      this.sortDirection1 = 1;
+    }
+    this.getStores();
+  }
+  getStores() {
+    this.ticketService
+      .getTaggedStoresApi(
+        this.client,
+        this.ticketDataList?.fromDate,
+        this.ticketDataList?.toDate,
+        this.StoresSearchValue,
+        this.groups,
+        this.sortDirection1
+      )
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            if (res?.data?.result?.length) {
+              this.stores = res?.data?.result;
+              this.storeCount = res.data?.count || 0;
+            } else {
+              this.stores = [];
+              this.storeCount = 0;
+            }
+          } else {
+            this.stores = [];
+            this.storeCount = 0;
+          }
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          this.stores = [];
+          this.storeCount = 0;
+        },
+        complete: () => {},
+      });
+  }
+  toggleStoreSelection(store: any) {
+    const storeId = store?.storeId;
+    if (!storeId) return;
+
+    const index = this.selectedStores.indexOf(storeId);
+
+    if (index > -1) {
+      // Deselect
+      this.selectedStores.splice(index, 1);
+    } else {
+      // Select
+      this.selectedStores.push(storeId);
+
+      // Reorder to match main stores order
+      this.selectedStores = this.stores
+        .map((s) => s.storeId)
+        .filter((id) => this.selectedStores.includes(id));
+
+      // Scroll after rendering
+      setTimeout(() => {
+        const el = document.getElementById("detail-" + storeId);
+        if (el) {
+          el.scrollIntoView({ behavior: "smooth", block: "start" });
+        }
+      }, 100);
+    }
+
+    this.allSelected = this.selectedStores.length === this.stores.length;
+  }
+
+  toggleSelectAll() {
+    const visibleStoreIds = this.filteredStores.map((s) => s.storeId);
+
+    if (this.allSelected) {
+      // Remove only the visible ones
+      this.selectedStores = this.selectedStores.filter(
+        (id) => !visibleStoreIds.includes(id)
+      );
+    } else {
+      // Add only those that are not already selected
+      const newIds = visibleStoreIds.filter(
+        (id) => !this.selectedStores.includes(id)
+      );
+      this.selectedStores = [...this.selectedStores, ...newIds];
+    }
+
+    this.allSelected = this.selectedStores.length === this.stores.length;
+  }
+
+  isSelected(store: any): boolean {
+    return this.selectedStores.includes(store.storeId);
+  }
+  backToNavigation() {
+    this.router.navigate(["/manage/tickets"], {
+      queryParams: {
+        type: "footfall",
+      },
+    });
+    this.selectedStores = [];
+    this.allSelected = false;
+    this.allSelectValue = false;
+    this.hasInitialStoreSynced = false;
+    this.cancel();
+    this.ClusterList = [];
+    //   this.groups =[];
+    //  this.filterForm.get('ClusterList')?.setValue('')
+    this.form.get("selectedRevopsType")?.setValue("");
+    this.filterForm.get("selectedStatus")?.setValue("open");
+    this.filterForm.get("actionStatus")?.setValue("pending");
+  }
+  cancel() {
+    // this.allSelected = false;
+    // this.allSelectValue = false;
+    if (this.selectedRevopsType?.value !== "") this.allSelectValue = false;
+    // Clear all selected flags from the data
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket._source;
+
+      source.employee?.forEach((img: any) => (img.selected = false));
+      source.houseKeeping?.forEach((img: any) => (img.selected = false));
+      source.junk?.forEach((img: any) => (img.selected = false));
+      source.duplicateImages?.forEach((original: any) => {
+        original.data?.forEach((dup: any) => (dup.selected = false));
+      });
+    }
+    this.clear();
+
+    // this.checkedValue = true;
+  }
+  clear() {
+    this.modalService.dismissAll();
+    this.selectedEmployeeImagesList = [];
+    this.selectedHousekeepingImagesList = [];
+    this.selectedDuplicateImagesList = [];
+    this.selectedJunkImagesList = [];
+    // Reset counts
+    this.employeeACCount = "";
+    this.houseKeepingACCount = "";
+    this.duplicateACCount = "";
+    this.junkACCount = "";
+  }
+  ticketData: any;
+  imgtoggleSelectAll() {
+    this.allSelected = !this.allSelected;
+    this.ticketData.duplicates.forEach((img: any) => {
+      img.selected = this.allSelected;
+    });
+  }
+
+  selectedImagesList: any[] = [];
+
+  selectedDuplicateImagesList: any[] = [];
+  selectedHousekeepingImagesList: any[] = [];
+  selectedEmployeeImagesList: any[] = [];
+  houseKeepingACCount: any;
+  employeeACCount: any;
+  duplicateACCount: any;
+  junkACCount: any;
+  selectedJunkImagesList: any[] = [];
+
+  cloneWithoutSelected(obj: any) {
+    const { ...rest } = obj;
+    return rest;
+  }
+
+  allSelectValue = false;
+
+  cloneWithoutSelected1(data: any): any {
+    const { __parent, ...rest } = data;
+    return { ...rest };
+  }
+
+  onImageCheckboxChange1(data: any, category: string, parentOriginal?: any) {
+    let selectedList: any;
+
+    if (category === "duplicate") {
+      parentOriginal = parentOriginal || data.__parent;
+
+      const existingOriginal = this.selectedDuplicateImagesList.find(
+        (item: any) => item.tempId === parentOriginal?.tempId
+      );
+
+      if (data.selected) {
+        if (existingOriginal) {
+          const alreadyExists = existingOriginal.data?.some(
+            (dup: any) => dup.tempId === data.tempId
+          );
+          if (!alreadyExists) {
+            existingOriginal.data.push(this.cloneWithoutSelected1(data));
+          }
+        } else {
+          this.selectedDuplicateImagesList.push({
+            tempId: parentOriginal?.tempId,
+            filePath: parentOriginal?.filePath,
+            entryTime: parentOriginal?.entryTime,
+            exitTime: parentOriginal?.exitTime,
+            timeRange: parentOriginal?.timeRange,
+            data: [this.cloneWithoutSelected1(data)],
+          });
+        }
+      } else {
+        if (existingOriginal) {
+          existingOriginal.data = existingOriginal.data.filter(
+            (d: any) => d.tempId !== data.tempId
+          );
+
+          if (existingOriginal.data.length === 0) {
+            this.selectedDuplicateImagesList =
+              this.selectedDuplicateImagesList.filter(
+                (o: any) => o.tempId !== parentOriginal?.tempId
+              );
+          }
+        }
+      }
+
+      this.duplicateACCount = this.selectedDuplicateImagesList.reduce(
+        (sum: number, orig: any) => sum + orig.data.length,
+        0
+      );
+    }
+
+    if (category === "employee") {
+      selectedList = this.selectedEmployeeImagesList;
+    } else if (category === "houseKeeping") {
+      selectedList = this.selectedHousekeepingImagesList;
+    } else if(category === "junk"){
+      selectedList = this.selectedJunkImagesList;
+    }
+
+    if (category !== "duplicate") {
+      if (data.selected) {
+        const alreadyExists = selectedList.some(
+          (item: any) => item.tempId === data.tempId
+        );
+        if (!alreadyExists) {
+          selectedList.push(data);
+        }
+      } else {
+        const index = selectedList.findIndex(
+          (item: any) => item.tempId === data.tempId
+        );
+        if (index !== -1) {
+          selectedList.splice(index, 1);
+        }
+      }
+
+      this.employeeACCount = this.selectedEmployeeImagesList.length;
+      this.houseKeepingACCount = this.selectedHousekeepingImagesList.length;
+      this.junkACCount = this.selectedJunkImagesList.length;
+    }
+
+    // 🔒 Disable other checkboxes if one type is selected
+    const totalSelected =
+      this.duplicateACCount + this.employeeACCount + this.houseKeepingACCount + this.junkACCount;
+
+    if (totalSelected > 0) {
+      this.checkedValue = false;
+    } else {
+      this.checkedValue = true;
+    }
+
+    this.cd.detectChanges(); // To update the template
+    this.allSelectValue = this.areAllCheckboxesSelected();
+  }
+
+  selectAllValue() {
+    this.allSelectValue = !this.allSelectValue;
+    this.checkedValue = !this.allSelectValue;
+
+    this.selectedEmployeeImagesList = [];
+    this.selectedHousekeepingImagesList = [];
+    this.selectedDuplicateImagesList = [];
+    this.selectedJunkImagesList = [];
+
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket._source;
+
+      // ✅ Employee
+      if (Array.isArray(source.employee)) {
+        source.employee.forEach((img: any) => {
+          img.selected = this.allSelectValue;
+          if (
+            this.allSelectValue &&
+            !this.selectedEmployeeImagesList.some(
+              (e) => e.tempId === img.tempId
+            )
+          ) {
+            this.selectedEmployeeImagesList.push(img);
+          }
+        });
+      }
+// ✅ Junk
+      if (Array.isArray(source.junk)) {
+        source.junk.forEach((img: any) => {
+          img.selected = this.allSelectValue;
+          if (
+            this.allSelectValue &&
+            !this.selectedJunkImagesList.some(
+              (e) => e.tempId === img.tempId
+            )
+          ) {
+            this.selectedJunkImagesList.push(img);
+          }
+        });
+      }
+
+      // ✅ Housekeeping
+      if (Array.isArray(source.houseKeeping)) {
+        source.houseKeeping.forEach((emp: any) => {
+          emp.selected = this.allSelectValue;
+          if (
+            this.allSelectValue &&
+            !this.selectedHousekeepingImagesList.some(
+              (e) => e.tempId === emp.tempId
+            )
+          ) {
+            this.selectedHousekeepingImagesList.push(emp);
+          }
+        });
+      }
+
+      // ✅ Duplicate
+      if (Array.isArray(source.duplicateImages)) {
+        source.duplicateImages.forEach((original: any) => {
+          if (Array.isArray(original.data)) {
+            original.data.forEach((dup: any) => {
+              dup.selected = this.allSelectValue;
+              dup.__parent = original; // ✅ Needed for uncheck
+            });
+
+            if (this.allSelectValue && original.data.length > 0) {
+              const existing = this.selectedDuplicateImagesList.find(
+                (o: any) => o.tempId === original.tempId
+              );
+
+              if (!existing) {
+                this.selectedDuplicateImagesList.push({
+                  tempId: original.tempId,
+                  filePath: original.filePath,
+                  entryTime: original.entryTime,
+                  exitTime: original.exitTime,
+                  timeRange: original.timeRange,
+                  data: original.data.map((d: any) =>
+                    this.cloneWithoutSelected1(d)
+                  ),
+                });
+              }
+            }
+          }
+        });
+      }
+    }
+    this.houseKeepingACCount = this.selectedHousekeepingImagesList.length;
+    this.employeeACCount = this.selectedEmployeeImagesList.length;
+    this.junkACCount = this.selectedJunkImagesList.length;
+    this.duplicateACCount = this.selectedDuplicateImagesList.reduce(
+      (sum: number, orig: any) => sum + orig.data.length,
+      0
+    );
+  }
+
+  areAllCheckboxesSelected(): boolean {
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket._source;
+
+      if (source.employee?.some((img: any) => !img.selected)) return false;
+      if (source.houseKeeping?.some((img: any) => !img.selected)) return false;
+      if(source.junk?.some((img: any) => !img.selected)) return false;
+      if (
+        source.duplicateImages?.some((original: any) =>
+          original.data?.some((dup: any) => !dup.selected)
+        )
+      )
+        return false;
+    }
+    return true;
+  }
+  checkedValue = true;
+
+  onImageCheckboxChange(data: any, category: string, parentOriginal?: any) {
+    let selectedList;
+
+    switch (category) {
+      case "duplicate":
+        // Ensure selectedDuplicateImagesList is an array of ORIGINALS with selected children
+        const existingOriginal = this.selectedDuplicateImagesList.find(
+          (item: any) => item.tempId === parentOriginal?.tempId
+        );
+
+        if (data.selected) {
+          if (existingOriginal) {
+            const alreadyExists = existingOriginal.data?.some(
+              (dup: any) => dup.tempId === data.tempId
+            );
+            if (!alreadyExists) {
+              existingOriginal.data.push(this.cloneWithoutSelected(data)); // ✅ no 'selected' key
+            }
+          } else {
+            this.selectedDuplicateImagesList.push({
+              tempId: parentOriginal?.tempId,
+              filePath: parentOriginal?.filePath,
+              entryTime: parentOriginal?.entryTime,
+              exitTime: parentOriginal?.exitTime,
+              timeRange: parentOriginal?.timeRange,
+              data: [this.cloneWithoutSelected(data)], // ✅
+            });
+          }
+        } else {
+          // Remove from selected duplicates
+          if (existingOriginal) {
+            existingOriginal.data = existingOriginal.data.filter(
+              (d: any) => d.tempId !== data.tempId
+            );
+
+            // Remove the whole original if no duplicates are left
+            if (existingOriginal.data.length === 0) {
+              this.selectedDuplicateImagesList =
+                this.selectedDuplicateImagesList.filter(
+                  (o: any) => o.tempId !== parentOriginal?.tempId
+                );
+            }
+          }
+        }
+
+        // Count only from selected duplicates
+        this.duplicateACCount = this.selectedDuplicateImagesList.reduce(
+          (sum: number, orig: any) => sum + orig.data.length,
+          0
+        );
+        return;
+
+      case "houseKeeping":
+        selectedList = this.selectedHousekeepingImagesList;
+        break;
+
+      case "employee":
+        selectedList = this.selectedEmployeeImagesList;
+        break;
+      case "junk":
+        selectedList = this.selectedJunkImagesList;
+        break;
+      default:
+        return;
+    }
+
+    // Unchanged logic for employee and housekeeping
+    selectedList = selectedList || [];
+    if (data.selected) {
+      const alreadyExists =
+        Array.isArray(selectedList) &&
+        selectedList.some((item: any) => item.tempId === data.tempId);
+      if (!alreadyExists) {
+        selectedList.push(data);
+      }
+    } else {
+      const updated = Array.isArray(selectedList)
+        ? selectedList.filter((item: any) => item.tempId !== data.tempId)
+        : [];
+
+      if (category === "houseKeeping") {
+        this.selectedHousekeepingImagesList = updated;
+      } else if (category === "employee") {
+        this.selectedEmployeeImagesList = updated;
+      } else if (category === "junk") {
+        this.selectedJunkImagesList = updated;
+      }
+    }
+    this.houseKeepingACCount = this.selectedHousekeepingImagesList?.length || 0;
+    this.employeeACCount = this.selectedEmployeeImagesList.length || 0;
+    this.junkACCount = this.selectedJunkImagesList.length || 0;
+  }
+
+  commentText: any;
+  submitValue(status: string = "approved", category: string = "duplicate") {
+    // Step 1: Validate based on current category
+    let selectedList;
+    switch (category) {
+      case "duplicate":
+        selectedList = this.selectedDuplicateImagesList;
+        break;
+      case "houseKeeping":
+        selectedList = this.selectedHousekeepingImagesList;
+        break;
+      case "employee":
+        selectedList = this.selectedEmployeeImagesList;
+        break;
+        case "junk":
+        selectedList = this.selectedJunkImagesList;
+        break;
+      default:
+        return;
+    }
+
+    if (selectedList.length === 0) {
+      this.toast.getErrorToast("Please select at least one image");
+      return;
+    }
+
+    // Replace selected → isChecked before sending
+    const transformedList = selectedList.map((item) => {
+      const { selected, ...rest } = item;
+      return { ...rest, isChecked: true };
+    });
+
+    // Step 2: Build full payload
+    const payload: any[] = [];
+
+    for (const ticket of this.footfallTicketsData) {
+      const source = ticket._source;
+
+      const singlePayload: any = {
+        _id: ticket._id,
+        comments: this.commentText || "",
+        dateString: source.dateString || this.dateString,
+
+        employeeStatus:
+          category === "employee" ? status : source.employeeStatus,
+        houseKeepingStatus:
+          category === "houseKeeping" ? status : source.houseKeepingStatus,
+          junkStatus:
+          category === "junk" ? status : source.junkStatus,
+        duplicateStatus:
+          category === "duplicate" ? status : source.duplicateStatus,
+      };
+
+      if (category === "employee") {
+        singlePayload.employee = transformedList;
+        singlePayload.employeeACCount = this.employeeACCount
+          ? this.employeeACCount
+          : 0;
+      }
+
+      if (category === "houseKeeping") {
+        singlePayload.houseKeeping = transformedList;
+        singlePayload.houseKeepingACCount = this.houseKeepingACCount
+          ? this.houseKeepingACCount
+          : 0;
+      }
+        if (category === "junk") {
+        singlePayload.junk = transformedList;
+        singlePayload.junkACCount = this.junkACCount
+          ? this.junkACCount
+          : 0;
+      }
+      if (category === "duplicate") {
+        singlePayload.duplicateImages = transformedList;
+        singlePayload.duplicateACCount = this.duplicateACCount
+          ? this.duplicateACCount
+          : 0;
+      }
+
+      payload.push(singlePayload);
+    }
+    // Step 3: Set status based on current category
+    switch (category) {
+      case "duplicate":
+        payload.forEach((item) => (item.duplicateStatus = status));
+        break;
+      case "houseKeeping":
+        payload.forEach((item) => (item.houseKeepingStatus = status));
+        break;
+      case "employee":
+        payload.forEach((item) => (item.employeeStatus = status));
+        break;
+        case "junk":
+        payload.forEach((item) => (item.junkStatus = status));
+        break;
+    }
+
+    // Step 4: Submit the payload
+    this.ticketService
+      .getUpdateStatusApi({ data: payload })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.toast.getSuccessToast(
+              res?.message || "Ticket updated successfully"
+            );
+            //      this.selectedStores =[];
+            // this.allSelected = false;
+            // this.allSelectValue =false;
+            this.footfalloffset = 1;
+            this.dataStoreView();
+            this.cancel();
+          } else {
+            this.toast.getErrorToast("Failed to update ticket");
+          }
+        },
+        error: (err: any) => {
+          const msg =
+            err.error.error ||
+            err.error ||
+            err?.error?.message ||
+            err.message ||
+            "Unknown error";
+          this.toast.getErrorToast("Error updating ticket: " + msg);
+
+          this.allSelected = false;
+          this.allSelectValue = false;
+        },
+      });
+  }
+  searchTerm: any = "";
+  get filteredStores() {
+    if (!this.searchTerm?.trim()) return this.stores;
+
+    const term = this.searchTerm.toLowerCase();
+    return this.stores.filter((store) =>
+      store?.storeName?.toLowerCase().includes(term)
+    );
+  }
+  onImageError(event: any): void {
+    event.target.src = "assets/images/fallback-image.png"; // or any default image path
+  }
+
+  isCollapsed = false;
+
+  toggleSidebar() {
+    this.isCollapsed = !this.isCollapsed;
+  }
+  matchedType: any;
+
+  matchedArray: any = [{ value: "all", label: "matched: All" }];
+  onFilterApply() {
+    this.getStores();
+    if (this.selectedRevopsType.value === "") this.footfalllimit = 1;
+    else this.footfalllimit = 10;
+    this.dataStoreView();
+  }
+  pageSizeFootfall: any = 1;
+  footfallcurrentPage: any = 1;
+  onFootfallPageChange(pageOffset: number) {
+    this.footfallcurrentPage = Number(pageOffset);
+    this.footfalloffset = Number(pageOffset);
+    this.footfalllimit = 1;
+    this.cancel();
+    this.dataStoreView();
+  }
+
+  onFootfallPageSizeChange(pageSize: number) {
+    this.footfalllimit = Number(pageSize);
+    this.pageSizeFootfall = Number(pageSize);
+    this.footfallcurrentPage = 1;
+    this.footfalloffset = 1;
+    this.dataStoreView();
+  }
+  totalItemsFootfall: any;
+  setFootfallpageSize() {
+    if (this.footfalllimit === 1) {
+      if (this.totalItemsFootfall < 1) {
+        return this.totalItemsFootfall;
+      } else {
+        return this.pageSizeFootfall;
+      }
+    } else {
+      if (this.totalItemsFootfall < 10) {
+        return this.totalItemsFootfall;
+      } else {
+        return this.pageSizeFootfall;
+      }
+    }
+  }
+
+  footfallMulticurrentPage: any = 1;
+  onFootfallMultiPageChange(pageOffset: number) {
+    this.footfallMulticurrentPage = Number(pageOffset);
+    this.footfalloffset = Number(pageOffset);
+    this.footfalllimit = 10;
+    this.allSelectValue = false;
+    this.cancel();
+    this.dataStoreView();
+  }
+
+  onFootfallMultiPageSizeChange(pageSize: number) {
+    this.footfalllimit = Number(pageSize);
+    this.pageSizeFootfall = Number(pageSize);
+    this.footfallMulticurrentPage = 1;
+    this.footfalloffset = 1;
+
+    this.dataStoreView();
+  }
+
+  typeChange(event: any) {
+    this.filterForm.get("selectedStatus")?.setValue(event || null);
+  }
+
+  pendingChange(event: any) {
+    this.filterForm.get("actionStatus")?.setValue(event || null);
+  }
+
+  RevopsTypeChange(event: any) {
+    const selectedType = event ?? "";
+    this.footfalloffset = 1;
+    if (selectedType === "") {
+      this.footfalllimit = 1;
+      this.footfallcurrentPage = 1;
+    } else {
+      this.footfalllimit = 10;
+    }
+    this.form.get("selectedRevopsType")?.setValue(selectedType);
+    this.allSelectValue = false;
+    // Clear selected lists
+    this.selectedEmployeeImagesList = [];
+    this.selectedHousekeepingImagesList = [];
+    this.selectedDuplicateImagesList = [];
+    this.selectedJunkImagesList = [];
+    this.cd.detectChanges();
+    // Reset counts
+    this.employeeACCount = "";
+    this.houseKeepingACCount = "";
+    this.duplicateACCount = "";
+    this.junkACCount="";
+    this.dataStoreView();
+  }
+
+  footfalloffset = 1;
+  footfalllimit = 1;
+  footfallTicketsData: any = [];
+  storeIdValue: any;
+
+  dataReset() {
+    this.selectedStores = [];
+    this.allSelected = false;
+    this.StoresSearchValue = "";
+    this.getStores();
+    this.form.get("selectedRevopsType")?.setValue("");
+    this.filterForm.get("selectedStatus")?.setValue("open");
+    this.filterForm.get("actionStatus")?.setValue("pending");
+    this.dataStoreView();
+  }
+  dataApply() {
+    this.footfalloffset = 1;
+    if (this.selectedRevopsType.value === "") {
+      this.footfallcurrentPage = 1;
+      this.footfalllimit = 1;
+    } else {
+      this.footfalllimit = 10;
+    }
+    this.allSelectValue = false;
+    this.dataStoreView();
+  }
+  imageUrl: any;
+  dataIndexId: any;
+  dateString: any;
+  footfallNoData = false;
+  footfallLoading = true;
+  private lastSelectedTicket: any = null;
+
+  hasInitialStoreSynced = false;
+
+  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.stores.length;
+  }
+  selecteValues: any;
+  selectedStatus: any;
+  dataStoreView(data?: any) {
+    this.getAllGroups();
+    this.footfallTicketsData = [];
+    this.footfallNoData = false;
+    this.footfallLoading = true;
+    const ticket = data?._source ? data : this.lastSelectedTicket;
+
+    if (!ticket || !ticket._source) {
+      this.footfallLoading = false;
+      this.footfallNoData = true;
+      this.toast.getErrorToast("No ticket data available");
+      return;
+    }
+
+    this.lastSelectedTicket = ticket;
+    this.addStoreIfNotExists(ticket._source);
+    this.dataIndexId = ticket._id || "";
+    this.dateString = ticket._source.dateString || "";
+    this.imageUrl = this.ticketService?.footfallCDN;
+    this.storeIdValue = this.selectedStores;
+    const revopsType = this.form.get("selectedRevopsType")?.value;
+    const selectedStatus = (this.selectedStatus =
+      this.filterForm.get("selectedStatus")?.value);
+    const actionStatus = (this.selecteValues =
+      this.filterForm.get("actionStatus")?.value);
+
+    const storeId = this.storeIdValue;
+    const fromDate = this.ticketDataList?.fromDate;
+    const toDate = this.ticketDataList?.toDate;
+    const offset = this.footfalloffset;
+    const limit =
+      revopsType === "" ? this.footfalllimit : (this.footfalllimit = 10);
+
+    this.ticketService
+      .getTicketsApi(
+        storeId,
+        fromDate,
+        toDate,
+        revopsType,
+        selectedStatus,
+        actionStatus,
+        offset,
+        limit
+      )
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            if (res?.data?.result?.length === 0) {
+              this.footfallTicketsData = [];
+              this.footfallNoData = true;
+              this.footfallLoading = false;
+              this.toast.getErrorToast(
+                "No data found for the selected filters"
+              );
+            } else {
+              this.footfallTicketsData = res?.data?.result ?? [];
+              this.totalItemsFootfall = res?.data?.count;
+              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;
+            }
+          } else {
+            this.footfallTicketsData = [];
+            this.footfallNoData = true;
+            this.footfallLoading = false;
+          }
+        },
+        error: (err:any) => {
+          if(err?.error?.code === 400)
+            this.toast.getErrorToast(err?.error?.message ? err?.error?.message :err?.error?.error);
+          this.footfallTicketsData = [];
+          this.footfallNoData = true;
+          this.footfallLoading = false;
+        },
+        complete: () => { 
+          this.cd.detectChanges();
+        },
+      });
+  }
+
+  @ViewChild("zoomPopup") zoomPopup: ElementRef;
+  popupvalue: any;
+  popupType: any;
+  popupOpen(type: any, value: any) {
+    const modalRef = this.modalService.open(this.zoomPopup, {
+      centered: true,
+      size: "md",
+      backdrop: "static", // Prevent closing on outside click
+      keyboard: false, // Prevent closing on ESC key
+    });
+    this.popupType = type;
+    if (value === "duplicateImages") {
+      this.popupvalue = "duplicate";
+    } else {
+      this.popupvalue = value;
+    }
+  }
+
+  getFormattedEntryTime(entryTime: string): string {
+    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,
+    });
+  }
+  showSelectAllBox() {
+    this.filterForm.get("actionStatus")?.setValue("pending");
+  }
+
+  scrollToStore(store: any) {
+    const element = document.getElementById("detail-" + store.storeId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
+}