tango-app-ui-manage-tickets 3.7.0-beta.15 → 3.7.0-beta.16

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

@@ -0,0 +1,439 @@
+<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 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: '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

@@ -0,0 +1,131 @@
+.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

@@ -0,0 +1,23 @@
+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();
+  });
+});