tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/eye-test-audit/eye-test-audit/settings-audit/settings-audit.component.html

@@ -0,0 +1,490 @@
+<div class="d-flex align-items-center my-5">
+    <div (click)="backNavigation()" class="btn btn-am btn-outline p-3">
+        <span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M15.8332 9.99984H4.1665M4.1665 9.99984L9.99984 15.8332M4.1665 9.99984L9.99984 4.1665"
+                    stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+            </svg></span>
+    </div><span class="ms-2 title-head">Audit Settings</span>
+</div>
+
+
+<div class="row mt-5">
+    <div class="col-12">
+        <div ngbAccordion #accordion="ngbAccordion" [closeOthers]="true" [destroyOnHide]="true"
+            (show)="openItem($event)">
+            <div class="settings-accordian-card " ngbAccordionItem [collapsed]="false">
+                <div class="d-flex" ngbAccordionHeader>
+                    <button type="button" class="mainheading" ngbAccordionButton>
+                        <div class="header-row">
+                            <span>User Configuration</span>
+                            <span class="divider"></span>
+                        </div>
+                    </button>
+                </div>
+                <div ngbAccordionCollapse>
+                    <div ngbAccordionBody>
+                        <ng-template>
+
+                            <div class="col-12 mb-5">
+                                <div *ngIf="!editMode" class=" d-flex justify-content-end">
+                                    <button (click)="toggleEdit()" type="button"
+                                        class="btn btn-outline align-items-end"><span class="me-2"><svg
+                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <g clip-path="url(#clip0_2579_25125)">
+                                                    <path
+                                                        d="M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z"
+                                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                                        stroke-linejoin="round" />
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2579_25125">
+                                                        <rect width="20" height="20" fill="white" />
+                                                    </clipPath>
+                                                </defs>
+                                            </svg></span>Edit Details</button>
+                                </div>
+                            </div>
+
+                            <div class="w-80">
+                                <label class="my-2 form-label fs-4 fw-bold">Assign Audit Users</label>
+                                <div *ngIf="editMode; else readonlyView">
+                                    <lib-chip-dropdown [data]="userConfigList" [selectedData]="configData"
+                                        (selectedList)="updateOwner($event)">
+                                    </lib-chip-dropdown>
+                                </div>
+
+                                <ng-template #readonlyView>
+                                    <div class="flex flex-wrap gap-2 border-2 border-gray-300 p-3 rounded">
+                                        <ng-container *ngFor="let chip of configData">
+                                            <span class="p-1 rounded-5 chip px-2 my-3 py-1 bg-gray-200">
+                                                {{ chip?.name || chip }}
+                                            </span>
+                                        </ng-container>
+                                    </div>
+
+                                </ng-template>
+
+                            </div>
+
+                            <div class="mt-3 text-end" *ngIf="editMode">
+                                <button class="btn btn-outline me-2" (click)="cancelEdit()">Cancel</button>
+                                <button class="btn btn-primary" (click)="submitOwners()">Save</button>
+                            </div>
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+            <div class="settings-accordian-card mt-6" ngbAccordionItem>
+                <div class="d-flex" ngbAccordionHeader>
+                    <button class="mainheading" ngbAccordionButton>
+                        <div class="header-row">
+                            <span>Email Configuration</span>
+                            <span class="divider"></span>
+                        </div>
+                    </button>
+                </div>
+                <div ngbAccordionCollapse>
+                    <div ngbAccordionBody>
+                        <ng-template>
+                            <div class="col-12 mb-5">
+                                <div *ngIf="editMode1" class=" d-flex justify-content-end">
+                                    <button (click)="toggleEdit1();" type="button"
+                                        class="btn btn-outline align-items-end"><span class="me-2"><svg
+                                                xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                viewBox="0 0 20 20" fill="none">
+                                                <g clip-path="url(#clip0_2579_25125)">
+                                                    <path
+                                                        d="M14.167 2.49993C14.3859 2.28106 14.6457 2.10744 14.9317 1.98899C15.2176 1.87054 15.5241 1.80957 15.8337 1.80957C16.1432 1.80957 16.4497 1.87054 16.7357 1.98899C17.0216 2.10744 17.2815 2.28106 17.5003 2.49993C17.7192 2.7188 17.8928 2.97863 18.0113 3.2646C18.1297 3.55057 18.1907 3.85706 18.1907 4.16659C18.1907 4.47612 18.1297 4.78262 18.0113 5.06859C17.8928 5.35455 17.7192 5.61439 17.5003 5.83326L6.25033 17.0833L1.66699 18.3333L2.91699 13.7499L14.167 2.49993Z"
+                                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                                        stroke-linejoin="round" />
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2579_25125">
+                                                        <rect width="20" height="20" fill="white" />
+                                                    </clipPath>
+                                                </defs>
+                                            </svg></span>Edit Details</button>
+                                </div>
+                            </div>
+                            <div class="fw-semibold mb-3">
+                                Compliance Threshold
+                            </div>
+                            <form [formGroup]="complianceForm">
+
+                                <div class="row">
+                                    <div class="col-lg-2">
+                                        <lib-reactive-select formControlName="threshold" [data]="complianceThresholds"
+                                            [idField]="'value'" [nameField]="'label'"></lib-reactive-select>
+                                    </div>
+                                    <div class="col-lg-2">
+                                        <lib-reactive-select formControlName="percentage" [data]="compliancePercentage"
+                                            [idField]="'value'" [nameField]="'label'"></lib-reactive-select>
+                                    </div>
+                                </div>
+                                <div *ngIf="!editMode1" class="mt-3 text-end">
+                                    <button type="button" class="btn btn-outline me-2"
+                                        (click)="cancelCompliance()">Cancel</button>
+                                    <button type="button" class="btn btn-primary "
+                                        (click)="submitCompliance()">Save</button>
+                                </div>
+                            </form>
+                            <div class="my-3">
+                                <span class="fw-semibold me-3"><svg xmlns="http://www.w3.org/2000/svg" width="16"
+                                        height="16" viewBox="0 0 16 16" fill="none">
+                                        <g clip-path="url(#clip0_762_15430)">
+                                            <path
+                                                d="M8.00004 10.6663V7.99967M8.00004 5.33301H8.00671M14.6667 7.99967C14.6667 11.6816 11.6819 14.6663 8.00004 14.6663C4.31814 14.6663 1.33337 11.6816 1.33337 7.99967C1.33337 4.31778 4.31814 1.33301 8.00004 1.33301C11.6819 1.33301 14.6667 4.31778 14.6667 7.99967Z"
+                                                stroke="#667085" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </g>
+                                        <defs>
+                                            <clipPath id="clip0_762_15430">
+                                                <rect width="16" height="16" fill="white" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg></span>
+                                Email will be automatically sent if the compliance doesn’t meet the
+                                <span class="fw-bold">{{complianceForm.value?.percentage}}</span> to the respective Optometrist.
+                            </div>
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+            <div class="settings-accordian-card mt-6" ngbAccordionItem>
+                <div class="d-flex" ngbAccordionHeader>
+                    <button class="mainheading" ngbAccordionButton>
+                        <div class="header-row">
+                            <span>Email Logs</span>
+                            <span class="divider"></span>
+                        </div>
+                    </button>
+                </div>
+                <div ngbAccordionCollapse>
+                    <div ngbAccordionBody>
+                        <ng-template>
+                            <div class="d-flex justify-content-end align-items-center mb-10">
+                                <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 (change)="searchData($event)" [(ngModel)]="searchValue" type="search"
+                                        class="form-control ps-14 me-2" autocomplete="off" placeholder="Search" />
+                                    <div class="d-flex align-items-center">
+                                        <div class="d-flex align-items-center position-relative me-2">
+                                            <input class="fx-date-range form-control ps-14"
+                                                style="min-width: 260px !important;" type="text" matInput
+                                                ngxDaterangepickerMd [drops]="'down'" [opens]="'right'"
+                                                [ranges]="ranges" [showCustomRangeLabel]="true"
+                                                [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true"
+                                                [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDateRange"
+                                                [autoApply]="true"
+                                                [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                                                (datesUpdated)="datechange($event)" name="daterange" />
+                                            <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                    viewBox="0 0 20 20" fill="none">
+                                                    <path
+                                                        d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                                        stroke-linejoin="round" />
+                                                </svg>
+                                            </span>
+                                        </div>
+
+                                        <div class="position-relative">
+
+                                            <button type="button" (click)="opendropdown()"
+                                                class="btn btn-outline mx-2 rounded-3 text-nowrap border-val">
+                                                <span class="me-2">Filter</span> <svg width="20" height="20"
+                                                    viewBox="0 0 20 20" fill="none">
+                                                    <path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#344054"
+                                                        stroke-width="2" stroke-linecap="round"
+                                                        stroke-linejoin="round" />
+                                                </svg>
+                                            </button>
+
+
+                                            <div *ngIf="Opendropdown"
+                                                class="card p-4 dropdown2 position-absolute z-1 end-0"
+                                                (clickOutside)="closeDropdown()">
+                                                <div class="dropdown-title d-flex justify-content-between mb-3">
+                                                    <span>Filter Options</span>
+
+                                                </div>
+
+
+                                                <div class="dropdown-container mb-3">
+                                                    <div class="position-relative dropdown-header"
+                                                        (click)="toggleRmDropdown()">
+                                                        <input type="text"
+                                                            class="form-control dropdown-input cursor-pointer"
+                                                            value="RMs" readonly placeholder="Select RMs" />
+                                                        <span *ngIf="getSelectedRmsCount()"
+                                                            class="position-absolute top-50 end-0 translate-middle-y me-2 badge badge-light-default text-white text-xs rounded-full px-2 py-0.5">
+                                                            {{ getSelectedRmsCount() }}
+                                                        </span>
+                                                    </div>
+
+                                                    <div class="dropdown-menu custom-dropdown-menu" *ngIf="rmOpen">
+                                                        <input type="text" class="form-control mb-2 dropdown-search"
+                                                            placeholder="Search RMs" [(ngModel)]="searchRmText"
+                                                            (ngModelChange)="filterRms()" />
+
+                                                        <div class="form-check ps-0 my-5">
+                                                            <input class="form-check-input" type="checkbox"
+                                                                id="selectAllRms" [checked]="isAllRmsSelected()"
+                                                                (change)="toggleSelectAllRms($event)" />
+                                                            <label class="form-check-label" for="selectAllRms">Select
+                                                                All</label>
+                                                        </div>
+
+                                                        <div class="form-check mb-5 ps-0"
+                                                            *ngFor="let rm of filteredRms">
+                                                            <input class="form-check-input" type="checkbox"
+                                                                [id]="rm.email" [(ngModel)]="rm.checked"
+                                                                (change)="updateSelectedRms()" />
+                                                            <label class="form-check-label" [for]="rm.email">{{
+                                                                rm.userName }}</label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+
+                                                <div class="dropdown-container">
+                                                    <div class="dropdown-header position-relative"
+                                                        (click)="toggleClusterDropdown()">
+                                                        <input type="text"
+                                                            class="form-control dropdown-input cursor-pointer pe-5"
+                                                            value="Clusters" readonly placeholder="Select Clusters" />
+
+
+                                                        <span *ngIf="getSelectedClustersCount()"
+                                                            class="position-absolute top-50 end-0 translate-middle-y me-2 badge badge badge-light-default text-white rounded-pill px-2 py-0">
+                                                            {{ getSelectedClustersCount() }}
+                                                        </span>
+                                                    </div>
+
+                                                    <div class="dropdown-menu custom-dropdown-menu" *ngIf="clusterOpen">
+                                                        <input type="text" class="form-control mb-2 dropdown-search"
+                                                            placeholder="Search clusters"
+                                                            [(ngModel)]="searchClusterText"
+                                                            (ngModelChange)="filterClusters()" />
+
+                                                        <div class="form-check ps-0 my-5">
+                                                            <input class="form-check-input" type="checkbox"
+                                                                id="selectAllClusters"
+                                                                [checked]="isAllClustersSelected()"
+                                                                (change)="toggleSelectAllClusters($event)" />
+                                                            <label class="form-check-label"
+                                                                for="selectAllClusters">Select All</label>
+                                                        </div>
+
+                                                        <div class="form-check mb-5 ps-0"
+                                                            *ngFor="let cluster of filteredClusters">
+                                                            <input class="form-check-input" type="checkbox"
+                                                                [id]="cluster._id" [(ngModel)]="cluster.checked"
+                                                                (change)="updateSelectedClusters()" />
+                                                            <label class="form-check-label" [for]="cluster._id">{{
+                                                                cluster.clusterName }}</label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div class="d-flex gap-2 mt-3">
+                                                    <button class="btn btn-outline btn-sm w-50"
+                                                        (click)="Reset()">Reset</button>
+                                                    <button class="btn btn-primary btn-sm w-50"
+                                                        (click)="Apply()">Apply</button>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+                                        <button type="button" (click)="exportXLSX()" *ngIf="!noData && !loading"
+                                            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 *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-nodata-table" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                        <div class="nodata-title">No data found</div>
+                                        <div class="nodata-sub">There is no result for this eye test table</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div *ngIf="!noData && !loading" class="table-responsive">
+                                <table class="w-100 table bottom-border text-nowrap">
+                                    <thead>
+                                        <tr>
+                                            <th class="text-nowrap text-start"> <span class="cursor-pointer"
+                                                    > RM Name 
+                                                </span></th>
+                                            <th class="text-nowrap text-start"><span class="cursor-pointer"
+                                                   > Cluster Name
+                                                </span></th>
+                                            <th class="text-nowrap text-start">
+                                                <span class="cursor-pointer" (click)="onSort('optumId')"> Optom ID <svg
+                                                        [ngClass]="sortedColumn === 'optumId' && sortOrder === 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 === 'optumId' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span>
+                                            </th>
+                                            <th class="text-nowrap text-start">
+                                                <span class="cursor-pointer" (click)="onSort('optomEmailId')"> Optom
+                                                    Email <svg
+                                                        [ngClass]="sortedColumn === 'optomEmailId' && sortOrder === 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 === 'optomEmailId' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span>
+                                            </th>
+                                            <th class="text-nowrap text-start"><span class="cursor-pointer"
+                                                    (click)="onSort('storeName')"> Store Name <svg
+                                                        [ngClass]="sortedColumn === 'storeName' && sortOrder === 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></span></th>
+
+                                            <th class="text-nowrap text-start"><span class="cursor-pointer"
+                                                    (click)="onSort('auditedBy')"> Audited By <svg
+                                                        [ngClass]="sortedColumn === 'auditedBy' && sortOrder === 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 === 'auditedBy' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span></th>
+                                            <th class="text-nowrap text-start">
+                                                <span class="cursor-pointer" (click)="onSort('complianceScore')"> Tango
+                                                    Score <svg
+                                                        [ngClass]="sortedColumn === 'complianceScore' && sortOrder === 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 === 'complianceScore' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span>
+                                            </th>
+                                            <th class="text-nowrap text-start">
+                                                <span class="cursor-pointer" (click)="onSort('trustScore')"> Trust Score
+                                                    <svg [ngClass]="sortedColumn === 'trustScore' && sortOrder === 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 === 'trustScore' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span>
+                                            </th>
+
+                                            <th class="text-nowrap text-start">
+                                                <span class="cursor-pointer" (click)="onSort('humanScore')"> Human
+                                                    Audited Score <svg
+                                                        [ngClass]="sortedColumn === 'humanScore' && sortOrder === 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 === 'humanScore' ? '#00A3FF' : '#667085'"
+                                                            stroke-width="1.33333" stroke-linecap="round"
+                                                            stroke-linejoin="round" />
+                                                    </svg></span>
+                                            </th>
+
+                                            <th class="text-nowrap text-start">Action</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr *ngFor="let item of tableData">
+                                            <td class="text-nowrap">
+                                                <span class="rm-truncate" [title]="item.RMName">{{ item.RMName }}</span>
+                                            </td>
+                                            <td class="text-nowrap">
+                                                <span class="rm-truncate" [title]="item.cluster">{{ item.cluster }}</span>
+                                            </td>
+                                            <td class="text-nowrap">{{item.optumId}}</td>
+                                            <td class="text-nowrap">{{item.optomEmailId}}</td>
+                                            <td class="text-nowrap">{{item.storeName}}</td>
+                                            <td class="text-nowrap">{{item.auditedBy}}</td>
+                                            <td class="text-nowrap">{{item.complianceScore ?? "--" }}</td>
+                                            <td class="text-nowrap">{{item.trustScore}}</td>
+                                            <td class="text-nowrap">{{item.humanScore}}</td>
+                                            <td class="text-nowrap">
+                                                <button type="button" [disabled]="!item.auditedId"
+                                                    (click)="eyeTestView(item)"
+                                                    class="btn btn-link p-0 m-0 border-0 bg-transparent">
+                                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                        viewBox="0 0 20 20" fill="none">
+                                                        <path
+                                                            d="M0.833252 9.99967C0.833252 9.99967 4.16658 3.33301 9.99992 3.33301C15.8333 3.33301 19.1666 9.99967 19.1666 9.99967C19.1666 9.99967 15.8333 16.6663 9.99992 16.6663C4.16658 16.6663 0.833252 9.99967 0.833252 9.99967Z"
+                                                            stroke="#667085" stroke-width="1.66667"
+                                                            stroke-linecap="round" stroke-linejoin="round" />
+                                                        <path
+                                                            d="M9.99992 12.4997C11.3806 12.4997 12.4999 11.3804 12.4999 9.99967C12.4999 8.61896 11.3806 7.49967 9.99992 7.49967C8.61921 7.49967 7.49992 8.61896 7.49992 9.99967C7.49992 11.3804 8.61921 12.4997 9.99992 12.4997Z"
+                                                            stroke="#667085" stroke-width="1.66667"
+                                                            stroke-linecap="round" stroke-linejoin="round" />
+                                                    </svg>
+                                                </button>
+                                            </td>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="card-footer" *ngIf="!noData && !loading">
+                                <lib-pagination [itemsPerPage]="pageSize" [currentPage]="offset"
+                                    [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                                    (pageChange)="onPageChange($event)"
+                                    (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                            </div>
+                        </ng-template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>