tango-app-ui-analyse-trax 3.6.1 → 3.6.2-bulktask-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/esm2022/lib/components/action-centre/action-centre.component.mjs +3 -3
  2. package/esm2022/lib/components/activity-log-v2/activity-log-v2.component.mjs +3 -2
  3. package/esm2022/lib/components/activity-log-v2/log-view-popup/store-user-dropdown/store-user-dropdown.component.mjs +3 -3
  4. package/esm2022/lib/components/activity-log-v2/log-view-popup/view-action/view-action.component.mjs +3 -3
  5. package/esm2022/lib/components/add-multitask/add-multitask.component.mjs +538 -0
  6. package/esm2022/lib/components/add-multitask/bulkcreationmodel/bulkcreationmodel.component.mjs +269 -0
  7. package/esm2022/lib/components/add-multitask/create-task.data.mjs +306 -0
  8. package/esm2022/lib/components/add-multitask/create-task.interface.mjs +2 -0
  9. package/esm2022/lib/components/add-multitask/unique-string-validator.mjs +10 -0
  10. package/esm2022/lib/components/add-multitask/whitespace-validator.mjs +10 -0
  11. package/esm2022/lib/components/add-task/add-task.component.mjs +3 -1
  12. package/esm2022/lib/components/checklist-configure/checklist-configure.component.mjs +3 -3
  13. package/esm2022/lib/components/dashboard/dashboard.component.mjs +3 -3
  14. package/esm2022/lib/components/dashboard-info/dashboard-info.component.mjs +1 -1
  15. package/esm2022/lib/components/disabled-select/disabled-select.component.mjs +158 -0
  16. package/esm2022/lib/components/flags/flags.component.mjs +1 -1
  17. package/esm2022/lib/components/flags-info/flags-info.component.mjs +1 -1
  18. package/esm2022/lib/components/gallery/gallery.component.mjs +170 -24
  19. package/esm2022/lib/components/reactive-select/reactive-select.component.mjs +6 -3
  20. package/esm2022/lib/components/task-configure/task-configure.component.mjs +5 -5
  21. package/esm2022/lib/components/task-info/task-info.component.mjs +1 -1
  22. package/esm2022/lib/services/trax.service.mjs +17 -2
  23. package/esm2022/lib/tango-analyse-trax.module.mjs +12 -5
  24. package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-BeDM0cg8.mjs → tango-app-ui-analyse-trax-eye-test-audit.module-B6bePYMW.mjs} +7 -7
  25. package/fesm2022/{tango-app-ui-analyse-trax-eye-test-audit.module-BeDM0cg8.mjs.map → tango-app-ui-analyse-trax-eye-test-audit.module-B6bePYMW.mjs.map} +1 -1
  26. package/fesm2022/{tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CscGaVfu.mjs → tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-IHj5-6FY.mjs} +1670 -241
  27. package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-IHj5-6FY.mjs.map +1 -0
  28. package/fesm2022/tango-app-ui-analyse-trax.mjs +1 -1
  29. package/lib/components/activity-log-v2/activity-log-v2.component.d.ts +1 -0
  30. package/lib/components/add-multitask/add-multitask.component.d.ts +95 -0
  31. package/lib/components/add-multitask/bulkcreationmodel/bulkcreationmodel.component.d.ts +42 -0
  32. package/lib/components/add-multitask/create-task.data.d.ts +244 -0
  33. package/lib/components/add-multitask/create-task.interface.d.ts +147 -0
  34. package/lib/components/add-multitask/unique-string-validator.d.ts +2 -0
  35. package/lib/components/add-multitask/whitespace-validator.d.ts +2 -0
  36. package/lib/components/disabled-select/disabled-select.component.d.ts +34 -0
  37. package/lib/components/gallery/gallery.component.d.ts +19 -1
  38. package/lib/components/reactive-select/reactive-select.component.d.ts +2 -2
  39. package/lib/components/task-configure/task-configure.component.d.ts +2 -2
  40. package/lib/services/trax.service.d.ts +5 -1
  41. package/lib/tango-analyse-trax.module.d.ts +11 -8
  42. package/package.json +1 -1
  43. package/fesm2022/tango-app-ui-analyse-trax-tango-app-ui-analyse-trax-CscGaVfu.mjs.map +0 -1
package/esm2022/lib/components/flags-info/flags-info.component.mjs CHANGED
@@ -430,7 +430,7 @@ export class FlagsInfoComponent {
430
430
  this.getCardTrends();
431
431
  }
432
432
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsInfoComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.GlobalStateService }, { token: i3.TraxService }, { token: i0.ChangeDetectorRef }, { token: i1.Router }, { token: i4.ToastService }, { token: i2.PageInfoService }, { token: i5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
433
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsInfoComponent, selector: "lib-flags-info", ngImport: i0, template: "<div class=\"row\">\r\n <!-- header start -->\r\n <div class=\"col-md-12 mb-6 mt-4\">\r\n\r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loaded'\" >\r\n <div class=\"d-flex align-items-center justify-content-between header-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"onBack()\" class=\"d-flex align-items-center me-3 mt-1 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a> \r\n <span class=\"mt-1 me-3 borderless-select\" style=\"min-width: 200px;\" >\r\n <!-- <lib-reactive-select [formControl]=\"checklistSelectControl\" [idField]=\"'sourceCheckList_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checkLists\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\">\r\n <ng-template let-item>\r\n <div\r\n class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n\r\n <lib-select [items]=\"checkLists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'sourceCheckList_id'\"\r\n (selected)=\"onChecklistSelect($event)\" [selectedValues]=\"[this.currentChecklist]\"></lib-select>\r\n </span>\r\n\r\n <ng-container *ngIf=\"checklistFlagList\" >\r\n <div *ngIf=\"currentChecklist?.checkListType !== 'custom'\"\r\n class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n AI Manager\r\n </div>\r\n <div *ngIf=\"currentChecklist?.publish\" class=\"d-flex align-items-center text-success me-3 my-3\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"\r\n fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg> Active</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3307 14V12.6667C13.3307 11.9594 13.0498 11.2811 12.5497 10.781C12.0496 10.281 11.3713 10 10.6641 10H5.33073C4.62349 10 3.94521 10.281 3.44511 10.781C2.94501 11.2811 2.66406 11.9594 2.66406 12.6667V14M10.6641 4.66667C10.6641 6.13943 9.47015 7.33333 7.9974 7.33333C6.52464 7.33333 5.33073 6.13943 5.33073 4.66667C5.33073 3.19391 6.52464 2 7.9974 2C9.47015 2 10.6641 3.19391 10.6641 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.createdByName}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.checkListType === 'custom' ? totalItems : headerData?.stores?.length}} {{currentChecklist?.coverage === 'store' ? 'Stores' : 'Users'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{currentChecklist?.scheduleRepeatedType}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{currentChecklist?.scheduleStartTime}} -\r\n {{currentChecklist?.scheduleEndTime}}</span>\r\n </div>\r\n </ng-container>\r\n \r\n </div> \r\n \r\n </div> \r\n </ng-container>\r\n \r\n \r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loading' || (checkListsApiState | async) === 'initial'\" >\r\n <div style=\"margin:0px; padding:0px; height:unset\" class=\"row loader d-flex justify-content-center align-items-center w-100\">\r\n <div style=\"height: unset; margin:unset; border-radius: 5px;\" class=\"shimmer w-100\">\r\n <div class=\"wrapper\">\r\n <div style=\"margin-top: unset;\" class=\"stroke animate title\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate link\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <!-- header end -->\r\n <!-- card start -->\r\n <ng-container >\r\n <!-- <div *ngIf=\"currentChecklist?.checkListType === 'custom' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.customCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.customCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.customCards?.flagIncidents?.count) ?\r\n flagCardValues?.customCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.complianceRate?.count === 0 ||\r\n flagCardValues?.customCards?.complianceRate?.count) ?\r\n flagCardValues?.customCards?.complianceRate?.count?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n <div *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.assignedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.assignedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.assignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Late Open Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Early Closed Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate) ?\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.assignedStores?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.assignedStores?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.assignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Avg Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'cleaning' && (headerData?.stores?.length ?? 0) > 1||currentChecklist?.checkListType === 'scrum' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.assignedStores?.count === 0 ||\r\n flagCardValues?.scrumCards?.assignedStores?.count) ?\r\n flagCardValues?.scrumCards?.assignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.scrumCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.scrumCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.scrumCards?.flagIncidents?.count) ?\r\n flagCardValues?.scrumCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.scrumCards?.complianceRate?.rate) ?\r\n flagCardValues?.scrumCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'uniformdetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'customerunattended' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-9\">\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.averageFootfall?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count) ?\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Staff to Customer Ratio</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio === 0 ||\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio) ?\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Attended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.attendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Unattended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-4\">\r\n {{(flagCardValues?.customerunattendedCards?.unattendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Taken to Assist</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n <!-- {{(flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins -->\r\n {{flagCardValues?.customerunattendedCards?.timeTakentoAssist_string || '--'}}\r\n\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Spent with Customer</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n <!-- {{(flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins -->\r\n {{flagCardValues?.customerunattendedCards?.timeSpentwithCustomer_string || '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1?.length\" class=\"col-3 mb-6\">\r\n <div class=\"row h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"summarycard h-100\">\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" class=\"cardtext\">\r\n Attended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" class=\"cardtext\">\r\n Unattended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart2\" [chartId]=\"'chart-two'\"></lib-unattended-pie-chart>\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1\" [chartId]=\"'chart-one'\"></lib-unattended-pie-chart>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span (click)=\"unattendedSummaryChartNumber = 1\" [ngClass]=\"unattendedSummaryChartNumber === 1 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer me-4\" ></span>\r\n <span (click)=\"unattendedSummaryChartNumber = 2\" [ngClass]=\"unattendedSummaryChartNumber === 2 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff Present</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff left </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg </span>Staff Present In Peak Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"row \">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\"> Avg</span> Punctuality Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Break Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Productive Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- <ng-container *ngIf=\"(flagsCardValuesState | async) === 'loading' || (flagsCardValuesState | async) === 'initial'\">\r\n <div class=\"col-md-12 my-2\">\r\n <div class=\"card\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n <!-- card end -->\r\n <!-- table start -->\r\n <div class=\"col-md-12 my-2\" >\r\n <div class=\" card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-4 px-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Checklist Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <div *ngIf=\"currentChecklist?.checkListType === 'cleaning'||currentChecklist?.checkListType === 'scrum'||currentChecklist?.checkListType === 'storeopenandclose'||currentChecklist?.checkListType === 'mobileusagedetection'\">\r\n <form class=\"ms-2\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <button (click)=\"exportTable()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader mx-2\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'custom'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date_iso')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date_iso' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_iso' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" *ngIf=\"currentChecklist?.coverage === 'store'\">Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userName')\" *ngIf=\"currentChecklist?.coverage === 'user'\">User Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'userName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >User Email\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">No. of flags\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\" *ngIf=\"currentChecklist?.coverage === 'store'\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\" >{{flagData?.storeName}}</u></td>\r\n <td *ngIf=\"currentChecklist?.coverage === 'user'\">\r\n <div class=\"table-title\">{{flagData?.userName ? flagData?.userName : '--'}}\r\n </div>\r\n </td>\r\n <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n <span *ngIf=\"flagData?.questionFlagCount\" class=\"badge badge-light-default mx-3\" >Questions</span> \r\n <span *ngIf=\"flagData?.timeFlagCount\" class=\"badge badge-light-default mx-3\" >Not Submitted</span> \r\n </div>\r\n \r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <span *ngIf=\"flagData?.checklistStatus === 'submit'\" (click)=\"onView(flagData)\" class=\"actionview me-4 cursor-pointer text-primary\">View</span>\r\n <span *ngIf=\"(flagData?.checklistStatus === 'inprogress' || flagData?.checklistStatus === 'open') && (flagData?.timeFlagCount ?? 0) > 0 \" (click)=\"reInitiate(flagData)\" [ngClass]=\" isToday(flagData.dateString) || flagData?.reinitiateStatus ? 'pe-none' : 'text-primary'\" class=\"actionview me-4 cursor-pointer\">Reinitiate</span>\r\n <span *ngIf=\"flagData?.checklistStatus === 'open' && !flagData?.timeFlagCount\" class=\" me-4 \">--</span>\r\n\r\n\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('openTime')\" >Open Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'openTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'openTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('closeTime')\" >Close Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'closeTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'closeTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Detection Status</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.storeopenandcloseData\">\r\n\r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.openTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.openTime}}</span>\r\n </td>\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.closeTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.closeTime}}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n <span *ngIf=\"flagData?.detectionStatus === 'Not Breached'\" class=\"badge badge-light-success\">\r\n Not Breached\r\n </span>\r\n <span *ngIf=\"flagData?.detectionStatus === 'Breached'\" class=\"badge badge-light-danger\">\r\n Breached\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Detection Status</th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.mobileusagedetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title\">\r\n <span *ngIf=\"flagData?.detectionStatus === 'Not Breached'\" class=\"badge badge-light-success\">Not Breached</span>\r\n <span *ngIf=\"flagData?.detectionStatus === 'Breached'\" class=\"badge badge-light-danger\">Breached</span>\r\n </div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'uniformdetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.uniformdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'customerunattended'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customerunattendedData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'cleaning'||currentChecklist?.checkListType === 'scrum'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.scrumdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Detection Status</th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.scrumdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN') || 0}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n <span *ngIf=\"flagData?.detectionStatus === 'Not Breached'\" class=\"badge badge-light-success\">Not Breached</span>\r\n <span *ngIf=\"flagData?.detectionStatus === 'Breached'\" class=\"badge badge-light-danger\">Breached</span>\r\n </div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.scrumdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.staffleftinthemiddleData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !checklistFlagList?.customData?.length && !checklistFlagList?.storeopenandcloseData?.length\r\n && !checklistFlagList?.mobileusagedetectionData?.length && !checklistFlagList?.uniformdetectionData?.length && !checklistFlagList?.customerunattendedData?.length\r\n && !checklistFlagList?.staffleftinthemiddleData?.length&&!checklistFlagList?.scrumdetectionData?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n </div>\r\n \r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Black, #101828);font-size:12px;font-style:normal;font-weight:400!important;line-height:18px}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:31px 12px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px;text-align:center}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{border-radius:4px;background:var(--Gray-50, #F9FAFB);display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.no-border-custom-select{border:none!important;box-shadow:none!important}.summarycard{padding:8px;flex-direction:column;align-items:center;gap:16px;flex:1 0 0;border-radius:8px;background:var(--White, #FFF)}.staffcard{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.unselected-dot{width:8px;height:8px;border-radius:4px;background:#daf1ff}.selected-dot{width:8px;height:8px;border-radius:4px;background:#009bf3}.header-card{padding:16px;border-radius:12px;background:#fff}.rotate{rotate:180deg;transition:1s}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: i8.UnattendedPieChartComponent, selector: "lib-unattended-pie-chart", inputs: ["chartData", "chartId"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
433
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FlagsInfoComponent, selector: "lib-flags-info", ngImport: i0, template: "<div class=\"row\">\r\n <!-- header start -->\r\n <div class=\"col-md-12 mb-6 mt-4\">\r\n\r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loaded'\" >\r\n <div class=\"d-flex align-items-center justify-content-between header-card\">\r\n <div class=\"d-flex align-items-center\">\r\n <a (click)=\"onBack()\" class=\"d-flex align-items-center me-3 mt-1 cursor-pointer\">\r\n <span><svg width=\"44\" height=\"44\" viewBox=\"0 0 44 44\" fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\">\r\n <g filter=\"url(#filter0_d_987_30898)\">\r\n <rect x=\"2\" y=\"1\" width=\"40\" height=\"40\" rx=\"8\" fill=\"white\" />\r\n <rect x=\"2.5\" y=\"1.5\" width=\"39\" height=\"39\" rx=\"7.5\" stroke=\"#D0D5DD\" />\r\n <path\r\n d=\"M27.8346 21.0001H16.168M16.168 21.0001L22.0013 26.8334M16.168 21.0001L22.0013 15.1667\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <filter id=\"filter0_d_987_30898\" x=\"0\" y=\"0\" width=\"44\" height=\"44\"\r\n filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n <feColorMatrix in=\"SourceAlpha\" type=\"matrix\"\r\n values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n <feOffset dy=\"1\" />\r\n <feGaussianBlur stdDeviation=\"1\" />\r\n <feColorMatrix type=\"matrix\"\r\n values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0\" />\r\n <feBlend mode=\"normal\" in2=\"BackgroundImageFix\"\r\n result=\"effect1_dropShadow_987_30898\" />\r\n <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow_987_30898\"\r\n result=\"shape\" />\r\n </filter>\r\n </defs>\r\n </svg>\r\n </span>\r\n </a> \r\n <span class=\"mt-1 me-3 borderless-select\" style=\"min-width: 200px;\" >\r\n <!-- <lib-reactive-select [formControl]=\"checklistSelectControl\" [idField]=\"'sourceCheckList_id'\"\r\n [nameField]=\"'checkListName'\" [data]=\"checkLists\" class=\"w-100 \"\r\n style=\"border: none !important; box-shadow: none !important;\">\r\n <ng-template let-item>\r\n <div\r\n class=\"d-flex justify-content-between align-items-center no-border-custom-select\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M4 6L8 10L12 6\" stroke=\"#101828\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select> -->\r\n\r\n <lib-select [items]=\"checkLists\" [multi]=\"false\" [searchField]=\"'checkListName'\" [idField]=\"'sourceCheckList_id'\"\r\n (selected)=\"onChecklistSelect($event)\" [selectedValues]=\"[this.currentChecklist]\"></lib-select>\r\n </span>\r\n\r\n <ng-container *ngIf=\"checklistFlagList\" >\r\n <div *ngIf=\"currentChecklist?.checkListType !== 'custom'\"\r\n class=\"d-flex align-items-center grey-badge me-3 my-3\">\r\n AI Manager\r\n </div>\r\n <div *ngIf=\"currentChecklist?.publish\" class=\"d-flex align-items-center text-success me-3 my-3\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"\r\n fill=\"none\">\r\n <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#12B76A\" />\r\n </svg> Active</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n fill=\"none\">\r\n <path\r\n d=\"M13.3307 14V12.6667C13.3307 11.9594 13.0498 11.2811 12.5497 10.781C12.0496 10.281 11.3713 10 10.6641 10H5.33073C4.62349 10 3.94521 10.281 3.44511 10.781C2.94501 11.2811 2.66406 11.9594 2.66406 12.6667V14M10.6641 4.66667C10.6641 6.13943 9.47015 7.33333 7.9974 7.33333C6.52464 7.33333 5.33073 6.13943 5.33073 4.66667C5.33073 3.19391 6.52464 2 7.9974 2C9.47015 2 10.6641 3.19391 10.6641 4.66667Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.createdByName}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 3H13.5C13.8978 3 14.2794 3.15804 14.5607 3.43934C14.842 3.72064 15 4.10218 15 4.5V15C15 15.3978 14.842 15.7794 14.5607 16.0607C14.2794 16.342 13.8978 16.5 13.5 16.5H4.5C4.10218 16.5 3.72064 16.342 3.43934 16.0607C3.15804 15.7794 3 15.3978 3 15V4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H6M6.75 1.5H11.25C11.6642 1.5 12 1.83579 12 2.25V3.75C12 4.16421 11.6642 4.5 11.25 4.5H6.75C6.33579 4.5 6 4.16421 6 3.75V2.25C6 1.83579 6.33579 1.5 6.75 1.5Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>{{currentChecklist?.checkListType === 'custom' ? totalItems : headerData?.stores?.length}} {{currentChecklist?.coverage === 'store' ? 'Stores' : 'Users'}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <path\r\n d=\"M12 1.5V4.5M6 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>Repeats {{currentChecklist?.scheduleRepeatedType}}</span>\r\n </div>\r\n <div class=\"d-flex align-items-center me-3 checklisttext\"><span><svg class=\"mx-2\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\"\r\n fill=\"none\">\r\n <g clip-path=\"url(#clip0_987_30895)\">\r\n <path\r\n d=\"M9 4.5V9L12 10.5M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85786 16.5 1.5 13.1421 1.5 9C1.5 4.85786 4.85786 1.5 9 1.5C13.1421 1.5 16.5 4.85786 16.5 9Z\"\r\n stroke=\"#667085\" stroke-width=\"1.4\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_987_30895\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>{{currentChecklist?.scheduleStartTime}} -\r\n {{currentChecklist?.scheduleEndTime}}</span>\r\n </div>\r\n </ng-container>\r\n \r\n </div> \r\n \r\n </div> \r\n </ng-container>\r\n \r\n \r\n <ng-container *ngIf=\"(checkListsApiState | async) === 'loading' || (checkListsApiState | async) === 'initial'\" >\r\n <div style=\"margin:0px; padding:0px; height:unset\" class=\"row loader d-flex justify-content-center align-items-center w-100\">\r\n <div style=\"height: unset; margin:unset; border-radius: 5px;\" class=\"shimmer w-100\">\r\n <div class=\"wrapper\">\r\n <div style=\"margin-top: unset;\" class=\"stroke animate title\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate link\"></div>\r\n <div style=\"margin-top: 5px;\" class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n </div>\r\n <!-- header end -->\r\n <!-- card start -->\r\n <ng-container >\r\n <!-- <div *ngIf=\"currentChecklist?.checkListType === 'custom' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.customCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.customCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.customCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.customCards?.flagIncidents?.count) ?\r\n flagCardValues?.customCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.customCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-3 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customCards?.complianceRate?.count === 0 ||\r\n flagCardValues?.customCards?.complianceRate?.count) ?\r\n flagCardValues?.customCards?.complianceRate?.count?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.customCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.customCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n <div *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.assignedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.assignedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.assignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.assignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Late Open Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.lateOpenStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.lateOpenStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Early Closed Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count) ?\r\n flagCardValues?.storeopenandcloseCards?.earlyClosedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.earlyClosedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.storeopenandcloseCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate) ?\r\n flagCardValues?.storeopenandcloseCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.storeopenandcloseCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.storeopenandcloseCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.assignedStores?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.assignedStores?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.assignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.assignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Avg Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.mobileusagedetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.mobileusagedetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.mobileusagedetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.mobileusagedetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'cleaning' && (headerData?.stores?.length ?? 0) > 1||currentChecklist?.checkListType === 'scrum' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Assigned Stores </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.assignedStores?.count === 0 ||\r\n flagCardValues?.scrumCards?.assignedStores?.count) ?\r\n flagCardValues?.scrumCards?.assignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.assignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.assignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.scrumCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.scrumCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.scrumCards?.flagIncidents?.count) ?\r\n flagCardValues?.scrumCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-3\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.scrumCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.scrumCards?.complianceRate?.rate) ?\r\n flagCardValues?.scrumCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'uniformdetection' && (headerData?.stores?.length ?? 0) > 1\" class=\"col-md-12 my-2\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Total Flagged Stores</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count) ?\r\n flagCardValues?.uniformdetectionCards?.totalAssignedStores?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.totalAssignedStores?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Flag Incidents</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.flagIncidents?.count === 0 ||\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count) ?\r\n flagCardValues?.uniformdetectionCards?.flagIncidents?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.flagIncidents?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.flagIncidents?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Compliance Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.uniformdetectionCards?.complianceRate?.rate === 0 ||\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate) ?\r\n flagCardValues?.uniformdetectionCards?.complianceRate?.rate?.toLocaleString('en-IN') : '--'}} %\r\n <div ><span *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\" viewBox=\"0 0 13 8\"\r\n fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.uniformdetectionCards?.complianceRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData === 0 ||\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData) ?\r\n flagCardTrends?.uniformdetectionCards?.complianceRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'customerunattended' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n <div class=\"col-9\">\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Footfall</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.averageFootfall?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count) ?\r\n flagCardValues?.customerunattendedCards?.averageFootfall?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.averageFootfall?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.averageFootfall?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Staff to Customer Ratio</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio === 0 ||\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio) ?\r\n flagCardValues?.customerunattendedCards?.stafftoCustomerRatio?.ratio?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.stafftoCustomerRatio?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Attended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.customerunattendedCards?.attendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.attendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.attendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.attendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Unattended Customers</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-4\">\r\n {{(flagCardValues?.customerunattendedCards?.unattendedCustomers?.count === 0 ||\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count) ?\r\n flagCardValues?.customerunattendedCards?.unattendedCustomers?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.unattendedCustomers?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.unattendedCustomers?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Taken to Assist</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n <!-- {{(flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeTakentoAssist?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins -->\r\n {{flagCardValues?.customerunattendedCards?.timeTakentoAssist_string || '--'}}\r\n\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeTakentoAssist?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-4\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg</span> Time Spent with Customer</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n <!-- {{(flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins === 0 ||\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins) ?\r\n flagCardValues?.customerunattendedCards?.timeSpentwithCustomer?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins -->\r\n {{flagCardValues?.customerunattendedCards?.timeSpentwithCustomer_string || '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData === 0 ||\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData) ?\r\n flagCardTrends?.customerunattendedCards?.timeSpentwithCustomer?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1?.length\" class=\"col-3 mb-6\">\r\n <div class=\"row h-100\">\r\n <div class=\"col-12 h-100\">\r\n <div class=\"summarycard h-100\">\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" class=\"cardtext\">\r\n Attended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" class=\"cardtext\">\r\n Unattended Summary\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 1\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart2\" [chartId]=\"'chart-two'\"></lib-unattended-pie-chart>\r\n </div>\r\n <div *ngIf=\"unattendedSummaryChartNumber === 2\" >\r\n <lib-unattended-pie-chart\r\n [chartData]=\"flagCardValues?.customerunattendedCards?.unattendedSummaryChart?.chart1\" [chartId]=\"'chart-one'\"></lib-unattended-pie-chart>\r\n </div>\r\n \r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span (click)=\"unattendedSummaryChartNumber = 1\" [ngClass]=\"unattendedSummaryChartNumber === 1 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer me-4\" ></span>\r\n <span (click)=\"unattendedSummaryChartNumber = 2\" [ngClass]=\"unattendedSummaryChartNumber === 2 ? 'selected-dot' : 'unselected-dot'\" class=\"cursor-pointer\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle' \" class=\"col-md-12\">\r\n <div class=\"row d-flex justify-content-between align-items-stretch\">\r\n \r\n <div class=\"row\">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff Present</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"row h-100px py-5 px-3\">\r\n <div class=\"col-10 infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresent?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresent?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n <div class=\"col-2\">\r\n <div class=\"d-flex flex-column text-center align-items-center justify-content-center me-5\">\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='daily' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('daily')\">1D</div>\r\n <div class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='weekly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('weekly')\">1W</div>\r\n <div *ngIf=\"traxMonthlyComparisonData\" class=\"mt-1 cursor-pointer fs-5\"\r\n [ngClass]=\"dateComparisonType ==='monthly' ? 'text-primary' :''\"\r\n (click)=\"dateComparisonValueChange('monthly')\">1M</div>\r\n <!-- <div class=\"mt-1 cursor-pointer fs-5\" [ngClass]=\"dateType ==='monthly' ? 'text-primary' :''\" (click)=\"dateValue('monthly')\">1M</div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"><span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Average </span>Staff left </span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffleft?.count?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffleft?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\">Avg </span>Staff Present In Peak Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.avgStaffPresentInPeakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class=\"row \">\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\"> Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\"> Avg</span> Punctuality Rate</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.rate?.toLocaleString('en-IN') : '--'}}\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgPunctualityRate?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Break Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgBreakHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgBreakHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 mb-6\">\r\n <div class=\"card card-border pt-2 h-100\">\r\n <div class=\"card-header ellipse1 border-0 px-3\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"cardtext\">Staff <span *ngIf=\"(headerData?.date?.startDate !== headerData?.date?.endDate) || (headerData?.stores?.length ?? 0) > 1\" >Avg</span> Productive Hours</span>\r\n </h3>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <div class=\"h-100px py-5 px-3\">\r\n <div class=\"infocount mb-6\">\r\n {{(flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins === 0 ||\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins) ?\r\n flagCardValues?.staffleftinthemiddleCards?.staffAvgProductiveHours?.mins?.toLocaleString('en-IN') : '--'}}\r\n Mins\r\n <div ><span *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData\" class=\"mt-2\">\r\n <svg *ngIf=\"flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"13\" height=\"8\"\r\n viewBox=\"0 0 13 8\" fill=\"none\">\r\n <path\r\n d=\"M11.832 1L7.08203 5.75L4.58203 3.25L0.832031 7M11.832 1H8.83203M11.832 1V4\"\r\n stroke=\"#039855\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n <svg *ngIf=\"!flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.ComparisonFlag\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\"\r\n viewBox=\"0 0 18 18\" fill=\"none\" class=\"ng-star-inserted\">\r\n <g clip-path=\"url(#clip0_2328_4654)\">\r\n <path d=\"M11.5 9L6.75 4.25L4.25 6.75L0.5 3M11.5 9H8.5M11.5 9V6\"\r\n stroke=\"#D92D20\" stroke-width=\"1.5\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_2328_4654\">\r\n <rect width=\"12\" height=\"12\" fill=\"white\">\r\n </rect>\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span><span class=\"mt-2 ms-2\"><span\r\n class=\"percent-value\">\r\n {{(flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData === 0 ||\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData) ?\r\n flagCardTrends?.staffleftinthemiddleCards?.staffAvgProductiveHours?.comparisonData?.toLocaleString('en-IN') : '--'}}\r\n %</span><span\r\n class=\"week-font\"> vs\r\n last {{dateComparisonType === 'weekly' ? 'week' : dateComparisonType === 'monthly' ? 'month' : 'day'}}</span></span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n \r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- <ng-container *ngIf=\"(flagsCardValuesState | async) === 'loading' || (flagsCardValuesState | async) === 'initial'\">\r\n <div class=\"col-md-12 my-2\">\r\n <div class=\"card\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container> -->\r\n <!-- card end -->\r\n <!-- table start -->\r\n <div class=\"col-md-12 my-2\" >\r\n <div class=\" card\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12\">\r\n <div class=\"card-header border-0 pt-4 px-4\">\r\n <h3 class=\"card-title align-items-start flex-column\">\r\n <span class=\"card-label mb-2\">Checklist Info</span>\r\n <span class=\"text-sub mb-2\"> Based on {{ headerData?.date?.startDate | date: 'MMM d' }} - {{\r\n headerData?.date?.endDate | date: 'MMM d, y' }}\r\n </span>\r\n </h3>\r\n <div class=\"card-toolbar\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon footfallsearch svg-icon-1 position-absolute ms-8\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\">\r\n <rect opacity=\"0.5\" x=\"17.0365\" y=\"15.1223\" width=\"8.15546\" height=\"2\" rx=\"1\"\r\n transform=\"rotate(45 17.0365 15.1223)\" fill=\"currentColor\">\r\n </rect>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"></path>\r\n </svg>\r\n </span>\r\n <input [formControl]=\"searchInput\" type=\"text\"\r\n class=\"form-control ps-14 ms-4 footfallsearch\" placeholder=\"Search\"\r\n autocomplete=\"off\" />\r\n <div *ngIf=\"currentChecklist?.checkListType === 'cleaning'||currentChecklist?.checkListType === 'scrum'||currentChecklist?.checkListType === 'storeopenandclose'||currentChecklist?.checkListType === 'mobileusagedetection'\">\r\n <form class=\"ms-2\" [formGroup]=\"form\">\r\n <div class=\"col-md-4 w-200px\">\r\n <lib-reactive-select [formControl]=\"selectedlistselectControl\" [idField]=\"'_id'\"\r\n [nameField]=\"'label'\" [data]=\"statusselectControl\" class=\"w-200px\"\r\n (valueChange)=\"onValueChangeStatusSelect($event)\">\r\n <ng-template let-item>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <span>{{ item.label }}</span>\r\n <span class=\"d-flex align-items-center\">\r\n <!-- <span class=\"status-text\">Status</span> -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"\r\n viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#344054\"\r\n stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-template>\r\n </lib-reactive-select>\r\n </div>\r\n </form>\r\n </div>\r\n <button (click)=\"exportTable()\" type=\"button\"\r\n class=\"btn-outline btn align-items-end text-nowrap invheader mx-2\">\r\n <!-- Export Icon -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\r\n fill=\"none\">\r\n <path\r\n 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\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"></path>\r\n </svg>\r\n <span class=\"ms-2\"></span> Export\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"card-body p-0\">\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'custom'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date_iso')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date_iso' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date_iso' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" *ngIf=\"currentChecklist?.coverage === 'store'\">Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('userName')\" *ngIf=\"currentChecklist?.coverage === 'user'\">User Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'userName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'userName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >User Email\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">No. of flags\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\" *ngIf=\"currentChecklist?.coverage === 'store'\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\" >{{flagData?.storeName}}</u></td>\r\n <td *ngIf=\"currentChecklist?.coverage === 'user'\">\r\n <div class=\"table-title\">{{flagData?.userName ? flagData?.userName : '--'}}\r\n </div>\r\n </td>\r\n <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td>\r\n <td>\r\n <div class=\"d-flex\">\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n <span *ngIf=\"flagData?.questionFlagCount\" class=\"badge badge-light-default mx-3\" >Questions</span> \r\n <span *ngIf=\"flagData?.timeFlagCount\" class=\"badge badge-light-default mx-3\" >Not Submitted</span> \r\n </div>\r\n \r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title d-flex\">\r\n <span *ngIf=\"flagData?.checklistStatus === 'submit'\" (click)=\"onView(flagData)\" class=\"actionview me-4 cursor-pointer text-primary\">View</span>\r\n <span *ngIf=\"(flagData?.checklistStatus === 'inprogress' || flagData?.checklistStatus === 'open') && (flagData?.timeFlagCount ?? 0) > 0 \" (click)=\"reInitiate(flagData)\" [ngClass]=\" isToday(flagData.dateString) || flagData?.reinitiateStatus ? 'pe-none' : 'text-primary'\" class=\"actionview me-4 cursor-pointer\">Reinitiate</span>\r\n <span *ngIf=\"flagData?.checklistStatus === 'open' && !flagData?.timeFlagCount\" class=\" me-4 \">--</span>\r\n\r\n\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'storeopenandclose'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('openTime')\" >Open Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'openTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'openTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('closeTime')\" >Close Time\r\n <svg\r\n [ngClass]=\"sortColumName === 'closeTime' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'closeTime' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Detection Status</th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.storeopenandcloseData\">\r\n\r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.openTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.openTime}}</span>\r\n </td>\r\n <td >\r\n <span class=\"badge \" [ngClass]=\"flagData?.closeTimeFlag ? 'badge-light-danger' : 'badge-light-success'\">{{flagData?.closeTime}}</span>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n <span *ngIf=\"flagData?.detectionStatus === 'Not Breached'\" class=\"badge badge-light-success\">\r\n Not Breached\r\n </span>\r\n <span *ngIf=\"flagData?.detectionStatus === 'Breached'\" class=\"badge badge-light-danger\">\r\n Breached\r\n </span>\r\n </div>\r\n </td>\r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.storeopenandcloseData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'mobileusagedetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Detection Status</th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.mobileusagedetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div class=\"table-title\">\r\n <span *ngIf=\"flagData?.detectionStatus === 'Not Breached'\" class=\"badge badge-light-success\">Not Breached</span>\r\n <span *ngIf=\"flagData?.detectionStatus === 'Breached'\" class=\"badge badge-light-danger\">Breached</span>\r\n </div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.mobileusagedetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'uniformdetection'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.uniformdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.uniformdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'customerunattended'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.customerunattendedData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.customerunattendedData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'cleaning'||currentChecklist?.checkListType === 'scrum'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.scrumdetectionData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\" >Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Detection Status</th>\r\n <th >Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.scrumdetectionData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN') || 0}}</div>\r\n </td>\r\n <td>\r\n <div class=\"table-title\">\r\n <span *ngIf=\"flagData?.detectionStatus === 'Not Breached'\" class=\"badge badge-light-success\">Not Breached</span>\r\n <span *ngIf=\"flagData?.detectionStatus === 'Breached'\" class=\"badge badge-light-danger\">Breached</span>\r\n </div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.scrumdetectionData?.length\">\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"currentChecklist?.checkListType === 'staffleftinthemiddle'\" >\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\">\r\n <div class=\"table-responsive px-4\">\r\n <table class=\"table text-nowrap bottom-border\">\r\n <thead>\r\n <tr>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('date')\">Date<svg\r\n [ngClass]=\"sortColumName === 'date' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'date' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg></th>\r\n <th class=\"cursor-pointer\" (click)=\"sortData('storeName')\" >Store Name\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeName' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeName' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <!-- <th class=\"cursor-pointer\" (click)=\"sortData('storeSpocEmail')\" >Store SPOC\r\n <svg\r\n [ngClass]=\"sortColumName === 'storeSpocEmail' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'storeSpocEmail' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th> -->\r\n <th class=\"cursor-pointer\" (click)=\"sortData('detections')\">Detections\r\n <svg\r\n [ngClass]=\"sortColumName === 'detections' && sortDirection === 1 ? 'rotate' : ''\"\r\n xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\"\r\n viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004\"\r\n [attr.stroke]=\"sortColumName === 'detections' ? '#00A3FF' : '#667085'\"\r\n stroke-width=\"1.33333\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </th>\r\n <th>Action</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let flagData of checklistFlagList?.staffleftinthemiddleData\">\r\n \r\n <td>\r\n <div class=\"table-title\">{{flagData?.date}}</div>\r\n </td>\r\n <td class=\"table-title-primary\">\r\n <u class=\"cursor-pointer\" (click)=\"storeView(flagData.storeId)\">{{flagData?.storeName}}</u></td>\r\n <!-- <td >\r\n <div class=\"table-title\">{{flagData?.storeSpocEmail ? flagData?.storeSpocEmail : '--'}}\r\n </div>\r\n </td> -->\r\n <td>\r\n <div class=\"table-title\">{{flagData?.detections?.toLocaleString('en-IN')}}</div>\r\n </td>\r\n \r\n <td>\r\n <div (click)=\"onView(flagData)\" class=\"table-title d-flex\"><span\r\n class=\"actionview me-4 cursor-pointer\">View</span>\r\n </div>\r\n </td>\r\n \r\n </tr>\r\n </tbody>\r\n </table>\r\n \r\n </div>\r\n <div *ngIf=\"(flagsTableApiState | async) === 'loaded' && checklistFlagList?.staffleftinthemiddleData?.length\" >\r\n <lib-pagination class=\"text-start\" [itemsPerPage]=\"itemsPerPage\" [currentPage]=\"currentPage\"\r\n [totalItems]=\"totalItems\" [paginationSizes]=\"paginationSizes\" [pageSize]=\"pageSize\"\r\n (pageChange)=\"onPageChange($event)\"\r\n (pageSizeChange)=\"onPageSizeChange($event)\"></lib-pagination>\r\n </div>\r\n </ng-container> \r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loading' || (flagsTableApiState | async) === 'initial'\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"(flagsTableApiState | async) === 'loaded' && !checklistFlagList?.customData?.length && !checklistFlagList?.storeopenandcloseData?.length\r\n && !checklistFlagList?.mobileusagedetectionData?.length && !checklistFlagList?.uniformdetectionData?.length && !checklistFlagList?.customerunattendedData?.length\r\n && !checklistFlagList?.staffleftinthemiddleData?.length&&!checklistFlagList?.scrumdetectionData?.length\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 my-6\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodatamaintext mt-3\">No data found</div>\r\n <div class=\"nodatasubtext\">There is no result for Flags Table</div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container> \r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div> \r\n </div>\r\n \r\n</div>", styles: [".table-title-primary{color:var(--Primary-700, #009BF3)!important;font-size:14px;font-style:normal;font-weight:500!important;line-height:30px}.table-title{color:var(--Gray-500, #667085);font-size:14px;font-style:normal;font-weight:500!important;line-height:20px}.infocount{color:var(--Black, #101828);font-size:24px;font-style:normal;font-weight:600;line-height:32px;text-align:center}.percent-value{color:var(--Gray-500, #667085);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:18px}.week-font{color:var(--Black, #101828);font-size:12px;font-style:normal;font-weight:400!important;line-height:18px}.subinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:31px 12px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.avgcount{color:var(--Black, #101828);font-size:14px;font-style:normal;font-weight:400;line-height:20px}.ellipse1{border-radius:6px;border-bottom:2px solid var(--Gray-200, #EAECF0);background:radial-gradient(206.89% 107.47% at 16.16% 32.77%,#fff6,#45bbfe33),#f2f4f7;box-shadow:0 4px 10px #0000000d}.cardcount{color:var(--Black, #101828);font-size:30px;font-style:normal;font-weight:600;line-height:38px}.cardtext{color:var(--Black, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px;text-align:center}.cardsubcount{color:var(--Black, #101828);font-size:20px;font-style:normal;font-weight:700;line-height:30px}.card-border{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.actionview{color:var(--Gray-500, #667085);font-size:14px;font-weight:600;line-height:20px;text-decoration-line:underline;text-transform:capitalize}.grey-badge{border-radius:16px;background:var(--Gray-100, #F2F4F7);display:flex;padding:2px 8px;justify-content:center;align-items:center;color:var(--Gray-700, #344054);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.text-success{border-radius:16px;background:var(--Success-50, #ECFDF3);display:flex;padding:2px 8px 2px 6px;justify-content:center;align-items:center;gap:6px;color:var(--Success-500, #12B76A);text-align:center;font-size:12px;font-style:normal;font-weight:500;line-height:18px}.checklistheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.checklisttext{color:var(--Gray-500, #667085);font-size:12px;font-style:normal;font-weight:500;line-height:18px}.totalinfocard{border-radius:5.359px;border:1px solid var(--Gray-200, #EAECF0);background:#fff;display:flex;padding:16px 12px 24px;flex-direction:column;align-items:center;gap:24px;align-self:stretch}.headingcard{border-radius:4px;background:var(--Gray-50, #F9FAFB);display:flex;padding:8px;flex-direction:column;align-items:center;gap:4px;align-self:stretch;color:var(--Black, #101828);font-size:16px;font-style:normal;font-weight:500;line-height:24px}.no-border-custom-select{border:none!important;box-shadow:none!important}.summarycard{padding:8px;flex-direction:column;align-items:center;gap:16px;flex:1 0 0;border-radius:8px;background:var(--White, #FFF)}.staffcard{padding:8px;border-radius:12px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF)}.unselected-dot{width:8px;height:8px;border-radius:4px;background:#daf1ff}.selected-dot{width:8px;height:8px;border-radius:4px;background:#009bf3}.header-card{padding:16px;border-radius:12px;background:#fff}.rotate{rotate:180deg;transition:1s}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PaginationComponent, selector: "lib-pagination", inputs: ["collection", "itemsPerPage", "currentPage", "totalItems", "directionLinks", "pageSize", "paginationSizes"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: i4.CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.ReactiveSelectComponent, selector: "lib-reactive-select", inputs: ["isDisabled", "idField", "nameField", "label", "data"], outputs: ["itemChange"] }, { kind: "component", type: i8.UnattendedPieChartComponent, selector: "lib-unattended-pie-chart", inputs: ["chartData", "chartId"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
434
434
  }
435
435
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FlagsInfoComponent, decorators: [{
436
436
  type: Component,