tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/eye-test-audit/eye-test-audit/settings-audit/settings-audit.component.ts

@@ -0,0 +1,1017 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { PageInfoService } from "tango-app-ui-global";
+import { ToastService } from "tango-app-ui-shared";
+import { EyeTestAuditService } from "../../services/eye-test-audit.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { Subject, takeUntil } from "rxjs";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import { any } from "@amcharts/amcharts5/.internal/core/util/Array";
+import { FormBuilder, FormGroup } from "@angular/forms";
+// import * as Plotly from 'plotly.js-dist-min';
+import { DatePipe } from "@angular/common";
+
+@Component({
+  selector: "lib-settings-audit",
+  templateUrl: "./settings-audit.component.html",
+  styleUrl: "./settings-audit.component.scss",
+})
+export class SettingsAuditComponent implements OnInit {
+  AuditId: any;
+  dayjs = dayjs;
+  complianceForm: FormGroup;
+  constructor(
+    private cd: ChangeDetectorRef,
+    private zone: NgZone,
+    private fb: FormBuilder,
+    private pageInfo: PageInfoService,
+    private toastService: ToastService,
+    private route: ActivatedRoute,
+    private $api: EyeTestAuditService,
+    private modalService: NgbModal,
+    private router: Router,
+  ) {}
+  @HostListener('document:click', ['$event'])
+  onClickOutside(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.dropdown2') && !target.closest('.btn')) {
+      this.closeDropdown();
+    }
+  }
+  setPageData() {
+    this.pageInfo.setTitle("Audit - Eye Test");
+
+    this.pageInfo.setBreadcrumbs([
+      {
+        title: "Tango Trax",
+        path: "/manage/trax/dashboard",
+        isActive: false,
+        isSeparator: false,
+      },
+      {
+        title: "Tango Trax",
+        path: "/manage/trax/dashboard",
+        isActive: false,
+        isSeparator: true,
+      },
+    ]);
+  }
+  alertUsers: any = [
+    {
+      id: "6687d9d1a27ee88f9a4457cb",
+      userName: "Ajinkya Malshe",
+      email: "ajinkya.malshe@yopmail.com",
+      role: "admin",
+    },
+    {
+      id: "6687d9d1a27ee88f9a4457cc",
+      userName: "John Doe",
+      email: "john.doe@yopmail.com",
+      role: "manager",
+    },
+  ];
+  users: any;
+  auditData: any;
+  currentAuditType: any;
+  ngOnInit(): void {
+    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+    const headers: any = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+    this.auditData = this.$api.getAuditData()
+      ? this.$api.getAuditData()
+      : headers;
+    this.complianceForm = this.fb.group({
+      threshold: [{ value: null, disabled: true }],
+      percentage: [{ value: null, disabled: true }],
+    });
+
+    this.getUser();
+    this.getEmailConfig();
+    this.getAllRm();
+    // this.buildDataObject();
+    this.cd.detectChanges();
+    this.setPageData();
+    this.tableData = [
+      {
+        rmName: "Olivia",
+        clusterName: "John",
+        optumId: "OPT001",
+        storeName: "LKST1001",
+        tangoScore: "9%",
+        trustScore: "9%",
+      },
+      {
+        rmName: "Emma",
+        clusterName: "Doe",
+        optumId: "OPT002",
+        storeName: "LKST1002",
+        tangoScore: "8%",
+        trustScore: "8%",
+      },
+      {
+        rmName: "Ava",
+        clusterName: "Smit",
+        optumId: "OPT003",
+        storeName: "LKST1003",
+        tangoScore: "7%",
+        trustScore: "7%",
+      },
+      {
+        rmName: "Isabella",
+        clusterName: "Johnson",
+        optumId: "OPT004",
+        storeName: "LKST1004",
+        tangoScore: "6%",
+        trustScore: "6%",
+      },
+    ];
+    // this.alertUsers = this.alertUsers.map(
+    //   (user: { userName: string; email: string; role: string }) => ({
+    //     name: user.userName,
+    //     value: user.email,
+    //     role: user.role,
+    //   })
+    // );
+    this.route.queryParams.subscribe((params) => {
+      // this.storeId = params['storeId'];
+      this.currentAuditType = params["type"];
+      this.AuditId = params["_id"];
+    });
+    this.getAuditdetails();
+  }
+  private readonly destroy$ = new Subject();
+  stepWiseProcess: any = [];
+  auditDetails: any;
+  takeAudit: any;
+  getAuditdetails() {
+    // this.tableLoading.next('loading');
+    let payload = {
+      id: this.AuditId,
+      type: this.currentAuditType,
+    };
+    this.$api
+      .getAuditdetails(payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code == 200) {
+            // this.disablecancel =  false
+            this.auditDetails = res?.data?.result;
+            if (this.auditDetails.auditStatus === "In-Progress") {
+              this.takeAudit = true;
+            } else {
+              this.takeAudit = false;
+            }
+            this.stepWiseProcess = this.auditDetails?.steps;
+            // setTimeout(()=>{
+            //   this.getAuditHistory()
+            // },100)
+            this.cd.detectChanges();
+          }
+        },
+      });
+
+    // this.tableLoading.next('loaded')
+  }
+
+  openItem(event: any) {}
+
+  // component.ts
+
+  backNavigation() {
+    this.$api.auditFilterData = {
+      back: "back",
+      auditDetails: this.auditDetails,
+    };
+    this.router.navigate(["/manage/trax/audit"], {
+      queryParams: {
+        date: this.dayjs(
+          this.auditDetails?.fileDate
+            ? this.auditDetails?.fileDate
+            : this.filterStartDate
+        ).format("YYYY-MM-DD"),
+        typeValue: "physical",
+      },
+    });
+  }
+  selectedComplianceThreshold: any;
+  selectedCompliancePercentage: any;
+  complianceThresholds = [
+    { value: "<=", label: "<=" },
+    { value: "<", label: "<" },
+    { value: ">=", label: ">=" },
+    { value: ">", label: ">" },
+    { value: "=", label: "=" },
+  ];
+  compliancePercentage = [
+    { value: "10%", label: "10%" },
+    { value: "20%", label: "20%" },
+    { value: "30%", label: "30%" },
+    { value: "40%", label: "40%" },
+    { value: "50%", label: "50%" },
+    { value: "60%", label: "60%" },
+    { value: "70%", label: "70%" },
+    { value: "80%", label: "80%" },
+    { value: "90%", label: "90%" },
+    { value: "100%", label: "100%" },
+  ];
+
+  selectedDateRange: any = {
+    startDate: this.dayjs().subtract(30, "days"),
+    endDate: this.dayjs(),
+  };
+  filterStartDate: any = this.dayjs().subtract(30, "days").format("YYYY-MM-DD");
+  filterEndDate: any = this.dayjs().subtract(0, "days").format("YYYY-MM-DD");
+
+  ranges: any = {
+    Today: [this.dayjs(), this.dayjs()],
+    Yesterday: [
+      this.dayjs().subtract(1, "days"),
+      this.dayjs().subtract(1, "days"),
+    ],
+    "This Week": [this.dayjs().subtract(6, "days"), this.dayjs()],
+    "Last Week": [
+      this.dayjs().subtract(13, "days").startOf("days"),
+      this.dayjs().subtract(7, "days").endOf("days"),
+    ],
+    "This Month": [
+      this.dayjs().subtract(30, "days"), // Start date is 30 days before today
+      this.dayjs(),
+    ],
+    "Last Month": [
+      this.dayjs().subtract(1, "month").startOf("month"),
+      this.dayjs().subtract(1, "month").endOf("month"),
+    ],
+  };
+
+  datechange(event: any) {
+    if (event.startDate || event.endDate) {
+      this.filterStartDate = this.dayjs(event.startDate).format("YYYY-MM-DD");
+      this.filterEndDate = this.dayjs(event.endDate).format("YYYY-MM-DD");
+      this.Apply();
+    }
+  }
+
+  exportXLSX() {
+    const requestData = {
+       fromDate: this.filterStartDate,
+      toDate: this.filterEndDate,
+      // type: this.currentAuditType,  it is shows only physical
+      RMList: this.selectedRms?.length ? this.selectedRms : [],
+      clientId: this.auditData?.client
+        ? this.auditData?.client
+        : this.users?.clientId,
+      cluster: this.selectedClusters?.length
+        ? this.selectedClusters
+        : [],
+      isExport: true,
+      searchValue: this.searchValue,
+      sortBy: this.sortedColumn ? this.sortedColumn : "RMEmail",
+      sortOrder: this.sortOrder ? this.sortOrder : 1,
+      offset: 1,
+      limit: 10000,
+    };
+
+    this.$api
+      .getEmailLogExport(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          this.$api.saveAsExcelFile(
+            res,
+            `${this.currentAuditType} Eye Test Table `
+          );
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          this.toastService.getErrorToast(
+            err?.error?.error ? err?.error?.error : err?.error?.message
+          );
+        },
+      });
+  
+  }
+
+  searchValue: any;
+  searchData(event:any) {
+    this.searchValue = event?.target?.value ?? '';
+    this.getEmail();
+  }
+
+  tableData: any = [];
+
+  sortedColumn: any;
+  sortOrder: any;
+  onSort(column: string) {
+    if (this.sortedColumn === column) {
+      this.sortOrder = this.sortOrder === 1 ? -1 : 1;
+    } else {
+      this.sortedColumn = column ? column : "RMEmail";
+      this.sortOrder = 1;
+    }
+    this.getEmail();
+  }
+  allUsers: any;
+  getUser() {
+    let obj = {
+      userType: 'client',
+      filterByRole: ["admin", "user"],
+      isActive: this.users?.isActive,
+      clientId:this.auditData?.client ? this.auditData?.client : this.users?.clientId
+    };
+
+    this.$api
+      .getuserList(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res: any) => {
+        if (res && res?.code == 200) {
+          this.allUsers = res?.data?.result?.map((item: any) => ({
+            id: item._id,
+            name: item.email,
+          }));
+
+          this.getUserConfig(); // call after allUsers is ready
+          this.cd.detectChanges();
+        }
+      });
+  }
+
+  configData: any;
+
+  updateOwner(selectedEmail: any) {
+    this.configData = selectedEmail;
+  }
+
+  toggleEdit() {
+    if (!this.editMode) {
+      // entering edit mode → make a working copy
+      this.configData = [...this.lastSavedConfig];
+      this.editMode = true;
+    } else {
+      // leaving edit without saving → restore baseline
+      this.configData = [...this.lastSavedConfig];
+      this.editMode = false;
+    }
+  }
+
+  cancelEdit() {
+    // revert back to last saved state
+    this.configData = [...this.lastSavedConfig];
+    this.editMode = false;
+  }
+  editMode = false;
+  submitOwners() {
+    const payload = {
+      clientId: this.auditData?.client, // or this.clientId
+      userList: this.configData.map((o: any) => ({
+        _id: o.id ?? o.value, // ✅ support both cases
+        email: o.name,
+      })),
+    };
+
+    this.$api
+      .updateUserConfig(payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code == 200) {
+            this.getUserConfig();
+            this.toastService.getSuccessToast(res?.message ? res?.message : "Email configuration updated successfully");
+            this.editMode = false;
+          } else {
+            this.toastService.getErrorToast("Failed to update owners");
+          }
+          this.cd.detectChanges();
+        },
+        error: (err) => {
+            this.toastService.getSuccessToast(err?.error?.error ? err?.error?.error : err?.error?.message);
+        },
+      });
+  }
+
+  // this.onSubmit();
+  userConfigList: any = [];
+  lastSavedConfig: any;
+  getUserConfig() {
+    this.$api
+      .getUserConfigList(this.auditData?.client)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res: any) => {
+        if (res && res?.code == 200) {
+          // Assigned users
+          this.configData =
+            res?.data?.result?.userList?.map((item: any) => ({
+              id: item._id,
+              name: item.email,
+            })) ?? [];
+          this.lastSavedConfig = [...this.configData];
+
+          // Build set of assigned ids
+          const assignedIds = new Set(this.configData.map((u: any) => u.id));
+
+          // Filter from allUsers (not from userConfigList!)
+          this.userConfigList = this.allUsers.filter(
+            (u: any) => !assignedIds.has(u.id)
+          );
+
+          this.cd.detectChanges();
+        }
+      });
+  }
+
+  // email congig method and variables
+  emailConfigList: any;
+  editMode1 = true;
+  toggleEdit1() {
+    this.editMode1 = false;
+    this.complianceForm.enable();
+  }
+  getEmailConfig() {
+    this.$api
+      .getEmailConfigList(
+        this.auditData?.client ? this.auditData?.client : this.users?.clientId
+      )
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res: any) => {
+        if (res && res?.code == 200) {
+          this.emailConfigList = res?.data?.result;
+
+          // Suppose backend returns something like:
+          // { threshold: "10", percentage: "80" }
+          const initialData = {
+            threshold: this.emailConfigList?.complianceThreshold?.condition,
+            percentage: this.emailConfigList?.complianceThreshold?.value,
+          };
+
+          // Fill reactive form with values
+          this.complianceForm.patchValue(initialData);
+          this.cd.detectChanges();
+        }
+      });
+  }
+
+  lastSavedCompliance: any;
+  submitCompliance() {
+    if (this.complianceForm.invalid) return;
+    const payload = {
+      clientId: this.auditData?.client,
+      complianceThreshold: {
+        condition: this.complianceForm.value.threshold,
+        value: this.complianceForm.value.percentage,
+      },
+    };
+
+    this.$api
+      .updateEmailConfig(this.emailConfigList?._id, payload)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res) => {
+          this.toastService.getSuccessToast(
+            res?.message
+              ? `Email configuration` + res?.message
+              : "Compliance settings updated successfully"
+          );
+          this.getEmailConfig(); // update baseline
+          this.complianceForm.disable();
+          this.editMode1 = true;
+          this.cd.detectChanges();
+        },
+        error: (err) => console.error("Update failed:", err),
+      });
+  }
+
+  cancelCompliance() {
+    this.complianceForm.disable();
+    this.editMode1 = true;
+    this.getEmailConfig();
+  }
+  // RMs
+  // RmList: any[] = [];
+  filteredRms: any[] = [];
+  searchRmText = "";
+
+  // Clusters
+  ClusterList: any[] = [];
+  filteredClusters: any[] = [];
+  searchClusterText = "";
+
+  // Dropdowns
+  Opendropdown = false;
+  dropdownOpen: string | null = null;
+
+  // Open/close dropdown
+  opendropdown() {
+    this.Opendropdown = !this.Opendropdown;
+  }
+  closeDropdown() {
+    this.dropdownOpen = null;
+  }
+  rmOpen = false;
+  clusterOpen = false;
+
+  toggleRmDropdown() {
+    this.rmOpen = !this.rmOpen;
+    this.clusterOpen = false; // close other
+  }
+
+  toggleClusterDropdown() {
+    this.clusterOpen = !this.clusterOpen;
+    this.rmOpen = false; // close other
+  }
+
+  closeAllDropdowns() {
+    this.rmOpen = false;
+    this.clusterOpen = false;
+  }
+RmList:any[] = [
+  {
+    _id: "1",
+    userName: "Ajay M",
+    email: "marellapudi.ajay@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "2",
+    userName: "Anirban Ghosh",
+    email: "anirban.ghosh@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "3",
+    userName: "Avadhesh Sharma",
+    email: "avadhesh.kumar@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "4",
+    userName: "Ayush Gupta",
+    email: "ayush.gupta1@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "5",
+    userName: "Dhiren Bisht",
+    email: "dhirendra.bisht@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "6",
+    userName: "Mueen Khan",
+    email: "mueen.khan@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "7",
+    userName: "Reshma Shetty",
+    email: "reshma.shetty@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "8",
+    userName: "Srinivas Reddy",
+    email: "srinivas.reddy@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "9",
+    userName: "Suresh Balaji R",
+    email: "suresh.r@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "10",
+    userName: "Thulasi Krishna",
+    email: "krishna.thulasi@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "11",
+    userName: "Vijeesh V L",
+    email: "vijeesh.vl@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "12",
+    userName: "Kunal Sharma",
+    email: "kunal.sharma@lenskart.mobi",
+    role: "admin",
+  },
+];
+  /** ---- RMs ---- */
+  getAllRm() {
+    // this.$api.getRmList(this.auditData?.client).subscribe((res: any) => {
+    //   if (res?.code === 200) {
+    //     const result = Array.isArray(res.data.result)
+    //       ? res.data.result
+    //       : [res.data.result];
+        this.RmList = this.RmList.map((rm: any) => ({ ...rm, checked: true })); // ✅ pre-select all
+        this.filteredRms = [...this.RmList];
+        //-- Old code --
+        // this.getAllGroups(this.RmList);
+        // this.Apply();
+        this.getAllGroupsPromise(this.RmList).then(() => {
+          this.Apply();
+        });
+    //   }
+    // });
+  }
+
+  filterRms() {
+    const search = this.searchRmText.toLowerCase();
+    this.filteredRms = this.RmList.filter((r) =>
+      r.userName.toLowerCase().includes(search)
+    );
+  }
+
+  isAllRmsSelected() {
+    return (
+      this.filteredRms.length > 0 && this.filteredRms.every((r) => r.checked)
+    );
+  }
+
+  toggleSelectAllRms(event: any) {
+    const checked = event.target.checked;
+    this.filteredRms.forEach((r) => (r.checked = checked));
+this.updateSelectedRms();
+  }
+
+  updateSelectedRms() {
+    const selected = this.RmList.filter((r) => r.checked);
+    // this.getAllGroups(selected); // auto refresh clusters
+    this.getAllGroupsPromise(selected).then(() => { 
+      // auto refresh clusters with promise
+    });
+  }
+
+selectedRmsLabel(): string {
+  const selected = this.filteredRms.filter(rm => rm.checked);
+  if (selected.length === 0) return '';
+  return selected[0].userName;
+}
+getSelectedRmsCount(): number {
+  return this.filteredRms.filter(rm => rm.checked).length;
+}
+  /** ---- Clusters ---- */
+// getAllGroups(event?: any[]) {
+//   let rmList: string[] = [];
+
+//   if (event?.length) {
+//     rmList = event.map((o) => o.email);
+//   } else if (this.users?.role === "rm") {
+//     rmList = [this.users?.email];
+//   }
+
+//   const obj = { 
+//     clientId: this.auditData?.client ? this.auditData?.client : this.users?.clientId,
+//     rmList 
+//   };
+
+//   this.$api.getClusters(obj).subscribe((res: any) => {
+//     if (res?.code === 200) {
+//       // Initialize clusters with checked=false
+//       this.ClusterList = (res.data.result || []).map((c: any) => ({
+//         ...c,
+//         checked: true
+//       }));
+//       this.filteredClusters = [...this.ClusterList];
+//     } else {
+//       this.ClusterList = [];
+//       this.filteredClusters = [];
+//     }
+//   });
+// }
+
+  getAllGroupsPromise(event?: any[]): Promise<void> {
+    return new Promise((resolve, reject) => {
+      let rmList: string[] = [];
+
+      if (event?.length) {
+        rmList = event.map((o) => o.email);
+      } else if (this.users?.role === "rm") {
+        rmList = [this.users?.email];
+      }
+
+      const obj = {
+        clientId: this.auditData?.client ?? this.users?.clientId,
+        rmList
+      };
+
+      this.$api.getClusters(obj).subscribe({
+        next: (res: any) => {
+          if (res?.code === 200) {
+            this.ClusterList = (res.data.result || []).map((c: any) => ({
+              ...c,
+              checked: true,
+            }));
+            this.filteredClusters = [...this.ClusterList];
+          } else {
+            this.ClusterList = [];
+            this.filteredClusters = [];
+          }
+          resolve(); // completion
+        },
+        error: (err) => reject(err),
+      });
+    });
+  }
+
+filterClusters() {
+  const search = this.searchClusterText.toLowerCase();
+  this.filteredClusters = this.ClusterList.filter((c) =>
+    c.clusterName.toLowerCase().includes(search)
+  );
+}
+
+isAllClustersSelected() {
+  return (
+    this.filteredClusters.length > 0 &&
+    this.filteredClusters.every((c) => c.checked)
+  );
+}
+
+toggleSelectAllClusters(event: any) {
+  const checked = event.target.checked;
+  this.filteredClusters.forEach((c) => (c.checked = checked));
+  this.updateSelectedClusters();
+}
+
+updateSelectedClusters() {
+  this.selectedClusters = this.ClusterList
+    .filter(c => c.checked)
+    .map(c => c._id); // or c.clusterName if needed
+}
+
+selectedClustersLabel() {
+  const selected = this.ClusterList.filter((c) => c.checked);
+  if (selected.length === 0) return '';
+  return selected[0].clusterName;
+}
+
+getSelectedClustersCount() {
+  return this.ClusterList.filter(c => c.checked).length;
+  // return count > 1 ? count - 1 : 0; // Show "+N others"
+}
+
+  /** ---- Apply / Reset ---- */
+  Reset() {
+     this.rmOpen = false;
+    this.clusterOpen = false;
+   this.getAllRm();
+       this.Opendropdown = false;
+      //  getAllRm
+      //  this.getEmail()
+  }
+  selectedRms: any = [];
+  selectedClusters: any = [];
+  Apply() {
+    const datePipe = new DatePipe("en-US");
+    this.selectedRms = this.RmList.filter((r) => r.checked).map((r) => r.email);
+    this.selectedClusters = this.ClusterList.filter((c) => c.checked).map(
+      (c) => c.clusterName
+    );
+    this.getEmail();
+    this.rmOpen = false;
+    this.clusterOpen = false;
+    this.Opendropdown = false;
+    if (this.filterStartDate) {
+      this.filterStartDate = datePipe.transform(
+        this.filterStartDate,
+        "yyyy-MM-dd"
+      );
+    }
+    if (this.filterEndDate) {
+      this.filterEndDate = datePipe.transform(this.filterEndDate, "yyyy-MM-dd");
+    }
+  }
+  offset = 1;
+  limit = 10;
+pageSize = 10;            
+paginationSizes = [10,20,30]; 
+totalItems = 0;
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+    } else {
+      this.paginationSizes = [this.totalItems]; // Just one option if less than 10
+    }
+    this.pageSize = this.paginationSizes[0];
+  } 
+  loading = false;
+  noData = false;
+  getEmail() {
+    this.loading = true;
+    this.noData = false;
+    let obj = {
+      fromDate: this.filterStartDate,
+      toDate: this.filterEndDate,
+      // type: this.currentAuditType,
+      RMList: this.selectedRms?.length ? this.selectedRms : [],
+      clientId: this.auditData?.client
+        ? this.auditData?.client
+        : this.users?.clientId,
+      cluster: this.selectedClusters?.length
+        ? this.selectedClusters
+        : [],
+      isExport: false,
+      searchValue: this.searchValue,
+      sortBy: this.sortedColumn ? this.sortedColumn : "RMEmail",
+      sortOrder: this.sortOrder ? this.sortOrder : 1,
+      offset: this.offset,
+      limit: this.limit,
+    };
+    this.$api
+      .getEmailLog(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res?.code == 200) {
+            this.tableData = res.data.result;
+            this.totalItems = res?.data?.count || 0;
+            this.setPaginationSizes();
+            this.loading = false;
+            this.noData = false;
+          } else {
+            this.tableData = [];
+            this.loading = false;
+            this.noData = true;
+            this.totalItems = 0;
+          }
+        },
+        error: (err) => {
+          this.tableData = [];
+          this.loading = false;
+          this.noData = true;
+          this.totalItems = 0;
+          console.error("Update failed:", err);
+        },
+      });
+  }
+
+onPageChange(page: number) {
+  this.offset = page;
+  this.getEmail(); // reload with new page
+}
+
+onPageSizeChange(size: number) {
+  this.pageSize = size;
+  this.limit = size;
+  this.offset = 1;   // reset to first page when page size changes
+  this.getEmail();
+}
+
+  eyeTestView(data: any) {
+    this.$api.setAuditData(data);
+    
+    this.router.navigate(["/manage/trax/audit/start"], {
+      queryParams: {
+        type: this.currentAuditType,
+        storeId: data?.storeId,
+        _id: data.auditedId,
+        eyeType :data?.comment ? "fake" : "genuine",
+        RMEmail:data?.RMEmail,
+        cluster:data?.cluster,
+      },
+    });
+    let data1: any = JSON.parse(localStorage.getItem("header-filters") || "");
+  data1.date = {
+  startDate: this.auditDetails?.fileDate,
+  endDate: this.auditDetails?.fileDate
+};
+     localStorage.setItem("header-filters", JSON.stringify(data1));
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  //  @ViewChild('sankeyChart', { static: true }) chartElement!: ElementRef;
+
+  //   ngAfterViewInit() {
+  //     const rawData = [
+  //       { from: "Customization", to: "Formal Pants", value: 3 },
+  //       { from: "Entry", to: "Formal Pants", value: 12 },
+  //       { from: "Pin Tuck Pants", to: "Joggers", value: 4 },
+  //       { from: "Joggers", to: "Formal Pants", value: 2 },
+  //       { from: "Power Stretch", to: "Customization", value: 2 },
+  //       { from: "Pin Tuck Pants", to: "Shorts with Lounge wear , Chinos and Pintuck Pants", value: 5 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Power Stretch", value: 2 },
+  //       { from: "Customization", to: "Trial Room", value: 2 },
+  //       { from: "Joggers", to: "Exit", value: 29 },
+  //       { from: "Pin Tuck Pants", to: "Power Stretch", value: 2 },
+  //       { from: "Entry", to: "Customization", value: 64 },
+  //       { from: "Power Stretch", to: "Pin Tuck Pants", value: 3 },
+  //       { from: "Customization", to: "Pin Tuck Pants", value: 10 },
+  //       { from: "Entry", to: "Shorts with Lounge wear , Chinos and Pintuck Pants", value: 49 },
+  //       { from: "Entry", to: "Joggers", value: 29 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Exit", value: 49 },
+  //       { from: "Joggers", to: "Customization", value: 6 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Joggers", value: 3 },
+  //       { from: "Power Stretch", to: "Joggers", value: 1 },
+  //       { from: "Customization", to: "Shorts with Lounge wear , Chinos and Pintuck Pants", value: 7 },
+  //       { from: "Formal Pants", to: "Shorts with Lounge wear , Chinos and Pintuck Pants", value: 1 },
+  //       { from: "Pin Tuck Pants", to: "Exit", value: 54 },
+  //       { from: "Power Stretch", to: "Trial Room", value: 2 },
+  //       { from: "Formal Pants", to: "Customization", value: 3 },
+  //       { from: "Formal Pants", to: "Power Stretch", value: 1 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Trial Room", value: 2 },
+  //       { from: "Customization", to: "Exit", value: 64 },
+  //       { from: "Entry", to: "Pin Tuck Pants", value: 54 },
+  //       { from: "Pin Tuck Pants", to: "Formal Pants", value: 3 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Pin Tuck Pants", value: 5 },
+  //       { from: "Joggers", to: "Power Stretch", value: 4 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Formal Pants", value: 3 },
+  //       { from: "Pin Tuck Pants", to: "Customization", value: 11 },
+  //       { from: "Formal Pants", to: "Pin Tuck Pants", value: 3 },
+  //       { from: "Trial Room", to: "Pin Tuck Pants", value: 1 },
+  //       { from: "Customization", to: "Power Stretch", value: 1 },
+  //       { from: "Customization", to: "Joggers", value: 6 },
+  //       { from: "Formal Pants", to: "Exit", value: 12 },
+  //       { from: "Joggers", to: "Pin Tuck Pants", value: 4 },
+  //       { from: "Power Stretch", to: "Shorts with Lounge wear , Chinos and Pintuck Pants", value: 1 },
+  //       { from: "Power Stretch", to: "Exit", value: 18 },
+  //       { from: "Entry", to: "Trial Room", value: 6 },
+  //       { from: "Shorts with Lounge wear , Chinos and Pintuck Pants", to: "Customization", value: 5 },
+  //       { from: "Entry", to: "Power Stretch", value: 18 },
+  //       { from: "Power Stretch", to: "Formal Pants", value: 1 },
+  //       { from: "Trial Room", to: "Customization", value: 3 },
+  //       { from: "Trial Room", to: "Exit", value: 6 },
+  //       { from: "Formal Pants", to: "Joggers", value: 4 }
+  //     ];
+
+  //     // Build unique nodes
+  //     const labels = [...new Set(rawData.flatMap(d => [d.from, d.to]))];
+  //     const labelToIndex: Record<string, number> = {};
+  //     labels.forEach((label, i) => (labelToIndex[label] = i));
+
+  //     // Map data for Sankey
+  //     const source = rawData.map(d => labelToIndex[d.from]);
+  //     const target = rawData.map(d => labelToIndex[d.to]);
+  //     const value = rawData.map(d => d.value);
+
+  //     // Assign consistent colors (like amCharts distinct palette)
+  //     const nodeColors: Record<string, string> = {
+  //       "Customization": "#1f77b4",
+  //       "Formal Pants": "#ff7f0e",
+  //       "Entry": "#2ca02c",
+  //       "Pin Tuck Pants": "#d62728",
+  //       "Joggers": "#9467bd",
+  //       "Power Stretch": "#8c564b",
+  //       "Exit": "#e377c2",
+  //       "Trial Room": "#17becf",
+  //       "Shorts with Lounge wear , Chinos and Pintuck Pants": "#bcbd22"
+  //     };
+
+  //     const nodeColorArray = labels.map(l => nodeColors[l] || "#999");
+  //     const linkColorArray = rawData.map(d => nodeColors[d.from] || "#999");
+
+  //     const data: any = [{
+  //       type: "sankey",
+  //       orientation: "h",
+  //       node: {
+  //         pad: 15,
+  //         thickness: 20,
+  //         line: { color: "black", width: 0.5 },
+  //         label: labels,
+  //         color: nodeColorArray
+  //       },
+  //       link: {
+  //         source,
+  //         target,
+  //         value,
+  //         color: linkColorArray
+  //       }
+  //     }];
+
+  //     const layout = {
+  //       title: { text: "Sankey Flow (Plotly with AmCharts-like Colors)" },
+  //       font: { size: 12 }
+  //     };
+
+  //     Plotly.newPlot(this.chartElement.nativeElement, data, layout);
+  //   }
+}