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

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

@@ -0,0 +1,473 @@
+<div class="col-md-12">
+    <div class="row">
+        <div class="col-12 px-2">
+            <div class="card card-border pt-2 h-100">
+                <ng-container >
+                    <div class="card-header ellipse1 border-0 px-3">
+                        <div class="card-title d-flex align-items-start flex-column">
+                            <div class="d-flex">
+                                <div class="cardcount">
+                                    {{(cardMetricsData?.flagCards?.totalFlag === 0 ||
+                                        cardMetricsData?.flagCards?.totalFlag) ?
+                                        cardMetricsData?.flagCards?.totalFlag?.toLocaleString('en-IN') : '--'}}
+                                </div>
+                                <div class="cardtext mx-3 mt-3">Total Flags</div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="card-body p-0">
+                        <div class="row g-0 h-100px py-3 ">
+                            <div class="col-11" >
+                                <div class="row">
+                            <div class="col-md-4">
+                                <div class="d-flex flex-column align-items-center" >
+                                <div class="cardsubcount  my-2">{{(cardMetricsData?.flagCards?.questionFlag?.count === 0 ||
+                                    cardMetricsData?.flagCards?.questionFlag?.count) ?
+                                    cardMetricsData?.flagCards?.questionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>
+                                <div class="cardtext ">Question Flags</div>
+                                <div  class="mt-2"><span *ngIf="cardMetricsComparisonData?.flagComparisonCards?.questionComparisonFlag?.comparisonData" class="mt-2">
+                                        <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 ms-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' : 'day'}}</span></span></div>    
+                                </div>
+                                
+                            </div>
+                            <div class="col-md-4 ">
+                                <div class="d-flex flex-column align-items-center">
+                                 <div class="cardsubcount my-2">{{(cardMetricsData?.flagCards?.delayInSubmission?.count === 0 ||
+                                    cardMetricsData?.flagCards?.delayInSubmission?.count) ? cardMetricsData?.flagCards?.delayInSubmission?.count?.toLocaleString('en-IN')
+                                    : '--'}}</div>
+                                <div class="cardtext">Delay In Submission</div>
+                                <div  class="mt-2"><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 ms-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' : 'day'}}</span></span></div>   
+                                </div>
+                                
+                            </div>
+                            <div class="col-md-4">
+                                <div class="d-flex flex-column align-items-center" >
+                                <div class="cardsubcount my-2">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||
+                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?
+                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>
+                                <div class="cardtext ">Detection Flags</div>
+                                <div class="mt-2"><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 ms-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' : 'day'}}</span></span></div>    
+                                </div>
+
+                            </div>          
+                            <div class="col-md-4">
+                                <div class="d-flex flex-column align-items-center" >
+                                <div class="cardsubcount my-2">{{(cardMetricsData?.flagCards?.detectionFlag?.count === 0 ||
+                                    cardMetricsData?.flagCards?.detectionFlag?.count) ?
+                                    cardMetricsData?.flagCards?.detectionFlag?.count?.toLocaleString('en-IN') : '--'}}</div>
+                                <div class="cardtext ">Detection Flags</div>
+                                <div class="mt-2"><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 ms-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' : 'day'}}</span></span></div>    
+                                </div>
+
+                            </div>          
+                                </div>
+                              
+                            </div>
+                            <div class="col-1">
+                                <div class="row">
+                                 <div class="col-12 mt-3">
+                                    <div class="d-flex flex-column align-items-end 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  class="mt-1 cursor-pointer fs-5"  [ngClass]="dateType ==='monthly' ? 'text-primary' :''"  (click)="dateValue('monthly')">1M</div> -->    
+                                    </div>
+                                    
+                                </div>   
+                                </div>
+                                
+                            </div>
+                            
+                        </div>
+                    </div>
+                </ng-container>
+                <!-- <ng-container *ngIf="(cardMetricsApiState | async) === 'loading' || (cardMetricsApiState | 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>
+                </ng-container> -->
+
+
+            </div>
+        </div>
+    </div>
+
+    <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 me-3">Checklist Flags <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'" >
+                     <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('checkListType')">Flag Type<svg
+                                            [ngClass]="sortColumName === 'checkListType' && 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 === 'checkListType' ? '#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('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>
+                                    <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 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 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 || '--' }} </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>
+                                        <div class="table-title">
+                                        <span *ngIf="data?.checkListType === 'custom'" >Questions</span>
+                                        <span  *ngIf="data?.checkListType !== 'custom'">Detections</span>
+                                        </div>
+                                    </td>
+                                    <td class="table-title">{{ data?.coverage ? data?.coverage : '--' }}</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 class="table-title-primary"> 
+
+                                        <!-- <div 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" *ngIf="data?.checkListType === 'custom'" >Questions</span>
+                                        <span class="badge badge-light-default mx-3" *ngIf="data?.checkListType !== 'custom'">Detections</span>    
+                                        </div> -->
+
+                                        <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>

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

@@ -0,0 +1,86 @@
+.ellipse1 {
+    border-radius: 6px;
+    border-bottom: 2px solid var(--Gray-200, #EAECF0);
+    background: radial-gradient(206.89% 107.47% at 16.16% 32.77%, rgba(255, 255, 255, 0.40) 0%, rgba(69, 187, 254, 0.20) 100%), #F2F4F7;
+
+    /* Shadow/Soft Shadow */
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+}
+
+.cardcount {
+    color: var(--Black, #101828);
+    font-size: 30px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 38px; /* 126.667% */
+}
+
+.cardtext {
+    color: var(--Gray-700, #344054);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+.cardsubcount{
+    color: var(--Black, #101828);
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 30px; /* 150% */
+}
+.card-border {
+    padding: 8px;
+    border-radius: 12px;
+    border: 1px solid var(--Gray-300, #D0D5DD);
+    background: var(--White, #FFF);
+  }
+  .percent-value{
+    color: var(--Gray-500, #667085);
+text-align: center;
+font-size: 16px;
+font-style: normal;
+font-weight: 600;
+line-height: 18px; /* 112.5% */
+  }
+  .week-font{
+    color: var(--Gray-800, #1D2939);
+font-size: 12px;
+font-style: normal;
+font-weight: 400;
+line-height: 18px; /* 150% */
+  }
+  .flagcard{
+    padding: 0px 0px 0px 15%;
+  }
+  .table-title-primary{
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500 !important;
+    line-height: 30px;
+    text-decoration-line: underline;
+}
+.table-title{
+  color: var(--Gray-500, #667085);
+font-size: 14px;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 20px; /* 142.857% */
+}
+
+.rotate {
+  rotate: 180deg;
+  transition: 1s;
+}
+
+td{
+  vertical-align: middle;
+}

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

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