tango-app-ui-manage-tickets 3.7.0-beta.6 → 3.7.0-beta.61

package/src/lib/components/audit-report-popup/audit-report-popup.component.ts

@@ -0,0 +1,397 @@
+import { Component, OnInit, ViewChild, Input, viewChild, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { AuditService } from '../../services/audit.service';
+import * as LZString from 'lz-string';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastService } from 'tango-app-ui-shared';
+import { Subject, takeUntil, Subscription } from 'rxjs';
+import { TimerService } from '../../services/timer.service';
+import { TicketService } from '../../services/ticket.service';
+
+@Component({
+  selector: 'lib-audit-report-popup',
+  templateUrl: './audit-report-popup.component.html',
+  styleUrl: './audit-report-popup.component.scss'
+})
+export class AuditReportPopupComponent implements OnInit, OnDestroy {
+
+  Retagjunkcount: any = 0;
+  Retagemployeecount: any = 0;
+  Retagcustomercount: any = 0;
+  demographicCount: any;
+  retagjunkdata: any;
+  retagemployeedata: any;
+  retagcustomerdata: any;
+  totalfiles: any;
+  auth: boolean = false;
+  submitauth: boolean = false;
+  Errormsg: any = '';
+  @Input() selectedType: any;
+  @ViewChild('confirmerror') confirmerror: any;
+  private readonly destroy$ = new Subject();
+  timePassed: number = 0;
+  subscription: Subscription | null = null;
+  formattedTime: string = '00:00:00';
+  category: any = []
+  centralOpsData: any;
+  tangoData: any;
+  tangoAccuracy:any=''
+  constructor(public modalService: NgbModal,
+    public activeModal: NgbActiveModal,
+    private service: TicketService,
+    public router: Router, private timerService: TimerService, private cd: ChangeDetectorRef,
+    public apiservice: AuditService, private route: ActivatedRoute, private toast: ToastService
+  ) { }
+
+  ngOnInit(): void {
+    let filedata = JSON.parse(sessionStorage.getItem('totalfiles') || '{}')
+    this.totalfiles = filedata;
+    this.apiservice.getAuditconfig(filedata?.filedetails?.clientId).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res?.code == 200) {
+          this.category = res.data.footfallDirectoryConfigs.taggingLimitation
+
+
+          this.category.map((data: any) => {
+            let filterData = JSON.parse(sessionStorage.getItem(data?.type) || '{}')
+            data.value = filterData
+            data.count = data?.value?.length
+          })
+          console.log("🚀 ~ AuditReportPopupComponent ~ ngOnInit ~ this.category:", this.category)
+          let stringifydata = sessionStorage.getItem('audit') || '{}'
+          const decompressedData = LZString.decompress(stringifydata);
+          var customer = JSON.parse(decompressedData || '{}')
+          this.Retagcustomercount = customer.length
+          console.log("🚀 ~ AuditReportPopupComponent ~ ngOnInit ~ this.totalfiles:", this.totalfiles)
+          let input = {
+            storeId: this.totalfiles?.filedetails?.storeId,
+            dateString: this.totalfiles?.filedetails?.Date,
+          }
+          this.service
+            .checkTicketExists(input).pipe(takeUntil(this.destroy$))
+            .subscribe({
+              next: (res: any) => {
+                if (res && res?.code === 200) {
+                  console.log(res.data)
+                  let ticketList = res?.data
+                  let findstoreticket = ticketList.filter((data: any) => data?._source?.type === 'store' && data?._source?.status != "Closed")[0]?._source
+                  if (findstoreticket && findstoreticket?.mappingInfo.length > 0) {
+                    this.centralOpsData = findstoreticket.mappingInfo.filter((data: any) => data.type != "tangoreview")[0]
+                    console.log("🚀 ~ TicketclosepopupComponent ~ ngOnInit ~ this.centralOpsData:", this.centralOpsData)
+                  }
+                  this.tangoAccuracy  = Math.round((this.Retagcustomercount/this.totalfiles?.totalfiles)*100)
+                  this.tangoData ={
+                    revicedFootfall:this.Retagcustomercount,
+                    revicedPerc:this.tangoAccuracy+"%"
+                  }
+                }
+              }
+            })
+
+
+
+
+        }
+      }
+    })
+    this.setTimer();
+  }
+
+  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()
+  }
+
+  changebrand() {
+    this.auth = true;
+    var totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+
+    let junkimage: any = [];
+    let employeeimage: any = [];
+    let customerimage: any = [];
+
+    this.retagjunkdata.map((e: any) => {
+      delete e.img_path; delete e.selected; delete e.count;
+      delete e.dropped; delete e.mappedid;
+      junkimage.push(e);
+    })
+    this.retagemployeedata.map((e: any) => {
+      delete e.img_path; delete e.selected; delete e.count;
+      delete e.dropped; delete e.mappedid;
+      employeeimage.push(e);
+    })
+
+    this.retagcustomerdata.map((e: any) => {
+
+      if (e.count > 1) {
+        delete e.img_path;
+        delete e.selected;
+        delete e.dropped;
+        var result = e.mappedid;
+        e.mappedid = result
+        e.count = result.length
+        e.mappedid.forEach((e1: any) => { delete e1.img_path })
+        customerimage.push(e)
+      }
+      if (e.demographic === 'd' && e.count === 1) {
+        delete e.img_path;
+        delete e.selected;
+        delete e.dropped;
+        var result = e.mappedid;
+        e.mappedid = result
+        e.count = result.length
+        e.mappedid.forEach((e1: any) => { delete e1.img_path })
+        customerimage.push(e)
+      }
+    })
+    var obj: any = {
+      auditId: totalfile?.auditId ? totalfile?.auditId : totalfile?.filedetails?.auditId,
+      storeId: totalfile?.filedetails?.store_id,
+      auditType: totalfile?.filedetails?.type,
+      fileDate: totalfile?.filedetails?.file_date,
+      beforeCount: totalfile?.totalfiles,
+      junkCount: this.Retagjunkcount,
+      junk: junkimage ? junkimage : [],
+      employeeCount: this.Retagemployeecount,
+      employee: employeeimage ? employeeimage : [],
+      customerCount: this.Retagcustomercount,
+      zoneName: totalfile?.filedetails?.zoneName ? totalfile?.filedetails?.zoneName : '',
+      moduleType: this.selectedType,
+      customer: customerimage ? customerimage : [],
+      timeSpent: this.timePassed
+    }
+
+    this.apiservice.saveaudit(obj).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.toast.getSuccessToast(res?.data?.result)
+          this.auth = false;
+          this.timerService.resetTimer()
+          sessionStorage.removeItem('timeSpent')
+          this.closepopup()
+          sessionStorage.removeItem('employee')
+          sessionStorage.removeItem('junk')
+          sessionStorage.removeItem('audit')
+          sessionStorage.removeItem('totalfiles')
+          sessionStorage.removeItem('retag')
+
+          this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
+
+        } else {
+          this.auth = false;
+          if (res && res.code == 203) {
+            this.Errormsg = res.error
+            const modalRef = this.modalService.open(this.confirmerror)
+            modalRef.result.then((result) => {
+              if (result.isConfirmed) {
+                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
+              }
+            })
+          }
+        }
+      },
+      error: (err) => {
+        const errorMessage = err?.error?.message || err?.error?.error || err?.message || 'Invalid status code: undefined';
+        this.toast.getErrorToast(errorMessage);
+      },
+
+    })
+
+  }
+
+  nextfile() {
+    this.auth = true;
+    let totalfile: any = JSON.parse(sessionStorage.getItem('totalfiles') || '{}');
+    console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ totalfile:", totalfile)
+    let revisedDetail: any = []
+    let stringifydata = sessionStorage.getItem('audit') || '{}'
+    const decompressedData = LZString.decompress(stringifydata);
+    var customer = JSON.parse(decompressedData || '{}')
+    customer.map((customerData: any) => {
+      if (customerData.count > 1) {
+        // console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ customerData:", customerData)
+        let duplicateData = customerData.mappedid.filter((data: any) => data.img_name != customerData?.img_name)
+        console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ duplicateData:", duplicateData)
+        let duplicateImage: any = []
+        duplicateData.map((dupData: any) => {
+          duplicateImage.push(
+            {
+              "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${dupData?.img_name}`,
+              "tempId": dupData?.img_name,
+              "filePath": dupData?.img_path,
+              "isChecked": true
+            }
+          )
+
+        })
+        let newObj: any = {
+          "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${customerData?.img_name}`,
+          "clientId": totalfile?.filedetails?.clientId,
+          "storeId": totalfile?.filedetails?.storeId,
+          "tempId": customerData?.img_name,
+          "dateString": totalfile?.filedetails?.Date,
+          // "timeRange": "11AM-12PM",
+          "processType": "footfall",
+          "revopsType": "duplicate",
+          "filePath": customerData?.img_path,
+          "status": "submitted",
+          "description": "",
+          "isChecked": true,
+          "type": "tagging-reflect",
+          "parent": null,
+          "isParent": true,
+          "duplicateImage": duplicateImage
+        }
+        console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ newObj:", newObj)
+        revisedDetail.push(newObj)
+      } else {
+        // console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ customerData:", customerData)
+        let newObj: any = {
+          "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${customerData?.img_name}`,
+          "clientId": totalfile?.filedetails?.clientId,
+          "storeId": totalfile?.filedetails?.storeId,
+          "tempId": customerData?.img_name,
+          "dateString": totalfile?.filedetails?.Date,
+          "timeRange": "11AM-12PM",
+          "processType": "footfall",
+          "revopsType": "duplicate",
+          "filePath": customerData?.img_path,
+          "status": "submitted",
+          "description": "",
+          "isChecked": true,
+          "type": "tagging-reflect",
+          "parent": null,
+          "isParent": true,
+          "duplicateImage": []
+        }
+        console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ newObj:", newObj)
+        revisedDetail.push(newObj)
+      }
+
+
+    })
+    let count: any = []
+    this.category.map((data: any) => {
+      count.push({
+        name: data.name,
+        value: data.count,
+        type: data.type
+      })
+      let filterData = JSON.parse(sessionStorage.getItem(data?.type) || '[]')
+
+      filterData.map((otherData: any) => {
+
+        let otherObj: any = {
+          "id": `${totalfile?.filedetails?.storeId}_${totalfile?.filedetails?.Date}_${otherData?.img_name}`,
+          "clientId": totalfile?.filedetails?.clientId,
+          "storeId": totalfile?.filedetails?.storeId,
+          "tempId": otherData?.img_name,
+          "dateString": totalfile?.filedetails?.Date,
+          "processType": "footfall",
+          "revopsType": data?.type,
+          "filePath": otherData?.img_path,
+          "status": "submitted",
+          "description": "",
+          "isChecked": true,
+          "type": "tagging-reflect",
+          "parent": null,
+          "isParent": false,
+          "duplicateImage": []
+        }
+        revisedDetail.push(otherObj)
+      })
+    })
+
+
+    let ticketType = sessionStorage.getItem('ticketType')
+
+    var obj: any = {
+      "type": "tangoreview",
+      "mode": "web",
+      "revicedFootfall": this.Retagcustomercount,
+
+      "revicedPerc": Math.round((this.Retagcustomercount / totalfile?.totalfiles) * 100) + "%",
+      count: count,
+      revisedDetail: revisedDetail
+    }
+    console.log("🚀 ~ AuditReportPopupComponent ~ nextfile ~ obj:", obj)
+    // return
+    let payload = {
+      storeId: totalfile?.filedetails?.storeId,
+      "dateString": totalfile?.filedetails?.Date,
+      ticketType: ticketType,
+      mappingInfo: obj
+    }
+    this.apiservice.saveaudit(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res && res.code == 200) {
+          this.auth = false;
+          this.timerService.resetTimer()
+          sessionStorage.removeItem('timeSpent')
+          this.closepopup()
+          sessionStorage.removeItem('employee')
+          sessionStorage.removeItem('junk')
+          sessionStorage.removeItem('audit')
+          sessionStorage.removeItem('totalfiles')
+          sessionStorage.removeItem('retag')
+          var obj: any = {
+            totalfiles: {
+            }
+          }
+          obj.totalfiles.queueName = totalfile?.filedetails?.queueName
+          sessionStorage.setItem('totalfiles', JSON.stringify(obj))
+          this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
+
+        } else {
+          this.auth = false;
+          if (res && res.code == 203) {
+            this.Errormsg = res.error
+            const modalRef = this.modalService.open(this.confirmerror)
+            modalRef.result.then((result) => {
+              if (result.isConfirmed) {
+                this.router.navigate(['/manage/tickets'], { queryParams: { type: 'footfall' } })
+              }
+            })
+          }
+        }
+
+      },
+      error: (err) => {
+        const errorMessage = err?.error?.message || err?.error?.error || err?.message || 'Invalid status code: undefined';
+        this.toast.getErrorToast(errorMessage);
+      },
+    })
+
+  }
+  closepopup() {
+    this.activeModal.close();
+  }
+
+  reviewdata() {
+    this.router.navigate(["/manage/tickets/mapping-list"])
+    this.activeModal.close();
+  }
+
+}

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

@@ -0,0 +1,129 @@
+<div class="card">
+    <div class="card-header">
+        <div class="card-title">
+            <h3 class="flex-column">
+                <div class="card-label">
+                    <span>{{filedetails?.storeId}}</span>
+                    <span class="mx-3 arrow-code"> - </span>
+                    <span>{{filedetails?.Date}}</span>
+                </div>
+            </h3>
+            <div class="rounded-3 ms-3 d-flex align-items-center bg-timer">
+                <span class="me-3 text-timer fw-semibold">{{ formattedTime }}</span>
+                <span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <path
+                            d="M9.16667 2.87071C9.16667 2.62023 9.26617 2.38001 9.44329 2.20289C9.62041 2.02577 9.86063 1.92627 10.1111 1.92627H13.8889C14.1394 1.92627 14.3796 2.02577 14.5567 2.20289C14.7338 2.38001 14.8333 2.62023 14.8333 2.87071C14.8333 3.1212 14.7338 3.36142 14.5567 3.53854C14.3796 3.71565 14.1394 3.81516 13.8889 3.81516H12.9444V5.07442L12.9432 5.12605C14.5396 5.30097 16.0528 5.92787 17.3053 6.93308L17.3141 6.92553L18.2585 5.98108C18.374 5.85676 18.5208 5.76588 18.6835 5.71801C18.8463 5.67014 19.019 5.66706 19.1833 5.70908C19.3477 5.75111 19.4977 5.83669 19.6175 5.9568C19.7373 6.07692 19.8225 6.22713 19.8641 6.3916C19.906 6.55578 19.903 6.72823 19.8554 6.89085C19.8077 7.05348 19.7172 7.20029 19.5933 7.3159L18.6489 8.26034L18.6413 8.26915C19.6403 9.51974 20.2658 11.027 20.446 12.6174C20.6261 14.2078 20.3536 15.8167 19.6597 17.2591C18.9658 18.7014 17.8788 19.9185 16.5237 20.7704C15.1686 21.6222 13.6006 22.0741 12 22.0741C10.3994 22.0741 8.83137 21.6222 7.47629 20.7704C6.12122 19.9185 5.03419 18.7014 4.3403 17.2591C3.64641 15.8167 3.37386 14.2078 3.55402 12.6174C3.73418 11.027 4.35973 9.51974 5.35867 8.26915L5.35111 8.26034L4.40667 7.3159C4.23964 7.1369 4.14865 6.90003 4.15287 6.65524C4.1571 6.41045 4.25622 6.17687 4.42934 6.00375C4.60246 5.83063 4.83604 5.73151 5.08083 5.72728C5.32562 5.72306 5.56249 5.81405 5.74149 5.98108L6.68593 6.92553L6.69474 6.93308C7.94681 5.92809 9.45963 5.3012 11.0556 5.12605V3.81516H10.1111C9.86063 3.81516 9.62041 3.71565 9.44329 3.53854C9.26617 3.36142 9.16667 3.1212 9.16667 2.87071ZM12 20.1855C13.7535 20.1854 15.4352 19.4886 16.675 18.2485C17.9148 17.0085 18.6113 15.3267 18.6111 13.5732C18.6109 11.8196 17.9142 10.138 16.6741 8.89813C15.4341 7.65831 13.7523 6.96188 11.9987 6.96204C10.2452 6.96221 8.56354 7.65896 7.32372 8.89902C6.0839 10.1391 5.38747 11.8209 5.38763 13.5744C5.3878 15.328 6.08455 17.0096 7.32461 18.2494C8.56467 19.4893 10.2465 20.1857 12 20.1855ZM12.4899 11.7485L14.1647 10.0737C14.2517 9.98343 14.3559 9.91143 14.4711 9.86188C14.5863 9.81233 14.7102 9.78622 14.8356 9.78507C14.9611 9.78392 15.0854 9.80776 15.2015 9.85519C15.3176 9.90262 15.4231 9.9727 15.5118 10.0613C15.6005 10.15 15.6707 10.2554 15.7182 10.3714C15.7658 10.4875 15.7897 10.6118 15.7887 10.7372C15.7877 10.8626 15.7617 10.9866 15.7122 11.1018C15.6628 11.2171 15.5909 11.3213 15.5007 11.4085L13.8259 13.0846C13.9003 13.3645 13.9095 13.6579 13.8526 13.942C13.7958 14.226 13.6745 14.4933 13.4981 14.7231C13.3217 14.9529 13.0949 15.1391 12.8352 15.2675C12.5754 15.3958 12.2897 15.4628 12 15.4633C11.7327 15.461 11.4688 15.4019 11.226 15.29C10.9832 15.1781 10.767 15.0159 10.5916 14.8141C10.4162 14.6123 10.2857 14.3755 10.2087 14.1195C10.1316 13.8635 10.1099 13.594 10.1448 13.329C10.1798 13.0639 10.2706 12.8093 10.4114 12.582C10.5522 12.3547 10.7396 12.1599 10.9613 12.0104C11.183 11.861 11.4339 11.7604 11.6974 11.7152C11.9609 11.6701 12.231 11.6814 12.4899 11.7485Z"
+                            fill="black" />
+                    </svg></span>
+            </div>
+        </div>
+        <div class="card-toolbar">
+            <div class="d-flex">
+                <div class="d-flex align-items-center position-relative my-1">
+                    <a class="btn btn-sm btn-default btn-outline py-2 mx-2" (click)="reviewdata()"><span
+                            class="svg-icon svg-icon-primary svg-icon-2x"><svg xmlns="http://www.w3.org/2000/svg"
+                                width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                <path
+                                    d="M15.8337 10.0001H4.16699M4.16699 10.0001L10.0003 15.8334M4.16699 10.0001L10.0003 4.16675"
+                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg></span><span class="ms-3">Back to Review</span></a>
+                    <button class="btn btn-sm btn-primary py-2 mx-2" [disabled]="submitvalue"
+                        (click)="submitaudit()">Submit
+                        <span class="svg-icon svg-icon-primary svg-icon-2x"><svg xmlns="http://www.w3.org/2000/svg"
+                                width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                <path
+                                    d="M4.16699 10.0001H15.8337M15.8337 10.0001L10.0003 4.16675M15.8337 10.0001L10.0003 15.8334"
+                                    stroke="white" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card-header">
+        <h3 class="card-title align-items-center flex-row">
+            <span class="card-label text-dark">Total Files - <span>{{totalfile}}</span></span>
+         
+        </h3>
+        <div class="card-toolbar ">
+            <div class="d-flex">
+                <div class="d-flex align-items-center position-relative my-1">
+                    <span class="me-3 text fw-semibold">Unique Customers <span
+                            class=" badge badge-light-primary">{{auditmappingdata?.length ? auditmappingdata?.length :
+                            0}}</span></span>
+                            <div   *ngFor="let item of category">
+                                <button class="btn btn-outline text w-semibold btn-sm py-2 butn-flag mx-2" (click)="viewcategory(item)" [disabled]="!item?.count">View
+                                    {{item?.name}}
+                                    <span class=" badge badge-light-primary">{{item?.count}}</span> </button>
+                            </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div *ngIf="auditLoading" class="card mt-5">
+        <div class="card-body h-500px">
+            <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>
+            <!-- <h5 class="text-dark-600 fw-bold text-center mt-5">Loading Audit file......</h5> -->
+        </div>
+    </div>
+    <div *ngIf="!auditLoading" class="col-md-5">
+        <div class="card mt-5">
+            <div class="card-body h-1000px">
+                <div class="card-label fw-bold">Images for Retagging</div>
+                <div class="text-sub mt-2 fw-semibold">Drag and Drop on correct customers</div>
+                <div class="item" *ngFor="let obj1 of retagimage" (dragover)="retagallowDrop($event)">
+                    <img draggable="true" (dragstart)="dragStart($event)" id="{{obj1.img_id}}" [src]="obj1.img_path"
+                        class="my-3 mx-4 img-ret" (click)="selectretagimage(obj1.img_id)" name="retag">
+                    <div class="text-center m-0 fs-7 fw-bold">{{obj1.img_name}}</div>
+                    <span *ngIf="obj1.selected" class="notify-badge1 nwbg"><i class="fa fa-check colorvalue"
+                            aria-hidden="true" style="font-size:15px;color:#00A3FF"></i></span>
+                    <span class="notify-badge cursor-pointer" (click)="removeaudit(obj1)"
+                        *ngIf="obj1.count>1">{{obj1.count}}</span>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="!auditLoading" class="col-md-7">
+        <div class="card mt-5">
+            <div class="card-body h-1000px">
+                <div class="card-label fw-bold">Unique Customers <span class="card-label">{{auditmappingdata?.length ?
+                        auditmappingdata?.length : 0}}</span></div>
+                <div class="item" *ngFor="let obj of auditmappingdata;let i=index" style="padding: 10px;">
+
+                    <img class="mx-3 mb-5 img" [src]="obj.img_path" id="{{obj.img_id}}" alt="Image" name="customer"
+                        (dragover)="retagallowDrop($event)" (drop)="dropImage($event)" draggable="true"
+                        (dragstart)="dragStart($event)" (click)="selectgroupimage(obj.img_id )">
+                    <div class="text-center m-0 fs-7 fw-bold">{{obj.img_name}}</div>
+                    <span *ngIf="obj.selected" class="notify-badge1"><i class="fa fa-check" aria-hidden="true"
+                            style="font-size:15px;color:#00A3FF"></i></span>
+
+                    <span class="notify-badge cursor-pointer" (click)="removeaudit(obj)"
+                        *ngIf="obj.count>1">{{obj.count}}</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+</div>

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

@@ -0,0 +1,146 @@
+.img {
+    width: 90px;
+    height: 200px;
+}
+
+.text{
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+.text-sub{
+    color: var(--Gray-500, #667085) !important;
+    font-family: "Inter";
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 20px;
+}
+
+.card-label{
+    font-family: 'Inter';
+font-style: normal;
+// font-weight: 700 !important;
+font-size: 18px !important;
+// line-height: 27px;
+// color: #3F4254 !important;
+}
+.text-col{
+    font-family: 'Inter';
+font-style: normal;
+font-weight: 400;
+font-size: 14px;
+line-height: 17px;
+color: #3F4254;
+}
+
+.img-ret{
+    width: 90px;
+    height: 170px; 
+}
+
+.butn:hover{
+    color:#009ef7 !important
+}
+.butn-flag {
+    border: 1px solid #009ef7 !important;
+    border-right-style: none !important;
+    border-radius: 0.5rem 0rem 0rem 0.5rem !important;
+    padding: calc(0.25rem + 1px) calc(1.5rem + 1px) !important;
+    background-color: #fff !important;
+}
+
+.butn-flag1 {
+    border: 1px solid #009ef7 !important;
+    border-radius: 0rem 0.5rem 0.5rem 0rem !important;
+    padding: calc(0.25rem + 1px) calc(1.5rem + 1px) !important;
+    background-color: #fff !important;
+}
+
+.btn.btn-light-primary:hover:not(.btn-active) {
+    background-color: #fff !important;
+}
+.btn-check:checked + .btn.btn-light-primary, .btn-check:active + .btn.btn-light-primary, .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary.active, .btn.btn-light-primary.show, .show > .btn.btn-light-primary {
+    background-color: #fff !important;
+}   
+.butn {
+    border: 1px solid #009ef7 !important;
+    padding: calc(0.65rem + 1px) calc(1.5rem + 1px) !important;
+}
+
+.h-800px{
+    min-height: 120px;
+    max-height: auto;
+}
+
+.h-500{
+    min-height: 300px;
+}
+
+.h-1000px{
+    overflow: auto;
+}
+
+.item {
+    position: relative;
+    padding-top: 20px;
+    display: inline-block;
+}
+        .notify-badge {
+            position: absolute;
+            right: 0px;
+            top: 195px;
+            background: var(--Primary-50, #EAF8FF);
+            border: 2px solid var(--Primary-600, #00A3FF);
+            text-align: center;
+            border-radius: 6px;
+            color: #00A3FF;
+            padding: 5px 10px;
+            font-size: 15px;
+        }
+        .notify-badge1 {
+            position: absolute;
+            right: 14px;
+            top: 5px;
+            background: var(--Primary-50, #EAF8FF);;
+            text-align: center;
+            border-radius: 6px;
+            border: 2px solid var(--Primary-600, #00A3FF);
+            color: #00A3FF;
+            padding: 0px 7px;
+            font-size: 19px;
+        }
+
+        .colorvalue{
+            font-size:20px;color:rgb(255, 255, 255)
+        }
+        .nwbg{
+            top: 23px !important;
+            right: 7px !important;
+        }
+
+        .svg-icon.svg-icon-2x svg{
+            width:20px !important;
+            height:20px !important;
+        }
+        .btn-outline {
+            border-radius: 8px;
+            border: 1px solid var(--Gray-300, #D0D5DD);
+            background: var(--White, #FFF);
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 24px;
+}
+
+.text-timer{
+    color: var(--Gray-900, #101828);
+font-size: 24px;
+line-height: 32px; 
+} 
+.bg-timer{
+    border-radius: 12px;
+    background: var(--Primary-25, #F6FCFF);
+    padding:4px
+}