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

package/src/lib/components/gallery/gallery.component.ts

@@ -0,0 +1,3527 @@
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import dayjs, { Dayjs } from "dayjs";
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+import { TimePeriod } from 'ngx-daterangepicker-material/daterangepicker.component';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { TraxService } from '../../services/trax.service';
+import { Subject, debounceTime, distinctUntilChanged, filter, takeUntil } from "rxjs";
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastService } from 'tango-app-ui-shared';
+import { Location, formatDate } from '@angular/common';
+import { ExportGalleryComponent } from '../export-gallery/export-gallery.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { AddTaskComponent } from '../add-task/add-task.component';
+import { TaskLogsComponent } from '../task-logs/task-logs.component';
+import { ApprovalPopupComponent } from '../approval-popup/approval-popup.component';
+import { ImagePopupComponent } from '../image-popup/image-popup.component';
+import { interval, Subscription } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+import { BulkcreationmodelComponent } from '../add-multitask/bulkcreationmodel/bulkcreationmodel.component';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'lib-gallery',
+  templateUrl: './gallery.component.html',
+  styleUrl: './gallery.component.scss'
+})
+export class GalleryComponent implements OnInit, OnDestroy, AfterViewInit {
+  isFullscreen: boolean = false;
+  fullscreenVideoElement: HTMLVideoElement | null = null;
+  dayjs = dayjs
+  notifyCount = 0
+  selectedDateRange: any = {};
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate = m > this.dayjs();
+    return isValidDate ? 'invalid-date' : false;
+  }
+  galleryForm: FormGroup
+  type: any = [{ value: 'checklist', label: 'Checklist' },
+  { value: 'task', label: 'Task' },
+  { value: 'aiChecklist', label: 'AI Checklist' }
+  ]
+  filtertype: any = [{ value: 'Clusters', label: 'Clusters' },
+  { value: 'Teams', label: 'Teams' }
+  ]
+  checklists: any = []
+  answerType = [
+    { label: 'All Answer Type', value: 'all' },
+    { label: 'Descriptive Answer', value: 'descriptive' },
+    { label: 'A/B Question', value: 'yes/no' },
+    { label: 'Multiple Choice Question - Single Answer', value: 'multiplechoicesingle' },
+    { label: 'Multiple Choice Question - Multiple Answer', value: 'multiplechoicemultiple' },
+    { label: 'Capture Image as answer', value: 'image' },
+    { label: 'Capture Image with Description', value: 'descriptiveImage' },
+    { label: 'Capture video as answer', value: 'video' },
+    { label: 'Capture Multiple Image', value: 'multipleImage' },
+    { label: 'Date As Answer', value: 'date' },
+    { label: 'Time As Answer', value: 'time' },
+    { label: 'Linear Scale', value: 'linearscale' },
+    { label: 'Dropdown as an answer', value: 'dropdown' },
+    { label: 'Capture Image/Video as Answer', value: 'image/video' }
+  ]
+  headerFilters: any = {};
+  storeList: any[] = []
+  private destroy$ = new Subject();
+  checklistData: any = {}
+  stores: any = [];
+  groups: any = [];
+  teams: any = [];
+  items: any;
+  paginatedItems: any;
+  itemsPerPage = 10;
+  currentPage = 1;
+  totalItems = 0;
+  viewChecklistsData: any;
+  loading: boolean = true;
+  noData: boolean = false;
+  viewloading: boolean = true;
+  viewnoData: boolean = false;
+  offset: any = 1;
+  limit: any = 1;
+  paginationSizes = [1]
+  totalCount: any;
+  viewChecklistsoptions: any = {};
+  mobileusageData: any;
+  mobileusageDataList: any = []
+  selectAll: any
+  storeOpencloseView: any;
+  queryParams: any;
+  customerunattendedData: any;
+  sectionName: any = 'all';
+  questionName: any = 'all';
+  clientData: any;
+  checklistName: any = '';
+  ClusterList: any = [];
+  TeamsList: any = [];
+  userList: any = [];
+  environment: any;
+  showflag: boolean = true;
+  selectedSection: any = []
+  tempselectedSection: any = []
+  showmulti: boolean = true;
+  showsingle: boolean = false
+  showfilter: boolean = false
+  previewType: any = 'image';
+  checkListDescription: any = ''
+  answerFilter: any = []
+  approvalStatus: boolean = false
+  allapprovalStatus: boolean = false
+  category: string = 'all'
+  videoChecklist = ['customerunattended', 'staffleftinthemiddle', 'remoteoptometrist', 'eyetest', 'cleaning', 'scrum', 'suspiciousactivity']
+  imageChecklist = ['mobileusagedetection', 'uniformdetection', 'storehygienemonitoring', 'customertrial', 'inventorycount', 'carsattended', 'numberplateinfo', 'vehicle_check_in', 'outsidebusinesshoursqueuetracking', 'halfshutter','tvcompliance','cameratampering','staffgrouping','employeeCount']
+  boximageChecklist = ['queuealert', 'boxalert', 'suspiciousfootfall', 'drinking', 'bagdetection']
+  combinedChecklist = [...this.videoChecklist, ...this.imageChecklist, ...this.boximageChecklist, 'storeopenandclose']
+  pdfExportTypes: any = ['custom', 'task', 'storeopenandclose', 'cleaning', 'scrum', 'outsidebusinesshoursqueuetracking', 'halfshutter','tvcompliance','cameratampering','queuealert','boxalert','staffgrouping']
+  csvExportTypes: any = ['custom', 'task', 'storeopenandclose', 'cleaning', 'scrum', 'inventorycount', 'carsattended', 'numberplateinfo', 'outsidebusinesshoursqueuetracking', 'halfshutter','tvcompliance','cameratampering','boxalert','queuealert','staffgrouping','employeeCount']
+  queueAlertView: any;
+  viewImage: any;
+  zoneList: any = [];
+  approveFilter: any = 'all'
+  userDetails: any
+  timeoutId: any;
+  selectedStores: any = [];
+  selectedUsers: any = [];
+  inputDataTask: any;
+  otherTaskData: any
+  selectAllTask: boolean = false
+  totalrecordcount: number = 0
+  selectedRecordCount: number = 0
+  refImage: any[] = [];
+  exportConfig: any;
+  activeDiv?:string;
+  constructor(private fb: FormBuilder, public gs: GlobalStateService, private traxService: TraxService, private cd: ChangeDetectorRef, private modalService: NgbModal,
+    private route: ActivatedRoute, private router: Router, private toastService: ToastService, private location: Location, private pageInfo: PageInfoService, private sanitizer: DomSanitizer
+  ) {
+    this.route?.queryParams
+      ?.pipe(takeUntil(this.destroy$))
+      .subscribe((params) => {
+        this.queryParams = params;
+        if (this.queryParams && this.queryParams.ChecklistDate) {
+          this.selectedDateRange = {
+            startDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY'),
+            endDate: this.queryParams.ChecklistDate ? this.dayjs(this.queryParams.ChecklistDate).format('DD-MM-YYYY') : this.dayjs().subtract(1, 'day').format('DD-MM-YYYY')
+          }
+          this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe({
+            next: (data: any) => {
+              if (data?.client) {
+                this.headerFilters = data;
+                this.getAllStores();
+              } else {
+                let userinfo = JSON.parse(localStorage.getItem("user-info") || "")
+                if (userinfo && userinfo?.clientId) {
+                  this.headerFilters.client = userinfo?.clientId
+                  this.getAllStores();
+                }
+              }
+            },
+          });
+          if (this.queryParams.viewRedo) {
+            this.galleryForm.get("viewRedo")?.setValue(true)
+          }
+        } else {
+          this.selectedDateRange = {
+            startDate: this.dayjs().subtract(1, 'day').format('DD-MM-YYYY'),
+            endDate: this.dayjs().subtract(1, 'day').format('DD-MM-YYYY')
+          }
+        }
+      })
+    this.gs.environment.pipe(takeUntil(this.destroy$)).subscribe((env) => {
+      if (env) {
+        this.environment = env
+      }
+    })
+  }
+  ngAfterViewInit(): void {
+    if (this.headerFilters.client === "464") {
+      this.requestPermission()
+      this.checkNotifications()
+    }
+  }
+  checktodayDate(checklistDate: any) {
+    const givenDate = checklistDate;
+    const isSameDate = dayjs().isSame(dayjs(givenDate), 'day');
+
+    return isSameDate
+  }
+  ngOnDestroy(): void {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  requestPermission() {
+    if ('Notification' in window) {
+      Notification.requestPermission().then(permission => {
+        // console.log(permission)
+        // if (permission === 'granted') {
+        //   setTimeout(() => this.notify(), 1000); // short delay helps in some browsers
+        // }
+      });
+    } else {
+      console.error('Browser does not support notifications.');
+    }
+  }
+  notify(data: any) {
+    for (let element of data) {
+      if (Notification.permission === 'granted') {
+        this.pageInfo.updateTitle('⚠️ Vehicle Detection');
+
+        this.cd.detectChanges();
+        const notification = new Notification(`🚗 Vehicle Detection on slot ${element?.slotNo}`, {
+          body: ` Detection occurred at ${element.captureTime}`,
+          icon: './assets/tango/layout/tango-fav.png' // Optional
+        });
+        // console.log(notification)
+        notification.onshow = () => console.log('Notification shown');
+        notification.onclick = () => {
+          // console.log('Notification clicked');
+
+          this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
+            this.router.navigate(['/manage/trax/gallery'],
+              {
+                queryParams: {
+                  ChecklistDate: dayjs().format('YYYY-MM-DD'),
+                  checklistType: "ai",
+                  sourceCheckList_id: "vehicle_check_in",
+                },
+                relativeTo: this.route,
+                queryParamsHandling: 'merge',
+              }
+            )
+          })
+          notification.close();
+        };
+        notification.onerror = (e) => console.error('Notification error', e);
+        notification.onclose = () => {
+          this.pageInfo.updateTitle('Gallery');
+
+        };
+      }
+    }
+  }
+  refreshnow() {
+    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
+      this.router.navigate(['/manage/trax/gallery'],
+        {
+          queryParams: {
+            ChecklistDate: dayjs().format('YYYY-MM-DD'),
+            checklistType: "ai",
+            sourceCheckList_id: "vehicle_check_in",
+          },
+          relativeTo: this.route,
+          queryParamsHandling: 'merge',
+        }
+      )
+    })
+  }
+
+  ngOnInit(): void {
+    this.createForm();
+    this.setPageData();
+    this.userDetails = JSON.parse(localStorage.getItem("user-info") || "")
+    if (this.queryParams.coverage === 'user') {
+      this.galleryForm.get("filtertype")?.setValue('Teams')
+    }
+    if (this.queryParams.coverage === 'stores') {
+      this.galleryForm.get("filtertype")?.setValue('Clusters')
+    }
+    if(this.queryParams.filterType) {
+      this.galleryForm.get('type')?.setValue(this.queryParams.filterType)
+    }
+    this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe({
+      next: (data: any) => {
+        if (data?.client) {
+          this.headerFilters = data;
+          if (!this.queryParams.ChecklistDate && this.headerFilters.client && (this.headerFilters?.client === "459" || this.headerFilters?.client === "464")) {
+            this.selectedDateRange = {
+              startDate: this.dayjs().format('DD-MM-YYYY'),
+              endDate: this.dayjs().format('DD-MM-YYYY')
+            }
+            this.galleryForm.get('fromDate')?.setValue(dayjs(this.selectedDateRange.startDate, 'DD-MM-YYYY').format('YYYY-MM-DD'))
+            this.galleryForm.get('toDate')?.setValue(dayjs(this.selectedDateRange.endDate, 'DD-MM-YYYY').format('YYYY-MM-DD'))
+          }
+          this.clientDetails();
+          this.getAllGroups();
+          this.getAllStores();
+          this.getAllUsers();
+          this.getAllTeams();
+        } else {
+          let userinfo = JSON.parse(localStorage.getItem("user-info") || "")
+          if (userinfo && userinfo?.clientId) {
+            this.headerFilters.client = userinfo?.clientId
+
+            if (!this.queryParams.ChecklistDate && this.headerFilters.client && (this.headerFilters?.client === "459" || this.headerFilters?.client === "464")) {
+              this.selectedDateRange = {
+                startDate: this.dayjs().format('DD-MM-YYYY'),
+                endDate: this.dayjs().format('DD-MM-YYYY')
+              }
+              this.galleryForm.get('fromDate')?.setValue(dayjs(this.selectedDateRange.startDate, 'DD-MM-YYYY').format('YYYY-MM-DD'))
+              this.galleryForm.get('toDate')?.setValue(dayjs(this.selectedDateRange.endDate, 'DD-MM-YYYY').format('YYYY-MM-DD'))
+            }
+            this.clientDetails();
+            this.getAllGroups();
+            this.getAllStores();
+            this.getAllUsers();
+            this.getAllTeams();
+          }
+        }
+
+
+
+      },
+    });
+  }
+
+
+
+  checkNotifications() {
+    this.traxService.checkNotificationCount(this.headerFilters.client).subscribe({
+      next: (res: any) => {
+        clearTimeout(this.timeoutId)
+        if (res && res.code == 200 && res.data.length > 0) {
+          this.notifyCount = this.notifyCount + res.data.length;
+          this.cd.detectChanges();
+          this.notify(res.data);
+        }
+
+        // Schedule the next call
+        this.timeoutId = setTimeout(() => this.checkNotifications(), 10000);
+      },
+      error: (err) => {
+        console.error('Error:', err);
+        this.requestPermission();
+
+        // Retry even on error
+        setTimeout(() => this.checkNotifications(), 10000);
+      }
+    });
+  }
+  setPageData() {
+    this.pageInfo.updateTitle('Gallery');
+    this.pageInfo.setDescription("");
+    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 },
+    ]);
+
+  }
+  getAllGroups() {
+    this.traxService.getclusters({ clientId: this.headerFilters.client, group: [], city: [] }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.ClusterList = res.data.groupData
+        } else {
+          this.ClusterList = []
+        }
+      }
+    })
+  }
+  getAllTeams() {
+    this.traxService.getAllTeams(this.headerFilters.client).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.TeamsList = res.data
+        } else {
+          this.TeamsList = []
+        }
+      }
+    })
+  }
+  clientDetails() {
+    this.traxService.getclient({ clientId: this.headerFilters.client }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.clientData = res.data.result
+        }
+      }
+    })
+  }
+
+  onfilterChange(val: any){
+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.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+          }
+        }
+      })
+  }
+
+  redoChanged(event: any) {
+    if (event.target.checked) {
+      this.galleryForm.get("viewRedo")?.setValue(true)
+    } else {
+      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.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+          }
+        }
+      })
+      this.galleryForm.get("viewRedo")?.setValue(false)
+    }
+
+  }
+
+  flagChanged(event: any) {
+    if (event.target.checked) {
+      this.galleryForm.get("viewFlag")?.setValue(true)
+    } else {
+      this.galleryForm.get("viewFlag")?.setValue(false)
+    }
+  }
+  onchecklistreset() {
+    this.selectedStores = [];
+    this.selectedUsers = [];
+    this.totalrecordcount = 0;
+    this.selectedRecordCount = 0
+    this.selectAllTask = false
+
+    this.galleryForm.get("filter")?.setValue('')
+    this.answerFilter = []
+    this.showmulti = true
+    this.showsingle = false
+    if (this.galleryForm.value.type === 'checklist') {
+      this.getChecklistQA(false);
+    } else {
+      this.getTaskQA(this.galleryForm.value.type)
+    }
+
+  }
+
+  resetValidation() {
+    this.isCustomDate = (m: dayjs.Dayjs) => {
+      // Check if the given date is before yesterday
+      return m.isAfter(this.dayjs(), 'day') ? 'invalid-date' : false;
+    };
+  }
+
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      let clientinfo = JSON.parse(localStorage.getItem("client-details") || "")
+      let userinfo = JSON.parse(localStorage.getItem("user-info") || "")
+      if (clientinfo || userinfo) {
+        if (clientinfo?.traxDateRange === 7 || userinfo?.traxDateRange === 7) {
+          this.isCustomDate = (m: dayjs.Dayjs) => {
+            const isValidDate =
+              m > this.dayjs() || m > this.dayjs(event.startDate.add(2, "days"));
+            return isValidDate ? "invalid-date" : false;
+          };
+        } else {
+          this.isCustomDate = (m: dayjs.Dayjs) => {
+            const isValidDate =
+              m > this.dayjs() || m > this.dayjs(event.startDate.add(30, "days"));
+            return isValidDate ? "invalid-date" : false;
+          }
+        }
+      }
+
+    }
+    // this.getAllCheckLists(false)
+  }
+  selectAllStore(event: any) {
+    if (event.target.checked) {
+      this.selectAll = event.target.checked;
+      this.mobileusageDataList.forEach((obj: any) => (obj.checked = this.selectAll));
+      let store = this.mobileusageDataList.filter((el: any) => el.checked)
+      const change = JSON.parse(JSON.stringify(store))
+      this.galleryForm.get('storeList')?.setValue(change)
+    } else {
+      this.galleryForm.get('zoneList')?.setValue([])
+      this.selectAll = false
+      this.mobileusageDataList.forEach((obj: any) => (obj.checked = this.selectAll));
+      this.galleryForm.get('storeList')?.setValue([])
+    }
+  }
+  updateCheck(event: any, storedata: any) {
+    this.mobileusageDataList.forEach((ele: any) => {
+      if (ele.storeId === storedata.storeId) {
+        ele.checked = event.target.checked;
+      }
+    });
+    let store = this.mobileusageDataList.filter((data: any) => data.checked);
+    const change = JSON.parse(JSON.stringify(store))
+
+    this.galleryForm.get('storeList')?.setValue(change)
+    this.galleryForm.get('zoneList')?.setValue([])
+    this.cd.detectChanges()
+    this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+
+  }
+  createForm() {
+    this.galleryForm = this.fb.group({
+      fromDate: [dayjs(this.selectedDateRange.startDate, "DD-MM-YYYY").format("YYYY-MM-DD")],
+      toDate: [dayjs(this.selectedDateRange.endDate, "DD-MM-YYYY").format('YYYY-MM-DD')],
+      type: 'checklist',
+      filtertype: 'Clusters',
+      checklistName: '',
+      storeList: [this.stores],
+      userList: [this.userList],
+      answerType: ['all'],
+      viewFlag: [false],
+      viewRedo: [false],
+      checkListType: "custom",
+      sourceCheckList_id: "",
+      ClusterList: [this.groups],
+      TeamsList: [this.TeamsList],
+      checkListDescription: "",
+      filter: "",
+      zoneList: [this.zoneList]
+    })
+    // console.log(this.galleryForm.value)
+
+  }
+
+  datechange(event: TimePeriod) {
+    if (!event.endDate || !event.startDate) {
+      return
+    }
+    this.removeQueryParams()
+    this.resetValidation();
+    this.galleryForm.get('fromDate')?.setValue(event.startDate.format('YYYY-MM-DD'))
+    this.galleryForm.get('toDate')?.setValue(event.endDate.format('YYYY-MM-DD'))
+    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.stores = res.data.storesData
+          this.galleryForm.get('storeList')?.setValue(this.storeList)
+          if (this.queryParams.checklistType == 'task' || this.galleryForm.value.type === 'task') {
+            this.getAllTasks(false)
+          } else {
+            this.getAllCheckLists(false);
+          }
+        }
+      },
+      error: (err) => {
+        if (this.queryParams.checklistType == 'task' || this.galleryForm.value.type === 'task') {
+          this.getAllTasks(false)
+        } else {
+          this.getAllCheckLists(false);
+        }
+      }
+    })
+
+  }
+  getAllUsers() {
+    let teamsList = this.galleryForm.value.TeamsList.map((data: any) => data.teamName)
+    this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          if (this.queryParams.userEmail) {
+            let getuser = res.data.filter((ele: any) => ele.userEmail === this.queryParams.userEmail)
+            this.userList = getuser;
+            this.galleryForm.get('userList')?.setValue(this.userList)
+            if (this.queryParams.checklistType == 'task') {
+              this.getAllTasks(true)
+            } else {
+              this.getAllCheckLists(true);
+            }
+          } else {
+            this.userList = res.data;
+            this.galleryForm.get('userList')?.setValue(this.userList)
+            if ((this.queryParams.storeId)) {
+              this.galleryForm.get('userList')?.setValue([])
+              this.galleryForm.get('filtertype')?.setValue('Clusters')
+            }
+            if (this.queryParams.checklistType == 'task') {
+              this.getAllTasks(true)
+            } else {
+              this.getAllCheckLists(true);
+            }
+          }
+        }
+      }
+    })
+
+
+
+
+  }
+  getAllStores() {
+    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;
+          if (this.queryParams.storeId) {
+            this.galleryForm.get('userList')?.setValue([])
+            this.storeList = res.data.storesData;
+            let getstore = this.storeList.filter((ele: any) => ele.storeId === this.queryParams.storeId)
+            this.stores = getstore
+            this.galleryForm.get('storeList')?.setValue(this.stores)
+
+            if (this.queryParams.checklistType == 'task') {
+              this.getAllTasks(true)
+            } else {
+              this.getAllCheckLists(true);
+            }
+          } else if (this.queryParams.userEmail) {
+            this.galleryForm.get('storeList')?.setValue([])
+            this.galleryForm.get('filtertype')?.setValue('Teams')
+          } else {
+            this.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+            if (this.queryParams.checklistType == 'task') {
+              this.getAllTasks(true)
+            } else {
+              this.getAllCheckLists(true);
+            }
+          }
+        } else {
+          this.storeList = [];
+          this.viewloading = false;
+          this.viewnoData = true,
+            this.loading = false;
+          this.noData = true;
+
+        }
+      },
+      error: (err) => {
+
+        this.storeList = [];
+        this.viewloading = false;
+        this.viewnoData = true,
+          this.loading = false;
+        this.noData = true;
+
+      },
+    });
+  }
+
+  getAllCheckLists(type: any) {
+    let stores = this.stores?.map((data: any) => data.storeId)
+    const payload = {
+      fromDate: this.galleryForm.get('fromDate')?.value,
+      toDate: this.galleryForm.get('toDate')?.value,
+      storeId: stores,
+      clientId: this.headerFilters?.client,
+      sortColumnName: "checkListName",
+      type:this.galleryForm.get('type')?.value,
+      sortBy: 1
+    }
+    this.traxService.getChecklists(payload).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.checklists = res.data.checklistData
+
+
+          setTimeout(() => {
+            if (this.queryParams.sourceCheckList_id && this.queryParams.checklistType) {
+              this.galleryForm.get('sourceCheckList_id')?.setValue(this.queryParams.sourceCheckList_id)
+              this.galleryForm.get('checkListType')?.setValue(this.queryParams.checklistType)
+              if(payload?.type) {
+                this.galleryForm.get('type')?.setValue(payload?.type)
+              }
+              else {
+                this.galleryForm.get('type')?.setValue('checklist')
+              }
+              this.getchecklistDetails();
+
+              let getchecklist = this.checklists.filter((ele: any) => ele.sourceCheckList_id === this.queryParams.sourceCheckList_id)
+              if (getchecklist && getchecklist.length > 0) {
+                if (getchecklist[0].checkListType === "AI") {
+                  this.showflag = false
+                }
+                this.galleryForm.get('checklistName')?.setValue(getchecklist[0]?.checkListName)
+                this.galleryForm.get('checkListDescription')?.setValue(getchecklist[0]?.checkListDescription)
+                this.checklistName = getchecklist[0]?.checkListName
+              }
+              if (this.queryParams.checklistType === 'storeopenandclose') {
+                this.select = 'storeopenandclose'
+                this.storeOpencloselist(false)
+              } else if (this.boximageChecklist.includes(this.queryParams.checklistType)) {
+                this.select = this.queryParams.checklistType
+                this.queuealertlist(false)
+              } else if (this.videoChecklist.includes(this.queryParams.checklistType)) {
+                this.select = this.queryParams.checklistType;
+                this.customerunattendedlist(false)
+              } else if (this.imageChecklist.includes(this.queryParams.checklistType)) {
+                this.select = this.queryParams.checklistType;
+                this.getmobileUsageDatalist(false)
+              }
+
+            } else {
+
+              if (this.galleryForm.value && this.galleryForm.value.checkListType != '') {
+                this.galleryForm.get('checkListType')?.setValue(this.galleryForm.value.checkListType)
+              } else {
+                this.galleryForm.get('checkListType')?.setValue(this.checklists[0]?.checkListType)
+              }
+              if (this.galleryForm.value && this.galleryForm.value.checklistName != '') {
+                let getchecklist = this.checklists.filter((ele: any) => ele.checkListName === this.galleryForm.value.checklistName)
+                if (getchecklist && getchecklist.length > 0) {
+                  if (getchecklist[0].checkListType === "AI") {
+                    this.showflag = false
+                  }
+                  this.galleryForm.get('filtertype')?.setValue(getchecklist[0]?.coverage === 'user' ? "Teams" : "Clusters")
+                  this.coverageData(getchecklist[0]?.coverage)
+
+                  this.galleryForm.get('checkListType')?.setValue(getchecklist[0]?.checkListType)
+                  this.galleryForm.get('checklistName')?.setValue(getchecklist[0]?.checkListName)
+                  this.checklistName = this.galleryForm.value.checklistName
+                  this.galleryForm.get('sourceCheckList_id')?.setValue(getchecklist[0]?.sourceCheckList_id)
+                  this.galleryForm.get('checkListDescription')?.setValue(getchecklist[0]?.checkListDescription)
+                } else {
+                  this.galleryForm.get('filtertype')?.setValue(this.checklists[0]?.coverage === 'user' ? "Teams" : "Clusters")
+                  this.coverageData(this.checklists[0]?.coverage)
+
+                  this.galleryForm.get('checkListType')?.setValue(this.checklists[0]?.checkListType)
+                  this.galleryForm.get('checklistName')?.setValue(this.checklists[0]?.checkListName)
+                  this.galleryForm.get('checkListDescription')?.setValue(this.checklists[0]?.checkListDescription)
+
+                  this.checklistName = this.checklists[0]?.checkListName
+                  let getchecklist = this.checklists.filter((ele: any) => ele.checkListName === this.galleryForm.value.checklistName)
+                  if (getchecklist && getchecklist.length > 0) {
+                    if (getchecklist[0].checkListType === "AI") {
+                      this.showflag = false
+                    }
+                    this.checkListDescription = getchecklist[0]?.checkListDescription
+                    this.galleryForm.get('checkListDescription')?.setValue(getchecklist[0]?.checkListDescription)
+                    this.galleryForm.get('sourceCheckList_id')?.setValue(getchecklist[0]?.sourceCheckList_id)
+                  }
+
+                }
+              this.getchecklistDetails();
+
+              } else {
+
+                this.galleryForm.get('filtertype')?.setValue(this.checklists[0]?.coverage === 'user' ? "Teams" : "Clusters")
+                this.coverageData(this.checklists[0]?.coverage)
+                this.galleryForm.get('checkListType')?.setValue(this.checklists[0]?.checkListType)
+                if (this.checklists[0].checkListType === "AI") {
+                  this.showflag = false
+                }
+                this.galleryForm.get('checklistName')?.setValue(this.checklists[0]?.checkListName)
+                this.galleryForm.get('checkListDescription')?.setValue(this.checklists[0]?.checkListDescription)
+                this.checklistName = this.checklists[0]?.checkListName
+                let getchecklist = this.checklists.filter((ele: any) => ele.checkListName === this.galleryForm.value.checklistName)
+                if (getchecklist && getchecklist.length > 0) {
+                  this.checkListDescription = getchecklist[0]?.checkListDescription
+
+                  this.galleryForm.get('sourceCheckList_id')?.setValue(getchecklist[0]?.sourceCheckList_id)
+                }
+              }
+
+            }
+            this.cd.detectChanges()
+
+            if (this.galleryForm.value.sourceCheckList_id === 'storeopenandclose') {
+              this.select = 'storeopenandclose'
+              this.storeOpencloselist(false)
+            } else if (this.boximageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+              this.galleryForm.get('zoneList')?.setValue([])
+              this.select = this.galleryForm.value.sourceCheckList_id
+              this.queuealertlist(false)
+            } else if (this.imageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+              this.select = this.galleryForm.value.sourceCheckList_id;
+              this.getmobileUsageDatalist(false)
+            } else if (this.videoChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+              this.select = this.galleryForm.value.sourceCheckList_id;
+              this.customerunattendedlist(false)
+            } else {
+              this.select = this.galleryForm.value.type === 'checklist' ? "custom" : this.galleryForm.value.type;
+              if (type) {
+                // console.log(this.galleryForm.value)
+                if (this.galleryForm.value.type === 'checklist') {
+                  if (this.galleryForm.value.filtertype === 'Clusters') {
+                    this.galleryForm.get('userList')?.setValue([])
+                    this.storeListdropdown();
+                  } else {
+                    // console.log("0000000000000000000")
+                    this.galleryForm.get('storeList')?.setValue([])
+                    this.userListdropdown();
+                  }
+                } else {
+                  this.storeListdropdownTask();
+                }
+              }
+            }
+          }, 0);
+          this.cd.detectChanges()
+        } else {
+          this.checklists = [];
+          this.galleryForm.get('checklistName')?.setValue('')
+          this.viewloading = false;
+          this.viewnoData = true;
+          this.loading = false;
+          this.noData = true
+          this.cd.detectChanges()
+        }
+
+      },
+      error: () => {
+        this.checklists = [];
+      },
+    });
+  }
+  removeQueryParams() {
+    this.queryParams = {}
+    const urlWithoutParams = this.location.path().split('?')[0];
+    this.location.replaceState(urlWithoutParams);
+  }
+  onTeamsSelect(event: any) {
+    this.galleryForm.get('TeamsList')?.setValue(event)
+    let teamsList = event.map((data: any) => data.teamName)
+    this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.userList = res.data;
+          this.galleryForm.get('userList')?.setValue(this.userList)
+        }
+      }
+    })
+  }
+  ongroupSelect(event: any) {
+    this.removeQueryParams()
+    this.galleryForm.get('ClusterList')?.setValue(event)
+    this.groups = event.map((el: any) => el.groupName)
+    // this.getAllStores()
+    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.galleryForm.get('storeList')?.setValue(this.storeList)
+        }
+      }
+    })
+    this.cd.detectChanges();
+  }
+  filterChange(event: any) {
+    this.removeQueryParams()
+    if (event === 'Teams') {
+      this.galleryForm.get('stores')?.setValue([])
+      let teamsList = this.galleryForm.value.TeamsList.map((data: any) => data.teamName)
+      this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.userList = res.data
+            this.galleryForm.get('userList')?.setValue(res.data)
+          }
+        }
+      })
+    } else {
+      this.galleryForm.get('userList')?.setValue([])
+      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.galleryForm.get('storeList')?.setValue(res.data.storesData)
+          }
+        }
+      })
+    }
+    this.galleryForm.get('filtertype')?.setValue(event)
+  }
+  onzoneSelect(event: any) {
+    this.removeQueryParams()
+    this.galleryForm.get('zoneList')?.setValue(event)
+  }
+  approveFilterChange(event: any) {
+    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.galleryForm.get('storeList')?.setValue(res.data.storesData)
+        }
+      }
+    })
+  }
+  onStoreSelect(event: any) {
+    this.removeQueryParams()
+    this.galleryForm.get('zoneList')?.setValue([])
+    this.galleryForm.get('storeList')?.setValue(event)
+
+    this.mobileusageDataList.forEach((store: any) => {
+      const isStoreSelected = event.some((selectedStore: any) => selectedStore.storeId === store.storeId);
+      if (isStoreSelected) {
+        store.checked = true;
+      } else {
+        store.checked = false;
+      }
+    });
+    this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+    if (this.select === 'queuealert') {
+      this.getzonetlist()
+    }
+    this.cd.detectChanges();
+  }
+
+  onUserSelect(event: any) {
+    this.removeQueryParams()
+    this.galleryForm.get('userList')?.setValue(event)
+    this.cd.detectChanges();
+  }
+
+
+  storeListdropdownTask() {
+    this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          let stores = res.data.storesData.map((data: any) => data.storeId)
+          let obj = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.type, // ["custom", "AI"]
+            "checklistName": this.galleryForm.value.checklistName,
+            "checklistId": this.galleryForm.value.sourceCheckList_id,
+            "storeId": stores,
+            "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+            "viewFlag": this.galleryForm.value.viewFlag,//[true, false]
+            "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+            "filter": this.galleryForm.value.filter,
+            "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : ""
+
+          }
+          this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res: any) => {
+              if (res && res.code === 200) {
+                this.stores = res.data.storesDetails
+                this.storeList = res.data.storesDetails
+                this.gettaskQA(false);
+              } else {
+                this.gettaskQA(false);
+              }
+            }
+          })
+        }
+      }
+    })
+  }
+
+  userListdropdownTask() {
+    let teamsList = this.galleryForm.value.TeamsList.map((data: any) => data.teamName)
+    this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.galleryForm.get('userList')?.setValue(res.data)
+          let users = res.data.map((data: any) => data.userEmail)
+          let obj = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.checkListType, // ["custom", "AI"]
+            "checklistName": this.galleryForm.value.checklistName,
+            "checklistId": this.galleryForm.value.sourceCheckList_id,
+            "filtertype": this.galleryForm.value.filtertype,
+            "storeId": [],
+            "userEmail": users,
+            "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+            "viewFlag": this.galleryForm.value.viewFlag,//[true, false]
+            "viewRedo": this.galleryForm.value.viewRedo,//[true, false]
+            "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : "",
+            "filter": this.galleryForm.value.filter,
+          }
+          this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res: any) => {
+              if (res && res.code === 200) {
+                this.userList = res.data.storesDetails
+                this.galleryForm.get('userList')?.setValue(this.userList)
+                this.galleryForm.get('storeList')?.setValue([])
+                this.storeList = []
+                this.gettaskQA(false);
+              } else {
+                this.gettaskQA(false);
+              }
+            }
+          })
+        }
+      }
+    })
+  }
+  userListdropdown() {
+    let teamsList = this.galleryForm.value.TeamsList.map((data: any) => data.teamName)
+    this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          let users = res.data.map((data: any) => data.userEmail)
+          let obj = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.checkListType, // ["custom", "AI"]
+            "checklistName": this.galleryForm.value.checklistName,
+            "checklistId": this.galleryForm.value.sourceCheckList_id,
+            "filtertype": this.galleryForm.value.filtertype,
+            "storeId": [],
+            "userEmail": users,
+            "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+            "viewFlag": this.galleryForm.value.viewFlag,//[true, false]
+            "viewRedo": this.galleryForm.value.viewRedo,//[true, false]
+            "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : "",
+            "filter": this.galleryForm.value.filter,
+          }
+          this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res: any) => {
+              if (res && res.code === 200) {
+                this.userList = res.data.storesDetails
+                // console.log("-----", this.userList)
+                // this.galleryForm.get('userList')?.setValue(this.userList)
+                //hided becoz while select single user and apply its applied all user to the list
+                this.galleryForm.get('storeList')?.setValue([])
+                this.storeList = []
+                this.getChecklistQA(false);
+              } else {
+                this.getChecklistQA(false);
+              }
+            }
+          })
+        }
+      }
+    })
+  }
+  storeListdropdown() {
+    this.traxService.getStoreslist({ clientId: this.headerFilters.client, clusters: this.groups, city: [] }).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          let stores = res.data.storesData.map((data: any) => data.storeId)
+          let obj = {
+            "fromDate": this.galleryForm.value.fromDate,
+            "toDate": this.galleryForm.value.toDate,
+            "ChecklistType": this.galleryForm.value.checkListType, // ["custom", "AI"]
+            "checklistName": this.galleryForm.value.checklistName,
+            "checklistId": this.galleryForm.value.sourceCheckList_id,
+            "filtertype": this.galleryForm.value.filtertype,
+            "storeId": this.galleryForm.value.filtertype === 'Clusters' ? stores : [],
+            "userEmail": [],
+            "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+            "viewFlag": this.galleryForm.value.viewFlag,//[true, false]
+            "viewRedo": this.galleryForm.value.viewRedo,//[true, false]
+            "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : "",
+            "filter": this.galleryForm.value.filter,
+            "approveFilter": this.approveFilter
+          }
+          this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+            next: (res: any) => {
+              if (res && res.code === 200) {
+                this.stores = res.data.storesDetails
+                this.storeList = res.data.storesDetails
+                // this.galleryForm.get('storeList')?.setValue(this.stores)
+                this.getChecklistQA(false);
+              } else {
+                this.getChecklistQA(false);
+              }
+            }
+          })
+        }
+      }
+    })
+  }
+  select = 'custom'
+  onSubmit() {
+    if (this.headerFilters.client === "464") {
+      this.requestPermission()
+    }
+    this.offset = 1
+    this.checklistName = this.galleryForm.value.checklistName
+    this.checkListDescription = this.galleryForm.value.checkListDescription
+    this.showmulti = true;
+    this.showsingle = false
+    this.answerFilter = []
+    this.selectedStores = [];
+    this.selectedUsers = [];
+    if (this.galleryForm.value.sourceCheckList_id === 'storeopenandclose') {
+      this.select = 'storeopenandclose'
+      this.getchecklistDetails();
+      this.storeOpencloselist(false)
+    } else if (this.boximageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id
+      this.getchecklistDetails()
+      this.queuealertlist(false)
+    } else if (this.imageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id;
+      this.getchecklistDetails()
+      this.getmobileUsageDatalist(false)
+    } else if (this.videoChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id;
+      this.customerunattendedlist(false)
+    } else if (this.galleryForm.value.sourceCheckList_id === 'customertrial') {
+      this.select = 'customertrial';
+      this.getcustomertriallist()
+    } else {
+      this.select = this.galleryForm.value.type === 'checklist' ? "custom" : this.galleryForm.value.type;
+      if (this.galleryForm.value.type === 'checklist') {
+        if (this.galleryForm.value.filtertype === 'Clusters') {
+          this.galleryForm.get('userList')?.setValue([])
+          this.storeListdropdown();
+        } else {
+          this.galleryForm.get('storeList')?.setValue([])
+          this.userListdropdown();
+        }
+      } else {
+        if (this.galleryForm.value.filtertype === 'Clusters') {
+          this.galleryForm.get('userList')?.setValue([])
+          this.storeListdropdownTask();
+        } else {
+          this.galleryForm.get('storeList')?.setValue([])
+          this.userListdropdownTask();
+        }
+      }
+    }
+  }
+
+  show: number = 0;
+  accordian(index: any) {
+    if (this.show == index) {
+      this.show = -1;
+    } else {
+      this.show = index;
+    }
+  }
+  getzonetlist() {
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let zone = this.galleryForm.value.zoneList?.length ? this.galleryForm.value.zoneList.map((data: any) => data.value) : []
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "offset": 0,
+      "limit": 10000,
+      "viewImage": false,
+      "category": zone
+    }
+    this.traxService.queuealertlist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.mobileusageDataList = res.data.data
+          this.mobileusageDataList.forEach((store: any) => {
+            store.checked = true;
+          });
+          this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+          this.zoneList = res.data.zones
+          this.galleryForm.get('zoneList')?.setValue(res.data.selectedzones)
+        }
+      }
+    })
+
+  }
+  queuealertlist(type: any) {
+    this.loading = true;
+    this.noData = false;
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let zone = this.galleryForm.value.zoneList?.length ? this.galleryForm.value.zoneList.map((data: any) => data.value) : []
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "offset": 0,
+      "limit": 10000,
+      "viewImage": false,
+      "category": zone
+    }
+    this.traxService.queuealertlist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.mobileusageDataList = res.data.data
+          this.zoneList = res.data.zones
+          this.galleryForm.get('zoneList')?.setValue(res.data.selectedzones)
+          this.stores = []
+          this.mobileusageDataList.forEach((element: any) => {
+            element.checked = true
+            this.stores.push({
+              storeId: element.storeId,
+              storeName: element.storeName
+            })
+          });
+
+          this.stores = this.stores
+          this.galleryForm.get('storeList')?.setValue(this.stores)
+          this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+          this.loading = false;
+          this.noData = false
+          this.viewloading = false;
+          this.viewnoData = false;
+          this.queuealertview()
+
+
+        } else {
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+  }
+
+  storeOpencloselist(type: any) {
+    this.loading = true;
+    this.noData = false;
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "offset": 0,
+      "limit": 10000,
+      "viewImage": false,
+      "category": this.category
+    }
+    this.traxService.storeOpencloselist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.mobileusageDataList = res.data.storeopenandcloseData
+          this.stores = []
+          this.mobileusageDataList.forEach((element: any) => {
+            element.checked = true
+            this.stores.push({
+              storeId: element.storeId,
+              storeName: element.storeName
+            })
+          });
+
+          this.stores = this.stores
+          this.galleryForm.get('storeList')?.setValue(this.stores)
+          this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+          this.loading = false;
+          this.noData = false
+          this.viewloading = false;
+          this.viewnoData = false;
+          this.storeOpencloseview()
+
+
+        } else {
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+  }
+  queuealertview() {
+    this.loading = true;
+    this.noData = false;
+    this.limit = 1
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let zones = this.galleryForm.value.zoneList?.length ? this.galleryForm.value.zoneList.map((data: any) => data.value) : []
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "viewImage": true,
+      "category": zones,
+    }
+    this.viewloading = true;
+    this.viewnoData = false;
+    this.limit = 1
+    this.paginationSizes = [1]
+    this.traxService.queuealertlist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.queueAlertView = res.data.data
+          this.zoneList = res.data.zones
+          this.galleryForm.get('zoneList')?.setValue(res.data.selectedzones)
+          this.queueAlertView.forEach((element: any) => {
+            element.dateString = dayjs(element.dateString).format('DD-MM-YYYY')
+          });
+          this.totalCount = res.data.total_count
+          this.viewloading = false;
+          this.viewnoData = false
+          this.loading = false;
+          this.noData = false;
+        } else {
+          this.viewloading = false;
+          this.viewnoData = true
+          this.loading = false;
+          this.noData = false;
+
+        }
+      }
+    })
+  }
+
+
+
+  storeOpencloseview() {
+    this.loading = true;
+    this.noData = false;
+    this.limit = 10
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "viewImage": true,
+      "category": this.category
+
+    }
+    this.viewloading = true;
+    this.viewnoData = false;
+    this.limit = 10;
+    this.paginationSizes = [10];
+    this.traxService.storeOpencloselist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.storeOpencloseView = res.data.storeopenandcloseData
+
+          this.storeOpencloseView.forEach((element: any) => {
+            element.dateString = dayjs(element.dateString).format('DD-MM-YYYY')
+          });
+          this.totalCount = res.data.total_count
+          this.viewloading = false;
+          this.viewnoData = false
+          this.loading = false;
+          this.noData = false;
+        } else {
+          this.viewloading = false;
+          this.viewnoData = true
+          this.loading = false;
+          this.noData = false;
+
+        }
+      }
+    })
+  }
+
+
+  coverageData(coverage: any) {
+    if (coverage === 'store') {
+      this.galleryForm.get('userList')?.setValue([])
+      this.galleryForm.get('filtertype')?.setValue('Clusters')
+      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.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+          }
+        }
+      })
+    } else {
+      this.galleryForm.get('stores')?.setValue([])
+      this.galleryForm.get('filtertype')?.setValue('Teams')
+      let teamsList = this.galleryForm.value.TeamsList.map((data: any) => data.teamName)
+      this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.userList = res.data;
+            this.galleryForm.get('userList')?.setValue(this.userList)
+          }
+        }
+      })
+    }
+  }
+
+  checklistNamechange(event: any, type: any) {
+    this.removeQueryParams()
+    if (event.checkListType === "AI") {
+      this.showflag = false
+    } else {
+      this.galleryForm.get('checkListType')?.setValue(event.checkListType)
+      this.showflag = true
+    }
+    this.galleryForm.get('sourceCheckList_id')?.setValue(event?.sourceCheckList_id)
+    this.galleryForm.get('checklistName')?.setValue(event?.checkListName)
+    this.galleryForm.get('checkListDescription')?.setValue(event?.checkListDescription)
+
+    if (event && event.coverage === 'store') {
+      this.galleryForm.get('userList')?.setValue([])
+      this.galleryForm.get('filtertype')?.setValue('Clusters')
+      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.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+          }
+        }
+      })
+    } else {
+      this.galleryForm.get('stores')?.setValue([])
+      this.galleryForm.get('filtertype')?.setValue('Teams')
+      let teamsList = this.galleryForm.value.TeamsList.map((data: any) => data.teamName)
+      this.traxService.getusers({ clientId: this.headerFilters.client, teams: teamsList }).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.userList = res.data;
+            this.galleryForm.get('userList')?.setValue(this.userList)
+          }
+        }
+      })
+    }
+
+  }
+
+
+  customerunattendedlist(type: any) {
+    this.loading = true;
+    this.noData = false;
+    this.viewloading = true;
+    this.viewnoData = false
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let obj = {
+      "date": this.galleryForm.value.fromDate,
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "viewImage": false,
+      "limit": 10,
+      "offset": 0,
+      "category": this.category
+    }
+    this.traxService.getcustomerunattendedlist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.mobileusageDataList = res.data.data;
+          this.stores = [];
+          this.mobileusageDataList.forEach((element: any) => {
+            element.checked = true
+            this.stores.push({
+              storeId: element.storeId,
+              storeName: element.storeName
+            })
+          });
+          this.totalCount = res.data.total_count
+          this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+          this.stores = this.stores
+          this.galleryForm.get('storeList')?.setValue(this.stores)
+          this.loading = false;
+          this.noData = false
+          this.getcustomerunattendedview()
+        } else {
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true
+
+        }
+      }
+    })
+  }
+  selectedExport = false
+  selectedQuestion(event: any, section: any, Question: any) {
+    if (event.target.checked) {
+      if (this.tempselectedSection.length == 0) {
+        let questions: any = []
+        let answer: any = []
+        answer.push(Question.answerType)
+        questions.push(Question.qname.replace(/\n/g, " "))
+        let response = {
+          sectionName: section.sectionName,
+          questions: questions,
+          answerType: answer
+        }
+        this.tempselectedSection.push(response)
+      } else {
+        let sectionExists = this.tempselectedSection.filter((data: any) => data.sectionName === section.sectionName)
+        if (sectionExists.length > 0) {
+          this.tempselectedSection.map((data: any) => {
+            if (data.sectionName === section.sectionName) {
+              data.questions.push(Question.qname.replace(/\n/g, " "))
+              data.answerType.push(Question.answerType)
+            }
+          })
+        } else {
+          let questions: any = []
+          let answer: any = []
+
+
+          answer.push(Question.answerType)
+
+          questions.push(Question.qname.replace(/\n/g, " "))
+          let response = {
+            sectionName: section.sectionName,
+            questions: questions,
+            answerType: answer
+          }
+          this.tempselectedSection.push(response)
+        }
+
+      }
+      this.checklistData.map((sec: any) => {
+        if (sec.sectionName == section.sectionName) {
+          sec.questions.map((ques: any) => {
+            if (ques.qname === Question.qname.replace(/\n/g, " ")) {
+              ques.checked = true
+            }
+          })
+        }
+      })
+      this.cd.detectChanges()
+    } else {
+
+      this.tempselectedSection.map((data: any) => {
+        if (data.sectionName == section.sectionName) {
+          data.questions = data.questions.filter((ele: any) => ele != Question.qname.replace(/\n/g, " "))
+          data.answerType = data.answerType.filter((ele: any) => ele != Question.answerType)
+
+        }
+      })
+      this.tempselectedSection = this.tempselectedSection.filter((ele: any) => ele.questions.length > 0)
+    }
+
+
+    this.selectedExport = this.tempselectedSection.length > 0;
+  }
+  getcustomertriallist() {
+    this.loading = true;
+    this.noData = false;
+    this.viewloading = true;
+    this.viewnoData = false;
+    this.mobileusageDataList = [{ storeId: "59-147", storeName: "Birkenstock Dubai Hills", detections: "20" }];
+    this.mobileusageDataList.forEach((element: any) => {
+      element.checked = true
+      this.stores.push({
+        storeId: element.storeId,
+        storeName: element.storeName
+      })
+    });
+
+    this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+    this.stores = this.stores
+    this.mobileusageData =
+      [{
+        storeName: "Birkenstock Dubai Hills",
+        imageUrl: [
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_10_09_59_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_10_09_59_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_10_40_32_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_10_50_43_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_11_00_54_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_11_11_05_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_11_21_16_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_11_21_19_000_25_01_2025_1737789185.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_12_42_44_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_12_42_50_000_25_01_2025_1737794349.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_13_03_07_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_13_23_28_000_24_01_2025_1737710283.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_13_33_47_000_25_01_2025_1737797588.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_14_44_57_000_24_01_2025_false.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_18_59_40_000_24_01_2025_1737730286.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_20_10_59_000_24_01_2025_1737734773.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_20_21_10_000_24_01_2025_1737735241.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_21_12_07_000_24_01_2025_1737738233.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_21_42_41_000_24_01_2025_1737740509.gif",
+          "trail/59-147/b1c5b15c0133dec0c45640d923fda221_22_23_27_000_24_01_2025_1737742412.gif",
+        ]
+      }]
+    this.loading = false;
+    this.noData = false
+    this.viewloading = false;
+    this.viewnoData = false
+    this.totalCount = 1
+  }
+  getmobileUsageDatalist(type: any) {
+    this.loading = true;
+    this.noData = false;
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let obj = {
+      "date": this.galleryForm.value.fromDate,
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "viewImage": false,
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "category": this.category
+    }
+    this.traxService.getMobUsagelist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.mobileusageDataList = res.data.data;
+          this.stores = []
+          this.mobileusageDataList.forEach((element: any) => {
+            element.checked = true
+            this.stores.push({
+              storeId: element.storeId,
+              storeName: element.storeName
+            })
+          });
+          this.totalCount = res.data.total_count
+          this.selectAll = this.mobileusageDataList.every((obj: any) => obj.checked);
+          this.stores = this.stores
+          this.galleryForm.get('storeList')?.setValue(this.stores)
+          this.loading = false;
+          this.noData = false
+          this.getmobileUsageDataview()
+        } else {
+          this.loading = false;
+          this.noData = true;
+          this.viewnoData = true;
+          this.viewloading = false
+
+        }
+      }
+    })
+  }
+  onreset() {
+    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.stores = res.data.storesData
+          this.galleryForm.get('storeList')?.setValue(this.storeList)
+          this.offset = 1
+          if (this.galleryForm.value.sourceCheckList_id === 'storeopenandclose') {
+            this.select = 'storeopenandclose'
+            this.storeOpencloselist(false)
+          } else if (this.boximageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+            this.galleryForm.get('zoneList')?.setValue([])
+            this.select = this.galleryForm.value.sourceCheckList_id
+            this.queuealertlist(false)
+          } else if (this.imageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+            this.select = this.galleryForm.value.sourceCheckList_id;
+            this.getmobileUsageDatalist(false)
+          } else if (this.videoChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+            this.select = this.galleryForm.value.sourceCheckList_id;
+            this.customerunattendedlist(false)
+          } else {
+            this.select = this.galleryForm.value.type === 'checklist' ? "custom" : "";
+            if (this.galleryForm.value.filtertype === 'Clusters') {
+              this.storeListdropdown();
+            } else {
+              this.userListdropdown();
+            }
+          }
+
+        } else {
+          this.storeList = [];
+        }
+      },
+      error: () => {
+        this.storeList = [];
+      },
+    });
+
+  }
+  onview() {
+    this.offset = 1;
+    if (this.galleryForm.value.sourceCheckList_id === 'storeopenandclose') {
+      this.select = 'storeopenandclose'
+      this.storeOpencloseview()
+    } else if (this.boximageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id
+      this.queuealertview()
+    } else if (this.imageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id;
+      this.getmobileUsageDataview()
+    } else if (this.videoChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id;
+      this.getcustomerunattendedview()
+    }
+  }
+  getcustomerunattendedview() {
+
+    this.viewloading = true;
+    this.viewnoData = false;
+    this.limit = 1
+    this.paginationSizes = [1]
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let obj = {
+      "date": this.galleryForm.value.fromDate,
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "viewImage": true,
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "category": this.category
+    }
+
+    this.traxService.getcustomerunattendedlist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.customerunattendedData = res.data.data
+          this.viewloading = false;
+          this.viewnoData = false
+          this.totalCount = res.data.total_count
+        } else {
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+  }
+  getmobileUsageDataview() {
+    this.viewloading = true;
+    this.viewnoData = false;
+    this.limit = 10
+    this.paginationSizes = [10]
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "date": this.galleryForm.value.fromDate,
+      "storeId": stores,
+      "clientId": this.headerFilters.client,
+      "ChecklistType": this.select,
+      "viewImage": true,
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "category": this.category
+    }
+
+    this.traxService.getMobUsagelist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.mobileusageData = res.data.data
+          this.viewloading = false;
+          this.viewnoData = false
+          this.totalCount = res.data.total_count
+        } else {
+          this.viewloading = false;
+          this.viewnoData = true
+
+        }
+      }
+    })
+  }
+  getfilterCount() {
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let payload = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "filtertype": this.galleryForm.value.filtertype,
+      "storeId": stores,
+      "userEmail": users,
+      "answerType": this.selectedSection[0].answerType[0],
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "ChecklistType": "custom",
+      "questions": this.selectedSection[0].questions[0]
+    }
+    this.traxService.getAnswercount(payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.answerFilter = res.data.answersCount
+        } else {
+          this.answerFilter = []
+        }
+      }
+    })
+  }
+
+
+
+
+
+
+
+
+
+
+  createMultipleTask(type: any) {
+    // console.log(this.selectedStores, this.selectedUsers)
+
+    const isCluster = this.galleryForm.value.filtertype === 'Clusters';
+    const isRedo = type === 'redo';
+
+    const filterFn = (ele: any) =>
+      (isRedo ? !ele.redo && this.checktodayDate(ele.date_string) : ele.taskId === null);
+
+    if (isCluster) {
+      this.selectedStores = this.selectedStores.filter(filterFn);
+    } else {
+      this.selectedUsers = this.selectedUsers.filter(filterFn);
+    }
+
+    // console.log(this.selectedStores, this.selectedUsers)
+    const modalRef = this.modalService.open(BulkcreationmodelComponent, {
+      centered: true,
+      size: "lg",
+      windowClass: 'my-own-styles',
+      backdrop: 'static',
+      keyboard: false
+
+    });
+    modalRef.componentInstance.type = type
+    modalRef.componentInstance.filtertype = this.galleryForm.value.filtertype
+    if(this.inputDataTask.multiQuestionReferenceImage && this.inputDataTask.multiQuestionReferenceImage.length){
+      this.inputDataTask.questionReferenceImage = this.inputDataTask.multiQuestionReferenceImage.map((item:any) => item.imageURL);
+    } else {
+      if(this.inputDataTask.questionReferenceImage && this.inputDataTask.questionReferenceImage != '' && this.inputDataTask.referenceImage != null){
+        this.inputDataTask.questionReferenceImage = [this.inputDataTask.questionReferenceImage?.referenceImage]
+      }
+    }
+    this.inputDataTask?.answers.forEach((ans: any) => {
+      if(!['yes/no', 'multiplechoicesingle', 'multiplechoicemultiple', 'dropdown'].includes(this.inputDataTask.answerType)){
+        if(ans?.multiReferenceImage && ans?.multiReferenceImage.length){
+          ans.referenceImage = ans.multiReferenceImage.map((item:any) => item.imageURL);
+        }else{
+          if (ans?.referenceImage && ans?.referenceImage != '' && ans?.referenceImage != null) {
+            ans.referenceImage = [ans?.referenceImage]
+          }
+        }
+      }
+      // if (ans?.referenceImage && ans?.referenceImage != '' && ans?.referenceImage != null) {
+      //   ans.referenceImage = [ans?.referenceImage]
+      // }
+    });
+    modalRef.componentInstance.taskDetails = {
+      sections: [
+        {
+          "id": "",
+          "name": "",
+          "questions": [this.inputDataTask]
+        }
+      ]
+
+    };
+    modalRef.componentInstance.sourceCheckList_id = this.galleryForm.value.sourceCheckList_id
+    modalRef.componentInstance.payload = {
+      coverage: this.galleryForm.value.filtertype === 'Teams' ? "user" : "store",
+      selectedStores: this.selectedStores,
+      selectedUsers: this.selectedUsers,
+      operationtype: this.galleryForm.value.type,
+      inputData: this.inputDataTask,
+      sectionInfo: this.otherTaskData.sectionInfo,
+      refImage: this.refImage,
+      checklistName: this.galleryForm.value.checklistName,
+    };
+    // console.log(this.selectedStores.length)
+    modalRef.result.then((result) => {
+      // console.log("&&&&&&&", result)
+      if (result === 'submit') {
+        // console.log("************")
+        this.selectedStores = [];
+        this.selectedUsers = [];
+        this.selectAllTask = false
+        this.showsingle = false;
+        this.showmulti = true;
+        if (this.galleryForm.value.type === 'checklist') {
+          this.getChecklistQA(false);
+        } else {
+          this.getTaskQA(this.galleryForm.value.type)
+        }
+      }
+    })
+  }
+
+
+
+
+  selectedAllTask(event: any, checklist: any, data: any, checklistInfo: any, sectionInfo: any) {
+    // console.log(data)
+    // console.log(" selectedAllTask 11 =>")
+    let answer: any = []
+    answer = data.userAnswer.map((data: any) => data.answer)
+    // console.log(answer)
+    if (event.target.checked) {
+      this.selectAllTask = event.target.checked;
+
+
+      this.inputDataTask = data
+      this.refImage = [...this.refImage, ...answer]
+      // console.log(this.refImage)
+      this.otherTaskData = {
+        sectionInfo: sectionInfo,
+      }
+      let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+      let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+      this.viewChecklistsoptions = {
+        "fromDate": this.galleryForm.value.fromDate,
+        "toDate": this.galleryForm.value.toDate,
+        "ChecklistType": this.galleryForm.value.type==='task'?this.galleryForm.value.type:this.galleryForm.value.checkListType, // ["checklist", "task"]
+        "checklistName": this.galleryForm.value.checklistName,
+        "filtertype": this.galleryForm.value.filtertype,
+        "storeId": stores,
+        "userEmail": users,
+        "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]      
+        "offset": 0,
+        "limit": 10000,
+        "checklistId": this.galleryForm.value.sourceCheckList_id,
+        "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+        "viewFlag": this.galleryForm.value.viewFlag,
+        "viewRedo": this.galleryForm.value.viewRedo,//[true, false]
+        "questions": this.selectedSection,
+        "filter": this.galleryForm.value.filter,
+        "approveFilter": this.approveFilter,
+      }
+
+      this.traxService.getallchecklist(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.totalrecordcount = res.data.storesDetails.length
+            this.selectedRecordCount = res.data.storesDetails.length
+            res.data.storesDetails.forEach((ele: any) => {
+              if (!ele.approvalStatus) {
+                if (!ele.redo || !ele.taskId) {
+                  if (this.galleryForm.value.filtertype === 'Clusters') {
+                    this.selectedStores.push({
+                      storeName: ele.storeName,
+                      storeId: ele.store_id,
+                      userEmail: ele.userEmail,
+                      checklistId: ele.checklistId,
+                      section_id: ele.section_id,
+                      uniqueNo: data.uniqueNo,
+                      userName: ele.userName,
+                      date_string: ele.date_string,
+                      taskId: ele.taskId ? ele.taskId : null,
+                      redo: ele.redo
+                    })
+                  } else {
+                    this.selectedUsers.push({
+                      userEmail: ele.userEmail,
+                      checklistId: ele.checklistId,
+                      section_id: ele.section_id,
+                      uniqueNo: data.uniqueNo,
+                      userName: ele.userName,
+                      date_string: ele.date_string,
+                      taskId: ele.taskId ? ele.taskId : null,
+                      redo: ele.redo
+                    })
+                  }
+                }
+              }
+
+              this.viewChecklistsData.checklistAnswers.map((details: any) => {
+
+                if (res.data.storesDetails.filter((ele: any) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                  details.questionAnswer[0].questions[0].checked = true
+                }
+              })
+            })
+          }
+        }
+      })
+
+
+
+
+    } else {
+      this.selectAllTask = false
+      this.selectedRecordCount = 0
+      this.viewChecklistsData.checklistAnswers.map((details: any) => {
+        details.questionAnswer[0].questions[0].checked = false
+      })
+      // console.log(this.selectedStores)
+      this.refImage = this.refImage.filter((data) => data.answer)
+      if (this.galleryForm.value.filtertype === 'Clusters') {
+        this.selectedStores = []
+      } else {
+        this.selectedUsers = []
+      }
+    }
+
+  }
+
+
+
+  selectmultiTask(event: any, checklist: any, data: any, checklistInfo: any, sectionInfo: any) {
+    // console.log(sectionInfo)
+    // console.log(" selectmultiTask 11 =>")
+    let answer: any = []
+    answer = data.userAnswer.map((data: any) => data.answer)
+    // console.log(answer)
+    if (event.target.checked) {
+      this.inputDataTask = data
+      this.refImage = [...this.refImage, ...answer]
+      // console.log(this.refImage)
+      this.otherTaskData = {
+        sectionInfo: sectionInfo,
+      }
+      if (this.galleryForm.value.filtertype === 'Clusters') {
+        // console.log(checklist.checklistInfo)
+        this.selectedStores.push({
+          section_id: sectionInfo.section_id,
+          storeId: checklist.storeProfile.store_id,
+          storeName: checklist.storeProfile.storeName,
+          checklistId: checklistInfo.checklistId,
+          userEmail: checklist.checklistInfo.userEmail,
+          uniqueNo: data.uniqueNo,
+          taskId: data.taskId ? data.taskId : null,
+          redo: data.redo,
+          date_string: dayjs(checklist.checklistInfo.date, "DD MMM YYYY").format("YYYY-MM-DD")
+        })
+      } else {
+        this.selectedUsers.push({
+          section_id: sectionInfo.section_id,
+          userEmail: checklist.checklistInfo.userEmail,
+          userName: checklist.checklistInfo.submittedBy,
+          checklistId: checklistInfo.checklistId,
+          uniqueNo: data.uniqueNo,
+          taskId: data.taskId ? data.taskId : null,
+          redo: data.redo,
+          date_string: dayjs(checklist.checklistInfo.date, "DD MMM YYYY").format("YYYY-MM-DD")
+        })
+      }
+
+
+    } else {
+      this.refImage = this.refImage.filter((data) => data.answer)
+      if (this.galleryForm.value.filtertype === 'Clusters') {
+        this.selectedStores = this.selectedStores.filter((data: any) => data.checklistId != checklistInfo.checklistId)
+      } else {
+        this.selectedUsers = this.selectedUsers.filter((data: any) => data.checklistId != checklistInfo.checklistId)
+      }
+      // console.log(checklistInfo.checklistId)
+      // console.log(this.selectedStores)
+    }
+    this.selectedRecordCount = this.galleryForm.value.filtertype === 'Clusters'
+      ? this.selectedStores.length
+      : this.selectedUsers.length;
+
+    this.selectAllTask = this.totalrecordcount === this.selectedRecordCount;
+    // console.log(this.selectedRecordCount, this.totalrecordcount)
+  }
+  selectsinglequestion() {
+    this.selectedStores = [];
+    this.selectedUsers = [];
+    this.totalrecordcount = 0;
+    this.selectedRecordCount = 0
+    this.selectAllTask = false
+    this.selectedSection = this.tempselectedSection
+    if (this.questionscount(this.selectedSection) == 0 || this.questionscount(this.selectedSection) > 1) {
+      this.showsingle = false;
+      this.showmulti = true
+    } else if (this.questionscount(this.selectedSection) == 1) {
+      this.showsingle = true;
+      this.showmulti = false
+
+      if (this.selectedSection[0].answerType[0] === "yes/no" || this.selectedSection[0].answerType[0] === "multiplechoicesingle" || this.selectedSection[0].answerType[0] === "multiplechoicemultiple" || this.selectedSection[0].answerType[0] === "dropdown") {
+        this.showfilter = true;
+        this.getfilterCount()
+      } else {
+        this.showfilter = false
+      }
+
+    }
+    this.offset = 1;
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    if (this.galleryForm.value.type === 'checklist') {
+      let obj = {
+        "fromDate": this.galleryForm.value.fromDate,
+        "toDate": this.galleryForm.value.toDate,
+        "ChecklistType": this.galleryForm.value.checkListType, // ["custom", "AI"]
+        "checklistName": this.galleryForm.value.checklistName,
+        "checklistId": this.galleryForm.value.sourceCheckList_id,
+        "filtertype": this.galleryForm.value.filtertype,
+        "storeId": stores,
+        "userEmail": users,
+        "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+        "viewFlag": this.galleryForm.value.viewFlag, //[true, false]
+        "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+        "filter": this.galleryForm.value.filter,
+        "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : "",
+        "approveFilter": this.approveFilter
+      }
+      this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            // this.checklistData = res?.data.checklistQuestions;
+            this.loading = false;
+            this.noData = false;
+            if (this.galleryForm.value.filtertype === 'Clusters') {
+              this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails)
+            } else {
+              this.galleryForm.get('userList')?.setValue(res?.data?.storesDetails)
+            }
+            this.viewChecklists("all", "all")
+          } else {
+            this.checklistData = [];
+            this.viewChecklistsData = [];
+            this.loading = false;
+            this.noData = true;
+            this.viewloading = false;
+            this.viewnoData = true;
+
+          }
+        }
+      })
+    } else {
+      let obj = {
+        "fromDate": this.galleryForm.value.fromDate,
+        "toDate": this.galleryForm.value.toDate,
+        "ChecklistType": this.galleryForm.value.type, // ["custom", "AI"]
+        "checklistName": this.galleryForm.value.checklistName,
+        "checklistId": this.galleryForm.value.sourceCheckList_id,
+        "filtertype": this.galleryForm.value.filtertype,
+        "storeId": stores,
+        "userEmail": users,
+        "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+        "viewFlag": this.galleryForm.value.viewFlag,//[true, false]
+        "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+        "filter": this.galleryForm.value.filter,
+        "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : ""
+
+      }
+      this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            // this.checklistData = res?.data.checklistQuestions;
+            this.loading = false;
+            this.noData = false;
+            if (this.galleryForm.value.filtertype === 'Clusters') {
+              this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails)
+            } else {
+              this.galleryForm.get('userList')?.setValue(res?.data?.storesDetails)
+            }
+            this.viewTaskList("all", "all")
+          } else {
+            this.checklistData = [];
+            this.viewChecklistsData = [];
+            this.loading = false;
+            this.noData = true;
+            this.viewloading = false;
+            this.viewnoData = true;
+
+          }
+        }
+      })
+    }
+  }
+  appoveChecklist() {
+    const modalRef = this.modalService.open(ApprovalPopupComponent, { centered: true, size: 'md', });
+    modalRef.componentInstance.type = this.galleryForm.value.type;
+    modalRef.componentInstance.checkListName = this.galleryForm.value.checklistName;
+    modalRef.result.then((result) => {
+      if (result == 'submit') {
+
+        if (this.galleryForm.value.filtertype === 'Clusters') {
+          let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+          if (stores.length == 0) {
+            this.toastService.getErrorToast("Please select atleast one store")
+            return
+          }
+        } else {
+          let user = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+          if (user.length == 0) {
+            this.toastService.getErrorToast("Please select atleast one user")
+            return
+          }
+        }
+
+
+
+        if (this.galleryForm.value.type == 'checklist') {
+          this.checklistApprove()
+        } else {
+          this.ApproveTask()
+
+        }
+      }
+    })
+  }
+  checklistApprove() {
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let user = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let payload = {
+      "clientId": this.headerFilters.client,
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "userEmail": user,
+      "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+      "filtertype": this.galleryForm.value.filtertype,
+    }
+    this.traxService.approvechecklist(payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.approvalstatus()
+          if (this.galleryForm.value.type === 'checklist') {
+            this.getChecklistQA(false);
+          } else {
+            this.getTaskQA(this.galleryForm.value.type)
+          }
+          this.toastService.getSuccessToast(`<div><span class="me-8" >${res.message}</span></div>`)
+        }
+      }, error: (err) => {
+        this.toastService.getErrorToast(err?.error?.error)
+      }
+    })
+  }
+
+
+  ApproveTask() {
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let user = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let payload = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "userEmail": user,
+      "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+      "clientId": this.headerFilters.client,
+      "filtertype": this.galleryForm.value.filtertype,
+    }
+    this.traxService.approvetask(payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.toastService.getSuccessToast(`<div><span class="me-8" >${res.message}</span></div>`)
+          this.approvalstatus()
+          if (this.galleryForm.value.type === 'checklist') {
+            this.getChecklistQA(false);
+          } else {
+            this.getTaskQA(this.galleryForm.value.type)
+          }
+        }
+      }, error: (err) => {
+        this.toastService.getErrorToast(err?.error?.error)
+      }
+    })
+
+
+
+  }
+
+  getChecklistQA(type: any) {
+    this.selectedSection = []
+    this.tempselectedSection = []
+    this.loading = true;
+    this.noData = false
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.checkListType, // ["custom", "AI"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "filtertype": this.galleryForm.value.filtertype,
+      "userEmail": users,
+      "storeId": stores,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+      "viewFlag": this.galleryForm.value.viewFlag, //[true, false]
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+      "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : ""
+    }
+    this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.checklistData = res?.data.checklistQuestions;
+          this.loading = false;
+          this.noData = false;
+          const targetField = this.galleryForm.value.filtertype === 'Clusters' ? 'storeList' : 'userList';
+          this.galleryForm.get(targetField)?.setValue(res?.data?.storesDetails);
+          this.viewChecklists("all", "all")
+        } else {
+          this.checklistData = [];
+          this.viewChecklistsData = [];
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+  }
+  gettaskQA(type: any) {
+    this.selectedSection = []
+    this.tempselectedSection = []
+
+    this.loading = true;
+    this.noData = false
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.type, // ["custom", "AI"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "filtertype": this.galleryForm.value.filtertype,
+      "userEmail": users,
+      "storeId": stores,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+      "viewFlag": this.galleryForm.value.viewFlag, //[true, false]
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+      "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : ""
+    }
+    this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.checklistData = res?.data.checklistQuestions;
+          this.loading = false;
+          this.noData = false;
+          if (this.galleryForm.value.filtertype === 'Clusters') {
+            this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails)
+          } else {
+            this.galleryForm.get('userList')?.setValue(res?.data?.storesDetails)
+          }
+          this.viewTaskList("all", "all")
+        } else {
+          this.checklistData = [];
+          this.viewChecklistsData = [];
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+  }
+
+
+  viewTaskList(sectionName: any, questionName: any) {
+    this.selectedExport = false;
+    this.sectionName = sectionName;
+    this.questionName = questionName
+
+    this.limit = 1;
+    this.paginationSizes = [1];
+    if (this.selectedSection.length > 0) {
+      this.limit = 10,
+        this.paginationSizes = [10];
+    }
+    this.viewloading = true;
+    this.viewnoData = false
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    this.viewChecklistsoptions = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.type, // ["checklist", "task"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "filtertype": this.galleryForm.value.filtertype,
+      "userEmail": users,
+      "storeId": stores,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]      
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+      "viewFlag": this.galleryForm.value.viewFlag,
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "questions": this.selectedSection,
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+    }
+    this.traxService.getAnswers(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.approvalstatus()
+          this.viewChecklistsData = res.data;
+          if (this.showsingle) {
+            let loopingData = this.galleryForm.value.filtertype === 'Clusters' ? this.selectedStores : this.selectedUsers
+            this.viewChecklistsData.checklistAnswers.map((details: any) => {
+              if (loopingData.filter((ele: any) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                details.questionAnswer[0].questions[0].checked = true
+              }
+            })
+          }
+          this.totalCount = this.viewChecklistsData.total_count
+          this.viewloading = false;
+          this.viewnoData = false
+        } else {
+          this.viewChecklistsData = []
+          this.viewloading = false;
+          this.viewnoData = true
+
+        }
+      }
+    })
+  }
+
+  viewChecklists(sectionName: any, questionName: any) {
+    // this.selectedSection = []    
+    this.selectedExport = false;
+    this.sectionName = sectionName;
+    this.questionName = questionName
+
+    this.limit = 1;
+    this.paginationSizes = [1];
+    if (this.selectedSection.length > 0) {
+      this.limit = 10,
+        this.paginationSizes = [10];
+    }
+    this.viewloading = true;
+    this.viewnoData = false
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    this.viewChecklistsoptions = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.checkListType, // ["checklist", "task"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "filtertype": this.galleryForm.value.filtertype,
+      "storeId": stores,
+      "userEmail": users,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]      
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+      "viewFlag": this.galleryForm.value.viewFlag,
+      "viewRedo": this.galleryForm.value.viewRedo,//[true, false]
+      "questions": this.selectedSection,
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+    }
+    this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.approvalstatus()
+          this.viewChecklistsData = res.data;
+           if (this.showsingle) {
+            let loopingData = this.galleryForm.value.filtertype === 'Clusters' ? this.selectedStores : this.selectedUsers
+            this.viewChecklistsData.checklistAnswers.map((details: any) => {
+              if (loopingData.filter((ele: any) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                details.questionAnswer[0].questions[0].checked = true
+              }
+            })
+          }
+          this.totalCount = this.viewChecklistsData.total_count
+          this.viewloading = false;
+          this.viewnoData = false
+        } else {
+          this.viewChecklistsData = []
+          this.viewloading = false;
+          this.viewnoData = true
+
+        }
+      }
+    })
+  }
+
+
+  taskCreate() { }
+
+  showsidenav: boolean = true;
+  sidenav() {
+    this.showsidenav = !this.showsidenav;
+  }
+
+  onPageChange(page: number) {
+    this.currentPage = page;
+  }
+
+
+  checkAIchecklist() {
+    if (this.combinedChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      return false;
+    }
+    return true;
+  }
+
+  onPageChangeview(pageOffset: number) {
+    this.offset = pageOffset;
+    if (this.galleryForm.value.sourceCheckList_id === 'storeopenandclose') {
+      this.storeOpencloseview()
+    } if (this.boximageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.queuealertview()
+    } else if (this.imageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id;
+      this.getmobileUsageDataview()
+    } else if (this.videoChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.select = this.galleryForm.value.sourceCheckList_id;
+      this.getcustomerunattendedview()
+    } else {
+      if (this.galleryForm.value.type === 'checklist') {
+        this.viewChecklists('', '');
+      } else {
+        this.viewTaskList("all", "all")
+      }
+    }
+    window.scrollTo({ top: 30, behavior: 'smooth' });
+
+  }
+
+
+  onPageSizeChange(pageSize: number) {
+    this.limit = pageSize;
+    this.offset = 1;
+    if (this.galleryForm.value.sourceCheckList_id === 'storeopenandclose') {
+      this.storeOpencloseview()
+    } else if (this.boximageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.queuealertview()
+    } else if (this.imageChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.getmobileUsageDataview()
+    } else if (this.videoChecklist.includes(this.galleryForm.value.sourceCheckList_id)) {
+      this.customerunattendedlist(false)
+    } else {
+      if (this.galleryForm.value.type === 'checklist') {
+        this.viewChecklists('', '');
+      } else {
+        this.viewTaskList("all", "all")
+      }
+    }
+
+
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClick(event: MouseEvent): void {
+    this.exportShow = false;
+  }
+  exportShow = false;
+  exportLabel: string = 'Export';
+  exportDet(event: Event): void {
+    event.stopPropagation();
+    this.exportShow = !this.exportShow;
+  }
+  questionscount(data: any) {
+    let count = 0
+    data.forEach((element: any) => {
+      count = count + element.questions.length
+
+    });
+    return count;
+  }
+  setExportAsPPT(type: any, fileType: any): void {
+    this.exportLabel = type;  // Update the label text
+    this.exportShow = false;  // Close the export menu after selection
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+
+    if (fileType === 'ppt') {
+      let start = dayjs(this.galleryForm.value.fromDate);
+      let end = dayjs(this.galleryForm.value.toDate);
+      const difference = end.diff(start, 'days');
+
+      if (difference === 2 && this.questionscount(this.selectedSection) > 1) {
+        this.toastService.getErrorToast(`Please select maximum of 1 question only`)
+        return
+      }
+      if (difference === 1 && this.questionscount(this.selectedSection) > 3) {
+        this.toastService.getErrorToast(`Please select maximum of 3 question only`)
+        return
+      }
+      if (difference === 0 && this.questionscount(this.selectedSection) > 3) {
+        this.toastService.getErrorToast(`Please select maximum of 3 question only`)
+        return
+      }
+      this.exportLabel = 'Export'
+    }
+
+    let payload = {
+      "downloadInsertFrom": "gallery",
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "checkListType": this.select,
+      "checklistId": [],
+      "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+      "checklistName": this.galleryForm.value.checklistName,
+      "answerType": this.galleryForm.value.answerType,
+      "fileType": fileType,
+      "storeIds": stores,
+      "userEmailList": users,
+      "clientId": this.headerFilters.client,
+      "questions": this.selectedSection,
+      "previewType": this.previewType,
+      "viewFlag": this.galleryForm.value.viewFlag,
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "insertType": this.galleryForm.value.type == 'aiChecklist' ? 'checklist' : this.galleryForm.value.type,
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+      "filtertype": this.galleryForm.value.filtertype,
+      "aiFilter": this.category || '',
+    }
+    let clientinfo = JSON.parse(localStorage.getItem("client-details") || "")
+    let userinfo = JSON.parse(localStorage.getItem("user-info") || "")
+    if (this.select === 'custom' || this.select === 'task') {
+      if ((clientinfo?.traxDateRange === 7 || userinfo?.traxDateRange === 7) && type === 'Export as CSV' || type === 'Export as PPT' || type === 'Export as ZIP') {
+        const modalRef = this.modalService.open(ExportGalleryComponent, {
+          centered: true,
+          size: "lg",
+          scrollable: true,
+          backdrop: 'static',
+          windowClass: "custom-height-modal"  // <-- Add a custom class here  
+        });
+        modalRef.componentInstance.type = type;
+        modalRef.componentInstance.payload = payload;
+
+        modalRef.result.then((result) => {
+          if (result) {
+            if (result === "success") {
+              this.toastService.getSuccessToast(`<div><span class="me-8" >Downloading your reports</span><a href="notifications/alerts?tab=download" style="color:#99c3ff; text-decoration:underline; cursor:pointer" >View</a></div>`)
+            } else if (result === "error") {
+              this.toastService.getErrorToast(`Something went wrong !`)
+            }
+            this.exportLabel = 'Export'
+          }
+        })
+      } else {
+        this.traxService.reportTableExport(payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
+          next: (res: any) => {
+            if (res && res.code === 200) {
+              this.toastService.getSuccessToast(`<div><span class="me-8" >Downloading your reports</span><a href="notifications/alerts?tab=download" style="color:#99c3ff; text-decoration:underline; cursor:pointer" >View</a></div>`)
+            } else {
+              this.toastService.getErrorToast(`Something went wrong !`)
+            }
+            this.exportLabel = 'Export'
+          }
+        })
+      }
+    } else if (
+  [
+    'scrum',
+    'cleaning',
+    'storeopenandclose',
+    'inventorycount',
+    'carsattended',
+    'numberplateinfo',
+    'vehicle_check_in',
+    'outsidebusinesshoursqueuetracking',
+    'halfshutter',
+    'tvcompliance',
+    'cameratampering',
+    'staffgrouping',
+    'employeeCount',
+    'queuealert',
+    'uniformdetection',
+    'mobileusagedetection',
+    'storehygienemonitoring',
+    'boxalert'
+  ].includes(this.select)) {
+
+      if (this.select != 'storeopenandclose') {
+        this.previewType = 'video'
+      }
+
+      this.traxService.aichecklistExport(payload)?.pipe(takeUntil(this.destroy$))?.subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.toastService.getSuccessToast(`<div><span class="me-8" >Downloading your reports</span><a href="notifications/alerts?tab=download" style="color:#99c3ff; text-decoration:underline; cursor:pointer" >View</a></div>`)
+          } else {
+            this.toastService.getErrorToast(`Something went wrong !`)
+          }
+          this.exportLabel = 'Export'
+        }
+      })
+    }
+  }
+
+  typeChange(event: any) {
+    if(event == 'checklist') {
+      this.showflag = true;
+    }
+    this.removeQueryParams()
+    this.galleryForm.get('type')?.setValue(event)
+    this.galleryForm.get('answerType')?.setValue("all");
+    this.showsingle = false;
+    this.showmulti = true;
+    this.answerFilter = []
+    if (event === 'task') {
+      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.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+            this.getAllTasks(false)
+
+          }
+        }
+      })
+    } else {
+      this.galleryForm.get('checkListType')?.setValue('custom')
+      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.stores = res.data.storesData
+            this.galleryForm.get('storeList')?.setValue(this.storeList)
+            this.getAllCheckLists(true)
+          }
+        }
+      })
+    }
+
+  }
+
+
+  getAllTasks(type: any) {
+    let stores = this.stores?.map((data: any) => data.storeId)
+    const payload = {
+      fromDate: this.galleryForm.get('fromDate')?.value,
+      toDate: this.galleryForm.get('toDate')?.value,
+      storeId: stores,
+      clientId: this.headerFilters?.client,
+      sortColumnName: "checkListName",
+      sortBy: 1
+    }
+    this.traxService.getTaskList(payload).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.checklists = res.data.checklistData
+
+          setTimeout(() => {
+            if (this.queryParams.sourceCheckList_id && this.queryParams.checklistType == 'task') {
+              this.galleryForm.get('sourceCheckList_id')?.setValue(this.queryParams.sourceCheckList_id)
+              this.galleryForm.get('type')?.setValue('task')
+              this.galleryForm.get('checkListType')?.setValue(this.queryParams.checklistType)
+              let getchecklist = this.checklists.filter((ele: any) => ele.sourceCheckList_id === this.queryParams.sourceCheckList_id)
+
+              if (getchecklist && getchecklist.length > 0) {
+                this.galleryForm.get('checklistName')?.setValue(getchecklist[0]?.checkListName)
+                this.galleryForm.get('checkListDescription')?.setValue(getchecklist[0]?.checkListDescription)
+                this.checklistName = getchecklist[0]?.checkListName
+              }
+              // this.removeQueryParams()
+            } else {
+              this.galleryForm.get('checklistName')?.setValue(this.checklists[0]?.checkListName)
+              this.galleryForm.get('sourceCheckList_id')?.setValue(this.checklists[0]?.sourceCheckList_id)
+            }
+            if (type) {
+              this.gettaskQA(false);
+            }
+          }, 0)
+        } else {
+          this.checklists = []
+        }
+      }
+    })
+  }
+
+  getTaskQA(type: any) {
+    this.selectedSection = []
+    this.tempselectedSection = []
+
+    this.loading = true;
+    this.noData = false
+    this.viewloading = true;
+    this.viewnoData = false;
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let user = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.type, // ["custom", "AI"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "storeId": stores,
+      "userEmail": user,
+      "filtertype": this.galleryForm.value.filtertype,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+      "viewFlag": this.galleryForm.value.viewFlag, //[true, false]
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+      "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : ""
+    }
+    this.traxService.getQuestions(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.checklistData = res?.data.checklistQuestions;
+          this.loading = false;
+          this.noData = false;
+          if (this.galleryForm.value.filtertype === 'Clusters') {
+            this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails)
+          } else {
+            this.galleryForm.get('userList')?.setValue(res?.data?.storesDetails)
+          }
+          this.viewTaskList("all", "all")
+        } else {
+          this.checklistData = [];
+          this.viewChecklistsData = [];
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+  }
+  viewTasks(sectionName: any, questionName: any) {
+    // this.selectedSection = []    
+    this.selectedExport = false;
+    this.sectionName = sectionName;
+    this.questionName = questionName
+
+    this.limit = 1;
+    this.paginationSizes = [1];
+    if (this.selectedSection.length > 0) {
+      this.limit = 10,
+        this.paginationSizes = [10];
+    }
+    this.viewloading = true;
+    this.viewnoData = false
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    this.viewChecklistsoptions = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.checkListType, // ["checklist", "task"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "storeId": stores,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]      
+      "offset": (this.offset - 1),
+      "limit": this.limit,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "sourceCheckList_id": this.galleryForm.value.sourceCheckList_id,
+      "viewFlag": this.galleryForm.value.viewFlag,
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "questions": this.selectedSection,
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+    }
+    this.traxService.viewChecklists(this.viewChecklistsoptions)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.viewChecklistsData = res.data;
+           if (this.showsingle) {
+            let loopingData = this.galleryForm.value.filtertype === 'Clusters' ? this.selectedStores : this.selectedUsers
+            this.viewChecklistsData.checklistAnswers.map((details: any) => {
+              if (loopingData.filter((ele: any) => ele.userEmail === details.storeProfile?.userEmail).length > 0) {
+                details.questionAnswer[0].questions[0].checked = true
+              }
+            })
+          }
+          this.totalCount = this.viewChecklistsData.total_count
+          this.viewloading = false;
+          this.viewnoData = false
+        } else {
+          this.viewChecklistsData = []
+          this.viewloading = false;
+          this.viewnoData = true
+
+        }
+      }
+    })
+  }
+
+
+  taskredirect(question: any, storeProfile: any, checklistInfo: any) {
+    if (storeProfile?.store_id && storeProfile?.store_id != '') {
+      this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
+        //question.taskDate ? question.taskDate : checklistInfo.date  as per gowri told
+        this.router.navigate(['/manage/trax/gallery'],
+          {
+            queryParams: {
+              ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
+              storeId: storeProfile?.store_id,
+              checklistType: "task",
+              sourceCheckList_id: question.taskId,
+            },
+            relativeTo: this.route,
+            queryParamsHandling: 'merge',
+          }
+        )
+      })
+    } else {
+      this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
+        this.router.navigate(['/manage/trax/gallery'],
+          {
+            queryParams: {
+              ChecklistDate: dayjs(checklistInfo.date).format('YYYY-MM-DD'),
+              userEmail: storeProfile?.userEmail,
+              checklistType: "task",
+              sourceCheckList_id: question.taskId,
+            },
+            relativeTo: this.route,
+            queryParamsHandling: 'merge',
+          }
+        )
+      })
+    }
+  }
+
+
+  ViewInDetails(data: any, checklistInfo: any, storeProfile: any, section: any) {
+    const modalRef = this.modalService.open(TaskLogsComponent, { centered: true, size: 'lg', });
+    modalRef.componentInstance.operationtype = this.galleryForm.value.type;
+    modalRef.componentInstance.sourceCheckList_id = this.galleryForm.value.sourceCheckList_id;
+    modalRef.componentInstance.inputData = data;
+    modalRef.componentInstance.checklistInfo = checklistInfo;
+    modalRef.componentInstance.storeProfile = storeProfile;
+    modalRef.componentInstance.sectionInfo = section;
+
+  }
+
+  addTask(type: any, data: any, checklistInfo: any, storeProfile: any, section: any,divId?:string, userAnswerItem?: any) {
+    this.activeDiv = divId;
+    // if(data.answerType ==="multiplechoicesingle"||data.answerType ==="multiplechoicemultiple"){
+    //   data.answers = []
+    // }
+    if(data.multiQuestionReferenceImage && data.multiQuestionReferenceImage.length){
+      data.questionReferenceImage = data.multiQuestionReferenceImage.map((item:any) => item.imageURL);
+    }else{
+      data.questionReferenceImage = [data.questionReferenceImage];
+    }
+
+    const modalRef = this.modalService.open(AddTaskComponent, {
+      backdrop: 'static',
+      centered: true, size: 'lg',
+    });
+    modalRef.componentInstance.type = type;
+    modalRef.componentInstance.operationtype = this.galleryForm.value.type;
+    modalRef.componentInstance.sourceCheckList_id = this.galleryForm.value.sourceCheckList_id;
+    modalRef.componentInstance.inputData = data;
+    modalRef.componentInstance.checklistInfo = checklistInfo;
+    modalRef.componentInstance.storeProfile = storeProfile;
+    modalRef.componentInstance.sectionInfo = section;
+    modalRef.componentInstance.userAnswerItem = userAnswerItem;
+
+
+    data?.answers.forEach((ans: any) => {
+      if(ans?.multiRreferenceImage && ans?.multiRreferenceImage.length){
+        ans.referenceImage = ans.multiQuestionReferenceImage.map((item:any) => item.imageURL);
+      }else{
+        if (ans?.referenceImage && ans?.referenceImage != '' && ans?.referenceImage != null) {
+          ans.referenceImage = [ans?.referenceImage]
+        }
+      }
+    });
+    modalRef.componentInstance.taskDetails = {
+      sections: [
+        {
+          "id": "",
+          "name": "",
+          "questions": [data]
+        }
+      ]
+
+    };
+
+    modalRef.result.then((result) => {
+      this.selectedStores = [];
+      this.selectedUsers = [];
+      if (result == 'submit') {
+        if (this.galleryForm.value.type === 'checklist') {
+          this.getChecklistQA(false);
+        } else {
+          this.getTaskQA(this.galleryForm.value.type)
+        }
+      } else {
+        data.questionReferenceImage = ''
+      }
+    })
+  }
+  checkallapproved() {
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let input = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "userEmail": users,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "ChecklistType": "custom",
+      "type": this.galleryForm.value.type,
+      "filtertype": this.galleryForm.value.filtertype,
+    }
+    if (this.galleryForm.value.type === 'checklist') {
+      this.traxService.Allapprovalstatuschecklist(input).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.allapprovalStatus = false
+          } else {
+            this.allapprovalStatus = true
+          }
+
+          this.scrollToActiveDiv();
+        }
+      })
+    } else {
+      this.traxService.Allapprovalstatustask(input).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.allapprovalStatus = false
+          } else {
+            this.allapprovalStatus = true
+          }
+          this.scrollToActiveDiv();
+        }
+      })
+    }
+
+
+  }
+  approvalstatus() {
+    this.checkallapproved()
+    let stores = this.galleryForm.value.storeList.map((data: any) => data.storeId)
+    let users = this.galleryForm.value.userList.map((data: any) => data.userEmail)
+    let input = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "storeId": stores,
+      "userEmail": users,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "ChecklistType": "custom",
+      "type": this.galleryForm.value.type,
+      "filtertype": this.galleryForm.value.filtertype,
+    }
+    if (this.galleryForm.value.type === 'checklist') {
+      this.traxService.approvalstatuschecklist(input).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.approvalStatus = false
+          } else {
+            this.approvalStatus = true
+          }
+        }
+      })
+    } else {
+      this.traxService.approvalstatustask(input).subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.approvalStatus = false
+          } else {
+            this.approvalStatus = true
+          }
+        }
+      })
+    }
+
+
+  }
+
+  onApproveChecklistClick(): void {
+  this.appoveChecklist();
+}
+  taskTab(task: any) {
+
+
+    this.galleryForm.get('filter')?.setValue(task.key)
+    this.loading = true;
+    this.noData = false
+    this.viewloading = true;
+    this.viewnoData = false;
+    let obj = {
+      "fromDate": this.galleryForm.value.fromDate,
+      "toDate": this.galleryForm.value.toDate,
+      "ChecklistType": this.galleryForm.value.checkListType, // ["custom", "AI"]
+      "checklistName": this.galleryForm.value.checklistName,
+      "checklistId": this.galleryForm.value.sourceCheckList_id,
+      "storeId": task.stores,
+      "answerType": this.galleryForm.value.answerType, //["descriptive","yes/no","multiplechoicesingle","multiplechoicemultiple","image","video","descriptiveImage","multipleImage"]
+      "viewFlag": this.galleryForm.value.viewFlag, //[true, false]
+      "viewRedo": this.galleryForm.value.viewRedo, //[true, false]
+      "filter": this.galleryForm.value.filter,
+      "approveFilter": this.approveFilter,
+      "filtertype": this.galleryForm.value.filtertype,
+      "questions": this.selectedSection.length > 0 && this.selectedSection[0].questions.length > 0 ? this.selectedSection[0].questions[0] : ""
+    }
+    this.traxService.getchecklist(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          // this.checklistData = res?.data.checklistQuestions;
+          this.loading = false;
+          this.noData = false;
+          if (this.galleryForm.value.filtertype === 'Clusters') {
+            this.galleryForm.get('storeList')?.setValue(res?.data?.storesDetails)
+          } else {
+            this.galleryForm.get('userList')?.setValue(res?.data?.storesDetails)
+          }
+          this.viewChecklists("all", "all")
+        } else {
+          this.checklistData = [];
+          this.viewChecklistsData = [];
+          this.loading = false;
+          this.noData = true;
+          this.viewloading = false;
+          this.viewnoData = true;
+
+        }
+      }
+    })
+
+  }
+  categoryChange() {
+    this.customerunattendedlist(false)
+  }
+
+  @ViewChild('zoomPopup') zoomPopup: ElementRef;
+  openModel(data: any) {
+    const modalRef = this.modalService.open(this.zoomPopup, { centered: true, size: 'xl' });
+    this.viewImage = data;
+  }
+  getGridColumns(length: number): string {
+    if (length === 1) return '1fr';
+    if (length === 2 || length === 4 || length === 3) return 'repeat(2, 1fr)';
+    if (length === 5 || length === 6) return 'repeat(3, 1fr)';
+    // if (length === 7 || length === 8) return 'repeat(4, 1fr)';
+    // if (length <= 10) return 'repeat(5, 1fr)';
+    return 'repeat(3, 1fr)';
+  }
+
+  getGridRowHeight(length: number): string {
+    if (length <= 2) return '450px';
+    return '220px';
+  }
+  hasReferenceImages(question: any): boolean {
+    return question?.answers?.some((a: any) => {
+      const ref = a.referenceImage;
+      return (
+        (Array.isArray(ref) && ref.length > 0) ||
+        (typeof ref === 'string' && ref.trim() !== '')
+      );
+    });
+  }
+
+  hasChecklistReferenceImages(question: any): boolean {
+    return question?.answers?.some((a: any) => {
+      const ref = a.referenceImage;
+      return (
+        (Array.isArray(ref) && ref.length > 0) ||
+        (typeof ref === 'string' && ref.trim() !== '')
+      );
+    });
+  }
+
+
+  hasQuestionReferenceImages(question: any): boolean {
+    return question.questionReferenceImage?.length > 0 &&
+      question.questionReferenceImage[0] !== '';
+  }
+
+  isValidImage(item: any): boolean {
+    return item && item !== '' && item !== null;
+  }
+  selectedImageUrl: any = '';
+  selectedImageName: string = '';
+  currentImageIndex: number = 0;
+  imageList: string[] = [];
+  imageNameList: string[] = [];
+  openSnapPopup(item: any, snapType: 'open' | 'close'): void {
+    const dateStr = formatDate(item.dateString, 'dd-MM-yyyy', 'en-US');
+    const url = `${this.environment.TraxOpenclosechecklistCDN}${item.storeId}/${dateStr}/operation_snaps/${snapType}.jpeg`;
+    const modalRef = this.modalService.open(ImagePopupComponent, { centered: true, size: 'xl' });
+    modalRef.componentInstance.imageUrl = url;
+    modalRef.componentInstance.caption = snapType === 'open' ? 'Opening Snap' : 'Closing Snap';
+  }
+  openImagePopup1(images: string[], index: number) {
+    this.imageList = images;
+    this.currentImageIndex = index;
+    this.selectedImageUrl = this.imageList;
+    const modal: any = new (window as any).bootstrap.Modal(
+      document.getElementById('imageModal1')
+    );
+    modal.show();
+  }
+
+  openImagePreview(imageUrl: string, caption: string = '') {
+    const modalRef = this.modalService.open(ImagePopupComponent, { centered: true, size: 'xl' });
+    modalRef.componentInstance.imageUrl = imageUrl;
+    modalRef.componentInstance.caption = caption;
+  }
+  openImagePopup(images: string[], names: string[], index: number): void {
+    this.imageList = images;
+    this.imageNameList = names;
+    this.currentImageIndex = index;
+
+    this.selectedImageUrl = this.imageList[this.currentImageIndex];
+    this.selectedImageName = this.imageNameList[this.currentImageIndex];
+    // console.log("12321313", this.imageList, index)
+    const modal: any = new (window as any).bootstrap.Modal(
+      document.getElementById('imageModal')
+    );
+    modal.show();
+  }
+
+  navigateImage(direction: 'prev' | 'next'): void {
+    if (direction === 'prev' && this.currentImageIndex > 0) {
+      this.currentImageIndex--;
+    } else if (direction === 'next' && this.currentImageIndex < this.imageList.length - 1) {
+      this.currentImageIndex++;
+    }
+
+    this.selectedImageUrl = this.imageList[this.currentImageIndex];
+    this.selectedImageName = this.imageNameList[this.currentImageIndex];
+
+  }
+
+  getImageUrls(userAnswers: any[]): string[] {
+    // return userAnswers.map(a => this.environment.TraxAnswerCDN + a.answer);
+    // ? this.sanitizeUrl(this.environment.traxRunAiCDN + a.runAIAnswer) 
+    return userAnswers.map(a => a.runAIAnswer 
+      ? this.environment.traxRunAiCDN + a.runAIAnswer 
+      : this.environment.TraxAnswerCDN + a.answer
+    ).filter(url => url);
+  }
+
+  getImageNames(userAnswers: any[]): string[] {
+    return userAnswers.map(a => a.answer);
+  }
+
+  getRefchecklistImageUrls(userAnswers: any[]): string[] {
+    return userAnswers.map(a => this.environment.TraxAnswerCDN + a.referenceImage);
+  }
+
+  getRefchecklistImageNames(userAnswers: any[]): string[] {
+    return userAnswers.map(a => a.referenceImage);
+  }
+
+  getQustRefchecklistImageUrls(userAnswers: any[]): string[] {
+    return userAnswers.map(a => this.environment.TraxAnswerCDN + a.questionReferenceImage);
+  }
+
+  getQustRefchecklistImageNames(userAnswers: any[]): string[] {
+    return userAnswers.map(a => a.questionReferenceImage);
+  }
+  getRefImageUrls(userAnswers: any[]): string[] {
+    return userAnswers.map(a => this.environment.TraxAnswerCDN + a);
+  }
+
+  getRefImageNames(userAnswers: any[]): string[] {
+    return userAnswers.map(a => a);
+  }
+
+  downloadVideo(fileName: string) {
+    const url = this.environment.TraxAnswerCDN + fileName;
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName.split('/').pop() || 'video.mp4';  // extract file name
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  }
+
+  hasMultiQuestionReferenceImages(question: any): boolean {
+    return question.multiQuestionReferenceImage?.length > 0;
+  }
+
+  getMultiRefImageUrls(userAnswers: any[]): string[] {
+    return userAnswers.map(a => this.environment.TraxAnswerCDN + a.imageURL);
+  }
+
+  getValidationImageUrls(item: any): string[] {
+    if (!Array.isArray(item?.validationImage)) return [];
+    return item.validationImage.map((img: string, i: number) => {
+      const aiImage = item?.runAIData?.[i]?.answerImage;
+      return aiImage
+        ? this.environment.traxRunAiCDN + aiImage
+        : this.environment.TraxAnswerCDN + img;
+    });
+  }
+
+  getValidationImageNames(item: any): string[] {
+    return Array.isArray(item?.validationImage) ? item.validationImage.slice() : [];
+  }
+
+   openMultiImagePopup(images: string[], names: string[], index: number): void {
+    this.imageList = images;
+    this.imageNameList = names;
+    this.currentImageIndex = index;
+
+    this.selectedImageUrl = this.imageList[this.currentImageIndex];
+    this.selectedImageName = this.imageNameList[this.currentImageIndex];
+    // console.log("12321313", this.imageList, index)
+    const modal: any = new (window as any).bootstrap.Modal(
+      document.getElementById('imageModal')
+    );
+    modal.show();
+  }
+
+  hasMultiReferenceImages(question: any): boolean {
+    return question.multiReferenceImage?.length > 0;
+  }
+
+  hasImageMultiReferenceImages(question: any): boolean {
+    return question?.answers?.some((a: any) => {
+      const ref = a.multiReferenceImage;
+      return (
+        (Array.isArray(ref) && ref.length > 0) ||
+        (typeof ref === 'string' && ref.trim() !== '')
+      );
+    });
+  }
+
+  hasImageAnswer(question: any): boolean {
+    return question?.userAnswer?.some((a: any) => {
+      const ref = a.answer;
+      return (
+        (Array.isArray(ref) && ref.length > 0) ||
+        (typeof ref === 'string' && ref.trim() !== '')
+      );
+    });
+  }
+
+  isVideoAnswer(url: string, item?: any): boolean {
+    if (!url || typeof url !== 'string') return false;
+    if (item?.mediaType === 'video' || item?.type === 'video') return true;
+    const videoExtensions = ['.mp4', '.webm', '.mov', '.ogg', '.m4v', '.avi', '.wmv'];
+    const urlPath = url.split('?')[0].toLowerCase();
+    return videoExtensions.some(ext => urlPath.endsWith(ext));
+  }
+
+  getImageAnswers(question: any): any[] {
+    return (question?.userAnswer || []).filter((item: any) =>
+      item?.answer && !this.isVideoAnswer(item.answer || item.runAIAnswer, item)
+    );
+  }
+
+  getVideoAnswers(question: any): any[] {
+    return (question?.userAnswer || []).filter((item: any) =>
+      item?.answer && this.isVideoAnswer(item.answer || item.runAIAnswer, item)
+    );
+  }
+
+  checkDetectionStatus(runAIData?: any[]): { keyPresent: boolean; keyValue: boolean } {
+    let keyPresent = false;
+    let keyValue = false;
+
+    if (!Array.isArray(runAIData)) {
+      return { keyPresent, keyValue };
+    }
+
+    for (let i = 0; i < runAIData.length; i++) {
+      if (runAIData[i]?.lableName === 'detectionStatus') {
+        keyPresent = true;
+        keyValue = runAIData[i]?.value?.toString().toLowerCase() === 'true';
+        return { keyPresent, keyValue };
+      }
+
+      if(runAIData[i]?.results?.length) {
+        runAIData[i]?.results.forEach((data:any,i:number) => {
+          if(data?.lableName === 'detectionStatus') {
+            keyPresent = true;
+            keyValue = data?.value?.toString().toLowerCase() === 'true';
+            return { keyPresent, keyValue };
+          }
+        })
+      }
+    }
+    return { keyPresent, keyValue }; // No detectionStatus found
+  }
+
+  isAnswerRedoDone(question: any, item: any): boolean {
+    if (!question?.answers?.length || !item) {
+      return false;
+    }
+    const matched = question.answers.find(
+      (ans: any) => ans?.answer === item?.answer,
+    );
+    return !!matched?.redo;
+  }
+
+  sanitizeUrl(url: string): SafeUrl {
+    // Encode special characters in the URL
+    // const encodedUrl = encodeURI(url);
+
+    // const encodedUrl = encodeURI(url).replace(/\?/g, '%3F');
+    // return this.sanitizer.bypassSecurityTrustUrl(encodedUrl);
+
+    try {
+      const parts = url.split('/');
+      const domain = parts.slice(0, 3).join('/');
+      const path = parts.slice(3).map(p => encodeURIComponent(p)).join('/');
+      const encodedUrl = `${domain}/${path}`;
+
+      return this.sanitizer.bypassSecurityTrustUrl(encodedUrl);
+    } catch (e) {
+      return this.sanitizer.bypassSecurityTrustUrl(url);
+    }
+  }
+
+  multiImageCheckDetectionStatus(userAnswers?: any[]): { keyPresent: boolean; keyValue: boolean } {
+    let keyPresent = false;
+    let keyValue = false;
+
+    if (!Array.isArray(userAnswers)) {
+      return { keyPresent, keyValue };
+    }
+
+    for (const item of userAnswers) {
+      if (item.runAIData && Array.isArray(item.runAIData)) {
+        for (const entry of item.runAIData) {
+          if (entry.lableName === 'detectionStatus') {
+            keyPresent = true;
+            if (entry.value === 'False') {
+              keyValue = false;
+              return { keyPresent, keyValue };
+            } else if (entry.value === 'True') {
+              keyValue = true;
+            }
+          }
+          if(entry?.results?.length) {
+            entry?.results.forEach((runAI:any) => {
+              if(runAI.lableName === 'detectionStatus') {
+                keyPresent = true;
+                if (entry.value === 'False') {
+                  keyValue = false;
+                  return { keyPresent, keyValue };
+                } else if (entry.value === 'True') {
+                  keyValue = true;
+                }
+              }
+            })
+          }
+        }
+      }
+    }
+
+    // for (let i = 0; i < userAnswers.length; i++) {
+    //   if(Array.isArray(userAnswers[i].runAIData)){
+    //     let runAIDatas = userAnswers[i].runAIData;
+    //     for (let j = 0; j < runAIDatas.length; j++) {
+    //       if (runAIDatas[j]?.lableName === 'detectionStatus') {
+    //         keyPresent = true;
+    //         keyValue = runAIDatas[j]?.value?.toString().toLowerCase() === 'false';
+    //         return { keyPresent, keyValue };
+    //       }
+    //     }
+    //   }      
+    // }
+    return { keyPresent, keyValue }; // No detectionStatus found
+  }
+
+  getchecklistDetails() {
+    let obj = {
+      "clientId": this.headerFilters.client,
+      "checklistType": this.galleryForm.value.sourceCheckList_id,
+    }
+    this.traxService.getChecklistDetailsV1(obj)?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (res: any) => {
+        if (res && res.code === 200) {
+          this.exportConfig = res.data[0].aiConfig.exportConfig;
+        } else { }
+      }
+    })
+  }
+// Fullscreen video orientation issue fix
+  @HostListener('document:fullscreenchange')
+  onFullscreenChange() {
+    const fsElement = document.fullscreenElement;
+    if (fsElement && fsElement?.tagName === 'VIDEO') {
+      this.isFullscreen = true;
+      this.fullscreenVideoElement = fsElement as HTMLVideoElement;
+    } else {
+      this.isFullscreen = false;
+      this.fullscreenVideoElement = null;
+    }
+  }
+
+  isVideoFullscreen(videoElement: HTMLVideoElement | null | undefined): boolean {
+    if (!videoElement || !this.isFullscreen || !this.fullscreenVideoElement) {
+      return false;
+    }
+    return this.fullscreenVideoElement === videoElement;
+  }
+cameraView(storeId:any){
+   
+    let data: any = JSON.parse(localStorage.getItem("header-filters") || "");
+    data.store = storeId;
+    localStorage.setItem("header-filters", JSON.stringify(data));
+    this.gs.dataRangeValue.next(data);
+    this.router.navigate(["/manage/stores/cameras"], {
+      queryParams: { storeId: storeId},
+    });
+  }
+
+  scrollToActiveDiv(){
+    if(this.activeDiv){
+      const el = document.getElementById(this.activeDiv);
+      el?.scrollIntoView({ behavior: 'instant', block: 'center' });
+    }
+  }
+
+  compliance(question:any) {
+    let data:any = JSON.parse(JSON.stringify(question));
+    if(['image'].includes(data.answerType) && data.userAnswer.length) {
+      let compliance = 0;
+      if(data.userAnswer?.[0]?.runAIData) {
+        const { keyPresent, keyValue } = this.checkDetectionStatus(data.userAnswer[0].runAIData);
+        if (keyPresent) {
+          compliance = keyValue
+            ? data.answers?.[0]?.matchedCount
+            : data.answers?.[0]?.notMatchedCount;
+        }
+      }
+      data.userAnswer.forEach((ele:any) => {
+        ele.complianceScore = compliance;
+      });
+    }
+    if(['image/video'].includes(data.answerType) && data.userAnswer.length) {
+      let compliance = 0;
+      data.userAnswer = data.userAnswer.filter((ele:any) => ele.answerType == 'image')
+      const allHaveRunAI = data.userAnswer.every((ele:any) => ele?.runAIData);
+      if (allHaveRunAI && data.answers?.[0]?.runAI && data.answers?.[0]?.runAIFeatures?.length) {
+        const { keyPresent, keyValue } = this.multiImageCheckDetectionStatus(data.userAnswer);
+        if (keyPresent) {
+          compliance = keyValue
+            ? data.answers?.[0]?.matchedCount
+            : data.answers?.[0]?.notMatchedCount;
+        }
+      }
+      data.userAnswer.forEach((ele:any) => {
+        ele.complianceScore = compliance;
+      });
+    }
+    const scores = data?.userAnswer?.map((ele: any) => ele?.complianceScore ?? 0) ?? [];
+    return scores.length ? Math.max(...scores) : 0;
+  }
+
+  getSectionCompliance(sectionName:any) {
+    let findSection:any;
+    this.viewChecklistsData?.checklistAnswers?.forEach((ele: any) => {
+      findSection = ele?.questionAnswer?.find(
+        (section: any) => section.sectionName === sectionName,
+      );
+    });
+    if (findSection && findSection?.answers_complianceScore) {
+      return `(${findSection.userAnswer_complianceScore}/${findSection.answers_complianceScore})`;
+    }
+
+  }
+}