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

package/src/lib/components/manage-task/manage-task.component.ts

@@ -0,0 +1,267 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject, BehaviorSubject, takeUntil, debounceTime, distinctUntilChanged } from "rxjs";
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { TraxService } from '../../services/trax.service';
+import { FormControl } from '@angular/forms';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import { Router } from '@angular/router';
+import { TraxpopupComponent } from '../traxpopup/traxpopup.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastService } from 'tango-app-ui-shared';
+dayjs.extend(utc);
+
+
+@Component({
+  selector: 'lib-manage-task',
+  templateUrl: './manage-task.component.html',
+  styleUrl: './manage-task.component.scss'
+})
+export class ManageTaskComponent implements OnDestroy, OnInit {
+
+  dayjs = dayjs
+  private destroy$ = new Subject<void>();
+  itemsPerPage = 10
+  currentPage = 1
+  totalItems = 0
+  paginationSizes = [10, 20, 30]
+  pageSize = 10
+  sortColumName = '';
+  sortDirection = 1;
+  taskTableApiState = new BehaviorSubject<'initial' | 'loading' | 'loaded'>('initial')
+  taskTableData: any[] = []
+  headerData: any;
+  searchInput: FormControl = new FormControl('');
+  
+  constructor(private cd:ChangeDetectorRef, public gs:GlobalStateService, private pageInfo:PageInfoService,
+     private traxService:TraxService, private router:Router, private dialog:NgbModal, private toast:ToastService){
+
+  }
+
+  ngOnInit(): void {
+    this.gs.dataRangeValue
+      .pipe(takeUntil(this.destroy$))
+      .pipe(debounceTime(1000))
+      .subscribe((data: any) => {
+        if (data?.client) {
+          this.headerData = data;
+          this.getTaskTable()
+        }
+        else{
+          this.headerData = JSON.parse(localStorage.getItem('header-filters') as string);
+          this.getTaskTable()
+        }
+
+      })
+      this.setPageData()
+
+      this.searchInput.valueChanges.pipe(takeUntil(this.destroy$)).pipe(debounceTime(500), distinctUntilChanged()).subscribe((val) => {
+        if (val === null || val === undefined) {
+          return
+        }
+        this.currentPage  = 1
+        this.getTaskTable()
+      })
+  }
+
+  setPageData() {
+    this.pageInfo.setTitle("Manage Tasks");
+    this.pageInfo.setDescription("");
+    this.pageInfo.setBreadcrumbs([
+      // { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      // { title: "Analyze", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true },
+      // { title: "Reports", path: "/manage/trax/reports", isActive: false, isSeparator: false },
+      // { title: "Reports", path: "/manage/trax/reports", isActive: false, isSeparator: true },
+    ]);
+
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  getTaskTable(): void {
+    this.taskTableApiState.next('loading')
+    const data: Record<string, any> = {
+      "clientId": this.headerData?.client,
+      "limit": this.pageSize,
+      "offset": this.currentPage,
+      "sortColumn": this.sortColumName,
+      "sortBy": this.sortDirection,
+      "search":this.searchInput.value,
+    }
+
+
+    this.traxService.taskList(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res) => {
+        this.taskTableApiState.next('loaded')
+        if (res?.data?.count) {
+          this.totalItems = res.data.count
+        } else {
+          this.totalItems = 0
+        }
+        if (res?.data?.result) {
+          this.taskTableData = res.data.result
+        } else {
+          this.taskTableData = []
+        }
+      },
+      error: (e) => {
+        this.taskTableApiState.next('loaded')
+
+      }
+    })
+  }
+
+  sortData(column: string): void {
+    if (this.sortColumName === column) {
+      this.sortDirection = this.sortDirection === 1 ? -1 : 1;
+    } else {
+      this.sortColumName = column;
+      this.sortDirection = 1;
+    }
+    this.cd.detectChanges();
+    this.getTaskTable();
+  }
+
+  onPageSizeChange(pageSize: any) {
+    this.currentPage = 1;
+    this.itemsPerPage = pageSize;
+    this.pageSize = pageSize;
+    this.cd.detectChanges();
+    this.getTaskTable()
+  }
+
+  onPageChange(pageOffset: any) {
+    this.currentPage = pageOffset
+    this.getTaskTable()
+  }
+
+  formatDueDate(date:string){
+    return this.dayjs(date).utc().format('hh:mm A, DD MMM YYYY');
+  }
+
+  onAction(type:'view' | 'edit' | 'delete' | 'duplicate', data:any){
+    if(type === 'view'){
+      if(!data?.publish){
+        this.router.navigate(['manage/trax/create-task'], { queryParams: {id:data._id} })
+      }
+    }else if(type === 'edit'){
+      this.router.navigate(['manage/trax/task-configure'], { queryParams: {taskId:data._id} })
+    }else if(type === 'delete'){
+      this.openDeletePopup(data)
+    }else if(type === 'duplicate'){
+      this.onDuplicate(data)
+    }
+
+  }
+
+  openDeletePopup(details:any){
+    if(!details?.publish){
+      const popupcontent = {
+        displayprop: false,
+        imagesrc: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="2" y="2" width="32" height="32" rx="16" fill="#FEE4E2"/><path d="M12 14.0007H13.3333M13.3333 14.0007H24M13.3333 14.0007V23.334C13.3333 23.6876 13.4738 24.0267 13.7239 24.2768C13.9739 24.5268 14.313 24.6673 14.6667 24.6673H21.3333C21.687 24.6673 22.0261 24.5268 22.2761 24.2768C22.5262 24.0267 22.6667 23.6876 22.6667 23.334V14.0007H13.3333ZM15.3333 14.0007V12.6673C15.3333 12.3137 15.4738 11.9746 15.7239 11.7245C15.9739 11.4745 16.313 11.334 16.6667 11.334H19.3333C19.687 11.334 20.0261 11.4745 20.2761 11.7245C20.5262 11.9746 20.6667 12.3137 20.6667 12.6673V14.0007M16.6667 17.334V21.334M19.3333 17.334V21.334" stroke="#D92D20" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/><rect x="2" y="2" width="32" height="32" rx="16" stroke="#FEF3F2" stroke-width="4"/></svg>',
+        title: `Delete '${details.checkListName} Task'?`,
+        content: `Are you sure you want to delete <b>'${details.checkListName}'?</b> This action cannot be undone.`,
+        buttontype: 'delete'
+      }
+      const dialogRef = this.dialog.open(TraxpopupComponent, {centered:true,size:'md'});
+      dialogRef.componentInstance.data = popupcontent;
+      dialogRef.result.then((res) => { 
+        if (res == 'delete') {
+          const requestData = {
+            taskId: details._id
+        };
+          this.traxService.getTaskDelete(requestData).pipe(takeUntil(this.destroy$))?.subscribe({
+            next:(res:any) => {
+              if(res && res.code == 200) {
+                this.getTaskTable();
+                this.toast.getSuccessToast(`${details.checkListName} has been deleted.`);
+              }
+            }
+          });
+        }
+      });
+    }
+    
+  }
+
+  onDuplicate(details:any){
+    const popupcontent = {
+      displayprop: false,
+      imagesrc: '<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF"/><g clip-path="url(#clip0_5545_6743)"><path d="M13.333 20.0007H12.6663C12.3127 20.0007 11.9736 19.8602 11.7235 19.6101C11.4735 19.3601 11.333 19.0209 11.333 18.6673V12.6673C11.333 12.3137 11.4735 11.9746 11.7235 11.7245C11.9736 11.4745 12.3127 11.334 12.6663 11.334H18.6663C19.02 11.334 19.3591 11.4745 19.6092 11.7245C19.8592 11.9746 19.9997 12.3137 19.9997 12.6673V13.334M17.333 16.0007H23.333C24.0694 16.0007 24.6663 16.5976 24.6663 17.334V23.334C24.6663 24.0704 24.0694 24.6673 23.333 24.6673H17.333C16.5966 24.6673 15.9997 24.0704 15.9997 23.334V17.334C15.9997 16.5976 16.5966 16.0007 17.333 16.0007Z" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF" stroke-width="4"/><defs><clipPath id="clip0_5545_6743"><rect width="16" height="16" fill="white" transform="translate(10 10)"/></clipPath></defs></svg>',
+      title: `Duplicate '${details.checkListName} Task'?`,
+      content: `Are you sure you want to duplicate <b>'${details.checkListName}'?</b> This action cannot be undone.`,
+      buttontype: 'duplicate'
+    }
+    const dialogRef = this.dialog.open(TraxpopupComponent, {centered:true,size:'md'});
+    dialogRef.componentInstance.data = popupcontent;
+    dialogRef.result.then((res) => { 
+      if (res == 'duplicate') {
+        this.traxService.duplicateTask({checklistId:details._id,clientId:this.headerData?.client}).pipe(takeUntil(this.destroy$))?.subscribe({
+          next:(res:any) => {
+            if(res && res.code == 200) {
+              this.getTaskTable();
+              this.toast.getSuccessToast(`${details.checkListName} has been duplicated.`);
+            }
+          }
+        });
+      }
+    });
+  }
+
+  publish(event:any,data:any,i:number) {
+    let popupcontent;
+    let htmlContent:any;
+    if(event.target.checked) {
+      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="#D1FADF"/><path d="M38 27.0818V28.0018C37.9988 30.1582 37.3005 32.2565 36.0093 33.9836C34.7182 35.7108 32.9033 36.9743 30.8354 37.5857C28.7674 38.1971 26.5573 38.1237 24.5345 37.3764C22.5117 36.6291 20.7847 35.2479 19.611 33.4389C18.4373 31.6299 17.8798 29.4899 18.0217 27.3381C18.1636 25.1864 18.9972 23.1381 20.3983 21.4989C21.7994 19.8596 23.6928 18.7172 25.7962 18.242C27.8996 17.7667 30.1003 17.9842 32.07 18.8618M38 20.0018L28 30.0118L25 27.0118" stroke="#039855" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#ECFDF3" stroke-width="8"/></svg>',
+        title: `Are you sure you want to publish '${data.checkListName}' task?`,
+        content: `Publishing will make this task live, and changes will take effect immediately.`,
+        buttontype: 'confirm'
+      }
+      htmlContent= `${data.checkListName} has been published</div>`;
+    }
+    else {
+      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: `Are you sure you want to unpublish ‘${data.checkListName}’ task?`,
+        content: `Unpublishing will remove this task immediately, and it will no longer be visible to assigned locations.`,
+        buttontype: 'confirm'
+      }
+      htmlContent= `${data.checkListName} has been unpublished`;
+    }
+    const dialogRef = this.dialog.open(TraxpopupComponent, {
+      centered:true,size:'md' 
+    });
+    dialogRef.componentInstance.data = popupcontent;
+    dialogRef.result.then((res) => {
+      if (res == 'confirm') {
+        this.traxService.publishTask({publish: event.target.checked,clientId:this.headerData?.client,checklistId:data._id}).pipe(takeUntil(this.destroy$)).subscribe((result:any) =>{
+          if(result && result.code == 200) {
+            this.getTaskTable();
+          }
+          else {
+            event.target.checked = data.publish
+          }
+        },(error:any) => {
+          event.target.checked = data.publish;
+          let err = error?.error?.error || 'Please try after sometimes';
+          this.toast.getErrorToast(err);
+          this.cd.detectChanges();
+        })
+      } 
+      else {
+        event.target.checked = data.publish;
+        this.cd.detectChanges();
+      } 
+    })
+  }
+  
+
+}

package/src/lib/components/managechecklist/managechecklist.component.html

@@ -0,0 +1,176 @@
+<div   class="card mb-5">
+    <div class="card" *ngIf="loading">
+        <div class="row loader d-flex justify-content-center align-items-center">
+            <div class="shimmer">
+                <div class="wrapper">
+                    <div class="stroke animate title"></div>
+                    <div class="stroke animate link"></div>
+                    <div class="stroke animate description"></div>
+                </div>
+            </div>
+            <div class="shimmer">
+                <div class="wrapper">
+                    <div class="stroke animate title"></div>
+                    <div class="stroke animate link"></div>
+                    <div class="stroke animate description"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card-body pt-2 pb-1" *ngIf="!loading">
+        <div class="d-flex flex-column">
+            <div  class="d-flex flex-wrap my-2 pe-2">
+                <a routerLink="/manage/trax/checklist" class="d-flex align-items-center me-3 cursor-pointer">
+                    <span><svg width="44" height="44" viewBox="0 0 44 44" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g filter="url(#filter0_d_987_30898)">
+                                <rect x="2" y="1" width="40" height="40" rx="8" fill="white" />
+                                <rect x="2.5" y="1.5" width="39" height="39" rx="7.5" stroke="#D0D5DD" />
+                                <path
+                                    d="M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667"
+                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </g>
+                            <defs>
+                                <filter id="filter0_d_987_30898" x="0" y="0" width="44" height="44"
+                                    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix in="SourceAlpha" type="matrix"
+                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                                    <feOffset dy="1" />
+                                    <feGaussianBlur stdDeviation="1" />
+                                    <feColorMatrix type="matrix"
+                                        values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
+                                    <feBlend mode="normal" in2="BackgroundImageFix"
+                                        result="effect1_dropShadow_987_30898" />
+                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_987_30898"
+                                        result="shape" />
+                                </filter>
+                            </defs>
+                        </svg>
+                    </span>
+                </a>
+                  <div class="checklist-details mx-3">
+                    <div class="d-flex align-items-center maintext mt-2">
+                        Predefined {{type === 'ai' ? 'AI' : ''}} Checklist
+                    </div>
+                    <!-- <div class="subtext">
+                        An overview of the store issues and the downtime for 02 July, 2023
+                    </div> -->
+                  </div>
+            </div>
+            <!--end::Info-->
+        </div>
+
+        <div class="col-ld-12" *ngIf="type === 'predefined'">
+            <div class="row m-0">
+                <div class="col-md-4  my-3" *ngFor="let item of checklistDetails;let i=index">
+                    <div class="checklistimg h-100">
+                        <img class="w-100" src="assets/tango/Images/checklistVideo-player1.svg" alt="Checklist Video Player">
+                        <div class="col-12">
+                            <div class="d-flex flex-stack">
+                                <span class="imgtext me-2">{{item.checkListName}}</span>
+                                <span class="d-flex align-items-center cursor-pointer" (click)="redirectChecklist(item)">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                        <g clip-path="url(#clip0_801_62593)">
+                                            <path d="M9.16797 3.33417H3.33464C2.89261 3.33417 2.46868 3.50977 2.15612 3.82233C1.84356 4.13489 1.66797 4.55881 1.66797 5.00084V16.6675C1.66797 17.1095 1.84356 17.5335 2.15612 17.846C2.46868 18.1586 2.89261 18.3342 3.33464 18.3342H15.0013C15.4433 18.3342 15.8673 18.1586 16.1798 17.846C16.4924 17.5335 16.668 17.1095 16.668 16.6675V10.8342M15.418 2.08417C15.7495 1.75265 16.1991 1.56641 16.668 1.56641C17.1368 1.56641 17.5864 1.75265 17.918 2.08417C18.2495 2.41569 18.4357 2.86533 18.4357 3.33417C18.4357 3.80301 18.2495 4.25265 17.918 4.58417L10.0013 12.5008L6.66797 13.3342L7.5013 10.0008L15.418 2.08417Z" 
+                                            stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                        </g>
+                                        <defs>
+                                            <clipPath id="clip0_801_62593">
+                                                <rect width="20" height="20" fill="white" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg>                                </span>
+                            </div>
+                        </div>
+                        <div class="imgsubtext" >{{item.checkListDescription}}</div>
+                        <div class="col-12">
+                            <div class="d-flex flex-stack justify-content-end">
+                                <!-- <div>
+                                    <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path d="M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                      </svg><span class="mx-1">{{item.userCount}}</span></span>
+                                      <span class="mx-4" ><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path d="M2.14549 4.64215L2.1029 4.70866C1.65644 5.49832 2.13313 6.49629 2.99045 6.61074C3.0681 6.62024 3.14036 6.62526 3.21097 6.62526C3.67349 6.62526 4.08242 6.42684 4.36744 6.11746L4.81011 5.63696L5.25127 6.11884C5.53283 6.42638 5.94083 6.62526 6.40648 6.62526C6.87003 6.62526 7.28038 6.4261 7.56168 6.11884L8.00423 5.63545L8.44678 6.11884C8.72808 6.4261 9.13843 6.62526 9.60199 6.62526C10.0655 6.62526 10.4759 6.4261 10.7572 6.11884L11.1997 5.63545L11.6423 6.11884C11.9236 6.4261 12.3339 6.62526 12.7975 6.62526C12.8658 6.62526 12.9402 6.62022 13.0174 6.61082C13.8935 6.49137 14.3717 5.43995 13.8608 4.64255C13.8608 4.6425 13.8607 4.64246 13.8607 4.64241L12.4542 2.44928L12.4534 2.44811C12.4413 2.42904 12.4113 2.40859 12.3735 2.40859H3.63001C3.5923 2.40859 3.56231 2.42904 3.55014 2.44811L3.54965 2.44888L2.14549 4.64215ZM12.5226 8.58877V11.0943V11.6943H11.9226H4.08091H3.48091V11.0943V8.58914C3.39272 8.5957 3.30351 8.59907 3.21342 8.59907C3.17958 8.59907 3.14596 8.59857 3.11257 8.59759V11.0943V12.6419C3.11257 13.1567 3.53969 13.5895 4.08091 13.5895H11.9226C12.4639 13.5895 12.891 13.1567 12.891 12.6419V11.0943V8.59774C12.8591 8.59862 12.8271 8.59907 12.795 8.59907C12.7035 8.59907 12.6126 8.59559 12.5226 8.58877Z" stroke="#667085" stroke-width="1.2"/>
+                                        </svg><span class="mx-1">{{item.storeCount}}</span></span>
+                                </div> -->
+                           
+                                <!-- <span class="badge badge-light-success" *ngIf="item.publish">Published</span>
+                                <span class="badge badge-light-primary" *ngIf="!item.publish">Open</span> -->
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-ld-12" *ngIf="type === 'ai'">
+            <div class="row m-0">
+                <div class="col-md-4 my-3" *ngFor="let data of checklistDetails;let i=index">
+                    <div class="checklistimg h-100">
+                        <img class="w-100" src="assets/tango/Images/{{data.checkListType}}.png" alt="" (error)="data['default']='show'" *ngIf="!data?.default">
+                        <img class="w-100" src="assets/tango/Images/checklistVideo-player1.svg" alt="Checklist Video Player" *ngIf="data?.default">
+                        <div class="col-12">
+                            <div class="d-flex flex-stack">
+                                <span class="imgtext me-2">{{data.checkListName}}</span>
+                                <!-- <span class="d-flex align-items-center cursor-pointer" (click)="redirectUrl('uniformdetection')">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                        <g clip-path="url(#clip0_801_62593)">
+                                            <path d="M9.16797 3.33417H3.33464C2.89261 3.33417 2.46868 3.50977 2.15612 3.82233C1.84356 4.13489 1.66797 4.55881 1.66797 5.00084V16.6675C1.66797 17.1095 1.84356 17.5335 2.15612 17.846C2.46868 18.1586 2.89261 18.3342 3.33464 18.3342H15.0013C15.4433 18.3342 15.8673 18.1586 16.1798 17.846C16.4924 17.5335 16.668 17.1095 16.668 16.6675V10.8342M15.418 2.08417C15.7495 1.75265 16.1991 1.56641 16.668 1.56641C17.1368 1.56641 17.5864 1.75265 17.918 2.08417C18.2495 2.41569 18.4357 2.86533 18.4357 3.33417C18.4357 3.80301 18.2495 4.25265 17.918 4.58417L10.0013 12.5008L6.66797 13.3342L7.5013 10.0008L15.418 2.08417Z" 
+                                            stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                        </g>
+                                        <defs>
+                                            <clipPath id="clip0_801_62593">
+                                                <rect width="20" height="20" fill="white" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg></span> -->
+                            </div>
+                        </div>
+                        <div class="imgsubtext" >{{data.checkListDescription}}</div>
+                        <div class="col-12">
+                            <div class="d-flex h-45px flex-stack justify-content-between">
+                                <div>
+                                    <!-- <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path d="M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                      </svg><span class="mx-1">{{checklistDetails?.uniformDetection[0]?.uniformUserList || 0}}</span></span> -->
+                                      <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path d="M2.14549 4.64215L2.1029 4.70866C1.65644 5.49832 2.13313 6.49629 2.99045 6.61074C3.0681 6.62024 3.14036 6.62526 3.21097 6.62526C3.67349 6.62526 4.08242 6.42684 4.36744 6.11746L4.81011 5.63696L5.25127 6.11884C5.53283 6.42638 5.94083 6.62526 6.40648 6.62526C6.87003 6.62526 7.28038 6.4261 7.56168 6.11884L8.00423 5.63545L8.44678 6.11884C8.72808 6.4261 9.13843 6.62526 9.60199 6.62526C10.0655 6.62526 10.4759 6.4261 10.7572 6.11884L11.1997 5.63545L11.6423 6.11884C11.9236 6.4261 12.3339 6.62526 12.7975 6.62526C12.8658 6.62526 12.9402 6.62022 13.0174 6.61082C13.8935 6.49137 14.3717 5.43995 13.8608 4.64255C13.8608 4.6425 13.8607 4.64246 13.8607 4.64241L12.4542 2.44928L12.4534 2.44811C12.4413 2.42904 12.4113 2.40859 12.3735 2.40859H3.63001C3.5923 2.40859 3.56231 2.42904 3.55014 2.44811L3.54965 2.44888L2.14549 4.64215ZM12.5226 8.58877V11.0943V11.6943H11.9226H4.08091H3.48091V11.0943V8.58914C3.39272 8.5957 3.30351 8.59907 3.21342 8.59907C3.17958 8.59907 3.14596 8.59857 3.11257 8.59759V11.0943V12.6419C3.11257 13.1567 3.53969 13.5895 4.08091 13.5895H11.9226C12.4639 13.5895 12.891 13.1567 12.891 12.6419V11.0943V8.59774C12.8591 8.59862 12.8271 8.59907 12.795 8.59907C12.7035 8.59907 12.6126 8.59559 12.5226 8.58877Z" stroke="#667085" stroke-width="1.2"/>
+                                        </svg><span class="mx-1">{{data.storeCount || '--'}}</span></span>
+                                </div>
+                           
+                                <!-- <span class="badge badge-light-success" *ngIf="checklistDetails?.uniformDetection?.length">Published</span> -->
+                                <div>
+                                    <div class="d-flex">
+                                        <div *ngIf="['eyetest', 'remoteoptometrist', 'suspiciousactivity', 'suspiciousfootfall', 'drinking', 'bagdetection'].includes(data?.checkListType)">
+                                            <span class="form-check form-switch">
+                                                <input type="checkbox" role="switch" id="support" class="form-check-input cursor-pointer" [checked]="data.publish" (change)="publish($event,data)">
+                                            </span>
+                                        </div>
+                                        <div>
+                                            <div *ngIf="['eyetest', 'remoteoptometrist', 'suspiciousactivity', 'suspiciousfootfall', 'drinking', 'bagdetection'].includes(data?.checkListType)">
+                                                <span class="badge badge-light-primary" *ngIf="!data.publish">Disable</span>
+                                                <span class="badge badge-light-success" *ngIf="data.publish">Enable</span>
+                                            </div>
+                                            <button *ngIf="!['eyetest', 'remoteoptometrist', 'suspiciousactivity', 'suspiciousfootfall', 'drinking', 'bagdetection'].includes(data?.checkListType)" class="btn btn-outline" (click)="redirectToConfigure(data)"><span class="me-3"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                <g clip-path="url(#clip0_10148_34788)">
+                                                  <path d="M10.0026 12.4987C11.3833 12.4987 12.5026 11.3794 12.5026 9.9987C12.5026 8.61799 11.3833 7.4987 10.0026 7.4987C8.62189 7.4987 7.5026 8.61799 7.5026 9.9987C7.5026 11.3794 8.62189 12.4987 10.0026 12.4987Z" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                  <path d="M16.1693 12.4987C16.0583 12.75 16.0252 13.0289 16.0743 13.2992C16.1233 13.5695 16.2522 13.819 16.4443 14.0154L16.4943 14.0654C16.6492 14.2202 16.7722 14.404 16.856 14.6063C16.9399 14.8086 16.9831 15.0255 16.9831 15.2445C16.9831 15.4636 16.9399 15.6804 16.856 15.8828C16.7722 16.0851 16.6492 16.2689 16.4943 16.4237C16.3395 16.5787 16.1557 16.7016 15.9533 16.7855C15.751 16.8693 15.5341 16.9125 15.3151 16.9125C15.0961 16.9125 14.8792 16.8693 14.6769 16.7855C14.4745 16.7016 14.2907 16.5787 14.1359 16.4237L14.0859 16.3737C13.8895 16.1816 13.6401 16.0527 13.3698 16.0037C13.0994 15.9547 12.8206 15.9878 12.5693 16.0987C12.3228 16.2043 12.1126 16.3797 11.9645 16.6033C11.8165 16.8269 11.737 17.0889 11.7359 17.357V17.4987C11.7359 17.9407 11.5603 18.3646 11.2478 18.6772C10.9352 18.9898 10.5113 19.1654 10.0693 19.1654C9.62724 19.1654 9.20332 18.9898 8.89076 18.6772C8.5782 18.3646 8.4026 17.9407 8.4026 17.4987V17.4237C8.39615 17.1479 8.30687 16.8804 8.14636 16.6559C7.98586 16.4315 7.76155 16.2606 7.5026 16.1654C7.25126 16.0544 6.97244 16.0213 6.70211 16.0704C6.43178 16.1194 6.18234 16.2482 5.98594 16.4404L5.93594 16.4904C5.78115 16.6453 5.59733 16.7683 5.395 16.8521C5.19267 16.936 4.9758 16.9792 4.75677 16.9792C4.53774 16.9792 4.32087 16.936 4.11854 16.8521C3.91621 16.7683 3.73239 16.6453 3.5776 16.4904C3.42264 16.3356 3.29971 16.1518 3.21584 15.9494C3.13196 15.7471 3.08879 15.5302 3.08879 15.3112C3.08879 15.0922 3.13196 14.8753 3.21584 14.673C3.29971 14.4706 3.42264 14.2868 3.5776 14.132L3.6276 14.082C3.81972 13.8856 3.94859 13.6362 3.99761 13.3659C4.04662 13.0955 4.01353 12.8167 3.9026 12.5654C3.79697 12.3189 3.62157 12.1087 3.39799 11.9606C3.17442 11.8126 2.91243 11.7331 2.64427 11.732H2.5026C2.06058 11.732 1.63665 11.5564 1.32409 11.2439C1.01153 10.9313 0.835938 10.5074 0.835938 10.0654C0.835938 9.62334 1.01153 9.19941 1.32409 8.88685C1.63665 8.57429 2.06058 8.3987 2.5026 8.3987H2.5776C2.85343 8.39225 3.12094 8.30296 3.34535 8.14246C3.56977 7.98195 3.7407 7.75764 3.83594 7.4987C3.94687 7.24735 3.97996 6.96854 3.93094 6.69821C3.88193 6.42788 3.75305 6.17843 3.56094 5.98203L3.51094 5.93203C3.35598 5.77724 3.23304 5.59343 3.14917 5.3911C3.0653 5.18877 3.02213 4.97189 3.02213 4.75286C3.02213 4.53384 3.0653 4.31696 3.14917 4.11463C3.23304 3.9123 3.35598 3.72849 3.51094 3.5737C3.66573 3.41874 3.84954 3.29581 4.05187 3.21193C4.2542 3.12806 4.47108 3.08489 4.6901 3.08489C4.90913 3.08489 5.12601 3.12806 5.32834 3.21193C5.53067 3.29581 5.71448 3.41874 5.86927 3.5737L5.91927 3.6237C6.11567 3.81581 6.36512 3.94469 6.63545 3.9937C6.90578 4.04272 7.18459 4.00963 7.43594 3.8987H7.5026C7.74908 3.79306 7.95928 3.61766 8.10735 3.39409C8.25541 3.17051 8.33487 2.90852 8.33594 2.64036V2.4987C8.33594 2.05667 8.51153 1.63275 8.82409 1.32019C9.13665 1.00763 9.56058 0.832031 10.0026 0.832031C10.4446 0.832031 10.8686 1.00763 11.1811 1.32019C11.4937 1.63275 11.6693 2.05667 11.6693 2.4987V2.5737C11.6703 2.84185 11.7498 3.10384 11.8979 3.32742C12.0459 3.55099 12.2561 3.7264 12.5026 3.83203C12.7539 3.94296 13.0328 3.97605 13.3031 3.92703C13.5734 3.87802 13.8229 3.74914 14.0193 3.55703L14.0693 3.50703C14.2241 3.35207 14.4079 3.22914 14.6102 3.14526C14.8125 3.06139 15.0294 3.01822 15.2484 3.01822C15.4675 3.01822 15.6843 3.06139 15.8867 3.14526C16.089 3.22914 16.2728 3.35207 16.4276 3.50703C16.5826 3.66182 16.7055 3.84563 16.7894 4.04796C16.8732 4.25029 16.9164 4.46717 16.9164 4.6862C16.9164 4.90522 16.8732 5.1221 16.7894 5.32443C16.7055 5.52676 16.5826 5.71058 16.4276 5.86536L16.3776 5.91536C16.1855 6.11176 16.0566 6.36121 16.0076 6.63154C15.9586 6.90187 15.9917 7.18068 16.1026 7.43203V7.4987C16.2082 7.74517 16.3836 7.95538 16.6072 8.10344C16.8308 8.2515 17.0928 8.33096 17.3609 8.33203H17.5026C17.9446 8.33203 18.3686 8.50763 18.6811 8.82019C18.9937 9.13275 19.1693 9.55667 19.1693 9.9987C19.1693 10.4407 18.9937 10.8646 18.6811 11.1772C18.3686 11.4898 17.9446 11.6654 17.5026 11.6654H17.4276C17.1594 11.6664 16.8975 11.7459 16.6739 11.894C16.4503 12.042 16.2749 12.2522 16.1693 12.4987Z" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                                </g>
+                                                <defs>
+                                                  <clipPath id="clip0_10148_34788">
+                                                    <rect width="20" height="20" fill="white"/>
+                                                  </clipPath>
+                                                </defs>
+                                              </svg></span>Configure</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/managechecklist/managechecklist.component.scss

@@ -0,0 +1,43 @@
+.maintext{
+    color: var(--Gray-900, #101828);
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 155.556% */
+}
+.subtext{
+    color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 400;
+line-height: 20px; /* 142.857% */
+}
+.checklistimg{
+    display: flex;
+// width: 410px;
+padding: 12px;
+flex-direction: column;
+align-items: flex-start;
+gap: 12px;
+border-radius: 12px;
+border: 1px solid var(--Greyscale-100, #DFE1E7);
+background: var(--Greyscale-0, #FFF);
+}
+.imgtext{
+    overflow: hidden;
+color: var(--Greyscale-900, #0D0D12);
+text-overflow: ellipsis;
+font-size: 16px;
+font-style: normal;
+font-weight: 600;
+line-height: 24px; /* 150% */
+}
+.imgsubtext{
+    overflow: hidden;
+color: var(--Gray-500, #667085);
+text-overflow: ellipsis;
+font-size: 12px;
+font-style: normal;
+font-weight: 400;
+line-height: 18px; /* 150% */
+}

package/src/lib/components/managechecklist/managechecklist.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManagechecklistComponent } from './managechecklist.component';
+
+describe('ManagechecklistComponent', () => {
+  let component: ManagechecklistComponent;
+  let fixture: ComponentFixture<ManagechecklistComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ManagechecklistComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ManagechecklistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});