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

package/src/lib/components/flags-new/flags-new.component.html

@@ -0,0 +1,904 @@
+<div class="col-md-12">
+    <div class="row">
+        <!--allCards -->
+        <ng-container *ngIf="cardMetricsDataByType?.showCards === 'allCards'">
+        <div class="w-95">
+            <div class="pt-2 h-100">
+                <div class="d-flex justify-content-between">
+                    <div class="cursor-pointer pe-3" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'w-25' : 'w-50'" (click)="selectTabs('all')">
+                        <div class="p-3" [ngClass]="selectedFlag ==='all' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='all' ? 'active-header' : 'inactive-header'">
+                                Total Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.totalFlag === 0 ||
+                                        cardMetricsData?.flagCards?.totalFlag) ?
+                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cursor-pointer pe-3" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'w-25' : 'w-50'" (click)="selectTabs('question')">
+                        <div class="p-3" [ngClass]="selectedFlag ==='question' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='question' ? 'active-header' : 'inactive-header'">
+                                Question Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span
+                                        class="cardsubcount my-2 me-3">{{(cardMetricsData?.flagCards?.questionFlag?.count
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.questionFlag?.count) ?
+                                        cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') :
+                                        '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData"
+                                        class="mt-2 me-1">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="w-25 cursor-pointer pe-3" (click)="selectTabs('runAI')" *ngIf="cardMetricsData?.flagCards?.runAIFlag">
+                        <div class="p-3" [ngClass]="selectedFlag ==='runAI' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='runAI' ? 'active-header' : 'inactive-header'">
+                                Run AI Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.runAIFlag?.flagCount
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.runAIFlag?.flagCount) ?
+                                        cardMetricsData?.flagCards?.runAIFlag?.flagCount?.toLocaleString('en-IN') :
+                                        '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cursor-pointer pe-3" (click)="selectTabs('time')" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'w-25' : 'w-50'">
+                        <div class="p-3" [ngClass]="selectedFlag ==='time' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='time' ? 'active-header' : 'inactive-header'">
+                                Not Submitted
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span
+                                        class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.delayInSubmission?.count
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.delayInSubmission?.count) ?
+                                        cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')
+                                        : '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="cursor-pointer pe-3" (click)="selectTabs('detection')" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'w-25' : 'w-50'">
+                        <div class="p-3" [ngClass]="selectedFlag ==='detection' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='detection' ? 'active-header' : 'inactive-header'">
+                                Detection Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.detectionFlag?.count
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.detectionFlag?.count) ?
+                                        cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') :
+                                        '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </ng-container>
+        <!-- customChecklistCount > 1 & aiChecklistCount > 0 show 3 cards -->
+        <!-- customCards -->
+        <ng-container *ngIf="cardMetricsDataByType?.showCards === 'customCards'">
+        <div class="w-95">
+            <div class="pt-2 h-100">
+                <div class="d-flex justify-content-between mt-3">
+                    <div class="col-3 cursor-pointer pe-3" (click)="selectTabs('all')" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'col-3' : 'col-4'">
+                        <div class="p-3" [ngClass]="selectedFlag ==='all' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='all' ? 'active-header' : 'inactive-header'">
+                                Total Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.totalFlag === 0 ||
+                                        cardMetricsData?.flagCards?.totalFlag) ?
+                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.totalComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-3 cursor-pointer pe-3" (click)="selectTabs('question')" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'col-3' : 'col-4'">
+                        <div class="p-3" [ngClass]="selectedFlag ==='question' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='question' ? 'active-header' : 'inactive-header'">
+                                Question Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span
+                                        class="cardsubcount my-2 me-3">{{(cardMetricsData?.flagCards?.questionFlag?.count
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.questionFlag?.count) ?
+                                        cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') :
+                                        '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData"
+                                        class="mt-2 me-1">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-3 cursor-pointer pe-3" (click)="selectTabs('runAI')" *ngIf="cardMetricsData?.flagCards?.runAIFlag">
+                        <div class="p-3" [ngClass]="selectedFlag ==='runAI' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='runAI' ? 'active-header' : 'inactive-header'">
+                                Run AI Flags
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.runAIFlag?.flagCount
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.runAIFlag?.flagCount) ?
+                                        cardMetricsData?.flagCards?.runAIFlag?.flagCount?.toLocaleString('en-IN') :
+                                        '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.runAIComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-3 cursor-pointer pe-3" (click)="selectTabs('time')" [ngClass]="cardMetricsData?.flagCards?.runAIFlag ? 'col-3' : 'col-4'">
+                        <div class="p-3" [ngClass]="selectedFlag ==='time' ? 'active-card' : 'inactive-card'">
+                            <div class="" [ngClass]="selectedFlag ==='time' ? 'active-header' : 'inactive-header'">
+                                Not Submitted
+                            </div>
+                            <div class="p-3">
+                                <div class="mt-2">
+                                    <span
+                                        class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.delayInSubmission?.count
+                                        === 0 ||
+                                        cardMetricsData?.flagCards?.delayInSubmission?.count) ?
+                                        cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')
+                                        : '--'}}</span>
+                                    <span
+                                        *ngIf="cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData"
+                                        class="mt-2">
+                                        <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag"
+                                            xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8"
+                                            fill="none">
+                                            <path
+                                                d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                                stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg>
+                                        <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.ComparisonFlag"
+                                            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><span class="mt-2"><span class="percent-value">
+                                            {{(cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData
+                                            === 0 ||
+                                            cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData)
+                                            ?
+                                            cardMetricsComparisonData?.flagComparisonCards?.delayInSubmissionComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                            : '--'}}
+                                            %</span><span class="week-font"> vs
+                                            last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </ng-container>
+        <ng-container *ngIf="cardMetricsDataByType?.showCards === 'allCards' || cardMetricsDataByType?.showCards === 'customCards'">
+        <div *ngIf="headerData?.client !== '11'" class="w-5 d-flex align-items-center">
+            <div class="row">
+                <div class="col-6 mt-3">
+                    <div class="d-flex flex-column text-center align-items-center justify-content-center me-5">
+                        <div class="mt-1 cursor-pointer fs-5"
+                            [ngClass]="dateComparisonType ==='daily' ? 'text-primary' :''"
+                            (click)="dateComparisonValueChange('daily')">1D</div>
+                        <div class="mt-1 cursor-pointer fs-5"
+                            [ngClass]="dateComparisonType ==='weekly' ? 'text-primary' :''"
+                            (click)="dateComparisonValueChange('weekly')">1W</div>
+                        <div  *ngIf="traxMonthlyComparisonData" class="mt-1 cursor-pointer fs-5"
+                            [ngClass]="dateComparisonType ==='monthly' ? 'text-primary' :''"
+                            (click)="dateComparisonValueChange('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>
+    </ng-container>
+    </div>
+    <!-- customChecklistCount > 0 & aiChecklistCount > 1 show single cards -->
+    <!-- aiCards -->
+    <ng-container *ngIf="cardMetricsDataByType?.showCards === 'aiCards'">
+    <div class="row ">
+        <div class="col-12 mt-3 cursor-pointer pe-3" (click)="selectTabs('detection')">
+            <div class="p-3" [ngClass]="selectedFlag ==='detection' ? 'active-card' : 'inactive-card'">
+                <div class="" [ngClass]="selectedFlag ==='detection' ? 'active-header' : 'inactive-header'">
+                    Detection Flags
+                </div>
+                <div class="p-3 row">
+                    <div class="mt-2 col-11">
+                        <span class="cardsubcount me-3">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||
+                            cardMetricsData?.flagCards?.detectionFlag?.count) ?
+                            cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</span>
+                        <span
+                            *ngIf="cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData"
+                            class="mt-2">
+                            <svg *ngIf="cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag"
+                                xmlns="http://www.w3.org/2000/svg" width="13" height="8" viewBox="0 0 13 8" fill="none">
+                                <path d="M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4"
+                                    stroke="#039855" stroke-width="1.5" stroke-linecap="round"
+                                    stroke-linejoin="round" />
+                            </svg>
+                            <svg *ngIf="!cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.ComparisonFlag"
+                                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><span class="mt-2"><span class="percent-value">
+                                {{(cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData
+                                === 0 ||
+                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData)
+                                ?
+                                cardMetricsComparisonData?.flagComparisonCards?.detectionComparisonFlag?.comparisonData?.toLocaleString('en-IN')
+                                : '--'}}
+                                %</span><span class="week-font"> vs
+                                last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span>
+                    </div>
+                    <div *ngIf="headerData?.client !== '11'" class="col-1 mt-3">
+                        <span class="mt-1 cursor-pointer fs-5 mx-2"
+                            [ngClass]="dateComparisonType ==='daily' ? 'text-primary' :''"
+                            (click)="dateComparisonValueChange('daily')">1D</span>
+                        <span class="mt-1 cursor-pointer fs-5 me-2"
+                            [ngClass]="dateComparisonType ==='weekly' ? 'text-primary' :''"
+                            (click)="dateComparisonValueChange('weekly')">1W</span>
+                        <span  *ngIf="traxMonthlyComparisonData" class="mt-1 cursor-pointer fs-5"
+                            [ngClass]="dateComparisonType ==='monthly' ? 'text-primary' :''"
+                            (click)="dateComparisonValueChange('monthly')">1M</span>
+                        <!-- <div  class="mt-1 cursor-pointer fs-5"  [ngClass]="dateType ==='monthly' ? 'text-primary' :''"  (click)="dateValue('monthly')">1M</div> -->
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    </ng-container>
+
+
+    <div class="row mt-3">
+        <div class="col-lg-12">
+            <div class="card">
+                <div class="card-header border-0 pt-4 px-4">
+                    <h3 class="card-title align-items-start flex-column">
+                        <span class="card-label mb-2"><span *ngIf="!['time','all'].includes(selectedFlag)"
+                                class="me-3">{{selectedFlag !== 'runAI' ?  (selectedFlag | titlecase) : 'RunAI'}} Flags</span> <span
+                                *ngIf="['time','all'].includes(selectedFlag)" class="me-3">{{selectedFlag === 'all' ?
+                                'Total Flags' : 'Not Sumbitted'}}</span> <span *ngIf="totalItems"
+                                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 *ngIf="(flagsTableApiState | async) === 'loaded'" class="card-toolbar">
+                        <div class="d-flex">
+                            <div class="d-flex align-items-center  position-relative my-1">
+                                <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>
+                                <input [formControl]="searchInput" type="text"
+                                    class="form-control ps-14 ms-4 me-4 footfallsearch" placeholder="Search"
+                                    autocomplete="off" />
+                                <!-- <lib-reactive-select [formControl]="filterInput" [idField]="'value'"
+                                        [nameField]="'label'" [data]="filterValues" class="w-100">
+                                    </lib-reactive-select> -->
+                                <button *ngIf="flagsTableData?.length"
+                                    [disabled]="(flagsTableApiState | async) === 'loading'" type="button"
+                                    (click)="onFlagsTableExport()" type="button"
+                                    class="btn-outline btn align-items-end text-nowrap invheader ms-4">
+                                    <!-- 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>
+                    </div>
+                </div>
+                <div class="card-body p-0">
+                    <ng-container *ngIf="(flagsTableApiState | async) === 'loaded' && flagsTableData?.length">
+                        <div class="table-responsive px-4">
+                            <table class="table text-nowrap bottom-border">
+                                <thead>
+                                    <tr>
+                                        <th 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 === 'checkListName' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg>
+                                        </th>
+                                        <th class="cursor-pointer" (click)="sortData('coverage')">Coverage<svg
+                                                [ngClass]="sortColumName === 'coverage' && 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 === 'coverage' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg></th>
+                                        <th class="cursor-pointer" (click)="sortData('runAIQuestionCount')" *ngIf="['runAI'].includes(selectedFlag)">No of Questions<svg
+                                                [ngClass]="sortColumName === 'runAIQuestionCount' && 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 === 'runAIQuestionCount' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg></th>
+                                        <th class="cursor-pointer" (click)="sortData('assignedStores')">Assigned
+                                            Stores<svg
+                                                [ngClass]="sortColumName === 'assignedStores' && 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 === 'assignedStores' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg></th>
+                                            <!-- *ngIf="!['runAI'].includes(selectedFlag)" -->
+                                        <th class="cursor-pointer" (click)="sortData('flaggedStores')">Flagged Stores
+                                            <svg [ngClass]="sortColumName === 'flaggedStores' && 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 === 'flaggedStores' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg>
+                                        </th>
+                                        <th class="cursor-pointer" (click)="sortData('flags')" *ngIf="['runAI'].includes(selectedFlag)">Flags
+                                            <svg [ngClass]="sortColumName === 'flags' && 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 === 'flags' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg>
+                                        </th>
+                                        <th *ngIf="['all','question'].includes(selectedFlag)" class="cursor-pointer"
+                                        (click)="sortData('customQuestionFlagCount')">{{selectedFlag === 'question'
+                                        ? 'Flags' : 'Question Flags'}}<svg
+                                            [ngClass]="sortColumName === 'customQuestionFlagCount' && 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 === 'customQuestionFlagCount' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg></th>
+                                        <th *ngIf="['all'].includes(selectedFlag)" class="cursor-pointer"
+                                        (click)="sortData('runAIFlag')">Run AI Flags<svg
+                                            [ngClass]="sortColumName === 'runAIFlag' && 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 === 'runAIFlag' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg></th>
+                                    <th *ngIf="['all','time'].includes(selectedFlag)" class="cursor-pointer"
+                                        (click)="sortData('customTimeFlagCount')">{{selectedFlag === 'time' ?
+                                        'Flags' : 'Not Submitted Flags'}}<svg
+                                            [ngClass]="sortColumName === 'customTimeFlagCount' && 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 === 'customTimeFlagCount' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg></th>
+                                    <th *ngIf="['all','detection'].includes(selectedFlag)" class="cursor-pointer"
+                                        (click)="sortData('flagCount')">{{selectedFlag === 'detection' ? 'Detections' :
+                                        'Detection Flags'}}<svg
+                                            [ngClass]="sortColumName === 'flagCount' && 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 === 'flagCount' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round"
+                                                stroke-linejoin="round" />
+                                        </svg></th>
+                                        <!-- <th style="width: 200px;" class="cursor-pointer" (click)="sortData('flagCount')">Flagged<svg
+                                            [ngClass]="sortColumName === 'flagCount' && 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 === 'flagCount' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg></th> -->
+                                        <!-- <th *ngIf="selectedFlag === 'detection'" class="cursor-pointer" (click)="sortData('detectionCount')">Detection Count<svg
+                                            [ngClass]="sortColumName === 'detectionCount' && 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 === 'detectionCount' ? '#00A3FF' : '#667085'"
+                                                stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                        </svg></th> -->
+                                        <th class="cursor-pointer" (click)="sortData('Compliance')">Compliance %<svg
+                                                [ngClass]="sortColumName === 'Compliance' && 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 === 'Compliance' ? '#00A3FF' : '#667085'"
+                                                    stroke-width="1.33333" stroke-linecap="round"
+                                                    stroke-linejoin="round" />
+                                            </svg></th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <!-- *ngFor="let store of checklistPerformance" -->
+                                    <tr *ngFor="let data of flagsTableData">
+                                        <td>
+                                            <div>
+                                                <div class="symbol symbol-35px symbol-circle">
+                                                    <span class="symbol-label bg-light-primary text-primary me-2">
+                                                        {{data?.checkListChar?.toUpperCase() || '--' }} </span>
+                                                </div><span (click)="viewInDetail(data?.sourceCheckList_id)"
+                                                    class="table-title-primary cursor-pointer">{{data?.checkListName ?
+                                                    data?.checkListName : '--'}}</span> <span
+                                                    *ngIf="data?.checkListType !== 'custom'" class="mx-2">✨</span>
+                                            </div>
+                                        </td>
+                                       
+                                        <td class="table-title">{{ data?.coverage ? data?.coverage : '--' }}</td>
+                                        <td class="table-title" *ngIf="['runAI'].includes(selectedFlag)">{{ data?.runAIQuestionCount ? data?.runAIQuestionCount : 0 }}</td>
+                                        <td class="table-title">{{ data.checkListType === 'custom' ?
+                                            ((data?.assignedStores || data?.assignedStores === 0) ? data?.assignedStores
+                                            : '--') : ((data?.assignedStoresAi || data?.assignedStoresAi === 0) ?
+                                            data?.assignedStoresAi : '--')}}</td>
+                                        <td class="table-title">{{ (data?.flaggedStores || data?.flaggedStores === 0) ?
+                                            data?.flaggedStores : '--' }}</td>
+                                            <td *ngIf="['all','question',''].includes(selectedFlag)" class="table-title" >{{
+                                                data?.customQuestionFlagCount ?? '--' }}</td>
+                                            <td *ngIf="['all'].includes(selectedFlag)" class="table-title">{{
+                                                data?.runAIFlag ?? '--' }}</td>
+                                            <td *ngIf="['all','time'].includes(selectedFlag)" class="table-title">{{
+                                                data?.customTimeFlagCount ?? '--' }}</td>
+                                                <!--  -->
+                                            <td *ngIf="['all','detection', 'runAI'].includes(selectedFlag)" class="table-title">
+                                                <!-- {{data?.checkListType === 'custom' ? 0 : (data?.flagCount ?? '--')}} -->
+                                                {{data?.flagCount ?? '0'}}
+                                            </td>
+                                                  
+                                            
+                                        <!-- <td class="table-title-primary"> 
+
+                                        <ng-container *ngIf="data?.checkListType === 'custom'" >
+                                        <div *ngIf="filterInput.value === 'all' || filterInput.value === 'question'" class="d-flex justify-content-between mb-2">
+                                            <span class="cursor-pointer" (click)="viewInDetail(data?.sourceCheckList_id, 'question')" >{{(data?.customQuestionFlagCount || data?.customQuestionFlagCount === 0) ? data?.customQuestionFlagCount?.toLocaleString('en-IN') : '--'}} </span> 
+                                            <span class="badge badge-light-default mx-3" >Questions</span>    
+                                        </div>
+
+                                        <div *ngIf="filterInput.value === 'all' || filterInput.value === 'time'" class="d-flex justify-content-between">
+                                            <span class="cursor-pointer" (click)="viewInDetail(data?.sourceCheckList_id, 'time')" >{{(data?.customTimeFlagCount || data?.customTimeFlagCount === 0) ? data?.customTimeFlagCount?.toLocaleString('en-IN') : '--'}} </span> 
+                                            <span class="badge badge-light-default mx-3" >Not Submitted</span>    
+                                        </div>    
+                                        </ng-container>                                       
+
+                                        <div *ngIf="data?.checkListType !== 'custom'" class="d-flex justify-content-between">
+                                            <span class="cursor-pointer" (click)="viewInDetail(data?.sourceCheckList_id)" >{{(data?.flagCount || data?.flagCount === 0) ? data?.flagCount?.toLocaleString('en-IN') : '--'}} </span> 
+                                            <span class="badge badge-light-default mx-3" >Detections</span>    
+                                        </div>
+                                        
+                                    </td> -->
+                                        <td class="table-title">
+                                            <div class="d-flex">
+                                                <div class="h-5px w-100 bg-light mt-4">
+                                                    <div role="progressbar" aria-valuemin="20" aria-valuemax="100"
+                                                        class="bg-primary rounded h-5px "
+                                                        [style.width]="data?.complianceRate + '%'"> </div>
+                                                </div>
+                                                <div class="text-end table-title"><span class="my-1 mx-1 text-end">
+                                                        {{data?.complianceRate?.toLocaleString('en-US', {
+                                                        minimumFractionDigits: 0 })
+                                                        || '--'}}%</span></div>
+                                            </div>
+                                        </td>
+                                        <td>
+                                            <div class="table-title">
+                                                <div (click)="viewInDetail(data?.sourceCheckList_id)"
+                                                    class="table-title-primary cursor-pointer">View</div>
+                                            </div>
+                                        </td>
+
+                                    </tr>
+
+                                </tbody>
+                            </table>
+
+                        </div>
+                        <div *ngIf="(flagsTableApiState | async) === 'loaded' && flagsTableData?.length">
+                            <lib-pagination [itemsPerPage]="itemsPerPage" [currentPage]="currentPage"
+                                [totalItems]="totalItems" [paginationSizes]="paginationSizes" [pageSize]="pageSize"
+                                (pageChange)="onPageChange($event)"
+                                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                        </div>
+                    </ng-container>
+                    <ng-container
+                        *ngIf="(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'">
+                        <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 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="(flagsTableApiState | async) === 'loaded' && !flagsTableData?.length">
+                        <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 Flags Table</div>
+                                </div>
+                            </div>
+                        </div>
+                    </ng-container>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>