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

package/src/lib/components/checklist-configure/assign/assign.component.ts

@@ -0,0 +1,932 @@
+import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef, OnDestroy, Input, SimpleChanges, OnChanges, Output, EventEmitter,HostListener  } from '@angular/core';
+import dayjs from 'dayjs';
+import { TraxService } from '../../../services/trax.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { ActivatedRoute, Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import * as XLSX from 'xlsx';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'lib-assign',
+  templateUrl: './assign.component.html',
+  styleUrl: './assign.component.scss'
+})
+export class AssignComponent implements OnInit, OnDestroy, OnChanges {
+
+  @ViewChild('file') fileInput!: ElementRef;
+  @ViewChild('file1') fileInput1!: ElementRef;
+  @ViewChild('bulkupload') bulkupload: any;
+  @ViewChild('afterValidation') afterValidation: any;
+  @ViewChild('confirmUser') confirmUser: any;
+  @Input() configData: any;
+  @Input() uploadData: boolean;
+  @Input() configureType: any;
+  dayjs: any = dayjs;
+  tableData: any = [];
+  tableLoading: any = false;
+  pageValue: any = [];
+  offset: number = 0;
+  recordsTotal: any = 0;
+  sortColumn: any = '';
+  sortBy: any = -1;
+  assignType: any = 'store';
+  size: any = 5;
+  offsetvalue: number = 0;
+  recordsCount: any;
+  serData: any = [];
+  excelUserData: any = [];
+  showImage: boolean = true;
+  clientId: any;
+  type: string = 'custom';
+  obj: any;
+  tableFilter: any = '';
+  disabledQuestion: boolean = false;
+  assignSingle: any; assignGroup: any;
+  singleAssign: any;
+  groupAssign: any;
+  paginationSize = [5, 10, 15, 20];
+  userData: any = [];
+  idList: any = [];
+  tableArray: any = [];
+  storeList: any = [];
+  private detach = new Subject();
+  tableLoading1: boolean = false;
+  currentValue: any = 1;
+  showEdit: boolean = false;
+  upload: any;
+  reupload: boolean = false;
+  userCoverage: boolean = true;
+  storeCoverage: boolean = false;
+  configstore: any = [];
+  InialType: any;
+  checklistId: any;
+  @Output() dataToParent = new EventEmitter<boolean>();
+
+  constructor(private SopService: TraxService, private dialog: NgbModal, private router: ActivatedRoute, private route: Router, private toast: ToastService, private changedetector: ChangeDetectorRef) {
+  }
+
+  ngOnInit(): void {
+    this.configstore = this.configData.storeList;
+    this.InialType = this.configData.aiConfig.assignConfig;
+    let storageDetails = JSON.parse(localStorage.getItem('header-filters') || '{}');
+    if (!storageDetails?.client) {
+      storageDetails = JSON.parse(localStorage.getItem('client-details') || '{}');
+      storageDetails.client = storageDetails.clientId;
+    }
+    if (storageDetails?.client) {
+      this.clientId = storageDetails.client;
+      this.router.queryParams.subscribe(params => {
+        if (typeof params.type == 'undefined') {
+          this.obj = {
+            checkListId: params.checkListId,
+            clientId: this.clientId
+          }
+          this.showEdit = params.showEdit;
+          this.type = 'custom'
+          this.disabledQuestion = params.disabledQuestion;
+        }
+        else {
+          this.obj = {
+            type: params.type,
+            clientId: this.clientId
+          }
+          this.type = params.type;
+        }
+      })
+    }
+    this.getassignDropdown();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+
+    if (changes['uploadData']) {
+      if (this.uploadData) {
+        this.fileInput.nativeElement.click();
+        this.uploadData = false;
+        this.dataToParent.emit(this.uploadData);
+      }
+    }
+    if (changes['configureType']) {
+      if (typeof this.InialType != 'undefined' && typeof this.configureType != 'undefined' && this.InialType == this.configureType) {
+        this.assignSingle = this.configstore;
+        this.tableArray = this.configstore;
+        this.configData.storeList = this.configstore;
+      } else if (typeof this.configureType != 'undefined' && this.configureType == 'global') {
+        this.tableArray = [];
+        this.assignSingle = [];
+        this.configData.storeList = [];
+      }
+      this.upload = 'store';
+      this.getTableData();
+    }
+  }
+
+  coverage: any;
+
+  getConfigData() {
+    // console.log('assignConfig',this.configData.aiConfig.assignConfig)
+    // this.checklistId = this.configData.checkListDetails._id;
+    // this.type = this.configData.checkListDetails.checkListType;
+    // this.configData.aiConfig.storeList = [];
+    // this.coverage = this.configData.checkListDetails.coverage;
+  }
+
+  ngOnDestroy(): void {
+    this.detach.next(true);
+    this.detach.complete();
+  }
+
+  getInitialData(data: any, change?: any) {
+    // let tempId = data.map((el: any) => el?.id)
+    // let res = this.configData.storeList.filter((el: any) => tempId.includes(el?._id));
+    this.configData?.storeList.forEach((element: any) => element.isSelected = true);
+    // this.configData.aiConfig.storeList = res;
+    if (this.assignType === 'store') {
+      this.tableLoading = false;
+      this.tableLoading1 = false;
+      this.showImage = true;
+      // this.userDetails(), 
+      // (this.assignType === 'store' && this.initialLoading) ? (this.initialLoading = false) : this.getTableData(change ? change : '');
+      this.idList = this.singleAssign;
+    } else {
+      this.idList = this.groupAssign;
+      this.userDetailsV2();
+    }
+  }
+
+  userDetailsV2(data?: any) {
+    const payload = {
+      "checklistId": this.checklistId,
+      "idList": this.idList,
+      "coverage": this.coverage, //["cluster","store","user","teams"]
+      "clientId": this.clientId,
+      "search": this.tableFilter
+    }
+    this.tableLoading = true;
+    this.tableLoading1 = true;
+    this.showImage = true;
+    this.tableArray = [];
+    this.tableData = [];
+    this.SopService.selectChips(payload).pipe(takeUntil(this.detach)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code === 200) {
+          this.tableLoading = false;
+          this.tableLoading1 = false;
+          this.tableArray = res?.data?.uniqueArr;
+          this.assignGroup = this.tableArray;
+          this.recordsTotal = res.data.count;
+          this.recordsCount = this.tableData.length;
+          this.tableArray?.length ? this.showImage = false : this.showImage = true;
+          if (this.recordsTotal < 5) {
+            this.paginationSize = [this.recordsTotal];
+            this.size = this.recordsTotal;
+          }
+          else {
+            this.paginationSize = [5, 10, 15, 20];
+            this.size = 5;
+          }
+          this.tableData = this.tableArray.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+        }
+        else {
+          this.tableArray = [];
+          this.tableData = [];
+          this.showImage = true;
+          this.tableLoading = true;
+        }
+        // this.storeCoverage ? this.getInitialData(res?.data?.storeList) : this.getInitialData(res?.data?.userList);
+      },
+      error: (err: any) => {
+        this.tableLoading = false;
+        this.tableLoading1 = false;
+        this.showImage = false;
+        this.tableArray = [];
+        this.tableData = [];
+        this.toast.getErrorToast(err?.message)
+      },
+    })
+  }
+
+  getTableData(change?: any) {
+    let count = 0;
+    if (this.assignSingle?.length) {
+      if (this.configData.storeList.length != this.assignSingle.length) {
+        count++;
+      }
+      this.configData.storeList.forEach((assign: any) => {
+        let findList = this.assignSingle.filter((item: any) => item.storeId == assign.storeId);
+        if (findList.length) {
+          if (findList.length > 1) {
+            count++;
+          }
+          else {
+            // if (assign.userEmail.toLowerCase() != findList[0].userEmail.toLowerCase()) {
+            //   assign.userEmail = findList[0].userEmail;
+            //   assign.userName = findList[0].userName;
+            //   count++;
+            // } 
+          }
+        }
+      })
+      if (count) {
+        this.upload = change ? 'upload' : 'store';
+      }
+    }
+    // this.tableArray = this.assignSingle ? this.assignSingle : this.configData.storeList;
+
+    change ? this.tableArray = this.assignSingle : [];
+    if (this.upload === 'store') {
+      let table = [...this.tableArray, ...this.configData.storeList];
+      let uniqueTable = new Map();
+      // Convert objects to JSON strings for full comparison
+      table.forEach((item: any) => {
+        if (this.configData?.aiConfig?.assignConfig === 'store') {
+          item = {
+            storeName: item?.storeName,
+            storeId: item.storeId,
+            openTime: item.openTime,
+            closeTime: item.closeTime,
+            startTime1: item.startTime1,
+            startTime2: item.startTime2,
+            startTime3: item.startTime3,
+            configTime1: item.configTime1,
+            configTime2: item.configTime2,
+            configTime3: item.configTime3,
+            _id: item._id
+          }
+        } else {
+          item = {
+            storeName: item?.storeName,
+            storeId: item.storeId,
+            openTime: item.openTime,
+            closeTime: item.closeTime,
+            _id: item._id
+          }
+        }
+        let data = {
+          _id: item._id,
+          storeName: item?.storeName,
+          storeId: item.storeId
+        }
+        let key = JSON.stringify(data); // Convert entire object to string as a key
+        if (!uniqueTable.has(data)) {
+          uniqueTable.set(key, item); // Store the object only if it's completely unique
+        }
+      });
+      this.assignSingle = Array.from(uniqueTable.values());
+      if (this.configData?.aiConfig?.assignConfig === 'store') {
+        this.assignSingle = this.assignSingle.filter((el: any) => (el?.startTime1 || el?.startTime2 || el?.startTime3));
+      }
+      this.tableArray = this.assignSingle;
+    } else if (this.upload === 'upload') {
+      this.tableArray = this.assignSingle;
+    } else {
+      this.tableArray = this.configData.storeList;
+      this.assignSingle = this.tableArray;
+    }
+
+    this.tableArray?.length ? this.showImage = false : this.showImage = true;
+    this.recordsTotal = this.tableArray.length;
+    if (this.recordsTotal < 5) {
+      this.paginationSize = [this.recordsTotal];
+      this.size = this.recordsTotal;
+    }
+    else {
+      this.paginationSize = [5, 10, 15, 20];
+      this.size = 5;
+    }
+    this.tableLoading1 = false;
+    this.tableLoading = false;
+    this.tableData = this.tableArray.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+  }
+
+  excelData: any;
+  showStore: boolean = false;
+
+  onFileUpload(event: any, reupload?: any) {
+    this.validatedStore = [];
+    this.inactiveStores = [];
+    this.showStore = false;
+    this.showInactive = false;
+    this.currentValue = 1;
+    this.reupload = false;
+    this.upload = 'upload';
+    this.userData = this.excelUserData = [];
+    let data: any;
+    const target: DataTransfer = <DataTransfer>(event.target);
+    let isExcelFile = !!target.files[0].name.match(/(.xls|.xlsx)/);
+    let error: any = [];
+    let ValidationError: boolean = false;
+    if (isExcelFile) {
+      const reader: FileReader = new FileReader();
+      reader.readAsBinaryString(target.files[0]);
+      reader.onload = (e: any) => {
+        const bstr: string = e.target.result;
+        const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });
+        const wsname: string = wb.SheetNames[0];
+        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
+        data = XLSX.utils.sheet_to_json(ws, { defval: '' });
+        this.excelData = data;
+        if (!data.length || (data.some((item: any) => 'userName' in item || 'userEmail' in item))) {
+          this.toast.getErrorToast('Please Upload a Valid file.')
+          return;
+        }
+
+        if (data.length && this.configData?.aiConfig?.assignConfig === 'store' && (data.every((item: any) => item['Huddle Start Time 1'] == '' && item['Configuration Time 1(mins)'] == ''))) {
+          this.toast.getErrorToast('Please Set Huddle Start Time 1 and Configuration Time 1(mins) for atleast one store')
+          return;
+        }
+
+        const requiredKeys = this.configData?.aiConfig?.assignConfig === 'store' ? ['Store Name', 'Open Time', 'Close Time', 'Huddle Start Time 1', 'Configuration Time 1(mins)', 'Huddle Start Time 2', 'Configuration Time 2(mins)', 'Huddle Start Time 3', 'Configuration Time 3(mins)'] : ['Store Name', 'Open Time', 'Close Time', 'Assigned Status(true)'];
+        const isValid = data.every((item: any) => {
+          const keys = Object.keys(item);
+          const hasRequiredKeys = requiredKeys.every(key => keys.includes(key));
+          const allKeysAreAllowed = keys.every(key =>
+            requiredKeys.includes(key)
+          );
+          return hasRequiredKeys && allKeysAreAllowed;
+        });
+
+        if (!isValid) {
+          this.toast.getErrorToast('Please Upload a Valid file.');
+          return;
+        }
+
+        data.forEach((element: any, index: any) => {
+          if ((element['Store Name'] && element['Store Name']?.trim() == '') || element['Store Name'] == null) {
+            error.push(`Invalid Store Name - A${index + 2}`)
+          }
+          if ((element['Store Name'] && element['Store Name']?.trim() != '') || element['Store Name'] != null) {
+            let findStore = this.storeList.find((ele: any) => ele.storeName.toLowerCase() == element?.['Store Name'].toLowerCase());
+
+            if (findStore) {
+              element['Open Time'] = findStore?.openTime
+              element['Close Time'] = findStore?.closeTime
+            }
+            else {
+              error.push(`New Store Name -A${index + 2},${element['Store Name']}`)
+            }
+          }
+          if (this.configData?.aiConfig?.assignConfig === 'store') {
+            if (element['Huddle Start Time 1'] && !element['Configuration Time 1(mins)']) {
+              error.push(`Invalid Configuration Time 1(mins) - D${index + 2}`)
+            }
+            if (element['Huddle Start Time 2'] && !element['Configuration Time 2(mins)']) {
+              error.push(`Invalid Configuration Time 2(mins) - E${index + 2}`)
+            }
+            if (element['Huddle Start Time 3'] && !element['Configuration Time 3(mins)']) {
+              error.push(`Invalid Configuration Time 3(mins) - F${index + 2}`)
+            }
+          }
+
+          if (this.configData?.aiConfig?.assignConfig === 'store') {
+            this.userData.push({
+              'storeName': element['Store Name'],
+              'openTime': element['Open Time'],
+              'closeTime': element['Close Time'],
+              'startTime1': formatExcelTime(element['Huddle Start Time 1']),
+              'configTime1': element['Configuration Time 1(mins)'],
+              'startTime2': formatExcelTime(element['Huddle Start Time 2']),
+              'configTime2': element['Configuration Time 2(mins)'],
+              'startTime3': formatExcelTime(element['Huddle Start Time 3']),
+              'configTime3': element['Configuration Time 3(mins)']
+            })
+          } else {
+            this.userData.push({
+              'storeName': element['Store Name'],
+              'openTime': element['Open Time'],
+              'closeTime': element['Close Time'],
+              'isSelected': element['Assigned Status(true)']
+            })
+          }
+        })
+
+
+        if (error.length) {
+          this.dialog.dismissAll();
+          const popupcontent = {
+            displayprop: false,
+            imagesrc: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>`,
+            title: `Invalid details!`,
+            content: `Please provide correct and complete store information.`,
+            buttontype: 'error',
+            error: error
+          }
+          this.afterUplload(popupcontent)
+          return;
+        }
+        else {
+          !ValidationError ? this.afterUplload() : '';
+        }
+        if (this.fileInput) {
+          this.fileInput.nativeElement.value = '';
+        }
+        if (this.fileInput1) {
+          this.fileInput1.nativeElement.value = '';
+        }
+      };
+    }
+    else {
+      if (this.fileInput) {
+        this.fileInput.nativeElement.value = '';
+      }
+      if (this.fileInput1) {
+        this.fileInput1.nativeElement.value = '';
+      }
+      this.toast.getErrorToast('Please Upload a Excel file.');
+    }
+  }
+
+  Reupload() {
+    // this.dialog.dismissAll();
+    this.validatedStore = [];
+    this.inactiveStores = [];
+    this.showStore = false;
+    this.showInactive = false;
+    if (this.fileInput) {
+      this.fileInput.nativeElement.value = '';
+    }
+    if (this.fileInput1) {
+      this.fileInput1.nativeElement.value = '';
+    }
+    let ele = document.getElementById('kt_account_team_size_select_2');
+    ele?.click();
+    this.changedetector.detectChanges();
+  }
+
+  validatedStore: any = [];
+  inactiveStores: any = [];
+  showInactive: any = false;
+
+  validateDetails() {
+    let params: any = {
+      checklistId: this.checklistId,
+      assignedUsers: this.userData,
+      clientId: this.clientId,
+      coverage: this.coverage
+    }
+    this.SopService.validateUserv1(params).pipe(takeUntil(this.detach)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          if (this.upload === 'store') {
+            this.tableArray.unshift(...res?.data?.data);
+            this.configData.storeList = this.tableArray;
+            let data = this.tableArray.map((el: any) => {
+              return { id: el?._id, type: el?.type }
+            })
+            this.idList = data;
+            this.singleAssign = this.idList;
+            this.assignType === 'user' ? this.getassignDropdown('change') : '';
+            this.getTableData();
+          } else {
+            this.tableArray = [];
+            this.tableLoading = true;
+            this.tableArray = res?.data?.data;
+            this.assignSingle = res?.data?.data;
+            this.configData.storeList = this.tableArray;
+            let data = res?.data?.data.map((el: any) => {
+              return { id: el?._id, type: el?.type }
+            })
+            this.idList = data;
+            this.singleAssign = this.idList;
+            this.tableLoading = false;
+            this.assignType === 'user' ? this.getassignDropdown('change') : '';
+            this.getTableData();
+          }
+          this.dialog.dismissAll();
+        }
+      },
+      error: (err: any) => {
+        if (err?.error?.error && err?.error?.code == 400) {
+          let errorData = err?.error?.error;
+          this.excelData = errorData?.data;
+          this.userData = errorData?.data;
+          if (errorData.existEmail?.length) {
+            this.toast.getErrorToast(`Already ${errorData.existEmail.toString()} assigned to another client`)
+          } else if (errorData.store?.length && !errorData.existEmail?.length) {
+            this.validatedStore = errorData?.store;
+            this.showStore = true;
+            this.afterUplload();
+          } else if (errorData.store?.length && errorData.existEmail?.length) {
+            !errorData?.inActiveStores?.length ? this.dialog.dismissAll() : '';
+            this.toast.getErrorToast(`Already ${errorData.store.toString()} assigned to another client`)
+          } else if (errorData?.inActiveStores?.length) {
+            this.inactiveStores = errorData?.inActiveStores;
+            this.showInactive = true;
+            this.afterUplload();
+          } else if (errorData?.user?.length && !errorData?.existEmail?.length) {
+            if (this.upload === 'store') {
+              this.confirmUserpopup();
+            } else {
+              this.afterUplload();
+            }
+          } else if (errorData?.user?.length && errorData?.existEmail?.length) {
+            this.dialog.dismissAll();
+            this.toast.getErrorToast(`Already ${errorData?.user.toString()} assigned to another client`)
+          }
+          if (errorData?.duplicates?.length) {
+            this.dialog.dismissAll();
+            this.toast.getErrorToast(`${errorData?.duplicates?.toString()} - ${errorData?.message}`)
+          }
+        }
+      },
+    })
+
+  }
+
+  closeactivepopup() {
+    this.dialog.dismissAll();
+  }
+
+  searchKey: any = [];
+
+  getassignDropdown(change?: any) {
+
+    let data = {
+      "clientId": this.clientId,
+      "coverage": 'store',
+      "assignType": this.assignType
+    }
+    this.storeList = [];
+    this.SopService.getassignDropdown(data).pipe(takeUntil(this.detach)).subscribe((res: any) => {
+      if (res && res.code == 200 && res.data.data.length) {
+        this.storeList = res?.data?.data;
+        if (data?.coverage === 'store') {
+          this.searchKey = ['storeName', 'storeId']
+        }
+        !change ? this.getInitialData((this.assignType === 'store') ? this.singleAssign : this.groupAssign, change ? change : '') : '';
+        this.changedetector.detectChanges();
+      }
+      else {
+        this.storeList = [];
+        this.tableArray = [];
+        this.tableData = [];
+        this.tableLoading1 = false;
+        this.tableLoading = false;
+      }
+    });
+  }
+
+  getStoreCounts(data: any) {
+    console.log("🚀 ~ AssignComponent ~ getStoreCounts ~ data:", data)
+    // if (this.storeCoverage) {
+    const uniqueStoreNames = new Set(data?.map((item: any) => item['Store Name']));
+    console.log("🚀 ~ AssignComponent ~ getStoreCounts ~ uniqueStoreNames:", uniqueStoreNames)
+    return uniqueStoreNames.size;
+    // } else if (this.userCoverage) {
+    //   const uniqueUserNames = new Set(data?.map((item:any) => item.userName));
+    //   return uniqueUserNames.size;
+    // }
+  }
+
+  userDetails() {
+    this.size = 5;
+    this.tableLoading = true;
+    let params = {
+      id: this.checklistId,
+      clientId: this.clientId
+    }
+    this.SopService.getUserDetailsV1(params).pipe(takeUntil(this.detach)).subscribe((res: any) => {
+      this.tableLoading = false;
+      let count = 0;
+      if (res == null) {
+        this.showImage = true;
+        if (this.tableFilter.length)
+          this.showImage = false;
+        this.tableLoading1 = false;
+        this.tableArray = [];
+        this.tableData = [];
+      }
+      if (res && res.code == 200) {
+        this.showImage = false;
+        this.tableLoading = false;
+        this.tableLoading1 = false;
+        if (this.storeCoverage) {
+          this.tableArray = res.data.userDetails.filter((el: any) => el?.clusterName == '' && el?.storeId != '');
+          this.assignGroup = res.data.userDetails.filter((el: any) => el?.clusterName !== '');
+        } else if (this.userCoverage) {
+          this.tableArray = res.data.userDetails.filter((el: any) => el?.teamName == '' && el?.userName != '');
+          this.assignGroup = res.data.userDetails.filter((el: any) => el?.teamName !== '');
+        }
+        this.assignSingle = this.tableArray;
+        this.recordsTotal = this.tableArray.length;
+        // this.recordsTotal = res.data.count;
+        if (this.recordsTotal < 5) {
+          this.paginationSize = [this.recordsTotal];
+          this.size = this.recordsTotal;
+        }
+        else {
+          this.paginationSize = [5, 10, 15, 20];
+          this.size = 5;
+        }
+        this.tableData = this.tableArray.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+        this.tableData ? this.tableLoading = false : this.tableLoading = true;
+
+        // this.getInitialData();
+      }
+    })
+  }
+
+  downloadTemplateV2() {
+    let excelData: any = [];
+    this.storeList.forEach((el: any) => {
+      excelData.push({
+        'Store Name': el.storeName,
+        'Open Time': el.openTime,
+        'Close Time': el.closeTime,
+        ...(this.configData?.aiConfig?.assignConfig === 'store') ? { 'Huddle Start Time 1': '', 'Configuration Time 1(mins)': '', 'Huddle Start Time 2': '', 'Configuration Time 2(mins)': '', 'Huddle Start Time 3': '', 'Configuration Time 3(mins)': '' } : { 'Assigned Status(true)': false }
+      })
+    });
+    if (this.tableArray.length) {
+      this.tableArray.forEach((element: any) => {
+        let findStore = excelData.findIndex((ele: any) => ele['Store Name'] == element.storeName);
+        if (findStore >= 0) {
+          if (this.configData?.aiConfig?.assignConfig === 'store') {
+            excelData[findStore]['Huddle Start Time 1'] = element.startTime1;
+            excelData[findStore]['Configuration Time 1(mins)'] = element.configTime1;
+            excelData[findStore]['Huddle Start Time 2'] = element.startTime2;
+            excelData[findStore]['Configuration Time 2(mins)'] = element.configTime2;
+            excelData[findStore]['Huddle Start Time 3'] = element.startTime3;
+            excelData[findStore]['Configuration Time 3(mins)'] = element.configTime3;
+          }
+          else {
+            excelData[findStore]['Assigned Status(true)'] = true;
+          }
+        }
+      });
+    }
+
+    // Create a worksheet from the data
+    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(excelData);
+
+    // Get the range of the worksheet
+    const range = XLSX.utils.decode_range(worksheet['!ref'] as string);
+for (let rowNum = range.s.r; rowNum <= range.e.r; rowNum++) {
+  for (let colNum = range.s.c; colNum <= range.e.c; colNum++) {
+    const cellAddress = XLSX.utils.encode_cell({ r: rowNum, c: colNum });
+
+    if (worksheet[cellAddress]) {
+      worksheet[cellAddress].s = worksheet[cellAddress].s || {};
+      worksheet[cellAddress].s.protection = { locked: false }; // ✅ editable
+    }
+  }
+}
+ const readOnlyStyle = {
+  font: { bold: true, color: { rgb: "FF0000" } },
+  fill: { fgColor: { rgb: "F5F5F5" } },
+  border: {
+    top: { style: "thin", color: { rgb: "AAAAAA" } },
+    bottom: { style: "thin", color: { rgb: "AAAAAA" } },
+    left: { style: "thin", color: { rgb: "AAAAAA" } },
+    right: { style: "thin", color: { rgb: "AAAAAA" } },
+  },
+  protection: { locked: false }, // ✅ non-editable
+};
+
+// Start from row 2 (skip header row)
+for (let rowNum = range.s.r + 1; rowNum <= range.e.r; rowNum++) {
+  const openCell = XLSX.utils.encode_cell({ r: rowNum, c: 1 });  // B
+  const closeCell = XLSX.utils.encode_cell({ r: rowNum, c: 2 }); // C
+
+  if (worksheet[openCell]) worksheet[openCell].s = readOnlyStyle;
+  if (worksheet[closeCell]) worksheet[closeCell].s = readOnlyStyle;
+}
+
+
+    // Create a workbook and add the worksheet
+    const workbook: XLSX.WorkBook = {
+      Sheets: { Sheet1: worksheet },
+      SheetNames: ['Sheet1'],
+    };
+
+    // Generate and save the Excel file
+    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+
+
+    this.SopService.saveAsExcelFile(excelBuffer, `CheckList_${this.configData?.aiConfig?.assignConfig ? this.configData?.aiConfig?.assignConfig : this.type}_`);
+  }
+
+  onPageChange(event: any) {
+    this.tableData = [];
+    this.tableLoading = true;
+    this.currentValue = event;
+
+    if (this.tableFilter) {
+      // this.searchTableData();
+      this.recordsTotal = this.searchTable.length;
+      if (this.recordsTotal < 5) {
+        this.paginationSize = [this.recordsTotal];
+        this.size = this.recordsTotal;
+      }
+      else {
+        this.paginationSize = [5, 10, 15, 20];
+        this.size = 5;
+      }
+      this.tableData = this.searchTable.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+      this.tableData ? this.tableLoading = false : this.tableLoading = true;
+    } else {
+      this.tableData = this.tableArray.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+      this.tableData ? this.tableLoading = false : this.tableLoading = true;
+    }
+    this.changedetector.detectChanges();
+  }
+
+  onPageSizeChange(event: any) {
+    this.size = event;
+    this.tableLoading = true;
+    this.tableData = [];
+    this.currentValue = 1;
+
+    if (this.tableFilter) {
+      this.recordsTotal = this.searchTable.length;
+      if (this.recordsTotal < 5) {
+        this.paginationSize = [this.recordsTotal];
+        this.size = this.recordsTotal;
+      }
+      else {
+        this.paginationSize = [5, 10, 15, 20];
+      }
+      this.tableData = this.searchTable.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+      this.tableData ? this.tableLoading = false : this.tableLoading = true;
+
+    } else {
+      this.tableData = this.tableArray.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+      this.tableData ? this.tableLoading = false : this.tableLoading = true;
+    }
+  }
+
+  dropDown: boolean = false;
+  openDropdown(event: any) {
+    event.stopPropagation();
+    this.dropDown = !this.dropDown;
+  }
+  @HostListener('document:click')
+  closeDropdown() {
+    this.dropDown = false;
+  }
+
+  searchTable: any;
+  searchTableData() {
+    this.tableData = [];
+    this.size = 5;
+    this.currentValue = 1;
+    this.tableLoading = true;
+    let searchField: any = ['storeName', 'openTime', 'closeTime'];
+
+    if (!this.tableFilter) {
+      (this.assignType === 'store') ? this.getTableData() : this.userDetailsV2();
+    } else {
+      const searchData = this.tableFilter.toLowerCase();
+      const searchTerm = searchData.split(',').map((el: any) => el.trim());
+      this.searchTable = this.tableArray?.filter((item: any) =>
+        searchField.some((field: any) => searchTerm.some((term: any) => item[field]?.toLowerCase().includes(term))));
+      this.recordsTotal = this.searchTable.length;
+      if (this.recordsTotal < 5) {
+        this.paginationSize = [this.recordsTotal];
+        this.size = this.recordsTotal;
+      }
+      else {
+        this.paginationSize = [5, 10, 15, 20];
+        this.size = 5;
+      }
+      this.tableData = this.searchTable.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+    }
+    this.tableData ? this.tableLoading = false : this.tableLoading = true;
+  }
+
+  sortData(value: any) {
+    this.sortColumn = value;
+    this.sortBy *= -1;
+    const sortBy = parseInt(this.sortBy, 10) === -1 ? -1 : 1;
+    this.tableArray.sort((a: any, b: any) => {
+      return sortBy * (a[this.sortColumn] || '').localeCompare(b[this.sortColumn] || '');
+    });
+
+    this.tableData = this.tableArray.slice((this.currentValue * this.size) - this.size, this.currentValue * this.size);
+  }
+
+  updateAssign(event: any) {
+    this.upload = '';
+    this.currentValue = 1;
+    this.configData.storeList = event;
+    // this.tableArray = event;
+    let data = event.map((el: any) => {
+      return { id: el?._id, type: el?.type }
+    })
+    this.idList = data;
+    this.tableFilter = '';
+    this.getTableData();
+    // this.configData?.aiConfig?.assignConfig === 'store' ? (this.singleAssign = this.idList, this.getTableData()) : (this.groupAssign = this.idList, this.userDetailsV2(event));
+  }
+
+  removedChip(event: any) {
+    this.tableArray = this.tableArray?.filter((item: any) => !event.includes(item._id))
+    this.configData.storeList = this.configData.storeList?.filter((item: any) => !event.includes(item._id))
+    // (this.assignType === 'store' || this.assignType === 'user') ? this.getTableData() :this.userDetailsV2();
+  }
+
+  bulkuploadModel() {
+    this.dropDown = false;
+    this.dialog.open(this.bulkupload, {
+      centered: true, backdrop: 'static'
+    })
+  }
+
+  excelError: any;
+
+  afterUplload(data?: any) {
+    this.excelError = data;
+    this.dialog.open(this.afterValidation, { centered: true, backdrop: 'static' })
+  }
+
+  confirmUserpopup() {
+    this.upload = 'upload';
+    this.tableArray = [];
+    this.tableLoading = true;
+    if (this.configData?.aiConfig?.assignConfig !== 'store') {
+      this.tableArray = this.userData.filter((item: any) => item.isSelected == true);
+      this.tableArray = this.storeList.filter((data: any) =>
+        this.tableArray.some((element: any) => element?.storeName === data?.storeName)
+      );
+
+      if (typeof (this.tableArray) == 'undefined' || this.tableArray == '[]') {
+        this.toast.getErrorToast('The store does not match')
+        return
+      }
+
+      this.tableArray.forEach((el: any) => el.isSelected = true)
+      this.assignSingle = this.tableArray;
+      this.configData.storeList = this.tableArray;
+      this.toast.getSuccessToast("file uploaded successfully")
+      this.getTableData('change');
+    } else {
+      this.tableArray = this.userData;
+      this.tableArray.forEach((data: any) => {
+        const match = this.storeList.find((element: any) => element?.storeName === data?.storeName);
+        if (match) {
+          data.storeId = match?.storeId;
+          data._id = match?._id;
+        }
+      });
+
+      if (typeof (this.tableArray) == 'undefined') {
+        this.toast.getErrorToast('The store does not match')
+        return
+      }
+
+      this.assignSingle = this.tableArray.filter((el: any) => (el?.startTime1 || el?.startTime2 || el?.startTime3));
+      this.configData.storeList = this.tableArray.filter((el: any) => (el?.startTime1 || el?.startTime2 || el?.startTime3));
+      this.toast.getSuccessToast("file uploaded successfully")
+      this.getTableData('change')
+    }
+
+  }
+
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    (event.target as HTMLElement).classList.remove('drag-over');
+  }
+
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    // Add a visual effect to indicate drag is over the area
+    (event.target as HTMLElement).classList.add('drag-over');
+  }
+
+  onDrop(event: DragEvent) {
+    event.preventDefault();
+    (event.target as HTMLElement).classList.remove('drag-over');
+
+    if (event.dataTransfer?.files.length) {
+      const file = event.dataTransfer.files[0];
+      const fileInputElement = this.fileInput.nativeElement;
+
+      // Manually set the file to the input
+      const dataTransfer = new DataTransfer();
+      dataTransfer.items.add(file);
+      fileInputElement.files = dataTransfer.files;
+
+      // Trigger the change event manually
+      fileInputElement.dispatchEvent(new Event('change'));
+    }
+
+  }
+
+}
+
+function formatExcelTime(value: any): string {
+  if (typeof value === 'number') {
+
+    const date = XLSX.SSF.parse_date_code(value);
+    const hours = date.H;
+    const minutes = date.M;
+    const seconds = date.S;
+
+    return `${hours.toString().padStart(2, '0')}:${minutes
+      .toString()
+      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  }
+
+  return value;
+}