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

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

@@ -1,451 +0,0 @@
-<div class="card">
-    <div class="card-header border-0 pt-3">
-        <h3 class="card-title align-items-start flex-column">
-            <span *ngIf="type !=='dataMismatch' && type !== 'mat'" class="card-label mb-2">{{type | titlecase}}</span>
-            <span *ngIf="type ==='dataMismatch'" class="card-label mb-2">Data Mismatch</span>
-            <span *ngIf="type ==='mat'" class="card-label mb-2">Employee Mat</span>
-
-            <!-- <span class="text-sub mb-2">Last updated 1 hour ago</span> -->
-        </h3>
-        <div class="card-toolbar">
-            <div *ngIf="!assignTicket" 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)]="searchValue" />
-                    <lib-filters *ngIf="users.userType === 'tango' && userList?.length || users.userType === 'client' && storeList?.length" [dataObject]="dataObject"
-                        (appliedFilters)="applyFilters($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 *ngIf="assignTicket" class="d-flex">
-                <button type="button" (click)="addAssignTicket()"
-                    class="btn mx-2 btn-primary  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="M9.99984 4.1665V15.8332M4.1665 9.99984H15.8332" stroke="white" stroke-width="1.67"
-                            stroke-linecap="round" stroke-linejoin="round" />
-                    </svg>
-                    <span class="ms-2 text-white">Assign Ticket</span>
-                </button>
-
-            </div>
-        </div>
-    </div>
-
-    <div class="card-body">
-
-
-        <ul *ngIf="!loading && listArray?.length && type !== 'mat' && type !== 'dataMismatch'" class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll">
-            <li  class="nav-item" *ngFor="let obj of listArray.slice().reverse()" (click)="selectedTabs(obj)">
-                <a  [ngClass]="{'active': selectedTab === obj.name}" class="nav-link cursor-pointer no-border me-2">
-                    {{obj.name | titlecase}} <span class="mx-2"
-                        [ngClass]="selectedTab === obj.name ? 'text-border-priamry' : 'text-border'">{{obj.count}}</span>
-                </a>
-            </li>
-        </ul>
-        <ul *ngIf="!loading && listArray?.length && type === 'dataMismatch'" class="nav nav-stretch nav-line-tabs1 nav-line-tabs border-transparent flex-nowrap horizontal-scroll">
-            <li  class="nav-item" *ngFor="let obj of listArray.slice().reverse()" (click)="selectedTabs(obj)">
-                <a  [ngClass]="selectedTab === transformName(obj.name) ? 'active' : ''" class="nav-link cursor-pointer no-border me-2">
-                    {{obj.name | titlecase}} <span class="mx-2"
-                        [ngClass]="selectedTab === transformName(obj.name) ? 'text-border-priamry' : 'text-border'">{{obj.count}}</span>
-                </a>
-            </li>
-        </ul>
-        <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" src="./assets/tango/Icons/Nodata.svg" alt="">
-                </div>
-            </div>
-        </div>
-        <div *ngIf="!loading && !noData" class="table-responsive mt-5">
-            <table class="table bottom-border text-nowrap ">
-                <thead>
-                    <tr>
-                        <th  class="cursor-pointer" >
-                            
-                            <input *ngIf="this.users.userType ==='tango'"
-                                class="form-check-input cursor-pointer me-4" type="checkbox" [(ngModel)]="selectAll"
-                                (click)="selectAllStore($event)">  <span  class="cursor-pointer" (click)="onSort('ticketId')"> Ticket ID <svg
-                                    [ngClass]="sortedColumn === 'ticketId' && sortDirection === 1 ? 'rotate' : ''"
-                                    width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                    <path
-                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                        [attr.stroke]="sortedColumn === 'ticketId' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                        stroke-linejoin="round" />
-                                </svg></span>         
-                        </th>
-                        <th class="cursor-pointer" *ngIf="type !=='dataMismatch'" (click)="onSort('issueDate')"> Created Date
-                            <svg [ngClass]="sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                            <th class="cursor-pointer" *ngIf="type ==='infra'" (click)="onSort('createdAt')"> Created Time
-                                <svg [ngClass]="sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''"
-                                    width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                    <path
-                                        d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                        [attr.stroke]="sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                        stroke-linejoin="round" />
-                                </svg></th>
-                                <th class="cursor-pointer" *ngIf="type ==='infra'" (click)="onSort('issueClosedDate')"> Closed Date
-                                    <svg [ngClass]="sortedColumn === 'issueClosedDate' && sortDirection === 1 ? 'rotate' : ''"
-                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                        <path
-                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                            [attr.stroke]="sortedColumn === 'issueClosedDate' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg></th>
-                                <th class="cursor-pointer" *ngIf="type ==='infra'" (click)="onSort('issueClosedDate')"> Closed Time
-                                    <svg [ngClass]="sortedColumn === 'issueClosedDate' && sortDirection === 1 ? 'rotate' : ''"
-                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                        <path
-                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                            [attr.stroke]="sortedColumn === 'issueClosedDate' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                            stroke-linejoin="round" />
-                                    </svg></th>
-                    <th class="cursor-pointer" *ngIf="type ==='dataMismatch'" class="cursor-pointer" (click)="onSort('createdAt')"> Created Date
-                        <svg [ngClass]="sortedColumn === 'createdAt' && sortDirection === 1 ? 'rotate' : ''"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none">
-                            <path
-                                d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                [attr.stroke]="sortedColumn === 'createdAt' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                stroke-linejoin="round" />
-                        </svg></th>
-                    <th class="cursor-pointer" *ngIf="type ==='dataMismatch'" class="cursor-pointer" ><span (click)="onSort('issueDate')">Issue Date
-                    <svg [ngClass]="sortedColumn === 'issueDate' && sortDirection === 1 ? 'rotate' : ''"
-                        width="16" height="16" viewBox="0 0 16 16" fill="none">
-                        <path
-                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                            [attr.stroke]="sortedColumn === 'issueDate' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                            stroke-linejoin="round" />
-                    </svg></span>
-                </th>
-                            <th class="cursor-pointer" *ngIf="(gs.userAccess | async)?.userType === 'tango'" class="cursor-pointer" (click)="onSort('clientName')">Brand Name<svg
-                                [ngClass]="sortedColumn === 'clientName' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'clientName' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                            <th class="cursor-pointer" *ngIf="(gs.userAccess | async)?.userType === 'tango'" class="cursor-pointer" (click)="onSort('clientId')">Brand ID<svg
-                                [ngClass]="sortedColumn === 'clientId' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'clientId' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                        <th class="cursor-pointer" (click)="onSort('storeName')">Store Name<svg
-                                [ngClass]="sortedColumn === 'storeName' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'storeName' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                            <th class="cursor-pointer" (click)="onSort('storeId')">Store ID<svg
-                                [ngClass]="sortedColumn === 'storeId' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'storeId' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                        <th class="cursor-pointer" *ngIf="this.users.userType ==='tango' && (type ==='infra'||type ==='dataMismatch'||type ==='mat')" (click)="onSort('userName')">Resolved By<svg [ngClass]="sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'userName' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                            <th class="cursor-pointer" *ngIf="this.users.userType ==='tango' && type ==='installation'" (click)="onSort('userName')">Installed By<svg [ngClass]="sortedColumn === 'userName' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'userName' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                        <th *ngIf="type ==='dataMismatch'" class="cursor-pointer" (click)="onSort('issueType')">Issue Type
-                            <svg [ngClass]="sortedColumn === 'issueType' && sortDirection === 1 ? 'rotate' : ''"
-                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
-                                fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'issueType' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg>
-                        </th>
-                        <th *ngIf="type ==='dataMismatch'" class="cursor-pointer" (click)="onSort('type')">Query Type
-                            <svg [ngClass]="sortedColumn === 'type' && sortDirection === 1 ? 'rotate' : ''"
-                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
-                                fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'type' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg>
-                        </th>
-                        <th *ngIf="type ==='dataMismatch'" class="cursor-pointer" (click)="onSort('reportedFootfall')">Reported Footfall
-                            <svg [ngClass]="sortedColumn === 'reportedFootfall' && sortDirection === 1 ? 'rotate' : ''"
-                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
-                                fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'reportedFootfall' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg>
-                        </th>
-                        <th *ngIf="type ==='dataMismatch'" class="cursor-pointer" (click)="onSort('mappedCount')">Unique Images
-                            <svg [ngClass]="sortedColumn === 'mappedCount' && sortDirection === 1 ? 'rotate' : ''"
-                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
-                                fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'mappedCount' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg>
-                        </th>
-                        <th *ngIf="type ==='dataMismatch'" class="cursor-pointer" (click)="onSort('successPercentage')">Success Percentage
-                            <svg [ngClass]="sortedColumn === 'successPercentage' && sortDirection === 1 ? 'rotate' : ''"
-                                xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
-                                fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'successPercentage' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg>
-                        </th>
-                        <th  class="cursor-pointer"  *ngIf="type ==='installation'" (click)="onSort('status')">Deployed Status<svg
-                            [ngClass]="sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none">
-                            <path
-                                d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                [attr.stroke]="sortedColumn === 'status' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                stroke-linejoin="round" />
-                        </svg></th>
-                        <th  *ngIf="type ==='dataMismatch' ||type ==='mat'|| type ==='infra'" class="cursor-pointer" (click)="onSort('status')">Status<svg
-                            [ngClass]="sortedColumn === 'status' && sortDirection === 1 ? 'rotate' : ''"
-                            width="16" height="16" viewBox="0 0 16 16" fill="none">
-                            <path
-                                d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                [attr.stroke]="sortedColumn === 'status' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                stroke-linejoin="round" />
-                        </svg></th>
-<!-- added config and total downtime as per the prioduct team requirement -->
-                         <th *ngIf="type==='infra'">Configured Ticket Time
-                        </th> 
-
-                             <th *ngIf="type==='infra'" >Total Downtime
-                        </th>
-<!--  -->
-
-                        <th  *ngIf="type !== 'mat' && type !== 'dataMismatch'" class="cursor-pointer" (click)="onSort('primaryIssue')">Primary Issues<svg
-                                [ngClass]="sortedColumn === 'primaryIssue' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'primaryIssue' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                            <th  *ngIf="type !== 'mat' && type !== 'dataMismatch'" class="cursor-pointer" (click)="onSort('secondaryIssue')">Secondary Issues<svg
-                                [ngClass]="sortedColumn === 'secondaryIssue' && sortDirection === 1 ? 'rotate' : ''"
-                                width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                <path
-                                    d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
-                                    [attr.stroke]="sortedColumn === 'secondaryIssue' ? '#00A3FF' : '#667085'" stroke-width="1.33333" stroke-linecap="round"
-                                    stroke-linejoin="round" />
-                            </svg></th>
-                        <th *ngIf="type!=='installation'">Actions</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr *ngFor="let obj of tableListArray">
-                        <td>
-                            <input *ngIf="this.users.userType ==='tango'" class="form-check-input cursor-pointer me-4 mt-3" type="checkbox" [(ngModel)]="obj.checked"
-                                (change)="updateCheck($event,obj?.ticketId)">
-                            <span *ngIf="type === 'dataMismatch' || type === 'mat' || type === 'infra'"
-                                class="txt-light-primary cursor-pointer" (click)="tickets(type,obj.clientId,obj.storeId,obj.clientName)">
-                                {{obj.ticketId}}
-                            </span>
-                            <span *ngIf="type === 'installation'">
-                                {{obj.ticketId}}
-                            </span>
-                        </td>
-                        <td *ngIf="type === 'dataMismatch'">
-                            {{obj?.createdAt |
-                            date: 'dd MMM, yyyy'}}</td>
-                        <td *ngIf="type === 'dataMismatch'">
-                            {{obj?.issueDate |
-                            date: 'dd MMM, yyyy'}}</td>
-                        <td *ngIf="type !== 'dataMismatch'">
-                            {{obj?.createdAt |
-                            date: 'dd MMM, yyyy'}}
-                        </td>
-                        <td *ngIf="type === 'infra'">
-                            {{obj?.createdAt |
-                             date: 'hh:mm a' | uppercase}}
-                        </td>
-                        <td *ngIf="type === 'infra'">
-                            {{obj?.issueClosedDate?(obj?.issueClosedDate |
-                             date: 'dd MMM, yyyy'):"--"}}
-                        </td>
-                        <td *ngIf="type === 'infra'">
-                            {{obj?.issueClosedDate?(obj?.issueClosedDate |
-                             date: 'hh:mm a' | uppercase):"--"}}
-                        </td>
-                        <td *ngIf="this.users.userType ==='tango'">
-                            <div class="table-title cursor-pointer" (click)="clientTickets(obj.clientId,obj.storeId,obj.clientName)">
-                                <span class="txt-light-primary">
-                                    {{obj.clientName}}
-                                </span>
-                            </div>
-                        </td>
-                        <td *ngIf="this.users.userType ==='tango'">{{obj.clientId}}
-                        </td>
-                        <td>
-                            <div class="table-title cursor-pointer" (click)="storeTickets(obj.clientId,obj.storeId,obj.clientName)">
-                                <span class="txt-light-primary">
-                                    {{obj.storeName}}
-                                </span>
-                            </div>
-                        </td>
-                        <td>{{obj.storeId}}
-                        </td>
-                    
-                        <td *ngIf="this.users.userType ==='tango'">
-                            <div class="table-title cursor-pointer" >
-                                <span >
-                                    {{obj.userName}}
-                                </span>
-                            </div>
-                        </td>
-                        <td *ngIf="type ==='dataMismatch' && obj.issueType ==='lowcount'" >Low Count</td>
-                        <td *ngIf="type ==='dataMismatch' && obj.issueType ==='highcount'">High Count</td>
-                        <td class="text-capitalize" *ngIf="type ==='dataMismatch'">{{obj?.type ? obj?.type:'--'}}</td>
-                        <td class="text-capitalize" *ngIf="type ==='dataMismatch'">{{obj?.reportedFootfall ? obj?.reportedFootfall:'--'}}</td>
-                        <td class="text-capitalize" *ngIf="type ==='dataMismatch'">{{obj?.mappedCount ? obj?.mappedCount:'--'}}</td>
-                        <td class="text-capitalize" *ngIf="type ==='dataMismatch'">{{obj?.successPercentage ? obj?.successPercentage:'--'}}</td>
-                        <td *ngIf="type==='installation'">
-                            <span *ngIf="obj.installationStatus ==='paired' || obj.installationStatus ==='onboarded'"
-                                class="badge badge-light-primary mx-4">{{obj.installationStatus | titlecase}}</span>
-                            <span *ngIf="obj.installationStatus ==='live'" class="badge badge-light-success mx-4">Live</span>
-                            <span *ngIf="obj.installationStatus ==='installationfailed'"
-                                class="badge badge-light-warning mx-4">Installationfailed</span>
-                            <span *ngIf="obj.installationStatus ==='deployed'"
-                                class="badge badge-light-success mx-4 text-capitalize">deployed</span>
-                        </td>
-                        <td *ngIf="type==='infra' || type==='mat' || type==='dataMismatch'">
-                            <span *ngIf="obj.status ==='open'" class="badge badge-light-danger">Open</span>
-                            <span *ngIf="obj.status ==='closed'" class="badge badge-light-success">Closed</span>
-                            <span *ngIf="obj.status ==='inprogress'" class="badge badge-light-primary">In
-                                Progress</span>
-                        </td>
-                        <td  *ngIf="type==='infra'">
-{{obj.configuredDownTime?obj.configuredDownTime*60:0 || 0 }} {{obj.configuredDownTime > 1? 'mins' : 'min'}} 
-                        </td>
-                         <td  *ngIf="type==='infra'"> 
-{{obj.totalDownTime || 0 }} {{obj.totalDownTime > 1? 'mins' : 'min'}} 
-                        </td>
-                        <td *ngIf="type==='installation' || type==='infra'">
-                            <div>
-                                <span *ngIf="obj.primaryIssue !=='-'">{{obj.primaryIssue ? obj.primaryIssue :'Issue not identified'}}</span>
-                                <span *ngIf="obj.primaryIssue ==='-'">Issue not identified</span>
-                            </div>
-                        </td>
-                        <td *ngIf="type==='installation' || type==='infra'">
-                            <span *ngIf="obj.secondaryIssue">{{obj.secondaryIssue}}</span>
-                        </td>
-                        <td *ngIf="type==='infra' || type ==='dataMismatch'">
-                            <span class="mx-2 cursor-pointer" *ngIf="this.users.userType ==='tango'" (click)="commentModal(obj)"><svg
-                                    xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
-                                    <path
-                                        d="M17.6431 12.5C17.6431 12.942 17.4675 13.366 17.1549 13.6785C16.8423 13.9911 16.4184 14.1667 15.9764 14.1667H5.9764L2.64307 17.5V4.16667C2.64307 3.72464 2.81866 3.30072 3.13122 2.98816C3.44378 2.67559 3.86771 2.5 4.30973 2.5H15.9764C16.4184 2.5 16.8423 2.67559 17.1549 2.98816C17.4675 3.30072 17.6431 3.72464 17.6431 4.16667V12.5Z"
-                                        stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-                                </svg></span>
-                                <span class="mx-2 cursor-pointer" (click)="tickets(type,obj.clientId,obj.storeId,obj.clientName)"><svg
-                                    xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
-                                    <g clip-path="url(#clip0_10640_18061)">
-                                        <path
-                                            d="M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z"
-                                            stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-                                        <path
-                                            d="M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z"
-                                            stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-                                    </g>
-                                    <defs>
-                                        <clipPath id="clip0_10640_18061">
-                                            <rect width="20" height="20" fill="white" transform="translate(0.143066)" />
-                                        </clipPath>
-                                    </defs>
-                                </svg></span>
-                        </td>
-                        <td *ngIf="type === 'mat'">
-                            <span class="mx-2 cursor-pointer" (click)="routeToMat(obj.storeId,obj.clientId,obj.clientName)"><svg
-                                xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
-                                <g clip-path="url(#clip0_10640_18061)">
-                                    <path
-                                        d="M0.976562 10C0.976562 10 4.3099 3.33337 10.1432 3.33337C15.9766 3.33337 19.3099 10 19.3099 10C19.3099 10 15.9766 16.6667 10.1432 16.6667C4.3099 16.6667 0.976562 10 0.976562 10Z"
-                                        stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-                                    <path
-                                        d="M10.1432 12.5C11.5239 12.5 12.6432 11.3808 12.6432 10C12.6432 8.61933 11.5239 7.50004 10.1432 7.50004C8.76252 7.50004 7.64323 8.61933 7.64323 10C7.64323 11.3808 8.76252 12.5 10.1432 12.5Z"
-                                        stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
-                                </g>
-                                <defs>
-                                    <clipPath id="clip0_10640_18061">
-                                        <rect width="20" height="20" fill="white" transform="translate(0.143066)" />
-                                    </clipPath>
-                                </defs>
-                            </svg></span>                  
-                    
-                        </td>
-                    
-                    
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <div *ngIf="!loading && !noData" class="my-3">
-            <lib-pagination [itemsPerPage]="pageSize" [currentPage]="currentPage" [totalItems]="totalItems"
-                [paginationSizes]="paginationSizes" [pageSize]="setpageSize()" (pageChange)="onPageChange($event)"
-                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
-        </div>
-    </div>
-</div>

package/src/lib/components/tickets/tickets.component.scss

@@ -1,131 +0,0 @@
-.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;
- }
-
- .text-sub {
-    color: var(--Gray-500, #667085) !important;
-    font-family: 'Inter';
-    font-size: 14px !important;
-    font-weight: 400 !important;
-    line-height: 20px;
-}
-
-.border-val {
-    color: var(--Gray-700, #344054) !important;
-    font-family: 'Inter';
-    font-size: 14px !important;
-    font-weight: 600 !important;
-    line-height: 20px;
-    text-transform: capitalize;
-}
-
-td {
-    vertical-align: middle;
-    line-height: 35px !important;
-}
-
-.table-title-primary {
-    color: var(--Primary-700, #009BF3) !important;
-    font-weight: 500 !important;
-}
-.table-sub {
-    line-height: 30px !important;
-    color: var(--Gray-500, #667085) !important;
-}
-
-.txt-light-primary {
-    color: #009BF3 !important;
-}
-
-input[type='checkbox'] {
-    width: 16px !important;
-    height: 16px !important;
-    margin: 0px 5px;
-    border-radius: 4px !important;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    -o-appearance: none;
-    appearance: none;
-    outline: 1px solid var(--gray-300, #D0D5DD);
-    box-shadow: none;
-    font-size: 0.8em;
-    text-align: center;
-    line-height: 1em;
-    background: white;
-}
-
-input[type='checkbox']:checked {
-    outline: 1px solid var(--primary-600, #00A3FF);
-    background-color: var(--primary-50, #EAF8FF);
-}
-
-input[type='checkbox']:checked:after {
-    content: '';
-    transform: rotate(45deg);
-    border-bottom: 2px solid #00A3FF;
-    border-right: 2px solid #00A3FF;
-    display: inline-block;
-    width: 0.2em;
-    padding-left: 0px;
-    padding-top: 9px;
-    padding-right: 4px;
-}
-
-.img-src{
-    width:25%;
-    height:20%
-}
-
-.rotate {
-    rotate: 180deg;
-    transition: 1s;
-}
-.viewbutton{
-    border-radius: 8px;
-border: 1px solid var(--Gray-300, #D0D5DD);
-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-// width: 56px;
-padding: 10px 16px;
-justify-content: center;
-align-items: center;
-gap: 10px;
-color: var(--Gray-700, #344054);
-font-family: 'Inter';
-font-size: 12px;
-font-weight: 600;
-}
-
-.horizontal-scroll {
-    overflow-x: auto; /* Enable horizontal scrolling */
-    overflow-y: hidden; /* Disable vertical scrolling */
-    white-space: nowrap; /* Prevents content from wrapping */
-  }

package/src/lib/components/tickets/tickets.component.spec.ts

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