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

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

@@ -0,0 +1,1890 @@
+import { ChangeDetectorRef, Component, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit, HostListener } from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
+import { GlobalStateService, PageInfoService } from "tango-app-ui-global";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import utc from "dayjs/plugin/utc";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { debounceTime, distinctUntilChanged, Subject, takeUntil,Observable,tap, BehaviorSubject } from "rxjs";
+import { TraxService } from "../../../services/trax.service";
+import { EyeTestAuditService } from "../services/eye-test-audit.service";
+import { ToastService } from "tango-app-ui-shared";
+import { switchMap, finalize } from 'rxjs/operators';
+import { NgbModal, NgbTooltip } from "@ng-bootstrap/ng-bootstrap";
+import { SendAlertComponent } from "./send-alert/send-alert.component";
+@Component({
+  selector: "lib-eye-test",
+  templateUrl: "./eye-test.component.html",
+  styleUrl: "./eye-test.component.scss",
+})
+export class EyeTestComponent implements OnInit, OnDestroy {
+  dayjs = dayjs;
+  eyeTestForm: FormGroup;
+  selectedDateRange: any = {};
+  selectedDate: any;
+  isCustomDate: any;
+  headerFilters: any = [];
+  ClusterList: any = [];
+  stores: any = [];
+  clientData: any;
+  private destroy$ = new Subject();
+  groups: any = [];
+  storeList: any[] = [];
+  noData = false;
+  loading = true;
+  eyeTestData: any;
+  typeValue: any;
+  type: any = [
+    { value: "physical", label: "Eye Test" },
+    { value: "remote", label: "Remote Test" },
+  ];
+  auditType: any = [
+    { label: "All", value: "all" },
+    { label: "Adult", value: "adult" },
+    { label: "Kid", value: "kids" },
+  ];
+  dateType: any = [
+    { value: "fileDate", label: "Eye Test Date" },
+    { value: "auditedDate", label: "Audited Date" },
+  ];
+  typePercentageArray:any = [];
+
+   nearAdditionArray: any = [
+    {
+      label: "All",
+      value: "",
+    },
+    { 
+      label: "With Near Addition", 
+      value: "true" 
+    },
+    { 
+      label: "Without Near Addition", 
+      value: "false" 
+    },
+  ];
+
+  categoryArray: any = [
+    {
+      label: "Genuine",
+      value: "genuine",
+    },
+    { label: "Fake", value: "fake" },
+  ];
+
+  auditedDateAuditStatus:any =[
+    { label: "Audited", value: "Audited" },
+    { label: "Re-Audited", value: "Re-Audited" },
+   
+  ]
+
+  auditStatusArray:any =[
+    { label: "Audited", value: "Audited" },
+    { label: "Re-Audited", value: "Re-Audited" },
+    {label :"Yet-to-Audit", value: "Yet-to-Audit" },
+    { label :"In-Progress", value: "In-Progress" },
+    
+  ]
+  showEyeTest = true;
+  constructor(
+    private pageInfo: PageInfoService,
+    private fb: FormBuilder,
+    private traxService: TraxService,
+    private eyeService: EyeTestAuditService,
+    private router: Router,
+    private cd: ChangeDetectorRef,
+    public gs: GlobalStateService,
+    private ts: ToastService, private modalService: NgbModal,
+    private route: ActivatedRoute,
+    private sanitizer: DomSanitizer
+  ) {
+    this.typeValue = this.route.snapshot.queryParamMap.get("typeValue");
+  }
+  headDate: any;
+  headDateEnd: any;
+  users: any;
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+  closeEyeTest() {
+    this.showEyeTest = false;
+    this.cd.detectChanges();
+  }
+  RmListNew:any;
+  storesNew:any;
+  dataBackGet:any;
+  auditStatusNew:any;
+  complianceScoreArray:any;
+  ngOnInit(): void {
+    let userinfo = JSON.parse(localStorage.getItem("user-info") || "");
+    this.users = userinfo;
+    this.initAiSession();
+if (this.users && (this.users.role === "superadmin" || this.users.role === "admin")) {
+  this.typePercentageArray = [
+    { label: "0–10%", value: "0-10" },
+  { label: "10–20%", value: "10-20" },
+  { label: "20–30%", value: "20-30" },
+  { label: "30–40%", value: "30-40" },
+  { label: "40–50%", value: "40-50"},
+  { label: "50–60%", value: "50-60" },
+  { label: "60–70%", value: "60-70" },
+  { label: "70–80%", value: "70-80" },
+  { label: "80–90%", value: "80-90" },
+  { label: "90–100%", value: "90-100" },
+  ];
+} else {
+  this.typePercentageArray = [
+    { label: "0%", value: "0" },
+    { label: "17%", value: "16" },
+    { label: "33%", value: "33" },
+    { label: "50%", value: "50" },
+    { label: "67%", value: "66" },
+    { label: "83%", value: "83" },
+    { label: "100%", value: "100" },
+  ];
+}
+
+    if (!this.typeValue) {
+      this.typeValue = "physical";
+    }
+  this.isCustomDate = (m: dayjs.Dayjs) => {
+      const isValidDate = m > this.dayjs();
+      return isValidDate ? "invalid-date" : false;
+    };
+    this.selectedDateRange = {
+      startDate: this.dayjs().subtract(1, "day").format("DD-MM-YYYY"),
+      endDate: this.dayjs().subtract(1, "day").format("DD-MM-YYYY"),
+    };
+    let headerFilters = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+       
+    if (headerFilters?.date?.startDate && headerFilters?.date?.endDate) {
+      this.selectedDateRange = {
+        startDate: this.dayjs(
+          headerFilters.date.startDate,
+          "YYYY-MM-DD"
+        ).format("DD-MM-YYYY"),
+        endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format(
+          "DD-MM-YYYY"
+        ),
+      };
+    }
+    this.route.queryParams.subscribe((params) => {
+      if (
+        params &&
+        params["fromDate"] &&
+        params["toDate"] &&
+        params["typeValue"]
+      ) {
+        this.typeValue = params["typeValue"] ? params["typeValue"] : "physical";
+
+        this.selectedDateRange.startDate = this.dayjs(
+          params["fromDate"],
+          "YYYY-MM-DD"
+        ).format("DD-MM-YYYY");
+        this.selectedDateRange.endDate = this.dayjs(
+          params["toDate"],
+          "YYYY-MM-DD"
+        ).format("DD-MM-YYYY");
+      } else {
+        this.router.navigate(["/manage/trax/audit"], {
+          queryParams: {
+            fromDate: this.dayjs(
+              this.selectedDateRange.startDate,
+              "DD-MM-YYYY"
+            ).format("YYYY-MM-DD"),
+            toDate: this.dayjs(
+              this.selectedDateRange.endDate,
+              "DD-MM-YYYY"
+            ).format("YYYY-MM-DD"),
+            typeValue: this.typeValue ? this.typeValue : "physical",
+          },
+        });
+      }
+    });
+    let dateTime = this.selectedDateRange.startDate;
+    this.headDate = this.dayjs(dateTime, "DD-MM-YYYY").format("MMM, DD");
+    this.headDateEnd = this.dayjs(
+      this.selectedDateRange.endDate,
+      "DD-MM-YYYY"
+    ).format("MMM DD, YYYY");
+    this.createForm();
+    this.eyeTestForm.get("Type")?.setValue(this.typeValue);
+         this.eyeTestForm.get("complianceScore")?.setValue(this.typePercentageArray);
+         this.eyeTestForm.get("auditStatus")?.setValue(this.auditStatusArray);
+    this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe({
+      next: (data: any) => {
+        // let data = JSON.parse(localStorage.getItem("header-filters") || "")
+        if (data?.client) {
+          this.headerFilters = data;
+          // setTimeout(() => {
+            if (this.headerFilters.client) {
+             
+                this.getAllRm1()
+    .pipe(
+      switchMap(() => this.getAllGroups1()),
+      switchMap(() => this.getAllStores1())
+    )
+    .subscribe({
+      next: () => {
+        // All done ✅
+        this.onSubmit();
+        this.cd.detectChanges();
+      },
+      error: (err:any) => {
+        console.error("Error loading data:", err);
+      },
+    });
+  }
+            this.cd.detectChanges();
+          // }, 10);
+        } else {
+          // setTimeout(() => {
+            if (this.users && this.users?.clientId) {
+              this.headerFilters.client = this.users.clientId;
+              
+                       this.getAllRm1()
+    .pipe(
+      switchMap(() => this.getAllGroups1()),
+      switchMap(() => this.getAllStores1())
+    )
+    .subscribe({
+      next: () => {
+        // All done ✅
+        this.onSubmit();
+        this.cd.detectChanges();
+      },
+      error: (err:any) => {
+        console.error("Error loading data:", err);
+      },
+    });
+            }
+
+            this.cd.detectChanges();
+          // }, 10);
+        }
+      },
+    });
+  }
+  getAbsValue(value: number | null | undefined): number {
+    return value != null ? Math.abs(value) : 0;
+  }
+  // clusters old api removed
+  // getAllGroups() {
+  //   this.traxService.getclusters({ clientId: this.headerFilters?.client, group: [], city: [] }).pipe(takeUntil(this.destroy$)).subscribe({
+  //     next: (res: any) => {
+  //       if (res && res.code == 200) {
+  //         this.ClusterList = res.data.groupData
+  //       } else {
+  //         this.ClusterList = []
+  //       }
+  //     }
+  //   })
+  // }
+  loading1 = true;
+  // clusters new api
+  getAllGroups1(event?: any): Observable<any> {
+  
+    let rmList: any = [];
+    this.ClusterList = [];
+    if (Array.isArray(this.eyeTestForm.value.RmList)) {
+      this.eyeTestForm.value.RmList.forEach((el: any) => {
+        rmList.push(el?.email);
+      });
+    }
+    event?.map((el: any) => el?.email) || [this.users?.email];
+    const obj = {
+      clientId: this.headerFilters?.client ? this.headerFilters.client : "",
+      rmList: rmList.length > 0 ? rmList : [this.users?.email],
+    };
+   return this.eyeService.getClusters(obj).pipe(
+    tap((res: any) => {
+      if (res && res.code === 200) {
+        this.ClusterList = res.data.result;
+        this.eyeTestForm.get("ClusterList")?.setValue(this.ClusterList);
+        this.groups = this.ClusterList.map((el: any) => el.clusterName);
+        // Note: Do NOT call getAllStores() here; chain it outside
+      } else {
+        this.ClusterList = [];
+        this.loading1 = false;
+      }
+      this.cd.detectChanges();
+    })
+   );
+  }
+
+  // clientDetails() {
+  //   this.traxService.getclient({ clientId: this.headerFilters.client }).subscribe({
+  //     next: (res: any) => {
+  //       if (res && res.code == 200) {
+  //         this.clientData = res.data.result
+  //       }
+  //     }
+  //   })
+  // }
+
+ getAllStores1(): Observable<any> {
+  return this.traxService
+    .getStoreslist({
+      clientId: this.headerFilters?.client,
+      clusters: this.groups,
+      city: [],
+    })
+    .pipe(
+      tap((res: any) => {
+        if (res && res.code === 200) {
+          this.storeList = res.data.storesData;
+          this.eyeTestForm.get("storeList")?.setValue(this.storeList);
+          this.loading1 =false;
+        } else {
+          this.storeList = [];
+           this.loading1 =false;
+        }
+      }),
+    );
+}
+
+  typeChange(event: any) {
+    this.eyeTestForm.get("Type")?.setValue(event);
+    this.router.navigate(["/manage/trax/audit"], {
+      queryParams: {
+        fromDate: this.dayjs(
+          this.selectedDateRange.startDate,
+          "DD-MM-YYYY"
+        ).format("YYYY-MM-DD"),
+        toDate: this.dayjs(this.selectedDateRange.endDate, "DD-MM-YYYY").format(
+          "YYYY-MM-DD"
+        ),
+        typeValue: event,
+      },
+    });
+    this.cd.detectChanges();
+  }
+
+  dateTypeChange(event: any) {
+    this.eyeTestForm.get("dateType")?.setValue(event);
+    if(event === "auditedDate"){
+      this.eyeTestForm.get("auditStatus")?.setValue([...this.auditedDateAuditStatus]);
+    }else{
+      this.eyeTestForm.get("auditStatus")?.setValue([...this.auditStatusArray]);
+    }
+    this.cd.detectChanges();
+    
+  }
+
+  auditTypeChange(event: any) {
+    this.eyeTestForm.get("auditType")?.setValue(event);
+    this.cd.detectChanges();
+  }
+
+  typePercentageChange(event: any) {
+    this.eyeTestForm.get("complianceScore")?.setValue(event);
+    this.cd.detectChanges();
+  }
+  typeAuditStatusChange(event: any) {
+    console.log("...............typeauditChages", event)
+    this.eyeTestForm.get("auditStatus")?.setValue(event);
+    this.cd.detectChanges();
+  }
+  nearAdditionChange(event: any) {
+    this.eyeTestForm.get("nearAddition")?.setValue(event);
+    this.cd.detectChanges();
+  }
+  categoryTypeChange(event: any) {
+    this.eyeTestForm.get("category")?.setValue(event);
+    this.cd.detectChanges();
+  }
+  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.eyeTestForm
+          .get("fromDate")
+          ?.setValue(this.selectedDateRange.startDate);
+        if (
+          this.selectedDateRange.startDate &&
+          this.dayjs(this.selectedDateRange.startDate).isValid()
+        ) {
+          this.headDate = this.dayjs(this.selectedDateRange.startDate).format(
+            "MMM, DD"
+          );
+        }
+        this.eyeTestForm
+          .get("toDate")
+          ?.setValue(this.selectedDateRange.endDate);
+        if (
+          this.selectedDateRange.endDate &&
+          this.dayjs(this.selectedDateRange.endDate).isValid()
+        ) {
+          this.headDateEnd = this.dayjs(this.selectedDateRange.endDate).format(
+            "MMM DD, YYYY"
+          );
+        }
+        this.router.navigate(["/manage/trax/audit"], {
+          queryParams: {
+            fromDate: this.selectedDateRange.startDate,
+            toDate: this.selectedDateRange.endDate,
+            typeValue: this.typeValue,
+          },
+        });
+      }
+    }
+  }
+
+  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;
+    };
+  }
+
+  selectedType: any;
+  createForm() {
+    const isRemote = this.selectedType === "physical"; // or however you're determining it
+
+    this.eyeTestForm = this.fb.group({
+      fromDate: [
+        this.selectedDateRange?.startDate
+        ? this.dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD")
+        : this.dayjs().subtract(1, "day").format("YYYY-MM-DD"),
+      ],
+      toDate: [
+        this.selectedDateRange?.endDate
+        ? this.dayjs(this.selectedDateRange.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
+        : this.dayjs().subtract(1, "day").format("YYYY-MM-DD"),
+      ],
+      type: this.typeValue,
+      dateType: "fileDate",
+      complianceScore: [this.typePercentageArray],
+      ...(isRemote ? {} : { category: ["genuine"] }),
+      nearAddition: [""],
+      auditStatus: [this.auditStatusArray],
+      ClusterList: [this.groups],
+      storeList: [this.stores],
+      RmList: [this.RmList],
+      ...(isRemote ? {} : { auditType: "all" }), // Conditionally add auditType
+    });
+  }
+
+  ongroupSelect(event: any) {
+    // this.loading1 = true;
+    this.eyeTestForm.get("ClusterList")?.setValue(event);
+    this.groups = event.map((el: any) => el.clusterName);
+    this.traxService
+      .getStoreslist({
+        clientId: this.headerFilters.client,
+        clusters: this.groups,
+        city: [],
+      })
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.storeList = res.data.storesData;
+            this.eyeTestForm.get("storeList")?.setValue(this.storeList);
+            this.loading1 = false;
+            this.onSubmit();
+          }
+        },
+        error: (err) => {
+          this.storeList = [];
+          this.loading1 = false;
+          this.onSubmit();
+        },
+      });
+    this.cd.detectChanges();
+  }
+
+  onStoreSelect(event: any) {
+    this.eyeTestForm.get("storeList")?.setValue(event);
+    this.cd.detectChanges();
+  }
+  searchValue: any = "";
+  searchData() {
+    this.searchValue = this.searchValue;
+    this.onSubmit();
+  }
+
+  paginationSizes: any[] = [];
+  pageSize = 10;
+  setPaginationSizes() {
+    if (this.totalItems > 10) {
+      this.paginationSizes = [10, 20, 30];
+    } else {
+      this.paginationSizes = [this.totalItems]; // Just one option if  10
+    }
+    this.pageSize = this.paginationSizes[0];
+  }
+  RmListData: any = [];
+  keyType: any;
+  rmEmail: any;
+
+  // Tango AI
+  eyeTestChatQuery = '';
+  eyeTestAiMessage: string | null = null;
+  showEyeTestAiMessage = false;
+
+  // Model switcher
+  readonly modelOptions = [
+    { label: 'v1', value: 'gemini-2.5-pro' },
+    { label: 'v2', value: 'claude-sonnet-4-6' }
+  ];
+  selectedModel = 'claude-sonnet-4-6';
+  showPlusMenu = false;
+
+  get selectedModelVersion(): string {
+    const match = this.selectedModel.match(/(\d+\.\d+)/);
+    return match ? match[1] : '';
+  }
+
+  selectModel(value: string): void { this.selectedModel = value; }
+  togglePlusMenu(): void { this.showPlusMenu = !this.showPlusMenu; }
+  closePlusMenu(): void { this.showPlusMenu = false; }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(e: MouseEvent): void {
+    if (!(e.target as HTMLElement).closest('.plus-menu-wrap')) {
+      this.showPlusMenu = false;
+    }
+  }
+  // typeVal(val: any, obj?: any) {
+  //   this.loading = true;
+  //   this.searchValue = "";
+  //   this.limit = 10;
+  //   this.offset = 1;
+  //   this.pageSize = 10;
+  //   this.keyType = val;
+  //   this.rmEmail = obj?.RMEmail ? obj?.RMEmail : obj;
+  //   // 🔍 find the RM object in your RmList array
+  //    if (this.users?.role === "superadmin" && this.RmList?.length) {
+  //   this.RmList?.forEach((element: any) => {
+  //     if (element?.email === this.rmEmail) {
+  //       this.eyeTestForm.get("RmList")?.setValue([element]);
+  //       this.onRmSelect([element]);
+  //     }
+  //   });
+  // }
+  //   this.groups = obj?.clusterName ? [obj?.clusterName] : this.groups;
+  //    if (
+  //     this.users?.role === "admin" &&
+  //     this.ClusterList?.length &&
+  //     obj?.clusterName
+  //   ) {
+  //   this.ClusterList.forEach((element: any) => {
+  //     if (element?.clusterName === this.groups) {
+  //       this.eyeTestForm.get("ClusterList")?.setValue([element]);
+  //       this.ongroupSelect([element]);
+  //     }
+  //   });
+  // }
+  //   this.sortedColumn = "date";
+  //   if (this.rmEmail === "") this.onSubmit();
+  // }
+  demoGrapics:any;
+  typeVal(val: any, obj?: any) {
+    // console.log(val, obj);
+   this.typePercentageArray =[];
+    this.loading = true;
+    this.searchValue = "";
+    this.limit = 10;
+    this.offset = 1;
+    this.pageSize = 10;
+    this.keyType = val;
+    this.showEyeTestAiMessage = false;
+    this.eyeTestAiMessage = null;
+    this.eyeTestChatQuery = '';
+    this.initAiSession();
+    this.sortedColumn = "date";
+this.demoGrapics = this.eyeTestForm.value.auditType;
+if (this.demoGrapics === "all") {
+  this.demoGrapics = ["adult", "kids"];
+}
+    if (this.users?.role === "superadmin" && this.RmList?.length)
+      this.rmEmail = obj?.RMEmail ? obj?.RMEmail : obj;
+    
+    this.groups = obj?.clusterName ? [obj?.clusterName] : this.groups;
+    
+    let foundRM = false;
+    let foundCluster = false;
+    if(val !=="store"){
+this.typePercentageArray = [
+ { label: "0–10%", value: "0-10" },
+  { label: "10–20%", value: "10-20" },
+  { label: "20–30%", value: "20-30" },
+  { label: "30–40%", value: "30-40" },
+  { label: "40–50%", value: "40-50"},
+  { label: "50–60%", value: "50-60" },
+  { label: "60–70%", value: "60-70" },
+  { label: "70–80%", value: "70-80" },
+  { label: "80–90%", value: "80-90" },
+  { label: "90–100%", value: "90-100" },
+];
+    } else {
+      this.typePercentageArray = [
+        { label: "0%", value: "0" },
+        { label: "17%", value: "16" },
+        { label: "33%", value: "33" },
+        { label: "50%", value: "50" },
+        { label: "67%", value: "66" },
+        { label: "83%", value: "83" },
+        { label: "100%", value: "100" },
+      ];
+    }
+        this.eyeTestForm.get("complianceScore")?.setValue(this.typePercentageArray);
+    if((this.users?.role === "superadmin" || this.users?.role === "admin") && val ==="store" &&
+        this.ClusterList?.length &&
+        obj?.clusterName
+      ) {
+        this.ClusterList.forEach(
+          (element: any) => 
+            {
+              if(element?.clusterName === obj.clusterName){
+          this.eyeTestForm.get("ClusterList")?.setValue([element]);
+          this.ongroupSelect([element]);
+            this.loading1 = true;
+          foundCluster = true;
+        }
+      })
+    } else if((this.users?.role === "superadmin" || this.users?.role === "admin") && val ==="cluster" &&
+        this.ClusterList?.length &&
+        obj?.clusterName
+      ) {
+        this.ClusterList.forEach(
+          (element: any) => 
+            {
+              if(element?.clusterName === obj.clusterName){
+          this.eyeTestForm.get("ClusterList")?.setValue([element]);
+          this.ongroupSelect([element]);
+            this.loading1 = true;
+          foundCluster = true;
+        }
+      })
+    }
+
+    // ✅ RM selection (only for superadmin)
+    if (this.users?.role === "superadmin" && val ==="cluster" && this.RmList?.length) {
+     this.RmList.forEach(
+        (element: any) => {
+          if(element?.email === this.rmEmail) {
+        this.eyeTestForm.get("RmList")?.setValue([element]);
+        this.onRmSelect([element]);
+          this.loading1 = true;
+        foundRM = true;
+      }
+    })
+    }
+
+    // ✅ Cluster selection (only for admin)
+
+    // ✅ Submit fallback
+    if (!foundRM && !foundCluster) {
+    this.getAllStores();
+    }
+   
+                 this.onSubmit();
+        
+    this.cd.detectChanges();
+  }
+typeVal1(val: any, obj?: any) {
+  this.loading = true;
+  this.searchValue = "";
+  this.limit = 10;
+  this.offset = 1;
+  this.pageSize = 10;
+  this.keyType = val;
+  this.showEyeTestAiMessage = false;
+  this.eyeTestAiMessage = null;
+  this.eyeTestChatQuery = '';
+  this.initAiSession();
+  this.sortedColumn = "date";
+   if(val !=="store"){
+this.typePercentageArray = [
+  { label: "0–10%", value: "0-10" },
+  { label: "10–20%", value: "10-20" },
+  { label: "20–30%", value: "20-30" },
+  { label: "30–40%", value: "30-40" },
+  { label: "40–50%", value: "40-50"},
+  { label: "50–60%", value: "50-60" },
+  { label: "60–70%", value: "60-70" },
+  { label: "70–80%", value: "70-80" },
+  { label: "80–90%", value: "80-90" },
+  { label: "90–100%", value: "90-100" },
+];
+    } else {
+      this.typePercentageArray = [
+        { label: "0%", value: "0" },
+        { label: "17%", value: "16" },
+        { label: "33%", value: "33" },
+        { label: "50%", value: "50" },
+        { label: "67%", value: "66" },
+        { label: "83%", value: "83" },
+        { label: "100%", value: "100" },
+      ];
+    }
+        this.eyeTestForm.get("complianceScore")?.setValue(this.typePercentageArray);
+  if (this.users?.role === "superadmin" && this.RmList?.length) {
+    this.rmEmail = obj?.RMEmail ? obj?.RMEmail : obj;
+  }
+
+  // this.groups = obj?.clusterName ? [obj?.clusterName] : this.groups;
+
+  this.demoGrapics = this.eyeTestForm.value.auditType;
+  if (this.demoGrapics === "all") {
+    this.demoGrapics = ["adult", "kids"];
+  }
+  this.eyeTestData = [];
+  let foundRM = false;
+  let foundCluster = false;
+
+  // ✅ Cluster / Store
+  if ((this.users?.role === "superadmin" || this.users?.role === "admin") &&
+      (val === "store" || val === "cluster")) {
+     this.getAllGroups();
+       this.loading1 = true;
+    foundCluster = true;
+  }
+
+  // ✅ RM (only for superadmin)
+  if (this.users?.role === "superadmin" && val === "rm") {
+   this.onRmSelect(this.rmList);
+     this.loading1 = true;
+    foundRM = true;
+  }
+
+  // ✅ Fallback
+  if (!foundRM && !foundCluster) {
+    this.getAllStores();
+  }
+  
+                 this.onSubmit();
+          this.loading1 =false;
+  this.cd.detectChanges();
+}
+// private resetAllClusters() {
+//   if (this.ClusterList?.length) {
+//     this.eyeTestForm.get("ClusterList")?.setValue(this.ClusterList);
+//     this.ongroupSelect(this.ClusterList);
+//   } else {
+//     this.eyeTestForm.get("ClusterList")?.setValue([]);
+//   }
+//   this.getAllGroups();
+// }
+
+// private resetAllRms() {
+//   if (this.RmList?.length) {
+//     this.eyeTestForm.get("RmList")?.setValue(this.RmList);
+//     this.onRmSelect(this.RmList);
+//   } else {
+//     this.eyeTestForm.get("RmList")?.setValue([]);
+//   }
+//   this.getAllRm();
+// }
+
+
+buildRequestData(params?: {
+  isExport?: boolean;
+  limit?: number;
+  offset?: number;
+}): any {
+  // Map role → keyType
+  const roleKeyTypeMap: any = {
+    superadmin: "rm",
+    admin: "cluster",
+    user: "store",
+  };
+  if (!this.keyType) {
+    this.keyType = roleKeyTypeMap[this.users?.role] || "store";
+  }
+
+  // Collect store IDs
+  const finalStores = Array.isArray(this.eyeTestForm.value.storeList)
+    ? this.eyeTestForm.value.storeList.map((store: any) => store.storeId)
+    : [];
+
+  // Collect RM emails
+  let finalRMList: string[] = [];
+  if (Array.isArray(this.eyeTestForm.value.RmList) && this.eyeTestForm.value.RmList.length) {
+    finalRMList = this.eyeTestForm.value.RmList.map((el: any) => el?.email);
+  } else if (this.rmEmail) {
+    finalRMList = [this.rmEmail];
+  } else if (this.users?.email) {
+    finalRMList = [this.users.email];
+  }
+this.RmListData = finalRMList?.length ? finalRMList?.length : [];
+  // Handle auditType → normalize to array
+  const auditTypeValue = this.eyeTestForm.value.auditType;
+  let auditTypes: string[] = [];
+  if (auditTypeValue === "all") {
+    auditTypes = ["adult", "kids"];
+  } else if (Array.isArray(auditTypeValue)) {
+    auditTypes = auditTypeValue;
+  } else if (auditTypeValue) {
+    auditTypes = [auditTypeValue];
+  }
+
+  return {
+    clientId: this.headerFilters?.client,
+    fromDate: this.eyeTestForm.value.fromDate,
+    toDate: this.eyeTestForm.value.toDate,
+    type: this.eyeTestForm.value.type,
+    dateType: this.eyeTestForm.value.dateType,
+
+    // demographics only if type !== remote
+    ...(this.eyeTestForm.value.type !== "remote" && { demographics: auditTypes }),
+
+    cluster: this.groups,
+    storeId: finalStores,
+
+    limit: params?.limit ?? this.limit ?? 10,
+    offset: params?.offset ?? this.offset ?? 1,
+    keyType: this.keyType,
+
+    complianceScore: this.eyeTestForm.value.complianceScore?.length ? (this.eyeTestForm.value.complianceScore.map((el: any) => el.value)): [],
+   
+    auditStatus:  this.eyeTestForm.value.auditStatus?.length
+      ? this.eyeTestForm.value.auditStatus.map((el: any) => el.value)
+      : [],
+    nearAddition: this.eyeTestForm.value.nearAddition || "",
+
+    ...(this.eyeTestForm.value.type !== "remote" && {
+      category: this.eyeTestForm.value.category,
+    }),
+
+    RMList: finalRMList,
+    searchValue: this.searchValue || "",
+    isExport: params?.isExport ?? false,
+    sortOrder: this.sortOrder ?? -1,
+    sortBy: this.sortedColumn ?? "date",
+  };
+}
+
+
+
+  exportXLSX() {
+    const requestData = this.buildRequestData({
+      isExport: true,
+      limit: 10000,
+      offset: 1,
+    });
+
+    this.eyeService
+      .getEyeTestTableExport(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          this.eyeService.saveAsExcelFile(
+            res,
+            `${this.eyeTestForm.value.type} Eye Test Table `
+          );
+          this.cd.detectChanges();
+        },
+        error: (err: any) => {
+          this.ts.getErrorToast(
+            err?.error?.error ? err?.error?.error : err?.error?.message
+          );
+        },
+      });
+  }
+
+  totalItems: any = 0;
+  offset = 1;
+  limit = 10;
+  dataResult:any;
+  onSubmit() {
+   
+    this.eyeTestData=[];
+    this.typeValue = this.eyeTestForm?.value?.type;
+    this.loading = true;
+    this.noData = false;
+       setTimeout(()=>{
+    const requestData = this.buildRequestData({ isExport: false });
+   this.dataResult = requestData
+    this.eyeService
+      .getEyeTestlist(requestData)
+      .pipe(takeUntil(this.destroy$),distinctUntilChanged())
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.eyeTestData = res?.data.result;
+            this.totalItems = res.data?.count;
+            this.setPaginationSizes();
+            this.getCardData();
+            this.loading = false;
+            this.noData = false;
+          } else {
+            this.getCardData();
+            this.eyeTestData = [];
+            this.loading = false;
+            this.noData = true;
+            this.totalItems = 0;
+          }
+          this.cd.detectChanges();
+        },
+        error: () => {
+          this.loading = false;
+          this.noData = true;
+          this.cd.detectChanges();
+        },
+      });
+          },1000)
+  }
+
+  onPageChange(pageOffset: number) {
+    // this.limit = 10;
+    // this.pageSize = 10;
+    this.loading = true;
+    this.noData = false;
+    this.offset = Number(pageOffset);
+
+    const requestData = this.buildRequestData({
+      isExport: false,
+      limit: this.limit,
+      offset: this.offset,
+    });
+    // console.log(requestData)
+// return
+    this.eyeService
+      .getEyeTestlist(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.eyeTestData = res?.data.result;
+            this.totalItems = res.data?.count;
+            this.loading = false;
+            this.noData = false;
+          } else {
+            this.eyeTestData = [];
+            this.loading = false;
+            this.noData = true;
+            this.totalItems = 0;
+          }
+          this.cd.detectChanges();
+        },
+        error: () => {
+          this.eyeTestData = [];
+          this.totalItems = 0;
+          this.loading = false;
+          this.noData = true;
+        },
+      });
+  }
+
+  onPageSizeChange(pageSize: number) {
+    this.offset = 1;
+    this.loading = true;
+    this.noData = false;
+    this.pageSize = Number(pageSize);
+    this.limit = Number(pageSize);
+
+    const requestData = this.buildRequestData({
+      isExport: false,
+      limit: this.limit,
+      offset: this.offset,
+    });
+
+    this.eyeService
+      .getEyeTestlist(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.eyeTestData = res?.data.result;
+            this.totalItems = res.data?.count;
+            this.loading = false;
+            this.noData = false;
+          } else {
+            this.eyeTestData = [];
+            this.loading = false;
+            this.noData = true;
+            this.totalItems = 0;
+          }
+          this.cd.detectChanges();
+        },
+        error: () => {
+          this.eyeTestData = [];
+          this.totalItems = 0;
+          this.loading = false;
+          this.noData = true;
+        },
+      });
+  }
+
+  sortedColumn: any;
+  sortOrder: any;
+  onSort(column: string) {
+    if (this.sortedColumn === column) {
+      this.sortOrder = this.sortOrder === 1 ? -1 : 1;
+    } else {
+      this.sortedColumn = column ? column : "storeName";
+      this.sortOrder = 1;
+    }
+    this.onSubmit();
+  }
+
+  // new api intagrated
+
+  RmList: any = [];
+
+ getAllRm1(): Observable<any> {
+  return this.eyeService.getRmList(this.headerFilters?.client).pipe(
+    tap((res: any) => {
+      if (res && res.code === 200) {
+         this.RmList = this.rmList;
+        this.eyeTestForm.get("RmList")?.setValue(this.RmList);
+      } else {
+        this.RmList = [];
+        this.eyeTestForm.get("RmList")?.setValue([]);
+      }
+    })
+  );
+}
+
+  onRmSelect(event: any) {
+    this.eyeTestForm.get("RmList")?.setValue(event);
+    this.getAllGroups(event);
+    this.cd.detectChanges();
+  }
+  eyeTestCardData: any = [];
+  getCardData() {
+    let finalStores: any = [];
+    let rmListValue: any = [];
+      const roleKeyTypeMap: any = {
+    superadmin: "rm",
+    admin: "cluster",
+    user: "store",
+  };
+  if (!this.keyType) {
+    this.keyType = roleKeyTypeMap[this.users?.role] || "store";
+  }
+    const {
+      fromDate,
+      toDate,
+      type,
+      dateType,
+      auditType,
+      storeList,
+      RmList,
+      complianceScore,
+      nearAddition,
+      keyType,
+      category,
+    } = this.eyeTestForm.value;
+    if (Array.isArray(this.eyeTestForm.value.storeList)) {
+      this.eyeTestForm.value.storeList.forEach((store: any) => {
+        finalStores.push(store.storeId);
+      });
+    }
+    if (Array.isArray(this.eyeTestForm.value.RmList)) {
+      this.eyeTestForm.value.RmList.forEach((el: any) => {
+        rmListValue.push(el?.email);
+      });
+    }
+    const demographics =
+      type !== "remote"
+        ? auditType === "all"
+          ? ["adult", "kids"]
+          : Array.isArray(auditType)
+          ? auditType
+          : [auditType]
+        : undefined;
+
+    const requestData: any = {
+      fromDate,
+      toDate,
+      type,
+      dateType,
+      storeId: finalStores,
+      RMList: rmListValue.length > 0 ? rmListValue : [this.users?.email],
+      complianceScore: complianceScore?.length
+        ? (complianceScore.map((el: any) => el.value))
+        : [],
+      nearAddition,
+        keyType : this.keyType,
+      ...(this.eyeTestForm.value.type !== "remote" && {
+        category,
+      }),
+     
+    };
+
+    if (demographics) {
+      requestData.demographics = demographics;
+    }
+    this.eyeService
+      .getCard(requestData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          this.eyeTestCardData = res?.code === 200 ? res?.data?.result : {};
+          this.cd.detectChanges();
+        },
+        error: () => {
+          this.eyeTestCardData = {};
+          this.cd.detectChanges();
+        },
+      });
+  }
+eyeView = false;
+selectedStepIndex = 0;
+conversationData: any = null;
+// Conv audio player state
+convIsPlaying = false;
+convCurrentTime = '0:00';
+convDuration = '0:00';
+convProgress = 0;
+convIsMuted = false;
+readonly waveformHeights: number[] = [
+  8, 22, 38, 52, 44, 28, 56, 42, 18, 32, 54, 46, 24, 40, 60, 50, 26, 44,
+  36, 18, 52, 38, 28, 46, 34, 20, 56, 42, 14, 36, 50, 30, 22, 44, 56, 38,
+  20, 46, 30, 16, 50, 36, 24, 54, 42, 28, 36, 20, 46, 32, 18, 40, 56, 44,
+  24, 36, 20, 50, 34, 22
+];
+  eyeTestView(data: any) {
+this.eyeView =true;
+
+     this.setPageData();
+    this.auditData = this.eyeService.getAuditData();
+    this.takeAudit =false
+    this.stepWiseProcess =[];
+    // this.route.queryParams.subscribe(params => {
+      this.storeId = data['storeId'];
+      this.currentAuditType = this.eyeTestForm.value.type
+      this.AuditId = data['_id'];
+      this.RmEmail = data['RMEmail'];
+      this.cluster = data['clusterName'];
+      this.eyeTestType = data?.comment ? "fake" : "genuine";
+    // });
+    this.getAuditdetails();
+    this.generateTimeOptions();
+if(this.currentAuditType === 'remote'){
+  this.dropdownList= [{ key: 'Sentence Transcription okay, but not matching with Predicted Step', item: 'Sentence Transcription okay, but not matching with Predicted Step' }, { key: 'Sentence Transcription not accurate, but matching with Predicted Step', item: 'Sentence Transcription not accurate, but matching with Predicted Step' }, { key: 'Step not accurate, not matching with Predicted Step', item: 'Step not accurate, not matching with Predicted Step' }, { key: 'others', item: 'Others' }]
+}else{
+  this.dropdownList= [{ key: 'Step Non-Compliance', item: 'Step Non-Compliance' }, { key: 'Power Bank Non-Compliance', item: 'Power Bank Non-Compliance' }, { key: 'Correct Instrument Not Used', item: 'Correct Instrument Not Used' }, { key: 'others', item: 'Others' }]
+}
+this.conversationData = null;
+this.selectedStepIndex = 0;
+this.convIsPlaying = false;
+this.convCurrentTime = '0:00';
+this.convDuration = '0:00';
+this.convProgress = 0;
+this.convIsMuted = false;
+this.eyeService.getConversationDetails(data.queueId).pipe(takeUntil(this.destroy$)).subscribe({
+  next: (res: any) => {
+    if (res?.code === 200) {
+      this.conversationData = res.data.result;
+      // Use API-provided duration immediately (S3 m4a often can't report duration until fully buffered)
+      if (this.conversationData?.duration) {
+        this.convDuration = this.conversationData.duration;
+      }
+    }
+  },
+  error: () => { this.conversationData = null; }
+});
+  }
+
+  settingsView() {
+    this.eyeService.setAuditData(this.headerFilters);
+    this.router.navigate(["/manage/trax/audit/settings"], {
+      queryParams: { type: this.eyeTestForm.value.type },
+    });
+  }
+rmList = [
+  {
+    _id: "1",
+    userName: "Anirban Ghosh",
+    email: "anirban.ghosh@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "2",
+    userName: "Avadhesh Sharma",
+    email: "avadhesh.kumar@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "3",
+    userName: "Ayush Gupta",
+    email: "ayush.gupta1@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "4",
+    userName: "Reshma Shetty",
+    email: "reshma.shetty@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "5",
+    userName: "Srinivas Reddy",
+    email: "srinivas.reddy@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "6",
+    userName: "Suresh Balaji R",
+    email: "suresh.r@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "7",
+    userName: "Thulasi Krishna",
+    email: "krishna.thulasi@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "8",
+    userName: "Kunal Sharma",
+    email: "kunal.sharma@lenskart.mobi",
+    role: "admin",
+  },
+  {
+    _id: "9",
+    userName: "Nikhil T S",
+    email: "nikhil.ts2@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "10",
+    userName: "Mukul",
+    email: "Mukul.upadhyay@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "11",
+    userName: "Anand Singh",
+    email: "anand.singh2@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "12",
+    userName: "Sudhir Kumar",
+    email: "sudhir.kumar2@lenskart.in",
+    role: "admin",
+  },
+    {
+    _id: "13",
+    userName: "Aniket Patole",
+    email: "aniket.patole@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "14",
+    userName: "Sachin",
+    email: "sachin.kumar4@lenskart.in",
+    role: "admin",
+  },
+  {
+    _id: "15",
+    userName: "Sandeep Kumar",
+    email: "sandeepkumar@thelenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "16",
+    userName: "Rajesh Yadav",
+    email: "rajesh.yadav2@lenskart.com",
+    role: "admin",
+  },
+  {
+    _id: "17",
+    userName: "Punjab-TBD",
+    email: "sandeep.kumar@thelenskart.com",
+    role: "admin",
+  },
+];
+
+getAllStores() {
+     this.traxService.getStoreslist({ clientId: this.headerFilters?.client, clusters: this.groups, city: [], }) .pipe(takeUntil(this.destroy$)) .subscribe({ next: (res: any) => { if (res && res?.code == 200) { this.storeList = res.data.storesData; this.eyeTestForm.get("storeList")?.setValue(this.storeList); this.loading1 = false; } else { this.storeList = []; this.loading1 = false; } }, error: (err) => { this.storeList = []; this.loading1 = false; }, }); } 
+getAllRm() { 
+  // this.eyeService.getRmList(this.headerFilters?.client) .pipe(takeUntil(this.destroy$)) .subscribe({ 
+  //   next: (res: any) => { if (res && res?.code == 200) { 
+      this.RmList = this.rmList; //for object based this will changed 
+this.eyeTestForm.get("RmList")?.setValue(this.rmList); 
+// } else { 
+//   this.RmList = []; this.eyeTestForm.get("RmList")?.setValue([]); 
+// } this.getAllGroups(); }, }); 
+} 
+getAllGroups(event?: any) { let rmList: any = []; this.ClusterList = []; if (Array.isArray(this.eyeTestForm.value.RmList)) { this.eyeTestForm.value.RmList.forEach((el: any) => { rmList.push(el?.email); }); } event?.map((el: any) => el?.email) || [this.users?.email]; const obj = { clientId: this.headerFilters?.client ? this.headerFilters.client : "", rmList: rmList.length > 0 ? rmList : [this.users?.email], }; this.eyeService.getClusters(obj).subscribe({ next: (res: any) => { if (res && res.code === 200) { this.ClusterList = res?.data?.result; this.eyeTestForm.get("ClusterList")?.setValue(this.ClusterList); this.groups = this.ClusterList.map((el: any) => el.clusterName); this.getAllStores(); } else { this.ClusterList = []; this.loading1 = false; } this.cd.detectChanges(); }, 
+error: (err) => { // console.error("Cluster fetch failed:", err); 
+this.ClusterList = []; this.loading1 = false; }, }); }
+
+
+  // second page
+   stepWiseProcess: any = [];
+   dropdownList: any = []
+  //  loading: boolean = true;
+  //  noData: boolean = false;
+ 
+   tableLoading = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+   historytableLoading = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+ 
+   selectedMinutes = '00';
+   selectedSeconds = '00';
+   minutesList: string[] = [];
+   secondsList: string[] = [];
+ 
+   auditDetails: any = [];
+   currentAuditType: any;
+   takeAudit: boolean = false;
+   storeId: any;
+   @ViewChild('tooltipContent') tooltipContent!: NgbTooltip;
+   @ViewChild('viewHistory') viewHistory: any;
+   @ViewChild('viewCancel') viewCancel: any;
+   @ViewChild('videoPlayer', { static: false }) videoPlayer!: ElementRef;
+   historyData: any = [];
+   AuditId: any;
+   viewHistoryData: any;
+   spokenLanguage:any='English'
+   modalRef: any;
+   disablecancel:boolean =  false
+  backNavigation(){
+    //  this.eyeService.auditFilterData = {
+    //   back: 'back',
+    //   auditDetails: this.auditDetails
+    // };
+    // this.router.navigate(['/manage/trax/audit'], {
+    //   queryParams: { date: this.dayjs(this.auditDetails.fileDate).format('YYYY-MM-DD'), typeValue: this.currentAuditType }
+    // });
+    this.eyeView =false;
+    this.takeAudit =false
+    this.stepWiseProcess =[];
+    this.onSubmit();
+    this.getCardData();
+  }
+ viewHistoryModel(item: any) {
+    let payload = {
+      id: item._id
+    }
+    this.eyeService.viewAuditHistory(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.viewHistoryData = res.data.result
+          const modalRef = this.modalService.open(this.viewHistory, {
+            size:'xl',
+            centered: true,
+            scrollable: true,
+          });
+        }
+      }
+    })
+  }
+  auditData:any;
+  eyeTestType:any;
+  RmEmail:any;
+  cluster:any;
+
+
+
+  // ngOnInit(): void {
+   
+  // }
+
+  setPageData() {
+    this.pageInfo.setTitle('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 },        
+    ])
+}
+  getAuditHistory() {
+    this.historytableLoading.next('loading');
+    let payload = {
+      id: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
+      type: this.currentAuditType
+    }
+    this.eyeService.getAuditHistory(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.historyData = res.data.result
+          this.historytableLoading.next('loaded')
+        } else {
+          this.historyData = []
+          this.historytableLoading.next('loaded')
+        }
+      },
+      error: (err: any) => {
+        this.historyData = []
+        this.historytableLoading.next('loaded')
+      }
+    }
+    )
+
+  }
+
+  getAuditdetails() {
+    this.tableLoading.next('loading');
+    let payload = {
+      id: this.AuditId,
+      type: this.currentAuditType
+    }
+    this.eyeService.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')
+
+  }
+
+  generateTimeOptions() {
+    this.minutesList = Array.from({ length: 60 }, (_, i) => this.formatNumber(i));
+    this.secondsList = Array.from({ length: 60 }, (_, i) => this.formatNumber(i));
+  }
+
+  formatNumber(num: number): string {
+    return num < 10 ? '0' + num : num.toString();
+  }
+
+  dropdownOpen: { [key: number]: { startTime: boolean; endTime: boolean; reason: boolean } } = {};
+
+  toggleDropdown(i: number, time: 'startTime' | 'endTime' | 'reason') {
+    const currentState = this.dropdownOpen[i]?.[time] ?? false;
+
+    Object.keys(this.dropdownOpen).forEach((key) => {
+      this.dropdownOpen[Number(key)] = { startTime: false, endTime: false, reason: false };
+    });
+
+    if (!this.dropdownOpen[i]) {
+      this.dropdownOpen[i] = { startTime: false, endTime: false, reason: false };
+    }
+
+    this.dropdownOpen[i][time] = !currentState;
+  }
+  getSecondsFromTime(time: string): number {
+    if (!time) return 0;
+    const [min, sec] = time.split(':').map(Number);
+    return (min * 60) + sec;
+  }
+    
+selectMinute(index: any, min: string, time: 'startTime' | 'endTime' | 'reason') {
+  const previousTime = this.stepWiseProcess[index]?.[time] || '00:00';
+
+  this.selectedMinutes = min;
+  const newTime = `${this.selectedMinutes}:${this.selectedSeconds}`;
+
+  const startTime = this.getSecondsFromTime(
+    time === 'startTime' ? newTime : this.stepWiseProcess[index]?.startTime
+  );
+  const endTime = this.getSecondsFromTime(
+    time === 'endTime' ? newTime : this.stepWiseProcess[index]?.endTime
+  );
+
+  const isValid = (startTime === 0 || endTime === 0) || startTime < endTime;
+
+  if (!isValid && time !== 'reason') {
+    this.ts.getWarningToast("Start time must be less than end time.");
+  
+    const [prevMin, prevSec] = previousTime.split(':');
+    this.selectedMinutes = prevMin;
+    this.selectedSeconds = prevSec;
+  
+    this.cd.detectChanges();
+    return;
+  }
+  
+
+  this.stepWiseProcess[index][time] = newTime;
+  this.cd.detectChanges();
+}
+
+selectSecond(index: any, sec: string, time: 'startTime' | 'endTime' | 'reason') {
+  const previousTime = this.stepWiseProcess[index]?.[time] || '00:00';
+
+  this.selectedSeconds = sec;
+  const newTime = `${this.selectedMinutes}:${this.selectedSeconds}`;
+
+  const startTime = this.getSecondsFromTime(
+    time === 'startTime' ? newTime : this.stepWiseProcess[index]?.startTime
+  );
+  const endTime = this.getSecondsFromTime(
+    time === 'endTime' ? newTime : this.stepWiseProcess[index]?.endTime
+  );
+
+  if ((time !== 'reason') && startTime !== 0 && endTime !== 0 && startTime >= endTime) {
+    this.ts.getWarningToast("Start time must be less than end time.");
+  
+    const [prevMin, prevSec] = previousTime.split(':');
+    this.selectedMinutes = prevMin;
+    this.selectedSeconds = prevSec;
+  
+    this.cd.detectChanges();
+    return;
+  }
+
+  this.stepWiseProcess[index][time] = newTime;
+  this.cd.detectChanges();
+}
+ 
+  
+
+  selectReason(index: number, key: any, time: any) {
+    this.stepWiseProcess[index][time] = key;
+  
+    if (key === 'others') {
+      this.stepWiseProcess[index].otherReason = ''; 
+    } else {
+      this.stepWiseProcess[index].otherReason = null; 
+    }
+  
+    this.cd.detectChanges();
+  }
+  
+
+  selectHumanVerified(index: number, value: boolean) {
+    this.stepWiseProcess[index].auditedStatus = value;
+  }
+  findcount(){
+    let count = 0
+    this.stepWiseProcess.forEach((data:any)=>{
+      if(data.auditedStatus!==data.AIStatus){
+        count++
+      }
+
+
+    })
+    return count
+  }
+  getValidaForm(){
+    let errorCount = 0
+    this.stepWiseProcess.forEach((data:any)=>{
+      if(data.reason==='others'){
+        data.otherReason =  data.otherReason.trim()
+      }
+      if(data.auditedStatus!==data.AIStatus){
+        if(!data.reason || data.reason&&data.reason==='others' && !data.otherReason){
+          errorCount++
+        }
+      }
+    })
+    if(errorCount>0){
+      this.disablecancel =  false
+      this.ts.getWarningToast("Comments are mandatory for inverse human audited responses")
+  }
+    return errorCount
+  }
+  onsubmit(isReSend?:boolean) {
+    this.disablecancel =  true
+    // if((this.stepWiseProcess.filter((data:any)=>data.auditedStatus===true).length+this.stepWiseProcess.filter((data:any)=>data.auditedStatus===false).length)!==this.stepWiseProcess.length){
+    //   this.toastService.getErrorToast("Oops! Looks like the eye test audit isn’t complete yet. Audit all eye test steps before submitting.")
+    //   this.disablecancel =  false
+    //   return
+    // }
+    // if(this.getValidaForm()===0){
+
+      let payload = {
+        id: this.AuditId,
+        type: this.currentAuditType,
+        fileId: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
+        auditedSteps: this.stepWiseProcess.filter((data:any)=>data.auditedStatus===true).length,
+        auditStatus:this.auditDetails?.auditType === 'Audit'? "Audited":"Re-Audited",
+        overRides:this.findcount(),
+        spokenLanguage: this.spokenLanguage,
+        steps: this.stepWiseProcess,
+        cluster: this.cluster,  
+         RMEmail: this.RmEmail,
+          clientId: this.auditDetails?.storeId?.split("-")[0],
+           ...(typeof isReSend != 'undefined' && {isReSend:isReSend}) 
+      }
+      this.eyeService.submitAudit(payload).pipe(takeUntil(this.destroy$)).subscribe({
+        next: (res: any) => {
+          if (res && res?.code == 200) {
+            console.log(res);
+            
+            if(res?.message == "Do you want resend mail?") {
+ const dialogRef = this.modalService.open(SendAlertComponent,{centered:true,size:'md'});
+            dialogRef.componentInstance.message = res.message;
+            dialogRef.result.then((result)=>{
+              this.onsubmit(result);
+            })
+          }
+          else {
+            setTimeout(()=>{
+              this.getAuditdetails();
+            },1000)
+            this.ts.getSuccessToast(`${this.auditDetails?.auditType} Submitted Successfully`)
+
+          }
+            // this.disablecancel =  false
+          }
+        },
+        error: (err: any) => {
+          this.ts.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message)
+         } 
+      })
+    // }
+
+
+  }
+  startAudit(value: any) {
+    this.disablecancel =  true
+    this.takeAudit = true;
+    this.auditDetails.auditStatus = 'Re-Audited'
+    let payload = {
+      id: this.AuditId
+    }
+    this.eyeService.getAuditFile(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+        
+          this.getAuditdetails();
+        }
+      },
+      error: (err: any) => {
+       this.ts.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message)
+      }
+    })
+
+
+  }
+
+  onYes(){
+    let payload = {
+      id: this.AuditId,
+        type: this.currentAuditType,
+        fileId: this.currentAuditType === 'remote' ? this.auditDetails.engagementId : this.auditDetails.queueId,
+    }
+    this.eyeService.cancelAuditFile(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.getAuditdetails();
+          this.ts.getSuccessToast(`${this.auditDetails?.auditType} Cancelled Successfully`)
+          this.modalRef.dismiss();
+        }
+      },
+      error: (err: any) => {
+        this.ts.getErrorToast(err?.error?.error ? err?.error?.error : err?.error?.message)
+        this.modalRef.dismiss();
+      }
+    })
+
+    this.takeAudit =false
+  }
+  cancel(){
+    this.modalRef = this.modalService.open(this.viewCancel, {
+      size:'md',
+      centered: true,
+      scrollable: true,
+    });  
+  }
+  OnCancel(){
+    this.modalRef.dismiss();
+  }
+
+  onEyeTestAiSearch(): void {
+    if (!this.eyeTestChatQuery.trim()) return;
+    if (!this.aiSessionId) this.initAiSession();
+
+    this.showEyeTestAiMessage = true;
+    this.eyeTestAiMessage = null;
+
+    const stores: string[] = Array.isArray(this.eyeTestForm.value.storeList)
+      ? this.eyeTestForm.value.storeList.map((s: any) => s.storeName)
+      : [];
+
+    const startDate = this.selectedDateRange?.startDate
+      ? this.dayjs(this.selectedDateRange.startDate, 'DD-MM-YYYY').format('YYYY-MM-DD')
+      : '';
+    const endDate = this.selectedDateRange?.endDate
+      ? this.dayjs(this.selectedDateRange.endDate, 'DD-MM-YYYY').format('YYYY-MM-DD')
+      : '';
+
+    const payload = {
+      user_id: this.users?._id || '',
+      session_id: this.aiSessionId,
+      session_date: new Date().toISOString().slice(0, 10),
+      session_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      message: this.eyeTestChatQuery,
+      analyticsType: 'eyetest',
+      config: {
+        selected_stores: stores,
+        date_range: { start: startDate, end: endDate },
+        selected_products: [],
+        selected_model: this.selectedModel
+      }
+    };
+
+    this.eyeService.chatStream(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (text: string) => { this.eyeTestAiMessage = text; },
+      error: () => { this.eyeTestAiMessage = 'Unable to get AI response. Please try again.'; }
+    });
+  }
+
+  private getConvAudio(): HTMLAudioElement | null {
+    return document.querySelector('#conv-audio') as HTMLAudioElement;
+  }
+
+  toggleConvPlay(): void {
+    const audio = this.getConvAudio();
+    if (!audio) return;
+    if (this.convIsPlaying) {
+      audio.pause();
+      this.convIsPlaying = false;
+    } else {
+      audio.play();
+      this.convIsPlaying = true;
+    }
+  }
+
+  onConvTimeUpdate(): void {
+    const audio = this.getConvAudio();
+    if (!audio) return;
+    this.convCurrentTime = this.formatConvTime(audio.currentTime);
+    if (audio.duration && isFinite(audio.duration)) {
+      this.convProgress = audio.currentTime / audio.duration;
+    }
+  }
+
+  onConvLoaded(): void {
+    const audio = this.getConvAudio();
+    if (!audio) return;
+    // Only use audio.duration if it's a valid finite number; otherwise keep API-provided duration
+    if (audio.duration && isFinite(audio.duration)) {
+      this.convDuration = this.formatConvTime(audio.duration);
+    }
+  }
+
+  formatConvTime(seconds: number): string {
+    if (!seconds || isNaN(seconds)) return '0:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s < 10 ? '0' + s : s}`;
+  }
+
+  seekConvAudio(event: MouseEvent): void {
+    const audio = this.getConvAudio();
+    if (!audio || !audio.duration) return;
+    const track = event.currentTarget as HTMLElement;
+    const ratio = event.offsetX / track.offsetWidth;
+    audio.currentTime = ratio * audio.duration;
+  }
+
+  toggleConvMute(): void {
+    const audio = this.getConvAudio();
+    if (!audio) return;
+    this.convIsMuted = !this.convIsMuted;
+    audio.muted = this.convIsMuted;
+  }
+
+  playFromStep(step: any): void {
+    const audio = this.getConvAudio();
+    if (!audio || !step?.startTime) return;
+    const parts = String(step.startTime).split(':').map(Number);
+    let seconds = 0;
+    if (parts.length === 3) {
+      seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
+    } else if (parts.length === 2) {
+      seconds = parts[0] * 60 + parts[1];
+    }
+    audio.currentTime = seconds;
+    audio.play();
+    this.convIsPlaying = true;
+  }
+
+  // ── AI Assistant ──────────────────────────────────────────
+  parseAiMarkdown(text: string): SafeHtml {
+    if (!text) return this.sanitizer.bypassSecurityTrustHtml('');
+    let html = text
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      .replace(/^### (.+)$/gm, '<h5>$1</h5>')
+      .replace(/^## (.+)$/gm, '<h4>$1</h4>')
+      .replace(/^# (.+)$/gm, '<h3>$1</h3>')
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/__(.+?)__/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      .replace(/_(.+?)_/g, '<em>$1</em>')
+      .replace(/^\s*[-*] (.+)$/gm, '<li>$1</li>')
+      .replace(/^\s*\d+\. (.+)$/gm, '<li>$1</li>')
+      .replace(/(<li>.*<\/li>)/gs, '<ul>$1</ul>')
+      .replace(/\n{2,}/g, '</p><p>')
+      .replace(/\n/g, '<br>');
+    html = `<p>${html}</p>`;
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+
+  aiChatQuery = '';
+  aiResponseText = '';
+  isAiLoading = false;
+  private aiSessionId = '';
+
+  private initAiSession(): void {
+    this.aiSessionId = `EYETEST_${Date.now()}`;
+  }
+
+  sendChatMessage(): void {
+    if (!this.aiChatQuery.trim() || this.isAiLoading) return;
+    if (!this.aiSessionId) this.initAiSession();
+
+    const stores: string[] = Array.isArray(this.eyeTestForm.value.storeList)
+      ? this.eyeTestForm.value.storeList.map((s: any) => s.storeId)
+      : [];
+
+    const startDate = this.selectedDateRange?.startDate
+      ? this.dayjs(this.selectedDateRange.startDate, 'DD-MM-YYYY').format('YYYY-MM-DD')
+      : '';
+    const endDate = this.selectedDateRange?.endDate
+      ? this.dayjs(this.selectedDateRange.endDate, 'DD-MM-YYYY').format('YYYY-MM-DD')
+      : '';
+
+    const payload = {
+      user_id: this.users?._id || '',
+      session_id: this.aiSessionId,
+      session_date: new Date().toISOString().slice(0, 10),
+      session_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      message: this.aiChatQuery,
+      analyticsType: 'eyetest',
+      config: {
+        selected_stores: stores,
+        date_range: { start: startDate, end: endDate },
+        selected_products: ['EyeTest'],
+        selected_model: this.selectedModel
+      }
+    };
+
+    this.isAiLoading = true;
+    this.aiResponseText = '';
+    this.eyeService.chatStream(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (text: string) => { this.aiResponseText = text; },
+      error: () => { this.isAiLoading = false; },
+      complete: () => { this.isAiLoading = false; }
+    });
+  }
+
+}