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

package/src/lib/components/dashboard-info/dashboard-info.component.html

@@ -0,0 +1,1420 @@
+<div *ngIf="receivedData === 'Checklist'" class="card mb-3">
+    <div class="card-body pt-2 pb-1">
+        <div class="d-flex flex-column">
+            <div  class="d-flex flex-wrap my-2 pe-2">
+                <a [routerLink]="['/manage/trax/dashboard']" [queryParams]="{type: 'Checklist'}" class="d-flex align-items-center me-3 cursor-pointer">
+                    <span><svg width="44" height="44" viewBox="0 0 44 44" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g filter="url(#filter0_d_987_30898)">
+                                <rect x="2" y="1" width="40" height="40" rx="8" fill="white" />
+                                <rect x="2.5" y="1.5" width="39" height="39" rx="7.5" stroke="#D0D5DD" />
+                                <path
+                                    d="M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667"
+                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </g>
+                            <defs>
+                                <filter id="filter0_d_987_30898" x="0" y="0" width="44" height="44"
+                                    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix in="SourceAlpha" type="matrix"
+                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                                    <feOffset dy="1" />
+                                    <feGaussianBlur stdDeviation="1" />
+                                    <feColorMatrix type="matrix"
+                                        values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
+                                    <feBlend mode="normal" in2="BackgroundImageFix"
+                                        result="effect1_dropShadow_987_30898" />
+                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_987_30898"
+                                        result="shape" />
+                                </filter>
+                            </defs>
+                        </svg>
+                    </span>
+                </a>
+
+                <form class="mt-1 me-3 cursor-pointer" style="min-width: 200px;" [formGroup]="form">
+                    <!-- <div class="col-md-4 w-200px"> -->
+                    <lib-select *ngIf="refreshDropdown" [items]="checklistDropdown" [multi]="false" [searchField]="'checkListName'"
+                        [idField]="'_id'" [selectedValues]="[selectedChecklist]" (selected)="onChecklistSelect($event)">
+                        </lib-select>
+                    <!-- <ng-template let-item>
+                    <div class="d-flex justify-content-between align-items-center no-border-custom-select">
+                    <span>{{ item.checkListName }}</span>
+                    <span class="d-flex align-items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                            <path d="M4 6L8 10L12 6" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </span>
+                    </div>
+                    </ng-template> -->
+                   
+
+                    <!-- <lib-reactive-select [formControl]="checklistselectControl"  [idField]="'_id'"
+                        [nameField]="'checkListName'" [data]="checklistDropdown" class="w-100 "
+                        style="border: none !important; box-shadow: none !important;"
+                        (valueChange)="onValueChangeChecklist($event)">
+                        <ng-template let-item>
+                            <div class="d-flex justify-content-between align-items-center no-border-custom-select">
+                                <span>{{ item.checkListName }}</span>
+                                <span class="d-flex align-items-center">
+                                   
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                        fill="none">
+                                        <path d="M4 6L8 10L12 6" stroke="#101828" stroke-width="2"
+                                            stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </span>
+                            </div>
+                        </ng-template>
+                    </lib-reactive-select> -->
+                    <!-- </div> -->
+                </form>
+                <div class="checklist-details d-flex flex-wrap mt-3">
+                    <!-- <div class="d-flex align-items-center grey-badge me-3 my-3">
+                        {{ selectedChecklist?.checkListName }}
+                    </div> -->
+
+                    <div class="d-flex align-items-center mb-2">
+                        <span *ngIf="selectedChecklist?.publish">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"
+                                fill="none">
+                                <path
+                                    d="M7.9987 14.6666C11.6806 14.6666 14.6654 11.6818 14.6654 7.99992C14.6654 4.31802 11.6806 1.33325 7.9987 1.33325C4.3168 1.33325 1.33203 4.31802 1.33203 7.99992C1.33203 11.6818 4.3168 14.6666 7.9987 14.6666Z"
+                                    fill="#12B76A" />
+                            </svg>
+                        </span>
+
+                        <span *ngIf="!selectedChecklist?.publish">
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M6.9987 13.6666C10.6806 13.6666 13.6654 10.6818 13.6654 6.99992C13.6654 3.31802 10.6806 0.333252 6.9987 0.333252C3.3168 0.333252 0.332031 3.31802 0.332031 6.99992C0.332031 10.6818 3.3168 13.6666 6.9987 13.6666Z"
+                                    fill="#F04438" />
+                            </svg>
+                        </span>
+                    </div>
+
+                    <div class="d-flex align-items-center me-3 checklisttext">
+                        <span><svg class="mx-2 mb-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                viewBox="0 0 16 16" fill="none">
+                                <path
+                                    d="M13.3346 14V12.6667C13.3346 11.9594 13.0537 11.2811 12.5536 10.781C12.0535 10.281 11.3752 10 10.668 10H5.33464C4.62739 10 3.94911 10.281 3.44902 10.781C2.94892 11.2811 2.66797 11.9594 2.66797 12.6667V14M10.668 4.66667C10.668 6.13943 9.47406 7.33333 8.0013 7.33333C6.52854 7.33333 5.33464 6.13943 5.33464 4.66667C5.33464 3.19391 6.52854 2 8.0013 2C9.47406 2 10.668 3.19391 10.668 4.66667Z"
+                                    stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg><span class="mt-2">{{ selectedChecklist?.createdByName }}</span></span>
+                    </div>
+
+                    <div class="d-flex align-items-center me-3 checklisttext">
+                        <span><svg class="mx-2 mb-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                viewBox="0 0 18 18" fill="none">
+                                <path
+                                    d="M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z"
+                                    stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg> {{ selectedChecklist?.storeCount?.toLocaleString('en-US', { minimumFractionDigits: 0
+                            }) || '--' }} {{selectedChecklist?.coverage === 'store' ? 'Stores' : 'Users'}}</span>
+                    </div>
+
+                    <div class="d-flex align-items-center me-3 checklisttext">
+                        <span><svg class="mx-2 mb-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                viewBox="0 0 18 18" fill="none">
+                                <path
+                                    d="M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z"
+                                    stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>Repeats {{selectedChecklist?.scheduleRepeatedType === 'onetime' ? 'Single' : (selectedChecklist?.scheduleRepeatedType || '--' )}}</span>
+                    </div>
+
+                    <div class="d-flex align-items-center me-3 checklisttext">
+                        <span><svg class="mx-2 mb-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                viewBox="0 0 18 18" fill="none">
+                                <g clip-path="url(#clip0_987_30895)">
+                                    <path
+                                        d="M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z"
+                                        stroke="#667085" stroke-width="1.4" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </g>
+                                <defs>
+                                    <clipPath id="clip0_987_30895">
+                                        <rect width="18" height="18" fill="white" />
+                                    </clipPath>
+                                </defs>
+                            </svg> {{ selectedChecklist?.scheduleStartTime?.toLocaleString('en-US', {
+                            minimumFractionDigits: 0 }) || '--' }} - {{
+                            selectedChecklist?.scheduleEndTime?.toLocaleString('en-US', { minimumFractionDigits: 0 }) ||
+                            '--' }}</span>
+                    </div>
+                </div>
+            </div>
+            <!--end::Info-->
+        </div>
+    </div>
+</div>
+<div *ngIf="receivedData === 'User'" class="card mb-5">
+    <div class="card-body pt-2 pb-1">
+        <div class="d-flex flex-column">
+            <div class="d-flex flex-wrap my-2 pe-2">
+                <a [routerLink]="['/manage/trax/dashboard']"  [queryParams]="{type: 'user'}" class="d-flex align-items-center me-3 cursor-pointer">
+                    <span><svg width="44" height="44" viewBox="0 0 44 44" fill="none"
+                            xmlns="http://www.w3.org/2000/svg">
+                            <g filter="url(#filter0_d_987_30898)">
+                                <rect x="2" y="1" width="40" height="40" rx="8" fill="white" />
+                                <rect x="2.5" y="1.5" width="39" height="39" rx="7.5" stroke="#D0D5DD" />
+                                <path
+                                    d="M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667"
+                                    stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </g>
+                            <defs>
+                                <filter id="filter0_d_987_30898" x="0" y="0" width="44" height="44"
+                                    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix in="SourceAlpha" type="matrix"
+                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                                    <feOffset dy="1" />
+                                    <feGaussianBlur stdDeviation="1" />
+                                    <feColorMatrix type="matrix"
+                                        values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0" />
+                                    <feBlend mode="normal" in2="BackgroundImageFix"
+                                        result="effect1_dropShadow_987_30898" />
+                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_987_30898"
+                                        result="shape" />
+                                </filter>
+                            </defs>
+                        </svg>
+                    </span>
+                </a>
+                <div class="symbol symbol-35px symbol-circle">
+                    <span class="symbol-label bg-light-primary text-primary me-2 mt-2">
+                        {{ selectedUser?.userNameChar }}
+                    </span>
+                </div>
+                <form class="mt-1 me-3 cursor-pointer" style="min-width: 200px;" [formGroup]="form">              
+                <lib-select *ngIf="refreshuserDropdown"
+                [items]="userlistDropdown" 
+                [multi]="false" 
+                [searchField]="'userName'" 
+                [idField]="'userEmail'" 
+                [selectedValues]="[selectedUser]" 
+                (selected)="onUserSelect($event)" 
+                >
+                <!-- <ng-template let-item>
+                    <div class="d-flex justify-content-between align-items-center no-border-custom-select">
+                        <span>{{ item.userName }}</span>
+                        <span class="d-flex align-items-center">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                <path d="M4 6L8 10L12 6" stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg>
+                        </span>
+                    </div>
+                </ng-template> -->
+                </lib-select>
+                    <!-- <div class="col-md-4 w-200px">
+                        <lib-reactive-select [formControl]="userlistselectControl" [idField]="'userEmail'"
+                            [nameField]="'userName'" [data]="userlistDropdown" class="w-100"
+                            style="border: none !important; box-shadow: none !important;"
+                            (valueChange)="onValueChangeUserChecklist($event)">
+                            <ng-template let-item>
+                                <div class="d-flex justify-content-between align-items-center no-border-custom-select">
+                                    <span>{{ item.userName }}</span>
+                                    <span class="d-flex align-items-center">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                            viewBox="0 0 16 16" fill="none">
+                                            <path d="M4 6L8 10L12 6" stroke="#101828" stroke-width="2"
+                                                stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </span>
+                                </div>
+                            </ng-template>
+                        </lib-reactive-select>
+                    </div> -->
+                </form>
+
+                <div *ngIf="selectedUser?.role" class="checklist-details d-flex flex-wrap mt-2">
+                    <div class="d-flex align-items-center badge badge-light-primary me-3 my-3">
+                        {{ selectedUser?.role }}
+                    </div>
+                </div>
+            </div>
+            <!--end::Info-->
+        </div>
+    </div>
+</div>
+
+<div class="col-md-12">
+    <div class="row">
+        <div class="col-9">
+            <div *ngIf="receivedData === 'Checklist' || receivedData === 'User'" class="row">
+                <div class="col-4">
+                    <div class="totalinfocard">
+                        <div class="headingcard">
+                            Total instances
+                        </div>
+                        <div class="row mt-5">
+                        <div class="col-md-10 infocount mb-6">{{ infoCardsData?.totalInstances?.count !==null ?
+                            infoCardsData?.totalInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) :
+                            '--'}}
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.totalInstances?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.totalInstances?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2">
+
+                                    <span class="percent-value">{{
+                                        infoComparisonCardsData?.totalInstances?.comparisonData !==null
+                                        ?infoComparisonCardsData?.totalInstances?.comparisonData.toLocaleString('en-US',
+                                        {
+                                        minimumFractionDigits: 0 }) : '--' }}%</span>
+                                    <span class="week-font"> vs last <span *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span>
+                                </span>
+                            </div>
+                        </div>
+                        <div *ngIf="headerData?.client !== '11'" class="col-md-1">
+                            <div class="mt-1 cursor-pointer fs-5" [ngClass]="dateType ==='daily' ? 'text-primary' :''"
+                                (click)="dateValue('daily')">1D</div>
+                            <div class="mt-1 cursor-pointer fs-5" [ngClass]="dateType ==='weekly' ? 'text-primary' :''"
+                                (click)="dateValue('weekly')">1W</div>
+                            <div *ngIf="traxMonthlyComparisonData" class="mt-1 cursor-pointer fs-5" [ngClass]="dateType ==='monthly' ? 'text-primary' :''"
+                                (click)="dateValue('monthly')">1M</div>
+                            <!-- <div  class="mt-1 cursor-pointer fs-5"  [ngClass]="dateType ==='monthly' ? 'text-primary' :''"  (click)="dateValue('monthly')">1M</div> -->
+                        </div>
+                    </div>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="totalinfocard">
+                        <div class="headingcard">
+                            Completed instances
+                        </div>
+                        <div class="row mt-5">
+                        <div class="infocount mb-6">{{ infoCardsData?.completedInstances?.count !==null ?
+                            infoCardsData?.completedInstances?.count.toLocaleString('en-US', { minimumFractionDigits: 0
+                            }) : '--' }}
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.completedInstances?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.completedInstances?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2">
+                                    <span class="percent-value">{{
+                                        infoComparisonCardsData?.completedInstances?.comparisonData !==null
+                                        ?infoComparisonCardsData?.completedInstances?.comparisonData.toLocaleString('en-US',
+                                        {
+                                        minimumFractionDigits: 0 }) : '--' }}%</span>
+                                    <span class="week-font"> vs last <span *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+                <div class="col-4">
+                    <div class="totalinfocard">
+                        <div class="headingcard">
+                            Flags
+                        </div>
+                        <div class="row mt-5">
+                        <div class="infocount mb-6">{{ infoCardsData?.flags?.count !==null ?
+                            infoCardsData?.flags?.count.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--' }}
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.flags?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2">
+                                    <span class="percent-value">{{ infoComparisonCardsData?.flags?.comparisonData
+                                        !==null ? infoComparisonCardsData?.flags?.comparisonData.toLocaleString('en-US',
+                                        {
+                                        minimumFractionDigits: 0 }) : '--' }}%</span>
+                                    <span class="week-font"> vs last <span *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span>
+                                </span>
+                            </div>
+                            <!-- <div class="avgcount">Avg Flag Rate : {{ infoCardsData.flags.count ? '50%' : 'N/A' }}</div> -->
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+            <div *ngIf="receivedData === 'Checklist'" class="row my-3">
+                <div class="col-6">
+                    <div class="subinfocard">
+                        <div class="headingcard">
+                            Completion Score
+                        </div>
+
+                        <div class="infocount">
+                            {{ infoCardsData?.completionScore?.count !==null ?
+                            infoCardsData?.completionScore?.count.toLocaleString('en-US', { minimumFractionDigits: 0 })
+                            : '--' }}%
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.completionScore?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2">
+                                    <span class="percent-value">{{
+                                        infoComparisonCardsData?.completionScore?.comparisonData !==null ?
+                                        infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',
+                                        {
+                                        minimumFractionDigits: 0 }) : '--' }} %</span>
+                                    <span class="week-font"> vs last <span *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="subinfocard">
+                        <div class="headingcard">
+                            Compliance Rate
+                        </div>
+                        <div class="infocount">
+
+                            {{ infoCardsData?.complianceRate?.count !==null ?
+                            infoCardsData?.complianceRate?.count.toLocaleString('en-US', {
+                            minimumFractionDigits: 0 }) : '--' }} %
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.complianceRate?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2">
+                                    <span class="percent-value">{{
+                                        infoComparisonCardsData?.complianceRate?.comparisonData !==null
+                                        ?infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',
+                                        {
+                                        minimumFractionDigits: 0 }) : '--' }}%</span>
+                                    <span class="week-font"> vs last <span *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div *ngIf="receivedData === 'User'" class="row my-3">
+                <div class="col-6">
+                    <div class="totalinfocard">
+                        <div class="headingcard">
+                            Completion Score
+                        </div>
+                        <div class="row mt-5">
+                        <div class="infocount mb-6">{{ infoCardsData?.completionScore?.count !==null ?
+                            infoCardsData?.completionScore?.count.toLocaleString('en-US', {
+                            minimumFractionDigits: 0 }) : '--'}} %
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.completionScore?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2"><span class="percent-value">{{
+                                        infoComparisonCardsData?.completionScore?.comparisonData !==null ?
+                                        infoComparisonCardsData?.completionScore?.comparisonData.toLocaleString('en-US',
+                                        {
+                                        minimumFractionDigits: 0 }) : '--' }}%</span><span class="week-font"> vs last
+                                        <span *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span></span>
+                            </div>
+                        </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="totalinfocard">
+                        <div class="headingcard">
+                            Compliance Rate
+                        </div>
+                        <div class="row mt-5">
+                        <div class="infocount mb-6">{{ infoCardsData?.complianceRate?.count !==null ?
+                            infoCardsData?.complianceRate?.count.toLocaleString('en-US', {
+                            minimumFractionDigits: 0 }) : '--' }} %
+                            <div>
+                                <span *ngIf="infoComparisonCardsData?.complianceRate?.comparisonData">
+                                    <span class="mt-2"
+                                        *ngIf="infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                            viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                            <g clip-path="url(#clip0_3216_118)">
+                                                <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                    stroke-linejoin="round"></path>
+                                            </g>
+                                            <defs>
+                                                <clipPath id="clip0_3216_118">
+                                                    <rect width="12" height="12" fill="white"></rect>
+                                                </clipPath>
+                                            </defs>
+                                        </svg>
+                                    </span>
+                                    <ng-template #showArrow2>
+                                        <span class="arrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_2328_4654)">
+                                                    <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                        stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_2328_4654">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                    </ng-template>
+                                </span>
+                                <span class="mt-2 ms-2"><span class="percent-value">{{
+                                        infoComparisonCardsData?.complianceRate?.comparisonData !==null ?
+                                        infoComparisonCardsData?.complianceRate?.comparisonData.toLocaleString('en-US',
+                                        { minimumFractionDigits: 0 }) :
+                                        '--'}}%</span><span class="week-font"> vs last <span
+                                            *ngIf="dateType ==='daily'">day</span><span
+                                            *ngIf="dateType ==='weekly'">week</span> <span
+                                            *ngIf="dateType ==='monthly'">month</span></span></span>
+                            </div>
+                        </div>
+                        </div>
+
+                    </div>
+                </div>
+                <!-- <div class="col-4">
+                        <div class="totalinfocard">
+                            <div class="headingcard">
+                                Assigned Tasks
+                            </div>
+                            <div class="infocount"><u>6</u>
+                                <div><span class="mt-2"><svg xmlns="http://www.w3.org/2000/svg" width="12"
+                                    height="12" viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                    <g clip-path="url(#clip0_3216_118)">
+                                        <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                            stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                            stroke-linejoin="round"></path>
+                                    </g>
+                                    <defs>
+                                        <clipPath id="clip0_3216_118">
+                                            <rect width="12" height="12" fill="white"></rect>
+                                        </clipPath>
+                                    </defs>
+                                </svg></span><span class="mt-2 ms-2"><span class="percent-value">13%</span><span
+                                    class="week-font"> vs
+                                    last week</span></span></div>
+                                    <div class="actiondownload">View All </div>
+                            </div>
+                            
+                          
+                        </div>
+                    </div> -->
+            </div>
+
+            <!-- <ng-container *ngIf="infoCardDataLoading">
+                <div 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>
+            </ng-container>
+            <ng-container *ngIf="infoCardNoData && !infoCardDataLoading">
+                <div class="row">
+                    <div class="col-lg-12 my-6">
+                        <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                            <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                            <div class="nodatamaintext mt-3">No data found</div>
+                            <div class="nodatasubtext">There is no result for Checklist Performance Table
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-container> -->
+
+        </div>
+
+
+        <div *ngIf="receivedData === 'Checklist' || receivedData === 'User'" class="col-3">
+            <lib-monthlyperformance-datepicker
+                [monthlyperformce]="selectedSourceCheckListId"></lib-monthlyperformance-datepicker>
+        </div>
+
+    </div>
+</div>
+
+<div *ngIf="receivedData === 'Store'" class="row mb-4 d-flex justify-content-between align-items-stretch">
+    <div class="col-2 px-2">
+        <div class="card card-border pt-2 h-100">
+            <div class="card-header ellipse1 border-0 px-3">
+                <h3 class="card-title align-items-start flex-column">
+                    <span class="cardcount">{{ infoCardsData?.activeUnique !==null ?
+                        infoCardsData?.activeUnique?.toLocaleString('en-US', { minimumFractionDigits: 0 }) : '--'
+                        }}</span>
+                    <span class="cardtext">Active Checklists</span>
+                </h3>
+            </div>
+            <div class="card-body p-0">
+                <div class="h-auto py-3 px-3">
+                    <div class="cardsubcount my-2">{{ infoCardsData?.totalInstances?.count !==null ?
+                        infoCardsData?.totalInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :
+                        '--' }}</div>
+                    <div class="cardtext">Checklist Instances</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-5 px-2">
+        <div class="card card-border pt-2 h-100">
+            <div class="card-header ellipse1 border-0 px-3">
+                <h3 class="card-title align-items-start flex-column">
+                    <span class="cardcount">{{ infoCardsData?.notSubmittedInstances?.count !==null ?
+                        infoCardsData?.notSubmittedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0
+                        }) : '--' }}</span>
+                    <span class="cardtext">Not Submitted Checklists</span>
+                </h3>
+            </div>
+            <div class="card-body p-0">
+                <div class="row h-auto py-3 px-3">
+                    <div class="col-md-6">
+                        <div class="cardsubcount my-2">{{ infoCardsData?.notSubmittedInstances?.open !==null ?
+                            infoCardsData?.notSubmittedInstances?.open?.toLocaleString('en-US', { minimumFractionDigits:
+                            0 }) : '--' }}</div>
+                        <div class="cardtext">Open Checklists</div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="cardsubcount my-2">{{ infoCardsData?.notSubmittedInstances?.inprogress !==null ?
+                            infoCardsData?.notSubmittedInstances?.inprogress?.toLocaleString('en-US', {
+                            minimumFractionDigits: 0 }) : '--' }}</div>
+                        <div class="cardtext">In Progress Checklists</div>
+                    </div>
+                    <!-- <div class="col-md-4">
+                        <div class="cardsubcount my-2">{{ infoCardsData?.notSubmittedInstances?.delay ?
+                            infoCardsData?.notSubmittedInstances?.delay.toLocaleString('en-US', { minimumFractionDigits:
+                            0 }) : '--' }}</div>
+                        <div class="cardtext">Delay in Submission</div>
+                    </div> -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-5 px-2">
+        <div class="card card-border pt-2 h-100">
+            <div class="card-header ellipse1 border-0 px-3">
+                <h3 class="card-title align-items-start flex-column">
+                    <span class="cardcount">{{ infoCardsData?.completedInstances?.count !==null ?
+                        infoCardsData?.completedInstances?.count?.toLocaleString('en-US', { minimumFractionDigits: 0 }) :
+                        '--' }}</span>
+                    <span class="cardtext">Submitted Checklists</span>
+                </h3>
+            </div>
+            <div class="card-body p-0">
+                <div class="row h-auto py-3 px-3">
+                    <div class="col-md-11">
+                        <div class="row">
+                            <div class="col-md-4">
+                                <div class="cardsubcount my-2">{{ infoCardsData?.completionScore?.count !==null ?
+                                    infoCardsData?.completionScore?.count?.toLocaleString('en-US', {
+                                    minimumFractionDigits: 0 })
+                                    : '--' }}%</div>
+                                <div class="cardtext">Completion Score</div>
+                                <div class="mt-2">
+                                    <span *ngIf="infoComparisonCardsData?.completionScore?.comparisonData">
+                                        <span class="mt-2"
+                                            *ngIf="infoComparisonCardsData?.completionScore?.ComparisonFlag; else showArrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                                viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_3216_118)">
+                                                    <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                        stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_3216_118">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                        <ng-template #showArrow2>
+                                            <span class="arrow2">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                    viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                    <g clip-path="url(#clip0_2328_4654)">
+                                                        <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                            stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                            stroke-linejoin="round"></path>
+                                                    </g>
+                                                    <defs>
+                                                        <clipPath id="clip0_2328_4654">
+                                                            <rect width="12" height="12" fill="white"></rect>
+                                                        </clipPath>
+                                                    </defs>
+                                                </svg>
+                                            </span>
+                                        </ng-template>
+                                    </span>
+                                    <span class="mt-2 ms-2"><span class="percent-value">{{
+                                            infoComparisonCardsData?.completionScore?.comparisonData !==null?
+                                            infoComparisonCardsData?.completionScore?.comparisonData?.toLocaleString('en-US',
+                                            {
+                                            minimumFractionDigits: 0 }) : '--' }}%</span><span class="week-font"> vs
+                                            last <span *ngIf="dateType ==='daily'">day</span><span
+                                                *ngIf="dateType ==='weekly'">week</span> <span
+                                                *ngIf="dateType ==='monthly'">month</span></span></span>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div class="cardsubcount my-2">{{ infoCardsData?.complianceRate?.count !==null ?
+                                    infoCardsData?.complianceRate?.count?.toLocaleString('en-US', {
+                                    minimumFractionDigits: 0 }) : '--' }}%</div>
+                                <div class="cardtext">Compliance Score</div>
+                                <div class="mt-2">
+                                    <span *ngIf="infoComparisonCardsData?.complianceRate?.comparisonData">
+                                        <span class="mt-2"
+                                            *ngIf="infoComparisonCardsData?.complianceRate?.ComparisonFlag; else showArrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                                viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_3216_118)">
+                                                    <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                        stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_3216_118">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                        <ng-template #showArrow2>
+                                            <span class="arrow2">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                    viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                    <g clip-path="url(#clip0_2328_4654)">
+                                                        <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                            stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                            stroke-linejoin="round"></path>
+                                                    </g>
+                                                    <defs>
+                                                        <clipPath id="clip0_2328_4654">
+                                                            <rect width="12" height="12" fill="white"></rect>
+                                                        </clipPath>
+                                                    </defs>
+                                                </svg>
+                                            </span>
+                                        </ng-template>
+                                    </span>
+                                    <span class="mt-2 ms-2"><span class="percent-value">{{
+                                            infoComparisonCardsData?.complianceRate?.comparisonData !==null?
+                                            infoComparisonCardsData?.complianceRate?.comparisonData?.toLocaleString('en-US',
+                                            {
+                                            minimumFractionDigits: 0 }) : '--' }}%</span><span class="week-font"> vs
+                                            last <span *ngIf="dateType ==='daily'">day</span><span
+                                                *ngIf="dateType ==='weekly'">week</span> <span
+                                                *ngIf="dateType ==='monthly'">month</span></span></span>
+                                </div>
+                            </div>
+                            <div class="col-md-4">
+                                <div *ngIf="infoCardsData?.flags?.count; else noDataFlagged" [routerLink]="['/manage/trax/flags']" class="cardsubcount my-2 cursor-pointer">
+                                    <u>{{
+                                        infoCardsData?.flags?.count !==null ?
+                                        infoCardsData?.flags?.count?.toLocaleString('en-US', {
+                                        minimumFractionDigits: 0 }) : '--' }}</u></div>
+                                <ng-template #noDataFlagged>
+                                    <div class="cardsubcount my-2">--</div>
+                                </ng-template>
+                                <div class="cardtext">Total Flags</div>
+                                <div class="mt-2">
+                                    <span *ngIf="infoComparisonCardsData?.flags?.comparisonData">
+                                        <span class="mt-2"
+                                            *ngIf="infoComparisonCardsData?.flags?.ComparisonFlag; else showArrow2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+                                                viewBox="0 0 12 12" fill="none" class="ng-star-inserted">
+                                                <g clip-path="url(#clip0_3216_118)">
+                                                    <path d="M11.5 3L6.75 7.75L4.25 5.25L0.5 9M11.5 3H8.5M11.5 3V6"
+                                                        stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                        stroke-linejoin="round"></path>
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_3216_118">
+                                                        <rect width="12" height="12" fill="white"></rect>
+                                                    </clipPath>
+                                                </defs>
+                                            </svg>
+                                        </span>
+                                        <ng-template #showArrow2>
+                                            <span class="arrow2">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"
+                                                    viewBox="0 0 18 18" fill="none" class="ng-star-inserted">
+                                                    <g clip-path="url(#clip0_2328_4654)">
+                                                        <path d="M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6"
+                                                            stroke="#D92D20" stroke-width="1.5" stroke-linecap="round"
+                                                            stroke-linejoin="round"></path>
+                                                    </g>
+                                                    <defs>
+                                                        <clipPath id="clip0_2328_4654">
+                                                            <rect width="12" height="12" fill="white"></rect>
+                                                        </clipPath>
+                                                    </defs>
+                                                </svg>
+                                            </span>
+                                        </ng-template>
+                                    </span>
+                                    <span class="mt-2 ms-2"><span class="percent-value">{{
+                                            infoComparisonCardsData?.flags?.comparisonData !==null ?
+                                            infoComparisonCardsData?.flags?.comparisonData?.toLocaleString('en-US', {
+                                            minimumFractionDigits: 0 }) : '--' }}%</span><span class="week-font"> vs
+                                            last <span *ngIf="dateType ==='daily'">day</span><span
+                                                *ngIf="dateType ==='weekly'">week</span> <span
+                                                *ngIf="dateType ==='monthly'">month</span></span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div *ngIf="headerData?.client !== '11'" class="col-md-1 mt-3">
+                        <div class="mt-1 cursor-pointer fs-5" [ngClass]="dateType ==='daily' ? 'text-primary' :''"
+                            (click)="dateValue('daily')">1D</div>
+                        <div class="mt-1 cursor-pointer fs-5" [ngClass]="dateType ==='weekly' ? 'text-primary' :''"
+                            (click)="dateValue('weekly')">1W</div>
+                        <div *ngIf="traxMonthlyComparisonData" class="mt-1 cursor-pointer fs-5" [ngClass]="dateType ==='monthly' ? 'text-primary' :''"
+                            (click)="dateValue('monthly')">1M</div>
+                        <!-- <div  class="mt-1 cursor-pointer fs-5"  [ngClass]="dateType ==='monthly' ? 'text-primary' :''"  (click)="dateValue('monthly')">1M</div> -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="row">
+    <div class="col-lg-12">
+        <div class="card">
+            <div class="col-lg-12">
+                <div class="card-header border-0 pt-3">
+                    <h3 class="card-title align-items-start flex-column">
+                        <!-- {{receivedData}}  -->
+                        <span class="card-label mb-2">Checklist Info <span class="badge badge-light-primary">{{totalItems}} Total</span></span>
+                        <span class="text-sub mb-2"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{
+                            headerData?.date?.endDate | date: 'MMM d, y' }}
+                        </span>
+                    </h3>
+                    <div class="card-toolbar">
+                        <div class="d-flex">
+                            <div>
+                                <form class="mt-1" [formGroup]="form">
+                                    <div class="col-md-4 w-200px">
+                                        <lib-reactive-select [formControl]="selectedlistselectControl" [idField]="'_id'"
+                                            [nameField]="'label'" [data]="statusselectControl" class="w-200px"
+                                            (valueChange)="onValueChangeStatusSelect($event)">
+                                            <ng-template let-item>
+                                                <div class="d-flex justify-content-between align-items-center">
+                                                    <span>{{ item.label }}</span>
+                                                    <span class="d-flex align-items-center">
+                                                        <!-- <span class="status-text">Status</span> -->
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                            viewBox="0 0 20 20" fill="none">
+                                                            <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054"
+                                                                stroke-width="1.67" stroke-linecap="round"
+                                                                stroke-linejoin="round" />
+                                                        </svg>
+                                                    </span>
+                                                </div>
+                                            </ng-template>
+                                        </lib-reactive-select>
+                                    </div>
+                                </form>
+                            </div>
+                            <div *ngIf="receivedData === 'Checklist'"
+                                class="d-flex align-items-center  position-relative">
+                                <span class="svg-icon footfallsearch svg-icon-1 position-absolute  ms-8">
+                                    <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>
+                                <!-- [disabled]="searchDisabled" -->
+                                <input [(ngModel)]="searchInput" type="text"
+                                    class="form-control ps-14 ms-4 footfallsearch" placeholder="Search"
+                                    autocomplete="off" (keyup.enter)="searchField()" />
+                                    <button type="button" (click)="onExport()"
+                                    class="btn-outline btn align-items-end text-nowrap invheader ms-4"
+                                    [disabled]="!infoChecklistData.length">
+                                    <!-- Export Icon -->
+                                    <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"></path>
+                                    </svg>
+                                    <span class="ms-2"></span> Export
+                                </button>  
+                                    
+                            </div>
+                            <div *ngIf="receivedData !== 'Checklist'"
+                                class="d-flex align-items-center  position-relative">
+                                <span class="svg-icon footfallsearch svg-icon-1 position-absolute  ms-8">
+                                    <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>
+                                <!-- [disabled]="searchDisabled" -->
+                                <input [(ngModel)]="searchInput" type="text"
+                                    class="form-control ps-14 ms-4 footfallsearch" placeholder="Search by checklist"
+                                    autocomplete="off" (keyup.enter)="searchField()" />
+                                    <button type="button" (click)="onExport()"
+                                    class="btn-outline btn align-items-end text-nowrap invheader ms-4"
+                                    [disabled]="!infoChecklistData.length">
+                                    <!-- Export Icon -->
+                                    <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"></path>
+                                    </svg>
+                                    <span class="ms-2"></span> Export
+                                </button>
+                            </div>
+                            <div *ngIf="(gs.userAccess | async)?.TangoTrax_checklist_isAdd">
+                                <a [routerLink]="['/manage/trax/createChecklist']" *ngIf="receivedData === 'Store'"
+                                    type="button" class="btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted"
+                                    tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                        viewBox="0 0 20 20" fill="none">
+                                        <path d="M10.0001 4.16663V15.8333M4.16675 9.99996H15.8334" stroke="white"
+                                            stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"></path>
+                                    </svg><span class="ms-2 text-white">Create Checklist</span></a>
+                            </div>
+                            <!-- <div >
+                                <a (click)="sendAlert()"
+                                    type="button" class="btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted"
+                                    tabindex="0"><span class="ms-2 text-white">Send Alert</span></a>
+                            </div> -->
+                            <div>
+                                <a (click)="sendAlert()"
+                                   type="button"
+                                   class="btn btn-primary ms-4 rounded-3 text-nowrap ng-star-inserted"
+                                   [class.disabled]="!isSendAlertEnabled"
+                                   [attr.aria-disabled]="!isSendAlertEnabled"
+                                   [tabindex]="isSendAlertEnabled ? 0 : -1">
+                                  <span class="ms-2 text-white">Send Alert</span>
+                                </a>
+                              </div>
+                              
+
+
+                        </div>
+                    </div>
+                </div>
+                <div *ngIf="selectAll" class="filtercard m-4">
+                    <span><svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF"/>
+                        <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF" stroke-width="4"/>
+                        <g clip-path="url(#clip0_6978_12777)">
+                        <path d="M24.6654 17.3867V18.0001C24.6645 19.4377 24.199 20.8365 23.3383 21.988C22.4775 23.1394 21.2676 23.9817 19.8889 24.3893C18.5103 24.797 17.0369 24.748 15.6883 24.2498C14.3398 23.7516 13.1885 22.8308 12.406 21.6248C11.6235 20.4188 11.2519 18.9921 11.3465 17.5576C11.4411 16.1231 11.9968 14.7576 12.9309 13.6648C13.8649 12.572 15.1272 11.8103 16.5295 11.4935C17.9318 11.1767 19.3989 11.3216 20.712 11.9067M24.6654 12.6667L17.9987 19.3401L15.9987 17.3401" stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        </g>
+                        <defs>
+                        <clipPath id="clip0_6978_12777">
+                        <rect width="16" height="16" fill="white" transform="translate(10 10)"/>
+                        </clipPath>
+                        </defs>
+                        </svg>
+                        <span class="selectedtext ms-2">All {{ totalItems }} Users on this page are selected.</span></span>
+                                    </div>
+                                    <!-- <span class="table-title-primary mx-2">Select all {{ totalItems }} Users filtered</span><span class="selectedtext ms-2">Alerts will only send for Open and Inprogress</span></span> -->
+                
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+
+                        <table *ngIf="!checklistLoading && !checklistNoData" class="table text-nowrap bottom-border">
+                            <thead>
+                                <tr>
+                                    <th>
+                                        <input  class="form-check-input h-14px w-14px c-checkbox"
+                                            type="checkbox"
+                                            [(ngModel)]="selectAll"
+                                            [disabled]="!isTodaySelected || selectedlistselectControl.value === 'submit'"
+                                            (change)="toggleSelectAll()"
+                                        />
+                                       
+                                    </th>
+                                    <th *ngIf="receivedData === 'Checklist' || receivedData === 'User' "
+                                        class="cursor-pointer" (click)="sortData('date_string')">Date
+                                        <svg [ngClass]="sortColumName === 'date_string' && 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]="sortColumName === 'date_string' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </th>
+                                    <th *ngIf="receivedData === 'Store' || receivedData === 'User'"
+                                        class="cursor-pointer" (click)="sortData('checkListName')">CheckList Name
+                                        <svg [ngClass]="sortColumName === 'checkListName' && 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]="sortColumName === 'date_string' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </th>
+                                    <th *ngIf="(receivedData === 'Checklist' || receivedData === 'User')"
+                                        class="cursor-pointer" (click)="sortData('storeName')">Store Name
+                                        <svg [ngClass]="sortColumName === 'storeName' && 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]="sortColumName === 'storeName' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </th>
+                                    <th *ngIf="(receivedData === 'Checklist' || receivedData === 'User')"
+                                        class="cursor-pointer" (click)="sortData('userName')">User Name
+                                        <svg [ngClass]="sortColumName === 'userName' && 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]="sortColumName === 'userName' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </th>
+                                    <th>Status</th>
+                                    <!-- <th *ngIf="selectedChecklist?.coverage === 'store'">User Name</th> -->
+                                    <th *ngIf="receivedData !== 'User'">Submitted By</th>
+                                    <th class="cursor-pointer" (click)="sortData('submitTime_string')">Submitted On
+                                        <svg [ngClass]="sortColumName === 'submitTime_string' && 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]="sortColumName === 'submitTime_string' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </th>
+                                    <th class="cursor-pointer" (click)="sortData('submitCount')" >Submission Count
+                                        <svg [ngClass]="sortColumName === 'submitCount' && 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]="sortColumName === 'submitCount' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg>
+                                    </th>
+                                    <th>Flags</th>
+                                    <th >Approved By</th>
+                                    <!-- class="cursor-pointer" (click)="sortData('approvalTime')" -->
+                                    <th >Approved On
+                                        <!-- <svg [ngClass]="sortColumName === 'approvalTime' && 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]="sortColumName === 'approvalTime' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg> -->
+                                    </th>
+                                    <th>Action</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let item of infoChecklistData">
+                                    <td>
+                                        <input class="form-check-input h-14px w-14px  c-checkbox"
+                                            type="checkbox"
+                                            [(ngModel)]="item.selected"
+                                            [disabled]="!isTodaySelected || item.checklistStatus === 'Submitted'"
+                                            (change)="updateSelectAllState()"
+                                        />
+                                    </td>
+                                    <td *ngIf="receivedData === 'Checklist' || receivedData === 'User' ">
+                                        <div class="table-title">{{ item.date_string }}</div>
+                                    </td>
+                                    <td *ngIf="receivedData === 'Store' || receivedData === 'User'">
+                                        <div class="symbol symbol-35px symbol-circle">
+                                            <span class="symbol-label bg-light-primary text-primary me-2">
+                                                {{ item.checkListChar || '--' }}
+                                            </span>
+                                        </div>
+                                        <span class="table-titlechecklist">{{
+                                            item.checkListName }}</span>
+                                    </td>
+
+                                    <td *ngIf="receivedData === 'Checklist' || receivedData === 'User'">
+                                        <div class="table-title">{{ item?.coverage === 'store' ? item.storeName : '--' }}</div>
+                                    </td>
+                                    <td *ngIf="(receivedData === 'Checklist' || receivedData === 'User')">
+                                        <div class="table-title">{{ item.userName }}</div>
+                                    </td>
+                                    <td class="table-title">
+                                        <span class="badge" [ngClass]="{
+                                                'badge-light-success': item.checklistStatus === 'Submitted',
+                                                'badge-light-warning': item.checklistStatus === 'In Progress',
+                                                'badge-light-primary': item.checklistStatus === 'Open',
+                                                'badge-light-danger': item.checklistStatus === 'delayed'
+                                            }"><span *ngIf="item.redoStatus"><svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 12 14" fill="none">
+                                                <g clip-path="url(#clip0_7166_57025)">
+                                                    <path 
+                                                        d="M0.5 2.66674V5.91674M0.5 5.91674H3.5M0.5 5.91674L2.82 3.55507C3.51046 2.80834 4.40623 2.32493 5.37234 2.17768C6.33845 2.03042 7.32257 2.22731 8.17642 2.73865C9.03026 3.25 9.70758 4.04812 10.1063 5.01275C10.505 5.97738 10.6036 7.05627 10.3871 8.08685C10.1706 9.11744 9.65084 10.0439 8.90606 10.7266C8.16129 11.4093 7.23187 11.8113 6.25786 11.8721C5.28384 11.9328 4.31799 11.649 3.50583 11.0633C2.69367 10.4777 2.0792 9.62195 1.755 8.62507"
+                                                        [attr.stroke]="getSvgColor(item.checklistStatus)"
+                                                        stroke-width="2" 
+                                                        stroke-linecap="round" 
+                                                        stroke-linejoin="round" />
+                                                </g>
+                                                <defs>
+                                                    <clipPath id="clip0_7166_57025">
+                                                        <rect width="12" height="13" fill="white" transform="translate(0 0.5)" />
+                                                    </clipPath>
+                                                </defs>
+                                            </svg></span>{{ item.checklistStatus | titlecase }}</span>
+                                    </td>
+                                    <td *ngIf="receivedData !== 'User'">
+                                        <div class="table-title">{{ item.userEmail }}</div>
+                                    </td>
+                                   
+                                    <td>
+                                        <div class="table-title">{{ item.submitTime_string?.toLocaleString('en-US', {
+                                            minimumFractionDigits: 0 }) || '--' }}</div>
+                                    </td>
+                                    <td >
+                                        <div class="table-title">{{ item?.submitCount || 0}}</div>
+                                    </td>
+
+                                    <td>
+                                        <div class="table-title">
+                                            {{ item.flaggedChecklist !==null ? item?.flaggedChecklist?.toLocaleString('en-US', {
+                                            minimumFractionDigits: 0 }) : '--' }}
+                                        </div>
+                                    </td>
+
+                                    <td>
+                                        <div class="table-title">{{ item.approvalByEmail || "--" }}</div>
+                                    </td>
+                                    <td>
+                                        <div class="table-title">{{ item.approvalTime_string?.toLocaleString('en-US', {
+                                            minimumFractionDigits: 0 }) || '--' }}</div>
+                                    </td>
+
+                                    <td>
+                                        <div class="table-title d-flex">
+                                            <ng-container *ngIf="item.checklistStatus === 'Submitted'">
+                                                <!-- <span  [routerLink]="['/manage/trax/gallery']"
+                                                    [queryParams]="{ storeId: item.store_id, checklistType: item.checkListType, ChecklistDate: item.checklistDate, checklistId: item.sourceCheckList_id }"
+                                                    class="actionview me-4 cursor-pointer">View</span> -->
+                                                <span  (click)="navigateToGallery(item)"
+                                                    class="actionview me-4 cursor-pointer">View</span>
+                                                <span (click)="download('pdf',item )"
+                                                    class="actiondownload cursor-pointer">Download</span>
+                                            </ng-container>
+                                        
+                                            <ng-container>
+                                                <span *ngIf="checklistInfoDate === item.date_string && !item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0"
+                                                    (click)="reinitiate(item._id)"  class="actiondownload cursor-pointer">
+                                                    Reinitiate
+                                                </span>
+                                                <span *ngIf="checklistInfoDate === item.date_string && item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0"
+                                                    class="actionview disabled">
+                                                    Reinitiate
+                                                </span>
+
+                                                <span 
+                                                *ngIf="checklistInfoDate === item.date_string && item.reinitiateStatus && item.checklistStatus !== 'Submitted' && item.timeFlag > 0"
+                                                (click)="sendAlert(item._id)"  
+                                                class="actiondownload cursor-pointer ms-3">
+                                                SendAlert
+                                            </span>
+                                            </ng-container>
+                                            
+                                            <ng-container>
+                                                <div *ngIf="item.checklistStatus !== 'Submitted' && item.timeFlag <= 0" 
+                                                     [class.disabled]="item.date_string !== todayDate || selectedCheckboxCount > 1"
+                                                     [attr.aria-disabled]="item.date_string !== todayDate || selectedCheckboxCount > 1"
+                                                     [tabindex]="item.date_string !== todayDate || selectedCheckboxCount > 1 ? -1 : 0">
+                                                  <span 
+                                                    (click)="(item.date_string === todayDate && selectedCheckboxCount <= 1) ? sendAlert(item._id) : $event.stopPropagation()"
+                                                    class="actiondownload cursor-pointer">
+                                                    SendAlert
+                                                  </span>
+                                                </div>
+                                              </ng-container>
+                                            
+                                            <!-- <ng-container>
+                                                <div *ngIf="checklistInfoDate === item.date_string && item.checklistStatus !== 'Submitted' && isTodaySelected"
+                                                    [class.disabled]="selectedCheckboxCount > 1"
+                                                    [attr.aria-disabled]="selectedCheckboxCount > 1" 
+                                                    [tabindex]="selectedCheckboxCount > 1 ? -1 : 0">
+                                                    <span (click)="selectedCheckboxCount <= 1 ? sendAlert(item._id) : $event.stopPropagation()"
+                                                        class="actiondownload cursor-pointer">
+                                                        SendAlert
+                                                    </span>
+                                                </div>
+                                            </ng-container> -->
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                        <ng-container *ngIf="checklistLoading">
+                            <div 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>
+                        </ng-container>
+                        <ng-container *ngIf="checklistNoData && !checklistLoading">
+                            <div class="row">
+                                <div class="col-lg-12 my-6">
+                                    <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                                        <img class="img-src" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                                        <div class="nodatamaintext mt-3">No data found</div>
+                                        <div class="nodatasubtext">There is no result for Performance Table
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+
+                    </div>
+                    <div *ngIf="!checklistLoading && !checklistNoData">
+                        <lib-pagination class="text-start" [itemsPerPage]="itemsPerPage" [currentPage]="currentPage"
+                            [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                            (pageChange)="onPageChange($event)"
+                            (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>