tango-app-ui-manage-tickets 3.7.0-beta.58 → 3.7.0-beta.60

package/src/lib/components/audit-retag/audit-retag.component.spec.ts

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

package/src/lib/components/audit-retag/audit-retag.component.ts

@@ -0,0 +1,489 @@
+import { Component, OnInit, HostListener, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import * as LZString from 'lz-string';
+import { ToastService } from 'tango-app-ui-shared';
+import { AuditService } from '../../services/audit.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RemoveAuditComponent } from '../remove-audit/remove-audit.component';
+import { AuditReportPopupComponent } from '../audit-report-popup/audit-report-popup.component';
+import { Subject, takeUntil, Subscription } from 'rxjs';
+import { TimerService } from '../../services/timer.service';
+import { ViewcategoryComponent } from '../viewcategory/viewcategory.component';
+
+@Component({
+  selector: 'lib-audit-retag',
+  templateUrl: './audit-retag.component.html',
+  styleUrl: './audit-retag.component.scss'
+})
+export class AuditRetagComponent implements OnInit, OnDestroy {
+
+  totalfile = 0;
+  customer = 0;
+  junk = 0;
+  employee = 0;
+  junkimage: any = []
+  retagimage: any = []
+  submitvalue: boolean = true;
+  auditmappingdata: any = [];
+  customercount: any = 0;
+  junkcount: any = 0;
+  employeecount: any = 0;
+  employeimage: any = [];
+  filedetails: any = {};
+  auditLoading = false;
+  selectedType: any;
+  private readonly destroy$ = new Subject();
+  timePassed: number = 0;
+  subscription: Subscription | null = null;
+  formattedTime: string = '00:00:00';
+
+  openmodel: boolean = false;
+  category: any = []
+  @HostListener('window:keydown', ['$event'])
+  handleKeyPress(event: KeyboardEvent) {
+    if (this.openmodel) return;
+    // if (event.key === 'g' || event.code === 'KeyG') {
+    //   var group = this.auditmappingdata.filter((data: any) => data.selected === true)
+    //   if (group.length > 0) {
+    //     if (group.length == 1) {
+    //       this.toastr.getErrorToast('Please Select multiple file then add to Group')
+    //     } else {
+    //       let dummyarray = group.shift()
+    //       var groupimages: any = []
+    //       group.forEach((data: any) => {
+    //         this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_name }: { img_name: string }) => img_name == data.img_name), 1);
+    //         groupimages.push(data.mappedid[0])
+    //       })
+    //       dummyarray.count = dummyarray.count + groupimages.length
+    //       dummyarray.selected = false
+
+    //       dummyarray.mappedid = [...dummyarray.mappedid, ...groupimages]
+    //       const jsonString = JSON.stringify(this.auditmappingdata);
+    //       const compressedData = LZString.compress(jsonString);
+    //       sessionStorage.setItem('audit', compressedData)
+    //     }
+
+    //     // this.initial_data_loading()
+    //   } else {
+    //     this.toastr.getErrorToast('Please Select file then add to Group')
+    //   }
+    // }
+    const pressed = (event.key || '').toLowerCase();
+    const matched = this.category.find((m: any) => {
+      if (!m.key) return false;
+      const mapKey = m.key.toLowerCase();
+      // match by event.key (preferred) OR by event.code like 'KeyJ'
+      return pressed === mapKey || event.code === `Key${mapKey.toUpperCase()}`;
+    });
+    console.log(matched)
+    if (!matched) return
+    if (matched) {
+      var newData = this.auditmappingdata.filter((data: any) => data.selected === true)
+      if (newData.length > 0) {
+        var oldData = JSON.parse(sessionStorage.getItem(matched?.type) || '{}')
+        if (Number(oldData.length) > 0) {
+          newData = [...oldData, ...newData]
+        } else {
+          newData = newData
+        }
+        this.category.map((data: any) => {
+          if (data.type === matched?.type) {
+            data.count = newData.length
+          }
+        })
+        sessionStorage.setItem(matched?.type, JSON.stringify(newData))
+        this.auditmappingdata = this.auditmappingdata.filter((data: any) => data.selected === false)
+        const jsonString = JSON.stringify(this.auditmappingdata);
+        const compressedData = LZString.compress(jsonString);
+        sessionStorage.setItem('audit', compressedData)
+        this.toastr.getSuccessToast(`${matched?.type} Added Succesfully!`);
+      } else {
+        this.toastr.getErrorToast(`Please Select file then add to ${matched?.type} `)
+      }
+
+    }
+
+  }
+  constructor(public modalService: NgbModal, private router: Router, private $api: AuditService,
+    private toastr: ToastService, private route: ActivatedRoute, private timerService: TimerService, private cd: ChangeDetectorRef) {
+    this.selectedType = this.route.snapshot.paramMap.get('type')
+  }
+
+  ngOnInit(): void {
+    this.getAuditConfig()
+    if (this.retagimage.length == 0) {
+      this.submitvalue = false;
+    }
+    this.auditLoading = false
+    this.setTimer();
+  }
+  getAuditConfig() {
+
+    let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}')
+    this.$api.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          console.log(res.data.footfallDirectoryConfigs.taggingLimitation)
+          this.category = res.data.footfallDirectoryConfigs.taggingLimitation
+          this.initial_data_loading()
+
+        }
+      }
+    })
+  }
+  setTimer() {
+    this.subscription = this.timerService.getTimePassed().subscribe(time => {
+      this.timePassed = time;
+      this.formattedTime = this.timerService.formatTime(time);
+      this.cd.detectChanges();
+    });
+    this.timerService.startTimer();
+    document.addEventListener('mousemove', this.handleGlobalMouseEvent);
+    document.addEventListener('click', this.handleGlobalMouseEvent);
+    document.addEventListener('mouseenter', this.handleGlobalMouseEvent);
+    document.addEventListener('scroll', this.handleGlobalMouseEvent);
+  }
+
+  handleGlobalMouseEvent = (): void => {
+    this.timerService.startTimer();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+    document.removeEventListener('mousemove', this.handleGlobalMouseEvent);
+    document.removeEventListener('click', this.handleGlobalMouseEvent);
+    document.removeEventListener('mouseenter', this.handleGlobalMouseEvent);
+    document.removeEventListener('scroll', this.handleGlobalMouseEvent);
+    this.timerService.clearTimer()
+
+  }
+
+  initial_data_loading() {
+    if ('audit' in sessionStorage) {
+      let stringifydata = sessionStorage.getItem('audit') || '{}'
+      const decompressedData = LZString.decompress(stringifydata);
+      var auditdata = JSON.parse(decompressedData || '{}')
+      if (auditdata.length > 0) {
+        this.auditmappingdata = auditdata;
+        this.customercount = this.auditmappingdata.length
+      } else {
+        this.auditmappingdata = []
+        this.customercount = 0
+      }
+    }
+
+    this.category.map((data: any) => {
+      var count = JSON.parse(sessionStorage.getItem(data.type) || '{}')
+      data.count = count?.length
+    })
+    if ('retag' in sessionStorage) {
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      if (retagdata.length > 0) {
+        this.retagimage = retagdata;
+        this.submitvalue = true;
+      } else {
+        this.retagimage = [];
+      }
+      
+    }
+   
+    if ('totalfiles' in sessionStorage) {
+      var files = JSON.parse(sessionStorage.getItem('totalfiles') || '{}')
+      this.totalfile = files?.totalfiles
+      this.filedetails = files?.filedetails
+
+    }
+  }
+  getmappingdata() {
+    this.auditLoading = false
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    this.filedetails = totalfile?.filedetails
+
+    var payload: any = {
+      storeId: totalfile?.filedetails?.storeId,
+      fileDate: totalfile?.filedetails?.Date,
+      auditId: totalfile?.auditId,
+      count: totalfile?.totalfiles
+    }
+    this.$api.getAuditmappinglist(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.auditLoading = false
+          sessionStorage.removeItem('retag')
+          this.retagimage = []
+          this.category.map((data: any) => {
+            let filterData = res?.data?.result?.draftedData?.filter((x: any) => x.type === data.type)
+            data.value = filterData[0]?.value && filterData[0]?.value.length > 0 ? filterData[0]?.value : []
+            data.count = data?.value?.length
+            sessionStorage.setItem(data?.type, JSON.stringify(data?.value && data?.value.length > 0 ? data?.value : []))
+
+          })
+          let customerData = res?.data?.result?.draftedData?.filter((x: any) => x.type === 'customer')
+
+          this.auditmappingdata = customerData[0]?.value
+          const jsonString = JSON.stringify(customerData[0]?.value);
+          const compressedData = LZString.compress(jsonString);
+          sessionStorage.setItem('audit', compressedData)
+          this.initial_data_loading()
+        }
+      },
+      error: (err: any) => {
+
+      },
+    })
+  }
+
+  reviewdata() {
+    this.submitvalue = false;
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    if ('audit' in sessionStorage) {
+      let stringifydata = sessionStorage.getItem('audit') || '{}'
+      const decompressedData = LZString.decompress(stringifydata);
+      var auditdata = JSON.parse(decompressedData || '{}')
+      if (auditdata.length > 0) {
+        this.auditmappingdata = auditdata;
+        this.customercount = this.auditmappingdata.length;
+      }
+    }
+    if ('retag' in sessionStorage) {
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      this.retagimage = retagdata;
+      this.auditmappingdata = [...this.auditmappingdata, ...this.retagimage]
+      const jsonString = JSON.stringify(this.auditmappingdata);
+      const compressedData = LZString.compress(jsonString);
+      sessionStorage.setItem('audit', compressedData)
+      sessionStorage.removeItem('retag')
+      this.retagimage = [];
+    }
+    let stringifydata = sessionStorage.getItem('audit') || '{}'
+    const decompressedData = LZString.decompress(stringifydata);
+    var customer = JSON.parse(decompressedData || '{}')
+    let storedData = [
+      {
+        type: "customer",
+        value: customer ? customer : [],
+      }
+    ]
+
+    this.category.map((data: any) => {
+      let sessionvalue = JSON.parse(sessionStorage.getItem(data.type) || '{}');
+      storedData.push({
+        type: data.type,
+        value: sessionvalue && sessionvalue.length > 0 ? sessionvalue : []
+      })
+    })
+    console.log("🚀 ~ StartAuditComponent ~ Reviewdata ~ storedData:", storedData)
+    var inserobj: any = {
+
+      storeId: totalfile?.filedetails?.storeId,
+      auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails.auditId,
+      fileDate: totalfile?.filedetails?.Date,
+      totalCount: totalfile?.totalfiles ? totalfile.totalfiles : 0,
+      retagCount: 0,
+      timeSpent: this.timePassed,
+      retagImage: [],
+      draftedData: storedData
+    }
+    this.$api.saveDraft(inserobj).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.getmappingdata();
+          this.router.navigate(["/manage/tickets/mapping-list",])
+        }
+      },
+      error: (err: any) => {
+        this.toastr.getErrorToast(err?.error)
+      },
+    })
+  }
+
+  retagallowDrop(event: any) {
+    event.preventDefault();
+  }
+  dragStart(event: any) {
+    event.dataTransfer.setData("text/plain", event.target.id);
+  }
+
+  dropretag(event: any) {
+    event.preventDefault();
+    const dropretagimage = event.dataTransfer.getData('text/plain');
+    event.target.appendChild(document.getElementById(dropretagimage));
+    const dropzone: any = dropretagimage;
+    this.auditmappingdata.map((data: any) => {
+
+      if (data.img_id == dropzone.id) {
+        if (data.mappedid.length > 0) {
+          var findone = this.auditmappingdata.filter((data: any) => data.img_name == dropretagimage)
+          if (findone.length > 0) {
+            data.count = data.count + findone[0].count
+            data.mappedid = [...data.mappedid, ...findone[0].mappedid]
+          }
+          if ('duplicate' in sessionStorage) {
+            let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}')
+            filedata = [...filedata, ...findone]
+            sessionStorage.setItem('duplicate', JSON.stringify(filedata))
+          } else {
+            sessionStorage.setItem('duplicate', JSON.stringify(findone))
+            let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}')
+            console.log("🚀 ~ StartAuditComponent ~ dropImage ~ filedata:", filedata)
+
+          }
+          this.category.map((data: any) => {
+            var count = JSON.parse(sessionStorage.getItem(data.type) || '{}')
+            data.count = count?.length
+          })
+          console.log("🚀 ~ AuditRetagComponent ~ dropretag ~ this.category:", this.category)
+        } else {
+          data.count = data.count + 1,
+            data.mappedid.push(dropretagimage)
+        }
+      }
+    })
+  }
+
+  selectretagimage(res: any) {
+    this.retagimage.map((data: any) => {
+      if (data.img_id == res) {
+        if (data.mappedid.length == 1) {
+          data.selected = !data.selected
+        }
+      }
+    })
+  }
+
+  selectgroupimage(res: any) {
+    this.auditmappingdata.map((data: any) => {
+      if (data.img_id == res) {
+        if (data.mappedid.length == 1) {
+          data.selected = !data.selected
+        }
+      }
+    })
+  }
+
+  removeaudit(data: any) {
+    const modalRef = this.modalService.open(RemoveAuditComponent, {
+      size: 'lg',
+      centered: true,
+      backdrop: 'static',
+      keyboard: false
+    })
+    modalRef.componentInstance.data = data;
+    modalRef.closed.subscribe((res: any) => {
+      if (res && res?.reload) {
+        this.initial_data_loading()
+      }
+    })
+
+  }
+  submitaudit() {
+    const modalRef = this.modalService.open(AuditReportPopupComponent, {
+      size: 'lg',
+      centered: true,
+      backdrop: 'static',
+      keyboard: false
+    })
+    modalRef.componentInstance.selectedType = this.selectedType;
+    modalRef.closed;
+  }
+
+
+  viewcategory(data: any) {
+    const modalRef = this.modalService.open(ViewcategoryComponent, {
+      size: 'lg',
+      centered: true,
+      backdrop: 'static',
+      keyboard: false
+    })
+    modalRef.componentInstance.data = data
+    modalRef.componentInstance.imageList = data,
+      modalRef.closed.subscribe((res: any) => {
+        if (res && res?.reload) {
+          this.initial_data_loading()
+        }
+      })
+  }
+
+  dropImage(event: any) {
+    const htmltag = event.dataTransfer.getData('text/html');
+    var Name = getTagNameFromHTML(htmltag);
+    const dropZone = event.target;
+    console.log(Name)
+    debugger
+    if (Name == 'customer' || Name == 'retag') {
+      event.preventDefault();
+      const draggedImageId = event.dataTransfer.getData('text/plain');
+      const draggedImage = document.getElementById(draggedImageId);
+      event.target.appendChild(draggedImage);
+      this.auditmappingdata.map((data: any, index: number) => {
+
+        if (data.img_id === dropZone.id) {
+          let findone = [];
+          const retagdata = JSON.parse(sessionStorage.getItem('retag') || '[]');
+          this.retagimage = retagdata;
+          findone = this.retagimage.filter((imgData: any) => imgData.img_id === draggedImageId);
+          if (findone.length === 0) {
+            findone = this.auditmappingdata.filter((imgData: any) => imgData.img_id === draggedImageId);
+          }
+
+          this.retagimage = this.retagimage.filter((imgData: any) => imgData.img_id !== draggedImageId);
+          sessionStorage.setItem('retag', JSON.stringify(this.retagimage));
+
+          console.log("🚀 ~ AuditRetagComponent ~ dropImage ~ findone:", findone)
+          if (findone.length > 0) {
+            data.count += findone[0].count;
+            
+            data.mappedid = [...data.mappedid, ...findone[0]];
+            if ('duplicate' in sessionStorage) {
+              let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}')
+              filedata = [...filedata, ...findone]
+              sessionStorage.setItem('duplicate', JSON.stringify(filedata))
+            } else {
+              sessionStorage.setItem('duplicate', JSON.stringify(findone))
+              let filedata = JSON.parse(sessionStorage.getItem('duplicate') || '{}')
+              console.log("🚀 ~ StartAuditComponent ~ dropImage ~ filedata:", filedata)
+
+            }
+          } else {
+            data.count += 1;
+            data.mappedid.push(draggedImageId);
+          }
+        }
+      })
+      if (Name == 'customer') {
+        this.auditmappingdata.splice(this.auditmappingdata.findIndex(({ img_id }: { img_id: string }) => img_id == draggedImageId), 1);
+        this.auditmappingdata.map((data: any) => data.selected = false)
+      }
+
+
+      this.customercount = this.auditmappingdata?.length;
+      const jsonString = JSON.stringify(this.auditmappingdata);
+      const compressedData = LZString.compress(jsonString);
+      sessionStorage.setItem('audit', compressedData)
+      var retagdata = JSON.parse(sessionStorage.getItem('retag') || '{}')
+      this.retagimage = retagdata;
+      if (this.retagimage.length == 0) {
+        this.submitvalue = false;
+      }
+      this.category.map((data: any) => {
+        var count = JSON.parse(sessionStorage.getItem(data.type) || '{}')
+        data.count = count?.length
+      })
+    }
+
+
+
+    function getTagNameFromHTML(html: any) {
+      var tempElement = document.createElement('div');
+      tempElement.innerHTML = html;
+      var firstChild: any = tempElement.firstChild;
+      if (firstChild.hasAttribute('name')) {
+        var namePropertyValue = firstChild.getAttribute('name');
+        return namePropertyValue;
+      }
+      return null;
+    }
+  }
+
+}

package/src/lib/components/comment-model/comment-model.component.html

@@ -0,0 +1,24 @@
+<div class="card py-0">
+    <div class="card-body py-0 d-flex flex-start flex-column p-9 ">
+        <div class="my-5">
+            <div class="symbol symbol-75px symbol-circle">
+                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF"/>
+                    <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8"/>
+                    <path d="M37 31C37 31.5304 36.7893 32.0391 36.4142 32.4142C36.0391 32.7893 35.5304 33 35 33H23L19 37V21C19 20.4696 19.2107 19.9609 19.5858 19.5858C19.9609 19.2107 20.4696 19 21 19H35C35.5304 19 36.0391 19.2107 36.4142 19.5858C36.7893 19.9609 37 20.4696 37 21V31Z" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+            </div>
+        </div>
+        <a class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer">Comment</a>
+        <p class="text-sub">Add comment for the ticket</p>
+        <div class="w-100">
+            <label class="label my-2">Comments</label>
+            <textarea class="form-control" [(ngModel)]="comment" rows="4" type="text"></textarea>
+
+            <div  class="d-flex my-7" role="group">
+                <button class="btn btn-outline w-100 me-3" (click)="cancel()">Cancel</button>
+                <button class="btn btn-primary w-100 ms-3"  (click)="commentSubmit()">Submit</button>
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/comment-model/comment-model.component.scss

@@ -0,0 +1,20 @@
+::ng-deep.modal-content {
+    border-radius: 12px !important;
+    overflow: unset !important;
+  }
+
+::ng-deep ngb-modal-window .component-host-scrollable {
+  overflow: unset !important;
+}
+.text-sub{
+  color: var(--Gray-500, #667085) !important;
+font-size: 14px;
+font-weight: 400;
+line-height: 20px;
+}
+.label{
+    color: var(--Gray-700, #344054) !important;
+font-size: 14px;
+font-weight: 500;
+line-height: 20px; 
+}

package/src/lib/components/comment-model/comment-model.component.spec.ts

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

package/src/lib/components/comment-model/comment-model.component.ts

@@ -0,0 +1,53 @@
+import { Component, Input } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { TicketService } from '../../services/ticket.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { Subject, takeUntil } from 'rxjs';
+@Component({
+  selector: 'lib-comment-model',
+  templateUrl: './comment-model.component.html',
+  styleUrl: './comment-model.component.scss'
+})
+export class CommentModelComponent {
+  @Input() ticketId: any;
+  comment:any= ""
+  private readonly destroy$ = new Subject();
+  constructor(private activeModal:NgbActiveModal, private service: TicketService,
+    private toast: ToastService){
+
+  }
+
+  cancel(){
+    this.activeModal.close();
+  }
+  commentSubmit(){
+    if(this.comment == ''){
+      return this.toast.getErrorToast("Please Enter Any comment")
+    }
+    let obj = {
+      "ticketId": this.ticketId,
+      "primary": "",
+      "secondary": [],
+      "comment": this.comment,
+      
+  }
+    this.service
+      .updateTicketIssue(obj)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code === 200) {
+            this.toast.getSuccessToast(res.message);
+            this.activeModal.close("submit");
+          }
+        },
+        error: (err: any) => {
+          this.toast.getErrorToast(err.error.error ? err.error.error : err.error);
+        },
+        complete: () => {},
+      });
+  }
+ 
+}
+
+

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

@@ -0,0 +1,54 @@
+<div class="card">
+    <div class="card-header">
+        <div class="card-title d-grid">
+            <div *ngIf="data?.type" class="card-label">{{data?.type | titlecase}} Count - {{data?.storeId}}</div>
+            <div class="text-sub">{{data?.fileDate | customDateFormat}}</div>
+        </div>
+    <div class="card-toolbar">
+        <button *ngIf="!noData" type="button" (click)="exportTable()"
+            class="btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            <span class="ms-2">Export</span> </button>
+    </div>
+    </div>
+    <div class="card-body">
+        <div class="row mx-3">
+            <div class="col-md-12 item scroll-y">
+                <div class="item" *ngFor="let images of auditImages;let i=index" style="padding: 10px;">
+                    <img class="mx-3 my-3 img" [src]="images?.imgPath">
+                    <div class="text-center m-0 fs-7 fw-bold">{{images?.imgName}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <ng-container *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>
+    </ng-container>
+    <ng-container *ngIf="noData">
+        <div class="row">
+            <div class="col-lg-12 mb-3">
+                <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                    <img class="img-src w-25" src="./assets/tango/Icons/Nodata.svg" alt="">
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</div>
+