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

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

@@ -0,0 +1,292 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Subject, takeUntil } from 'rxjs';
+import { GlobalStateService } from 'tango-app-ui-global';
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { ReTriggerComponent } from '../re-trigger/re-trigger.component';
+import { TicketService } from '../../services/ticket.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { ExcelService } from '../../services/excel.service';
+import { CountComponent } from '../count/count.component';
+
+
+@Component({
+  selector: 'lib-audit-metrics',
+  templateUrl: './audit-metrics.component.html',
+  styleUrl: './audit-metrics.component.scss'
+})
+export class AuditMetricsComponent implements OnInit,OnDestroy {
+  noData:boolean = false;
+  loading:boolean = true;
+
+  storesData:any = [];
+  activity:any = [
+    {type:'Audit',FileDate:'28-11-2023',Time:'03:24 pm',beforeCout:'300',AfterCount:'100'},
+    {type:'Re-Audit',FileDate:'28-10-2023',Time:'03:24 pm',beforeCout:'350',AfterCount:'120'},
+    {type:'Audit',FileDate:'28-11-2023',Time:'03:24 pm',beforeCout:'300',AfterCount:'100'}
+  ]
+  @ViewChild('activitylog') activitylog:any;
+  private readonly destroy$ = new Subject();
+  headerFilter: any;
+  sortColumName: any = '';
+  sortBy: any = 1;
+  filterByClient: any = [];
+  filterByStatus: any = [];
+  pagination: any = [10, 20, 30];
+  searchTerm: any;
+  limit:any = 10;
+  offset:any = 1;
+  selectedValue: string;
+  dayjs = dayjs;
+  filterByStore: any = [];
+  totalCount: any;  
+  selectedTab:any = '';
+
+  dataObject:any = [
+    { Description: 'Module Type',type:'single', Issues: [{id:'traffic', text: "Traffic"},{id:'zone', text: "Zone" }]},
+    { Description: 'Clients', Issues: [] },
+    { Description: 'Status', Issues: [{id:'closed', text: "Completed" }, {id:'inprogress', text: "Inprogress" },{id:'drafted', text: "Draft" },{id:'assigned', text: "Assigned" },{id:'not_assign', text: "Not Assigened" },{id:'skipped', text: "Skip"},] }
+  ];
+  
+  clientList: any;
+  selectedType: any = 'traffic';
+
+  constructor(private gs:GlobalStateService,private modalService:NgbModal,private service: TicketService,private toast:ToastService,private excel:ExcelService){
+    
+  }
+
+  ngOnInit(){
+    this.gs.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe((data: any) => {
+      if(data!=null){
+        this.headerFilter = data
+        this.metricsList();
+    }
+  })
+ }
+
+ metricsList(){
+  let data:any = {
+    fromDate: this.dayjs(this.headerFilter?.date?.startDate).format('YYYY-MM-DD'),
+    toDate: this.dayjs(this.headerFilter?.date?.endDate).format('YYYY-MM-DD'),
+    filterByClientId : this.filterByClient,
+    filterByStoreId : this.filterByStore,
+    filterByStatus : this.filterByStatus,
+    filterByAuditType : this.selectedTab ===''? [] : [this.selectedTab],
+    filterByModuleType: [this.selectedType],
+    searchValue: this.searchTerm,
+    sortBy: this.sortBy,
+    limit: this.limit,
+    offset: this.offset,
+    isExport: false
+  };
+  if(this.sortColumName){data.sortColumnName = this.sortColumName}else if(this.searchTerm){data.searchValue = this.searchTerm}
+  this.getclientList();
+  this.service.getstoreMetrics(data).pipe(takeUntil(this.destroy$)).subscribe({
+    next:(res:any) => {
+      if(res && res?.code === 200){
+          this.storesData = res?.data?.result;
+          this.totalCount = res?.data?.count;
+          if(!this.storesData?.length){
+            this.noData = true;
+          }
+          if(this.totalCount < 10){
+            this.pagination = [this.totalCount]
+          }else{
+            this.pagination = [10, 20, 30]
+          }
+          this.loading = false;
+          this.noData = false;
+    }else{
+      this.noData = true;
+      this.loading = false;
+    }
+  },
+  error:(err:any)=>{
+    this.noData = true;
+      this.loading = false;
+    this.toast.getErrorToast(err?.message)
+  }
+ })
+}
+
+setItemsperPage(){
+  if(this.totalCount < 10){
+    return this.totalCount;
+  }else{
+    return this.limit;
+  }
+}
+
+getclientList(){
+  this.service.getclientList().pipe(takeUntil(this.destroy$)).subscribe({
+    next:(res:any) => {
+      if(res && res?.code ===200){
+        this.clientList = res?.data?.result;
+        const issues = this.clientList.map((obj: any) => ({ text: obj.clientName,id:obj.clientId }));
+        const uniqueIssues:any[] = [];
+        const Clients = new Set();
+        issues.forEach((issue:any) => {
+          if (!Clients.has(issue.text)) {
+            Clients.add(issue.text);
+            uniqueIssues.push(issue);
+          }
+        });
+        const filtredObject = (this.dataObject.find((obj: any) => obj.Description === "Clients"))
+        filtredObject.Issues = uniqueIssues;
+      }
+    },
+    error:(err:any) => {
+        
+    },
+})
+ }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  receiveData(data:any) {
+    this.filterByClient = data.find((obj:any) => obj.Description === "Clients")?.Issues.map((item: any) => item?.id);
+    this.filterByStatus = data.find((obj:any) => obj.Description === "Status")?.Issues?.map((item: any) => item?.id);
+    this.selectedType = data.find((obj:any) => obj.Description ==='Module Type')?.Issues?.id;
+    this.metricsList();
+  }
+
+  onPageChange(pageOffset: any) {
+    this.pagination.offset = pageOffset;
+    this.metricsList();
+  }
+  
+  onPageSizeChange(pageSize: any) {
+    this.pagination.limit = pageSize;
+    this.pagination.offset = 1;
+    this.metricsList();
+  }
+
+  exportXLSX(){
+    let data:any = {
+      fromDate: this.dayjs(this.headerFilter?.date?.startDate).format('YYYY-MM-DD'),
+      toDate: this.dayjs(this.headerFilter?.date?.endDate).format('YYYY-MM-DD'),
+      filterByClientId : this.filterByClient,
+      filterByStoreId : this.filterByStore,
+      filterByStatus : this.filterByStatus,
+      filterByAuditType : this.selectedTab ===''? [] : [this.selectedTab],
+      filterByModuleType: [this.selectedType],
+      searchValue: this.searchTerm,
+      sortBy: this.sortBy,
+      limit: 10000,
+      offset: this.offset,
+      isExport: true
+    };
+    if(this.sortColumName){data.sortColumnName = this.sortColumName}else if(this.searchTerm){data.searchValue = this.searchTerm}
+    this.service.getstoreMetricsExport(data).pipe(takeUntil(this.destroy$)).subscribe({
+      next:(res:any) => {
+        if(res){
+            this.excel.saveAsExcelFile(res,'AuditMetrics')
+        }
+    },
+    error:(err:any)=>{
+      this.toast.getErrorToast(err?.message)
+    }
+   })
+ }
+
+ selectedTabs(data:any){
+  if(data === 'all'){
+    this.selectedTab = '';
+  }else{
+    this.selectedTab = data;
+  }
+  this.limit = 10;
+  this.offset = 1;
+  this.metricsList();
+ }
+
+ searchData(){
+  this.searchTerm = this.searchTerm;
+  this.metricsList();
+ }
+
+ openBeforecount(value:any) {
+  const modalRef = this.modalService.open(CountComponent,{
+    centered:true,
+    size:'xl'
+  })
+  modalRef.componentInstance.data ={
+    type : 'before',
+    fileDate:value?.fileDate,
+    storeId: value?.storeId,
+    selectedType: this.selectedType,
+    zoneName:value?.zoneName,
+    imageType: 'BC'
+  }
+}
+openAftercount(value:any){
+  const modalRef = this.modalService.open(CountComponent,{
+    centered:true,
+    size:'xl'
+  })
+modalRef.componentInstance.data ={
+  type : 'after',
+  fileDate:value?.fileDate,
+  storeId: value?.storeId,
+  selectedType: this.selectedType,
+  zoneName:value?.zoneName,
+  imageType: 'AC'
+}
+}
+
+openView(){
+  const modalRef = this.modalService.open(this.activitylog)
+}
+
+openreTrigger(value:any){
+  const modalRef = this.modalService.open(ReTriggerComponent,{
+    centered:true,
+    // size:''
+  })
+  modalRef.componentInstance.reTrigerData ={
+    type : 'after',
+    data: value,
+    selectedType : this.selectedType
+  }
+  modalRef.closed.subscribe((res: any) => {
+    if (res) {
+          this.service.auditretrigger(res).pipe(takeUntil(this.destroy$)).subscribe({
+            next:(res:any)=>{
+              if(res && res.code === 200){
+                this.toast.getSuccessToast(res?.data?.result);
+                this.metricsList();
+              } 
+            },
+            error:(err:any)=> {
+                this.toast.getErrorToast(err?.message)
+            }
+          })
+        }
+    } )
+}
+
+statusBadge(value:any){
+  let AccountStatus = value;
+  if(AccountStatus === 'closed'){
+    return 'badge-light-success'
+  }else if(AccountStatus === 'assigned' || AccountStatus === 'not Assigned'){
+    return 'badge-light-warning'
+  }else{
+    return 'badge-light-primary'
+  }
+}
+
+sortData(value:any){
+  this.sortColumName = value
+  this.sortBy *= -1;
+  this.metricsList();
+}
+
+
+}

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

@@ -0,0 +1,111 @@
+<div class="modal fade show d-block" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content merge-ticket-modal">
+
+            <!-- Header -->
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title">Close ticket</h5>
+                <button type="button" class="btn-close" aria-label="Close" (click)="closepopup()"></button>
+            </div>
+
+            <!-- Body -->
+            <div class="modal-body">
+                <div *ngIf="tangoAccuracy>85&&centralOpsData?.revicedFootfall">
+                    <p class="mb-0">The ticket will be <b>“closed”</b> and updated in the store as a final revision.</p>
+                </div>
+                <div *ngIf="tangoAccuracy>85&&!centralOpsData?.revicedFootfall">
+                    <p class="mb-0">You’re about to close this ticket. Do you want to proceed?</p>
+                </div>
+                <!-- Info banner -->
+                <div class="alert merge-info d-flex" *ngIf="tangoAccuracy<85">
+                    <div class="me-3 mt-1">
+                        <i class="bi bi-info-circle"></i>
+                    </div>
+                    <div>
+
+                        <p class="mb-0">
+                            The ticket will be <b>“closed”</b> and updated in the store as a final revision.
+                            Since accuracy is below 85%, it will be marked as an <b>“Open-Accuracy Issue”</b> in Tango.
+                            Please add the cause for the low accuracy.
+                        </p>
+                    </div>
+
+                </div>
+
+                <!-- Cards -->
+                <div class="row g-3 mt-2">
+                    <!-- Central Ops -->
+                    <div class="col-12 col-md-6" *ngIf="centralOpsData?.revicedFootfall">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="card-title mb-3 fw-semibold">Central Ops</div>
+                                <div class="d-flex justify-content-between align-items-end mb-1">
+                                    <div>
+                                        <div class="value">{{centralOpsData?.revicedFootfall}}</div>
+                                        <div class="label">Footfall</div>
+                                    </div>
+                                    <div class="text-end">
+                                        <div class="value text-primary">
+                                            {{centralOpsData?.revicedPerc}}
+                                            <span class="arrow"
+                                                *ngIf="centralOpsData?.revicedFootfall<tangoData?.revicedFootfall">
+                                                ↓
+                                            </span>
+                                            <span class="arrow"
+                                                *ngIf="centralOpsData?.revicedFootfall>tangoData?.revicedFootfall">
+                                                ↑
+                                            </span>
+                                        </div>
+                                        <div class="label">Accuracy</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Tango -->
+                    <div class="col-12 col-md-6" *ngIf="tangoData?.revicedFootfall">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="card-title mb-3 fw-semibold">Tango</div>
+                                <div class="d-flex justify-content-between align-items-end mb-1">
+                                    <div>
+                                        <div class="value">{{tangoData?.revicedFootfall}}</div>
+                                        <div class="label">Footfall</div>
+                                    </div>
+                                    <div class="text-end">
+                                        <div class="value text-primary">
+                                            {{tangoData?.revicedPerc}}
+                                            <span class="arrow"
+                                                *ngIf="centralOpsData?.revicedFootfall>tangoData?.revicedFootfall">
+                                                ↓
+                                            </span>
+                                            <span class="arrow"
+                                                *ngIf="centralOpsData?.revicedFootfall<tangoData?.revicedFootfall">
+                                                ↑
+                                            </span>
+                                        </div>
+                                        <div class="label">Accuracy</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="modal-footer border-0 pt-0">
+                <button type="button" class="btn btn-outline-secondary" (click)="closepopup()">
+                    cancel
+                </button>
+                <button *ngIf="tangoAccuracy>85" type="button" class="btn btn-primary" (click)="nextfile()">
+                    submit
+                </button>
+                <button *ngIf="tangoAccuracy<85" type="button" class="btn btn-primary" (click)="nextfile()">
+                    Review
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,101 @@
+.btn.btn-light-primary:hover:not(.btn-active) {
+    background-color: #fff !important;
+}
+
+// .butn {
+//     border: 1px solid #009ef7 !important;
+//     padding: calc(0.5rem + 1px) calc(1rem + 1px) !important;
+// }
+
+.audit-test {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600 !important;
+    font-size: 22px !important;
+    line-height: 27px;
+
+    color: #000000;
+}
+
+.text-gray-500 {
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500 !important;
+    font-size: 14px !important;
+    line-height: 17px;
+    /* identical to box height */
+
+
+    color: #5E6278;
+}
+
+.ms-25 {
+    margin-left: 16rem;
+}
+
+.text-gray-400 {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px !important;
+    line-height: 17px;
+    /* identical to box height */
+
+    letter-spacing: -0.02em;
+
+    color: #676E76;
+}
+
+::ng-deep .custom-container .mat-mdc-dialog-container .mdc-dialog__surface {
+    border-radius: 10px !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;
+    }
+    .merge-ticket-modal {
+  border-radius: 16px;
+}
+
+.merge-info {
+  border: 1px dashed #a9c4ff;
+  background: #f5f9ff;
+  border-radius: 10px;
+  font-size: 13px;
+  color: #008EDF;
+}
+
+.merge-info i {
+  font-size: 18px;
+}
+
+.card {
+  border-radius: 12px;
+}
+
+.card .value {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.card .label {
+  font-size: 12px;
+  color: #6c757d;
+}
+
+.arrow {
+  font-size: 16px;
+  margin-left: 4px;
+}

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

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