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

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

@@ -0,0 +1,345 @@
+<div class="card">
+    <div class="card-header border-0 pt-3">
+        <h3 class="card-title align-items-start flex-column">
+            <span class="card-label mb-2">Audit Metrics</span>
+            <!-- <span class="text-sub mb-2">Last updated 1 hour ago</span> -->
+        </h3>
+        <div class="card-toolbar">
+            <div class="d-flex">
+                <div class="d-flex align-items-center position-relative my-1">
+                    <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                            <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
+                                transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
+                            <path
+                                d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                fill="currentColor"></path>
+                        </svg>
+                    </span>
+                    <input type="text" class="form-control ps-14 me-2" placeholder="Search" autocomplete="off"
+                        (change)="searchData()" [(ngModel)]="searchTerm" />
+                    
+                    <lib-filters *ngIf="clientList" [dataObject]="dataObject" (appliedFilters)="receiveData($event)"></lib-filters>
+
+                    <button type="button" *ngIf="!noData&&!loading" (click)="exportXLSX()"
+                        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>
+    </div>
+    <div class="card-body">
+        <ul class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll">
+            <li class="nav-item" (click)="selectedTabs('all')">
+                <a [ngClass]="selectedTab === '' ? 'active' : ''" class="nav-link cursor-pointer no-border me-2">
+                    All <span class="mx-2"
+                        [ngClass]="selectedTab === '' ? 'text-border-priamry' : 'text-border'">{{totalCount?.totalauditCount ? totalCount?.totalauditCount : 0}}</span>
+                </a>
+            </li>
+            <li class="nav-item" (click)="selectedTabs('Audit')">
+                <a [ngClass]="selectedTab === 'Audit' ? 'active' :''" class="nav-link cursor-pointer no-border me-2">
+                    Audit <span class="mx-2"
+                        [ngClass]="selectedTab === 'Audit' ? 'text-border-priamry' : 'text-border'">{{totalCount?.auditCount ? totalCount?.auditCount : 0}}</span>
+                </a>
+            </li>
+            <li class="nav-item" (click)="selectedTabs('ReAudit')">
+                <a [ngClass]="selectedTab === 'ReAudit' ? 'active' : ''" class="nav-link cursor-pointer no-border me-2">
+                    Re Audit <span class="mx-2"
+                        [ngClass]="selectedTab === 'ReAudit' ? 'text-border-priamry' : 'text-border'">{{totalCount?.reauditCount ? totalCount?.reauditCount : 0}}</span>
+                </a>
+            </li>
+        </ul>
+        <div *ngIf="!loading && !noData" class="mt-5">
+            <div class="table-responsive">
+                <table class="table bottom-border text-nowrap">
+                  <thead>
+                    <tr>
+                      <th>File Date</th>
+                      <th><div class="cursor-pointer" (click)="sortData('storeName')">
+                        Store Name
+                        <span
+                            *ngIf="sortColumName === 'storeName' && sortBy !== 1 || sortColumName !== 'storeName'">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                        <span
+                            *ngIf="sortColumName === 'storeName' && sortBy !== -1">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+        
+                    </div></th>
+                    <th><div class="cursor-pointer" (click)="sortData('storeId')">
+                        Store Id
+                        <span
+                            *ngIf="sortColumName === 'storeId' && sortBy !== 1 || sortColumName !== 'storeId'">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+                        <span
+                            *ngIf="sortColumName === 'storeId' && sortBy !== -1">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+        
+                    </div></th>
+                      <th><div class="cursor-pointer" (click)="sortData('userName')">
+                        User Name
+                        <span
+                            *ngIf="sortColumName === 'userName' && sortBy !== 1 || sortColumName !== 'userName'">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                        <span
+                            *ngIf="sortColumName === 'userName' && sortBy !== -1">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"/>
+                            </svg>
+                        </span>
+        
+                    </div></th>
+                    <th><div class="cursor-pointer" (click)="sortData('userEmail')">
+                        User Email
+                        <span
+                            *ngIf="sortColumName === 'userEmail' && sortBy !== 1 || sortColumName !== 'userEmail'">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                        <span
+                            *ngIf="sortColumName === 'userEmail' && sortBy !== -1">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+        
+                    </div></th>
+                      <th>BC</th>
+                      <th>AC</th>
+                      <th><div class="cursor-pointer" (click)="sortData('accuracy')">
+                        Accuracy
+                        <span
+                            *ngIf="sortColumName === 'accuracy' && sortBy !== 1 || sortColumName !== 'accuracy'">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                        <span
+                            *ngIf="sortColumName === 'accuracy' && sortBy !== -1">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+        
+                    </div></th>
+                      <th><div class="cursor-pointer" (click)="sortData('timeSpent')">
+                        TimeSpent
+                        <span
+                            *ngIf="sortColumName === 'timeSpent' && sortBy !== 1 || sortColumName !== 'timeSpent'">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 1.33337V10.6667M6.00016 10.6667L10.6668 6.00004M6.00016 10.6667L1.3335 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                        <span
+                            *ngIf="sortColumName === 'timeSpent' && sortBy !== -1">
+                            <svg width="12" height="12" viewBox="0 0 12 12"
+                                fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.00016 10.6667L6.00016 1.33337M6.00016 1.33337L1.3335 6.00004M6.00016 1.33337L10.6668 6.00004"
+                                    stroke="#667085" stroke-width="1.33333"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                        </span>
+        
+                    </div></th>
+                      <th>Audit Type</th>
+                      <th>Status</th>
+                      <th><span>Actions</span></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let item of storesData">
+                        <td>
+                            <div>{{ item?.fileDate ? item?.fileDate :'NA' }}</div>
+                        </td>
+                        <td>
+                            <div>{{ item?.storeName ? item?.storeName :'NA' }}</div>
+                        </td>
+                        <td>
+                            <div>{{item?.storeId ? item?.storeId : 'NA'}}</div>
+                        </td>
+                        <td>
+                            <div>{{ item?.userName ? item?.userName :'NA' }}</div>
+                        </td>
+                        <td>
+                            <div>{{ item?.userEmail ? item?.userEmail :'NA' }}</div>
+                        </td>
+                        <td>
+                        <div class="d-flex align-items-center">
+                                <div [ngClass]="item?.beforeCount ? 'text-decoration-underline':''" class="text-title text-primary cursor-pointer mb-1" (click)="openBeforecount(item)">
+                                {{ item?.beforeCount ?? '--' }}</div>
+                        </div>
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center">
+                                    <div [ngClass]="item?.afterCount ? 'text-decoration-underline':''" class="text-title text-primary cursor-pointer mb-1" (click)="openAftercount(item)">
+                                    {{ item?.afterCount ?? '--' }}</div>
+                            </div>
+                            </td>
+                        <td>
+                            <div>{{ item?.accuracy ?? '--' }}</div>
+                        </td>
+                      <td>{{ item?.timeSpent ? item?.timeSpent :'NA'}}</td>
+                      <td><span *ngIf="item?.auditType" [ngClass]="item?.auditType === 'Audit' ? 'badge-light-success':'badge-light-warning'" class="badge">{{ item?.auditType }}</span></td>
+                      <td><span *ngIf="item?.status" [ngClass]="statusBadge(item?.status)" class="badge">{{ item?.status | titlecase}}</span></td>
+                      <td><button class="btn btn-default btn-outline" (click)="openView()">View-Log</button>
+                        <button class="btn btn-default btn-outline ms-3" [disabled]="item?.status === 'not_assign' || item?.status === 'assigned'" (click)="openreTrigger(item)">Re-Trigger</button></td>
+                    </tr>
+                  </tbody>
+                </table>
+            </div>
+        </div>
+        <div *ngIf="!loading && !noData" class="my-3">
+            <lib-pagination [itemsPerPage]="limit" [currentPage]="offset" [totalItems]="totalCount"
+                [paginationSizes]="pagination" [pageSize]="setItemsperPage()" (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+        </div>
+
+        <div *ngIf="loading" class="row loader  d-flex justify-content-center align-items-center">
+            <div class="shimmer">
+                <div class="wrapper">
+                    <div class="stroke animate title"></div>
+                    <div class="stroke animate link"></div>
+                    <div class="stroke animate description"></div>
+                </div>
+            </div>
+            <div class="shimmer">
+                <div class="wrapper">
+                    <div class="stroke animate title"></div>
+                    <div class="stroke animate link"></div>
+                    <div class="stroke animate description"></div>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="noData" 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>        
+
+    </div>
+</div>
+
+<ng-template #activitylog let-modal>
+    <div class="card">
+        <div class="card-header">
+            <div class="card-title">
+                <span class="card-label">Activity Log</span>
+            </div>
+            <div class="card-toolbar">
+              <div class="cursor-pointer" (click)="modal.dismiss()"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M15 5L5 15M5 5L15 15" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg></div>  
+            </div>
+        </div>
+        <div class="card-body">
+            <div *ngFor="let log of activity" class="d-flex mb-5 ms-5">
+                <div
+                    class="d-flex flex-column justify-content-center align-items-center pe-3">
+                    <div class="d-flex align-items-centre justify-content-centre">
+                        <!-- <img class="msgprofile"
+                        src="./assets/tango/Images/userProfile.svg"> -->
+                        <div class="symbol symbol-35px symbol-circle">
+                            <span [ngClass]="log?.type === 'Audit' ? 'badge-light-success' : 'badge-light-primary'" class="symbol-label badge-light-primary text-symbol">
+                                <span [ngClass]="log?.type === 'Audit' ? 'text-success badge badge-light-success' : 'text-primary badge badge-light-primary'" class="fs-4 fw-normal">
+                                    {{log?.type?.slice(0,1) | uppercase }}
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="p-0 h-100 mt-1 border border-1 border-gray" style="width:0px"></div>
+                </div>
+                <div class="py-3 pt-0">
+                    <div class="activity-title fw-semibold mt-2 d-flex mb-4">
+                        <span>{{log?.type}} </span><span class="ms-5 list"><li>Fasila</li></span>
+                    </div>
+                    <div class="date-time mb-4">
+                        {{log?.FileDate}} | {{log?.Time}}
+                    </div>
+                    <div class=""><span class="badge badge-light-default fw-semibold">Before Count : {{log?.beforeCout}}</span>
+                         <span class="badge badge-light-default fw-semibold ms-3">After Count : {{log?.AfterCount}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>

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

@@ -0,0 +1,34 @@
+.nav-item .nav-link.active{
+    border:none;
+    border-radius: 6px;
+    background: var(--Primary-50, #EAF8FF);
+    padding: 8px 12px;
+ }
+ .nav-item .nav-link:hover{
+     border: none;
+ }
+ .text-border {
+    border-radius: 16px !important;
+    background: var(--Gray-100, #F2F4F7) !important;
+    color: var(--Gray-700, #344054);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    padding: 2px 10px !important;
+}
+
+.text-border-priamry{
+   border-radius: 16px;
+   background: var(--Primary-50, #EAF8FF);
+   color: var(--Primary-700, #009BF3);
+   text-align: center;
+   font-size: 14px;
+   font-weight: 500;
+   line-height: 20px;
+   padding: 2px 10px !important;
+   mix-blend-mode: multiply !important;
+}
+tr{
+    vertical-align: middle !important;
+}

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

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