tango-app-ui-manage-tickets 3.7.0-beta.7 → 3.7.0-beta.70

package/.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "lib",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "lib",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/tango-manage-tickets",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,25 +1,12 @@
-{
-  "name": "tango-app-ui-manage-tickets",
-  "version": "3.7.0-beta.7",
-  "peerDependencies": {
-    "@angular/common": "^17.0.0",
-    "@angular/core": "^17.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/tango-app-ui-manage-tickets.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/tango-app-ui-manage-tickets.mjs",
-      "esm": "./esm2022/tango-app-ui-manage-tickets.mjs",
-      "default": "./fesm2022/tango-app-ui-manage-tickets.mjs"
-    }
-  }
-}
+{
+  "name": "tango-app-ui-manage-tickets",
+  "version": "3.7.0-beta.70",
+  "peerDependencies": {
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/lib/components/add-csm-modal/add-csm-modal.component.html

@@ -0,0 +1,32 @@
+<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="M32 37V35C32 33.9391 31.5786 32.9217 30.8284 32.1716C30.0783 31.4214 29.0609 31 28 31H21C19.9391 31 18.9217 31.4214 18.1716 32.1716C17.4214 32.9217 17 33.9391 17 35V37M36 24V30M39 27H33M28.5 23C28.5 25.2091 26.7091 27 24.5 27C22.2909 27 20.5 25.2091 20.5 23C20.5 20.7909 22.2909 19 24.5 19C26.7091 19 28.5 20.7909 28.5 23Z" 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">Assign Ticket</a>
+        <p class="text-sub">Assign the ticket to a particular user</p>
+        <div class="mt-5 w-100">
+            <!-- <lib-reactive-select [formControl]="csmSelectInput" [idField]="'email'" [nameField]="'userName'" [data]="csmUserList" ></lib-reactive-select> -->
+
+                <!-- <select [formControl]="csmSelectInput" class="form-select border-val my-3">
+                    <option [value]="user.email" *ngFor="let user of csmUserList">{{user.userName}}</option>
+                </select> -->
+
+                <lib-select [items]="userList" [multi]="false" [searchField]="'userName'" [idField]="'_id'"
+                (selected)="onCsmSelect($event)" ></lib-select>
+
+                    <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" [disabled]="!csmSelectInput.value" (click)="assignCsm()">Submit</button>
+                    </div>
+                  
+        </div>
+
+    </div>
+</div>

package/src/lib/components/add-csm-modal/add-csm-modal.component.scss

@@ -0,0 +1,14 @@
+::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;
+}

package/src/lib/components/add-csm-modal/add-csm-modal.component.spec.ts

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

package/src/lib/components/add-csm-modal/add-csm-modal.component.ts

@@ -0,0 +1,94 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Subject, takeUntil } from 'rxjs';
+import { GlobalStateService } from 'tango-app-ui-global';
+import { TicketService } from '../../services/ticket.service';
+import { ToastService } from 'tango-app-ui-shared';
+
+@Component({
+  selector: "lib-add-csm-modal",
+  templateUrl: "./add-csm-modal.component.html",
+  styleUrl: "./add-csm-modal.component.scss",
+})
+export class AddCsmModalComponent implements OnInit, OnDestroy {
+  @Input() ticketId: any;
+  csmUserList: any = [];
+  csmSelectInput = new FormControl("");
+  private readonly destroy$ = new Subject();
+  headerFilters: any;
+  userList_req: {};
+  users: any=[];
+  userList: any=[];
+
+  constructor(
+    private activeModal: NgbActiveModal,
+    public gs: GlobalStateService,
+    private service: TicketService,
+    private toast: ToastService
+  ) {}
+  ngOnInit(): void {
+    const userData: any = JSON.parse(localStorage.getItem("user-info") || "{}");
+    this.users = userData;
+    this.gs.dataRangeValue?.pipe(takeUntil(this.destroy$))?.subscribe({
+      next: (data: any) => {
+        if (data) {
+          this.headerFilters = data;
+          this.userList_req = {
+            "userType": this.users.userType,    "isActive": true
+            // clientId: this.headerFilters.client,
+            // limit: 10000,
+            // offset: 1,
+            // userType: this.users.userType,
+            // FilterByStatus:'isActive'
+          };
+          this.getuserlist();
+        }
+      },
+    });
+  }
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  getuserlist() {
+    this.service
+      .getUserActiveList(this.userList_req)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res: any) => {
+        if (res && res.code === 200) {
+          this.userList = res?.data?.result;
+        }
+      });
+  }
+
+  assignCsm() {
+    let obj = {
+      tickets: this.ticketId,
+      user: this.csmSelectInput.value,
+    };
+    this.service
+      .getAssignTicket(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: () => {},
+      });
+  }
+
+  onCsmSelect(selectedCsm: any) {
+    this.csmSelectInput.setValue(selectedCsm?._id);
+  }
+  cancel() {
+    this.activeModal.close("submit");
+  }
+}

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

@@ -0,0 +1 @@
+<p>audit-log works!</p>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-audit-log',
+  templateUrl: './audit-log.component.html',
+  styleUrl: './audit-log.component.scss'
+})
+export class AuditLogComponent {
+
+}

package/src/lib/components/audit-mapping-list/audit-mapping-list.component.html

@@ -0,0 +1,234 @@
+<div *ngIf="!auditLoading" class="card" >
+    <div class="card-header" >
+        <div class="card-title">
+            <h3 class="flex-column">
+                <!-- <span class="card-label fw-bold">{{filedetails?.queueName}}<span class="mx-3 arrow-code"> - </span> -->
+                    <span>{{filedetails?.storeId}}</span>
+                    
+                    <span class="mx-3 arrow-code"> - </span>
+                    <span >{{filedetails?.Date}}</span>
+                    <!-- <span class="mx-3 arrow-code"> - </span>
+                    <span >{{filedetails?.type}}</span> -->
+                <!-- </span> -->
+            </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>
+            <!-- <span *ngIf="demographic" class="badge badge-light-success ms-3">{{demographic}} {{demographic > 1 ? 'Demographics' : 'Demographic'}}</span> -->
+        </div>
+
+        <div class="card-toolbar ">
+            <div class="d-flex">
+                <div class="d-flex align-items-center position-relative my-1">
+                    <a *ngIf="!showvalue1" class="btn btn-sm btn-default btn-outline py-2 mx-2" (click)="changesdata()"><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 Tagging</span></a>
+                            <button *ngIf="!showvalue" class="btn btn-sm btn-primary py-2 mx-2" (click)="submitaudit()"  >Submit
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                    <path d="M4.16699 9.99984H15.8337M15.8337 9.99984L10.0003 4.1665M15.8337 9.99984L10.0003 15.8332" stroke="white" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg>
+                            </button>
+                
+                    <button *ngIf="showvalue" class="btn btn-primary btn-sm py-2 mx-2" [disabled]="submitted" (click)="taggingview()">Retag <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.16666 9.99996H15.8333M15.8333 9.99996L9.99999 4.16663M15.8333 9.99996L9.99999 15.8333" stroke="white" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg></span>
+                        </button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    
+</div>
+
+
+<div class="row"> 
+    <div *ngIf="auditLoading" class="card mt-5">
+            <div class="card-body">
+            <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 fs-3 fw-bold text-center ">Loading Audit file......</h5> -->
+    </div>
+    </div>
+    <div *ngIf="!auditLoading" class="col-md-7">
+        <div class="card mt-5">
+            <div class="h-1000px">
+                <div ngbAccordion *ngFor="let item of category">
+                    <div *ngIf="item?.count !==0" class="mt-6" ngbAccordionItem [collapsed]="!item?.count">
+                        <div ngbAccordionHeader>
+                            <button class="mainheading" ngbAccordionButton>
+                              <div>
+                                {{item?.name}} <span class="sub-text mt-2 ms-2">
+                                    <span class="badge badge-light-default"><svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                     <g clip-path="url(#clip0_14508_18583)">
+                                     <path d="M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z" stroke="#667085" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+                                     </g>
+                                     <defs>
+                                     <clipPath id="clip0_14508_18583">
+                                     <rect width="12" height="12" fill="white"/>
+                                     </clipPath>
+                                     </defs>
+                                     </svg>{{item?.count}}</span>
+                                    </span>
+                              </div>
+                              <div class="divider"></div>
+                            </button>
+                          </div>
+                         
+                        <div ngbAccordionCollapse>
+                            <div ngbAccordionBody class="py-0">
+                                <ng-template>
+                                    <div class="h-auto" (dragover)="allowDrop($event)">
+                                        <div class="col-md-12 item" >
+                                            <div class="item" *ngFor="let obj of item?.value" >
+                                        <img draggable="true" (dragstart)="drag($event)" id="{{obj.img_id}}" name="{{item.type}}"
+                                             class="my-3 mx-2 img" [src]="obj.img_path">
+                                            <div class="text-center m-0 fs-7 fw-bold">{{obj.img_name}}</div>
+                                            </div>
+                                            </div>
+                                    </div>
+                                </ng-template>
+                            </div>
+                        </div>
+                    </div>
+                    
+                   
+                </div>
+                <div ngbAccordion>
+                    <div class="mt-6" ngbAccordionItem [collapsed]="!(!junkcount && !employeecount)">
+                           <div ngbAccordionHeader>
+                               <button class="mainheading" ngbAccordionButton>
+                                 <div>
+                                   Unique Customer  <span class="sub-text mt-2 ms-2">
+                                       <span class="badge badge-light-default"><svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                           <g clip-path="url(#clip0_15800_3911)">
+                                           <path d="M8.5 10.5V9.5C8.5 8.96957 8.28929 8.46086 7.91421 8.08579C7.53914 7.71071 7.03043 7.5 6.5 7.5H2.5C1.96957 7.5 1.46086 7.71071 1.08579 8.08579C0.710714 8.46086 0.5 8.96957 0.5 9.5V10.5M11.5 10.5V9.5C11.4997 9.05686 11.3522 8.62639 11.0807 8.27616C10.8092 7.92593 10.4291 7.67578 10 7.565M8 1.565C8.43021 1.67515 8.81152 1.92535 9.08382 2.27616C9.35612 2.62696 9.50392 3.05841 9.50392 3.5025C9.50392 3.94659 9.35612 4.37804 9.08382 4.72884C8.81152 5.07965 8.43021 5.32985 8 5.44M6.5 3.5C6.5 4.60457 5.60457 5.5 4.5 5.5C3.39543 5.5 2.5 4.60457 2.5 3.5C2.5 2.39543 3.39543 1.5 4.5 1.5C5.60457 1.5 6.5 2.39543 6.5 3.5Z" stroke="#667085" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+                                           </g>
+                                           <defs>
+                                           <clipPath id="clip0_15800_3911">
+                                           <rect width="12" height="12" fill="white"/>
+                                           </clipPath>
+                                           </defs>
+                                           </svg> {{customercount}}</span>
+                                       </span>
+                                 </div>
+                                 <div class="divider"></div>
+                               </button>
+                             </div>
+                            
+                           <div ngbAccordionCollapse>
+                               <div ngbAccordionBody class="py-0">
+                                   <ng-template>
+                                       <div>
+                                           <div class="h-500" (dragover)="allowDrop($event)">
+                                               <ng-container *ngIf="resetGroupNumber() === null"></ng-container>
+                                               <ng-container *ngFor="let obj of auditmappingdata;let i=index">
+                                                   <div *ngIf="obj?.count === 1" class="item">
+                                                       <div>
+                                                           <div *ngFor="let img of obj?.mappedid">
+                                                               <img draggable="true" name="{{obj.img_id}}" (dragstart)="drag($event)" (click)="toggleImage(img?.img_name )"
+                                                               id="{{img.img_id}}" class="my-3 mx-2 img" [src]="img.img_path">
+                                                               <div class="text-center m-0 fs-7 fw-bold">{{img.img_name}}</div>
+                                                               <!-- <span *ngIf="obj?.demographic !== 'd'" class="notify-badge2 w-25px h-25px cursor-pointer" (click)="toggleImage(img?.img_name )">
+                                                               </span>
+                                                               <span *ngIf="obj?.demographic === 'd'" class="notify-badge" (click)="toggleImage(img?.img_name )"><i class="fa fa-check" aria-hidden="true"
+                                                                   style="font-size:15px;color:#00A3FF"></i></span> -->
+                                                           </div>
+                                                       </div>
+                                                   </div>
+                                               </ng-container>
+                                               <ng-container class="mt-5" *ngFor="let obj of auditmappingdata;let i=index">
+                                                   <div *ngIf="obj?.count > 1" class="card-label mt-3">Group {{ getGroupNumber(obj) }} <span class="sub-text mt-3 ms-2">
+                                                       <span class="badge badge-light-default"><svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                                        <g clip-path="url(#clip0_14508_18583)">
+                                                        <path d="M2.5 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5ZM2.5 10.5L8 5L10.5 7.5M5 4.25C5 4.66421 4.66421 5 4.25 5C3.83579 5 3.5 4.66421 3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25Z" stroke="#667085" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+                                                        </g>
+                                                        <defs>
+                                                        <clipPath id="clip0_14508_18583">
+                                                        <rect width="12" height="12" fill="white"/>
+                                                        </clipPath>
+                                                        </defs>
+                                                        </svg>{{obj.count}}</span>
+                                                       </span> 
+                                                       <!-- <span *ngIf="obj?.demographic !== 'd'" class="kid-badge cursor-pointer ms-3 me-3" style="padding:2px 10.5px !important" (click)="toggleImage(obj?.img_name)">
+                                                       </span>
+                                                       <span *ngIf="obj?.demographic === 'd'" class="kid-badge cursor-pointer ms-3 me-3" (click)="toggleImage(obj?.img_name)"><i class="fa fa-check" aria-hidden="true"
+                                                           style="font-size:15px;color:#00A3FF"></i></span> Mark as demographic -->
+                                                   </div>
+                                                   <div *ngIf="obj.count > 1" class="item">
+                                                       <div>
+                                                           <div *ngFor="let img of obj?.mappedid" class="item">
+                                                               <img draggable="true" name="{{obj.img_id}}" (dragstart)="drag($event)"
+                                                               id="{{img.img_id}}" class="my-3 mx-2 img" [src]="img.img_path">
+                                                               <div class="text-center m-0 fs-7 fw-bold">{{img.img_name}}</div>
+                                                           </div>
+                                                       </div>
+                                                   </div>
+                                               </ng-container>
+                           
+                                           </div>
+                                       </div>
+                                   </ng-template>
+                               </div>
+                           </div>
+                       </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="!auditLoading" class="col-md-5">
+        <div class="card mt-5">
+            <!-- (change)="imagearray()" -->
+            <div class="card-body h-1000px" (drop)="dropforretag($event)" (dragover)="allowDrop($event)" >
+                <div class="card-label fw-bold text-dark mb-5">Images for Retagging</div>
+                <div class="col-md-12 item" >
+                <div class="item" *ngFor="let item of retagimage">
+                <img  [src]="item.img_path" class="my-2 mx-4 img-ret">
+                <div  class="text-center m-0 fs-7 fw-bold">{{item.img_name}}</div>
+                <span class="notify-badge1 cursor-pointer" (click)="removeimage(item)"><i class="fa fa-close" aria-hidden="true"
+                    style="font-size:15px;color:#00A3FF"></i>
+                </span>
+                </div>
+           </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<ng-template #confirmDraft let-modal>
+    <div class="card h-auto p-10">
+        <div class="card-header d-grid p-0 border-0">
+            <span><img src="./assets/tango/Images/Successtoast.png"></span>
+            <!-- <span *ngIf="getBack"><img src="./assets/tango/custompopup-Icons/danger-icon.svg"></span>  -->
+            <div class="card-label mt-5">Do you want to submit your changes without demographic?</div>
+            <!-- <div *ngIf="getBack" class="card-label mt-5">Unsaved Changes</div> -->
+        </div>
+        <div class="card-body p-0">
+            <div class="w-100 d-flex mt-10">
+                <button class="btn btn-outline w-50 me-2 fw-bold" (click)="modal.close('isDenied')">Cancel</button>
+                <button class="btn btn-primary savebtn w-50 ms-2" (click)="modal.close('isConfirmed')">Ok</button>
+            </div>
+        </div>
+    </div>
+</ng-template>